@undp/data-viz 2.5.4 → 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 r=require("./index-CHPV5EwG-D4pAp7u0.cjs"),R=require("react"),He=require("./index-CyZ1lmi_.cjs"),je=require("./index-BS2TADPj.cjs"),ce=require("./DropdownSelect-CX1yMemd.cjs"),Ce=require("./Typography-BqmyF1gP.cjs"),me=require("./x-BXShoIAM-BC2sxios.cjs"),_e=require("./index-BhI7mBJx.cjs"),Ae=require("./index-Cno4Q0YE.cjs"),ue=require("./Source-PKuwZOn3.cjs"),Ke=require("./Modal-BIErPPKT.cjs"),Ue=require("./CsvDownloadButton.cjs"),Ee=require("./string2HTML-30nfIm8R.cjs"),We=require("./GraphFooter.cjs"),Qe=require("./GraphHeader.cjs"),Je=require("./getUniqValue-NX8DgwND.cjs"),Ve=require("./transformDataForSelect-YmStusCI.cjs"),Xe=require("./GraphContainer-Cul9b74X.cjs"),Ye=[["path",{d:"m15 18-6-6 6-6",key:"1wnfg3"}]],Ze=me.k("chevron-left",Ye),et=[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]],tt=me.k("chevron-right",et),at=[["circle",{cx:"12",cy:"12",r:"1",key:"41hilf"}],["circle",{cx:"19",cy:"12",r:"1",key:"1wjl8i"}],["circle",{cx:"5",cy:"12",r:"1",key:"1pcz8c"}]],rt=me.k("ellipsis",at);function $e(i){const e=r._.c(8);let t,a;e[0]!==i?({className:t,...a}=i,e[0]=i,e[1]=t,e[2]=a):(t=e[1],a=e[2]);let l;e[3]!==t?(l=r.mo("mx-auto flex w-full justify-center",t),e[3]=t,e[4]=l):l=e[4];let s;return e[5]!==a||e[6]!==l?(s=r.ae.jsx("nav",{...a,role:"navigation","aria-label":"pagination",className:l}),e[5]=a,e[6]=l,e[7]=s):s=e[7],s}$e.displayName="PaginationUnit";const qe=R.forwardRef((i,e)=>{const t=r._.c(9);let a,l;t[0]!==i?({className:a,...l}=i,t[0]=i,t[1]=a,t[2]=l):(a=t[1],l=t[2]);let s;t[3]!==a?(s=r.mo("flex flex-row items-center gap-1 list-none",a),t[3]=a,t[4]=s):s=t[4];let n;return t[5]!==l||t[6]!==e||t[7]!==s?(n=r.ae.jsx("ul",{...l,ref:e,className:s}),t[5]=l,t[6]=e,t[7]=s,t[8]=n):n=t[8],n});qe.displayName="PaginationContent";const de=R.forwardRef((i,e)=>{const t=r._.c(9);let a,l;t[0]!==i?({className:a,...l}=i,t[0]=i,t[1]=a,t[2]=l):(a=t[1],l=t[2]);let s;t[3]!==a?(s=r.mo("mr-2 last:mr-0",a),t[3]=a,t[4]=s):s=t[4];let n;return t[5]!==l||t[6]!==e||t[7]!==s?(n=r.ae.jsx("li",{...l,ref:e,className:s}),t[5]=l,t[6]=e,t[7]=s,t[8]=n):n=t[8],n});de.displayName="PaginationItem";function pe(i){const e=r._.c(10);let t,a,l;e[0]!==i?({className:a,children:t,...l}=i,e[0]=i,e[1]=t,e[2]=a,e[3]=l):(t=e[1],a=e[2],l=e[3]);let s;e[4]!==a?(s=r.mo("p-4 text-base text-primary-black dark:text-primary-gray-100 dark:hover:bg-primary-gray-600",a),e[4]=a,e[5]=s):s=e[5];let n;return e[6]!==t||e[7]!==l||e[8]!==s?(n=r.ae.jsx("button",{...l,type:"button",className:s,children:t}),e[6]=t,e[7]=l,e[8]=s,e[9]=n):n=e[9],n}pe.displayName="PaginationLink";function ze(i){const e=r._.c(9);let t,a;e[0]!==i?({className:t,...a}=i,e[0]=i,e[1]=t,e[2]=a):(t=e[1],a=e[2]);let l;e[3]!==t?(l=r.mo("p-2 bg-primary-gray-300 dark:bg-primary-gray-600 rtl:scale-x-[-1] rounded-full hover:bg-primary-gray-400 dark:hover:bg-primary-gray-550",t),e[3]=t,e[4]=l):l=e[4];let s;e[5]===Symbol.for("react.memo_cache_sentinel")?(s=r.ae.jsx(Ze,{className:"h-6 w-6 stroke-primary-gray-700 dark:stroke-primary-gray-100"}),e[5]=s):s=e[5];let n;return e[6]!==a||e[7]!==l?(n=r.ae.jsx(pe,{...a,"aria-label":"Go to previous page",className:l,children:s}),e[6]=a,e[7]=l,e[8]=n):n=e[8],n}ze.displayName="PaginationPrevious";function Me(i){const e=r._.c(9);let t,a;e[0]!==i?({className:t,...a}=i,e[0]=i,e[1]=t,e[2]=a):(t=e[1],a=e[2]);let l;e[3]!==t?(l=r.mo("p-2 bg-primary-gray-300 dark:bg-primary-gray-600 rtl:scale-x-[-1] rounded-full hover:bg-primary-gray-400 dark:hover:bg-primary-gray-550",t),e[3]=t,e[4]=l):l=e[4];let s;e[5]===Symbol.for("react.memo_cache_sentinel")?(s=r.ae.jsx(tt,{className:"h-6 w-6 stroke-primary-gray-700 dark:stroke-primary-gray-100"}),e[5]=s):s=e[5];let n;return e[6]!==a||e[7]!==l?(n=r.ae.jsx(pe,{...a,"aria-label":"Go to next page",className:l,children:s}),e[6]=a,e[7]=l,e[8]=n):n=e[8],n}Me.displayName="PaginationNext";function Ie(i){const e=r._.c(10);let t,a;e[0]!==i?({className:t,...a}=i,e[0]=i,e[1]=t,e[2]=a):(t=e[1],a=e[2]);let l;e[3]!==t?(l=r.mo("flex h-9 w-9 items-center justify-center",t),e[3]=t,e[4]=l):l=e[4];let s,n;e[5]===Symbol.for("react.memo_cache_sentinel")?(s=r.ae.jsx(rt,{className:"h-4 w-4 text-primary-gray-700 dark:text-primary-gray-100"}),n=r.ae.jsx("span",{className:"sr-only",children:"More pages"}),e[5]=s,e[6]=n):(s=e[5],n=e[6]);let o;return e[7]!==a||e[8]!==l?(o=r.ae.jsxs("span",{...a,"aria-hidden":!0,className:l,children:[s,n]}),e[7]=a,e[8]=l,e[9]=o):o=e[9],o}Ie.displayName="PaginationEllipsis";const Re=(i,e)=>{const t=[];return e<=7?Array.from({length:e},(a,l)=>l+1):(t.push(1),i<=3?t.push(2,3,4,"ellipsis"):i>=e-2?t.push("ellipsis",e-3,e-2,e-1):t.push("ellipsis",i-1,i,i+1,"ellipsis"),t.push(e),t)};function st(i){const e=r._.c(49),{defaultPage:t,total:a,pageSize:l,onChange:s,className:n,classNames:o}=i,y=t===void 0?1:t,d=Math.ceil(a/l),[c,D]=R.useState(y);let w;e[0]!==y||e[1]!==d?(w=Re(y,d),e[0]=y,e[1]=d,e[2]=w):w=e[2];const[b,V]=R.useState(w);let j,_;e[3]!==c||e[4]!==d?(j=()=>{V(Re(c,d))},_=[c,d],e[3]=c,e[4]=d,e[5]=j,e[6]=_):(j=e[5],_=e[6]),R.useEffect(j,_);const u=o?.control;let g;e[7]!==n||e[8]!==u?(g=r.mo("select-none",n,u),e[7]=n,e[8]=u,e[9]=g):g=e[9];let C;e[10]!==c||e[11]!==s?(C=()=>{c>1&&(s(c-1),D(c-1))},e[10]=c,e[11]=s,e[12]=C):C=e[12];const $=o?.navigation,N=c<=1&&"cursor-not-allowed pointer-events-none opacity-35";let v;e[13]!==$||e[14]!==N?(v=r.mo("cursor-pointer",$,N),e[13]=$,e[14]=N,e[15]=v):v=e[15];let k;e[16]!==C||e[17]!==v?(k=r.ae.jsx(de,{children:r.ae.jsx(ze,{onClick:C,className:v})}),e[16]=C,e[17]=v,e[18]=k):k=e[18];let f;if(e[19]!==o?.active||e[20]!==o?.ellipsis||e[21]!==o?.list||e[22]!==c||e[23]!==s||e[24]!==b){let I;e[26]!==o?.active||e[27]!==o?.ellipsis||e[28]!==o?.list||e[29]!==c||e[30]!==s?(I=(q,P)=>r.ae.jsx(de,{children:q==="ellipsis"?r.ae.jsx(Ie,{className:o?.ellipsis}):r.ae.jsx(pe,{onClick:()=>{D(q),s(q)},className:r.mo("cursor-pointer w-[32px] h-[32px] flex items-center justify-center rounded-full hover:bg-primary-gray-300",o?.list,q===c&&["bg-primary-blue-600 hover:bg-primary-blue-700 dark:bg-primary-blue-500 dark:hover:bg-primary-blue-400 hover:text-primary-white text-primary-white",o?.active]),children:q})},P),e[26]=o?.active,e[27]=o?.ellipsis,e[28]=o?.list,e[29]=c,e[30]=s,e[31]=I):I=e[31],f=b.map(I),e[19]=o?.active,e[20]=o?.ellipsis,e[21]=o?.list,e[22]=c,e[23]=s,e[24]=b,e[25]=f}else f=e[25];let S;e[32]!==c||e[33]!==s||e[34]!==d?(S=()=>{c<d&&(s(c+1),D(c+1))},e[32]=c,e[33]=s,e[34]=d,e[35]=S):S=e[35];const p=o?.navigation,x=c>=d&&"cursor-not-allowed pointer-events-none opacity-35";let h;e[36]!==p||e[37]!==x?(h=r.mo("cursor-pointer",p,x),e[36]=p,e[37]=x,e[38]=h):h=e[38];let E;e[39]!==S||e[40]!==h?(E=r.ae.jsx(de,{children:r.ae.jsx(Me,{onClick:S,className:h})}),e[39]=S,e[40]=h,e[41]=E):E=e[41];let z;e[42]!==k||e[43]!==f||e[44]!==E?(z=r.ae.jsxs(qe,{children:[k,f,E]}),e[42]=k,e[43]=f,e[44]=E,e[45]=z):z=e[45];let M;return e[46]!==z||e[47]!==g?(M=r.ae.jsx($e,{className:g,children:z}),e[46]=z,e[47]=g,e[48]=M):M=e[48],M}const lt=r.j("w-full h-auto bg-primary-white dark:bg-primary-gray-650 text-primary-black dark:text-primary-white text-base transition-colors file:border-0 file:bg-transparent file:font-medium file:text-primary-gray-700 dark:file:text-primary-white focus-visible:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 placeholder:text-primary-gray-550 dark:placeholder:text-primary-gray-400",{variants:{variant:{light:"border border-primary-gray-400 dark:border-primary-gray-500",normal:"border-2 border-primary-black dark:border-primary-gray-300"},inputSize:{sm:"px-2.5 py-1",base:"p-2.5"}},defaultVariants:{inputSize:"base",variant:"normal"}}),Pe=R.forwardRef((i,e)=>{const t=r._.c(13);let a,l,s,n;t[0]!==i?({className:a,inputSize:l,variant:n,...s}=i,t[0]=i,t[1]=a,t[2]=l,t[3]=s,t[4]=n):(a=t[1],l=t[2],s=t[3],n=t[4]);let o;t[5]!==a||t[6]!==l||t[7]!==n?(o=r.mo(lt({inputSize:l,variant:n}),a),t[5]=a,t[6]=l,t[7]=n,t[8]=o):o=t[8];let y;return t[9]!==s||t[10]!==e||t[11]!==o?(y=r.ae.jsx("input",{...s,ref:e,className:o}),t[9]=s,t[10]=e,t[11]=o,t[12]=y):y=t[12],y});Pe.displayName="Input";const it=[["path",{d:"m21 21-4.34-4.34",key:"14j7rj"}],["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}]],De=me.k("search",it),Oe=R.forwardRef((i,e)=>{const t=r._.c(51);let a,l,s,n,o,y,d,c,D,w,b,V;t[0]!==i?({className:n,inputClassName:o,buttonClassName:l,onSearch:c,searchOnlyOnClick:b,buttonVariant:s,buttonChildren:a,showSearchButton:V,inputVariant:d,inputSize:y,placeholder:D,...w}=i,t[0]=i,t[1]=a,t[2]=l,t[3]=s,t[4]=n,t[5]=o,t[6]=y,t[7]=d,t[8]=c,t[9]=D,t[10]=w,t[11]=b,t[12]=V):(a=t[1],l=t[2],s=t[3],n=t[4],o=t[5],y=t[6],d=t[7],c=t[8],D=t[9],w=t[10],b=t[11],V=t[12]);const[j,_]=R.useState(void 0),[u,g]=R.useState(!1);let C;t[13]!==n?(C=r.mo("flex gap-0",n),t[13]=n,t[14]=C):C=t[14];let $;t[15]!==c||t[16]!==b?($=E=>{_(E.target.value),b||c?.(E.target.value)},t[15]=c,t[16]=b,t[17]=$):$=t[17];let N;t[18]!==c||t[19]!==j?(N=E=>{E.key==="Enter"&&c?.(j)},t[18]=c,t[19]=j,t[20]=N):N=t[20];let v,k;t[21]===Symbol.for("react.memo_cache_sentinel")?(v=()=>g(!0),k=()=>g(!1),t[21]=v,t[22]=k):(v=t[21],k=t[22]);let f;t[23]!==o||t[24]!==y||t[25]!==d||t[26]!==w||t[27]!==$||t[28]!==N?(f=r.ae.jsx(Pe,{...w,variant:d,type:"text",className:o,onChange:$,inputSize:y,onKeyDown:N,onFocus:v,onBlur:k}),t[23]=o,t[24]=y,t[25]=d,t[26]=w,t[27]=$,t[28]=N,t[29]=f):f=t[29];let S;t[30]!==a||t[31]!==u||t[32]!==D||t[33]!==j?(S=!u&&(j===""||!j)&&r.ae.jsxs("div",{className:"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none",children:[a?null:r.ae.jsx(De,{className:"h-4 w-4 text-primary-gray-500 dark:text-primary-gray-400 mr-2"}),r.ae.jsx("span",{className:"text-primary-gray-500 dark:text-primary-gray-400",children:D||"Search..."})]}),t[30]=a,t[31]=u,t[32]=D,t[33]=j,t[34]=S):S=t[34];let p;t[35]!==f||t[36]!==S?(p=r.ae.jsxs("div",{className:"relative w-full",children:[f,S]}),t[35]=f,t[36]=S,t[37]=p):p=t[37];let x;t[38]!==a||t[39]!==l||t[40]!==s||t[41]!==y||t[42]!==c||t[43]!==j||t[44]!==V?(x=V===!1?null:r.ae.jsx(_e.u,{variant:s||"icon",className:l,padding:y,onClick:()=>{c?.(j)},children:a||r.ae.jsx(De,{className:"stroke-2"})}),t[38]=a,t[39]=l,t[40]=s,t[41]=y,t[42]=c,t[43]=j,t[44]=V,t[45]=x):x=t[45];let h;return t[46]!==e||t[47]!==C||t[48]!==p||t[49]!==x?(h=r.ae.jsxs("div",{className:C,ref:e,children:[p,x]}),t[46]=e,t[47]=C,t[48]=p,t[49]=x,t[50]=h):h=t[50],h});Oe.displayName="Search";const nt=i=>i?Object.entries(i).map(([t,a])=>Array.isArray(a)?{" ":t,value:`"${a.join("; ")}"`}:{" ":t,value:`"${a}"`}):{};function ot(i){const e=r.compilerRuntimeExports.c(34),{width:t,height:a,data:l,onSeriesMouseClick:s,cardTemplate:n,cardBackgroundColor:o,cardMinWidth:y,detailsOnClick:d,noOfItemsInAPage:c,styles:D,classNames:w,page:b,allowDataDownloadOnDetail:V}=i,j=y===void 0?320:y,[_,u]=R.useState(void 0),g=t?`${t}px`:"100%",C=a?`${a}px`:"auto",$=`repeat(auto-fill, minmax(${j}px, 1fr))`;let N;e[0]!==g||e[1]!==C||e[2]!==$?(N={width:g,height:C,gridTemplateColumns:$},e[0]=g,e[1]=C,e[2]=$,e[3]=N):N=e[3];let v;if(e[4]!==o||e[5]!==n||e[6]!==w?.dataCards||e[7]!==l||e[8]!==d||e[9]!==c||e[10]!==s||e[11]!==b||e[12]!==D?.dataCards){let p;e[14]!==c||e[15]!==b?(p=(h,E)=>c?E<b*c&&E>=(b-1)*c:!0,e[14]=c,e[15]=b,e[16]=p):p=e[16];let x;e[17]!==o||e[18]!==n||e[19]!==w?.dataCards||e[20]!==d||e[21]!==s||e[22]!==D?.dataCards?(x=(h,E)=>r.jsxRuntimeExports.jsx("div",{style:{...D?.dataCards||{},...o&&{backgroundColor:o}},className:`w-full flex flex-col ${s||d?"cursor-pointer":"cursor-auto"}${o?"":"bg-primary-gray-200 dark:bg-primary-gray-600"} ${w?.dataCards||""}`,onClick:()=>{s?.(h),u(h)},dangerouslySetInnerHTML:typeof n=="string"?{__html:Ee.string2HTML(n,h)}:void 0,children:typeof n=="function"?n(h):null},E),e[17]=o,e[18]=n,e[19]=w?.dataCards,e[20]=d,e[21]=s,e[22]=D?.dataCards,e[23]=x):x=e[23],v=l.filter(p).map(x),e[4]=o,e[5]=n,e[6]=w?.dataCards,e[7]=l,e[8]=d,e[9]=c,e[10]=s,e[11]=b,e[12]=D?.dataCards,e[13]=v}else v=e[13];let k;e[24]!==N||e[25]!==v?(k=r.jsxRuntimeExports.jsx("div",{className:"undp-scrollbar w-full my-0 mx-auto grid gap-4 undp-viz-data-cards-container",style:N,children:v}),e[24]=N,e[25]=v,e[26]=k):k=e[26];let f;e[27]!==V||e[28]!==d||e[29]!==_?(f=d&&_!==void 0?r.jsxRuntimeExports.jsxs(Ke.le,{open:_!==void 0,onClose:()=>{u(void 0)},children:[r.jsxRuntimeExports.jsx("div",{className:"graph-modal-content m-0",dangerouslySetInnerHTML:typeof d=="string"?{__html:Ee.string2HTML(d,_)}:void 0,children:typeof d=="function"?d(_):null}),V?r.jsxRuntimeExports.jsx("div",{className:"flex",children:r.jsxRuntimeExports.jsx(Ue.CsvDownloadButton,{csvData:nt(_),headers:[{label:" ",key:" "},{label:"value",key:"value"}],buttonContent:r.jsxRuntimeExports.jsxs("div",{className:"flex items-center gap-4",children:[typeof V=="string"?V:null,r.jsxRuntimeExports.jsx(_e.FileDown,{})]})})}):null]}):null,e[27]=V,e[28]=d,e[29]=_,e[30]=f):f=e[30];let S;return e[31]!==k||e[32]!==f?(S=r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[k,f]}),e[31]=k,e[32]=f,e[33]=S):S=e[33],S}const ct=(i,e,t)=>e.length===0?i:i.filter(a=>e.some(l=>a[l]?.toLowerCase().includes(t.toLowerCase())));function ut(i){const e=r.compilerRuntimeExports.c(84),{width:t,height:a,graphTitle:l,sources:s,graphDescription:n,footNote:o,graphID:y,data:d,onSeriesMouseClick:c,language:D,theme:w,ariaLabel:b,cardTemplate:V,cardBackgroundColor:j,cardFilters:_,cardSortingOptions:u,cardSearchColumns:g,cardMinWidth:C,backgroundColor:$,padding:N,detailsOnClick:v,allowDataDownloadOnDetail:k,noOfItemsInAPage:f,uiMode:S,styles:p,classNames:x}=i,h=D===void 0?"en":D,E=w===void 0?"light":w,z=C===void 0?320:C,M=$===void 0?!1:$,I=k===void 0?!1:k,q=S===void 0?"normal":S,[P,Be]=R.useState(d),[xe,Ne]=R.useState(1),Fe=R.useRef(null),[B,Te]=R.useState("");let Q;e[0]!==d?(Q=m=>({filter:m.column,label:m.label||`Filter by ${m.column}`,singleSelect:!0,clearable:!0,defaultValue:Ve.transformDefaultValue(m.defaultValue),availableValues:Je.getUniqValue(d,m.column).filter(W=>!m.excludeValues?.includes(`${W}`)).map(pt),width:m.width}),e[0]=d,e[1]=Q):Q=e[1];const ke=(_||[]).map(Q);let F;e[2]!==_?(F=_||[],e[2]=_,e[3]=F):F=e[3];let J;e[4]!==F?(J=F.map(mt),e[4]=F,e[5]=J):J=e[5];const[T,Ge]=R.useState(J),[O,Se]=R.useState(u?!u.defaultValue||u.options.findIndex(m=>m.label===u.defaultValue)===-1?u.options[0]:u.options[u.options.findIndex(m=>m.label===u.defaultValue)]:void 0),we={ignoreCase:!0,ignoreAccents:!0,trim:!0};let X;e[6]!==u?(X=()=>{Se(u?!u.defaultValue||u.options.findIndex(m=>m.label===u.defaultValue)===-1?u.options[0]:u.options[u.options.findIndex(m=>m.label===u.defaultValue)]:void 0)},e[6]=u,e[7]=X):X=e[7];const fe=R.useEffectEvent(X);let Y;e[8]!==fe?(Y=()=>{fe()},e[8]=fe,e[9]=Y):Y=e[9];let Z;e[10]!==u?(Z=[u],e[10]=u,e[11]=Z):Z=e[11],R.useEffect(Y,Z);let ee;e[12]===Symbol.for("react.memo_cache_sentinel")?(ee=m=>{Be(m),Ne(1)},e[12]=ee):ee=e[12];const te=R.useEffectEvent(ee);let ae;e[13]!==te||e[14]!==g||e[15]!==d||e[16]!==B||e[17]!==T||e[18]!==O?(ae=()=>{const m=ct(d,g||[],B).filter(W=>T.every(U=>U.value&&je.flattenDeep([U.value]).length>0?He.intersection(je.flattenDeep([W[U.filter]]),je.flattenDeep([U.value]).map(dt)).length>0:!0));te(O?Ae.orderBy(m,[O.value],[O.type]):m)},e[13]=te,e[14]=g,e[15]=d,e[16]=B,e[17]=T,e[18]=O,e[19]=ae):ae=e[19];let re;e[20]!==g||e[21]!==d||e[22]!==B||e[23]!==T||e[24]!==O?(re=[d,g,B,T,O],e[20]=g,e[21]=d,e[22]=B,e[23]=T,e[24]=O,e[25]=re):re=e[25],R.useEffect(ae,re);const ye=Xe.GraphContainer,he=x?.graphContainer,ge=p?.graphContainer;let G;e[26]!==x?.description||e[27]!==x?.title||e[28]!==n||e[29]!==l||e[30]!==p?.description||e[31]!==p?.title||e[32]!==t?(G=l||n?r.jsxRuntimeExports.jsx(Qe.GraphHeader,{styles:{title:p?.title,description:p?.description},classNames:{title:x?.title,description:x?.description},graphTitle:l,graphDescription:n,width:t}):null,e[26]=x?.description,e[27]=x?.title,e[28]=n,e[29]=l,e[30]=p?.description,e[31]=p?.title,e[32]=t,e[33]=G):G=e[33];const ve=u||ke.length>0?r.jsxRuntimeExports.jsxs("div",{className:"flex gap-x-4 gap-y-0 flex-wrap items-start w-full pb-3",children:[u?r.jsxRuntimeExports.jsxs("div",{className:"grow shrink-0 min-w-[240px]",style:{width:u.width||"calc(25% - 0.75rem)"},children:[r.jsxRuntimeExports.jsx(Ce._,{marginBottom:"xs",size:"sm",className:"text-primary-gray-700 dark:text-primary-gray-100",children:"Sort by"}),r.jsxRuntimeExports.jsx(ce.ja,{options:u.options,isRtl:h==="he"||h==="ar",isSearchable:!0,filterOption:ce.Du(we),onChange:m=>{Se(m||void 0)},variant:q,size:"sm",defaultValue:!u.defaultValue||u.options.findIndex(m=>m.label===u.defaultValue)===-1?u.options[0]:u.options[u.options.findIndex(m=>m.label===u.defaultValue)]})]}):null,ke?.map((m,W)=>r.jsxRuntimeExports.jsxs("div",{className:"grow shrink-0 min-w-[240px]",style:{width:m.width||"calc(25% - 0.75rem)"},children:[r.jsxRuntimeExports.jsx(Ce._,{marginBottom:"xs",size:"sm",className:"text-primary-gray-700 dark:text-primary-gray-100",children:m.label}),r.jsxRuntimeExports.jsx(ce.ja,{options:m.availableValues,isClearable:m.clearable===void 0?!0:m.clearable,isRtl:h==="he"||h==="ar",isSearchable:!0,variant:q,size:"sm",controlShouldRenderValue:!0,filterOption:ce.Du(we),onChange:U=>{Ge(Le=>Le.map(be=>be.filter===m.filter?{...be,value:U}:be))},defaultValue:m.defaultValue})]},W))]}):null;let se;e[34]===Symbol.for("react.memo_cache_sentinel")?(se=r.jsxRuntimeExports.jsx(ue.n,{size:"xl"}),e[34]=se):se=e[34];let L;e[35]!==g||e[36]!==q?(L=(g||[]).length>0?r.jsxRuntimeExports.jsx("div",{style:{paddingTop:"1px"},children:r.jsxRuntimeExports.jsx(Oe,{placeholder:"Search...",onSearch:m=>{Te(m||"")},buttonVariant:"icon",inputVariant:q,showSearchButton:!1,inputSize:"sm"})}):null,e[35]=g,e[36]=q,e[37]=L):L=e[37];let le;e[38]===Symbol.for("react.memo_cache_sentinel")?(le=r.jsxRuntimeExports.jsx(ue.n,{size:"xl"}),e[38]=le):le=e[38];let H;e[39]!==I||e[40]!==j||e[41]!==P||e[42]!==z||e[43]!==V||e[44]!==x||e[45]!==v||e[46]!==a||e[47]!==f||e[48]!==c||e[49]!==xe||e[50]!==p||e[51]!==t?(H=r.jsxRuntimeExports.jsx(ot,{data:P,width:t,height:a,cardTemplate:V,cardMinWidth:z,page:xe,cardBackgroundColor:j,styles:p,classNames:x,noOfItemsInAPage:f,detailsOnClick:v,onSeriesMouseClick:c,allowDataDownloadOnDetail:I}),e[39]=I,e[40]=j,e[41]=P,e[42]=z,e[43]=V,e[44]=x,e[45]=v,e[46]=a,e[47]=f,e[48]=c,e[49]=xe,e[50]=p,e[51]=t,e[52]=H):H=e[52];let ie;e[53]===Symbol.for("react.memo_cache_sentinel")?(ie=r.jsxRuntimeExports.jsx(ue.n,{size:"xl"}),e[53]=ie):ie=e[53];let A;e[54]!==P||e[55]!==f?(A=f?r.jsxRuntimeExports.jsx(st,{total:P.length,defaultPage:0,pageSize:f,onChange:Ne}):null,e[54]=P,e[55]=f,e[56]=A):A=e[56];let ne;e[57]===Symbol.for("react.memo_cache_sentinel")?(ne=r.jsxRuntimeExports.jsx(ue.n,{size:"2xl"}),e[57]=ne):ne=e[57];let K;e[58]!==x?.footnote||e[59]!==x?.source||e[60]!==o||e[61]!==s||e[62]!==p?.footnote||e[63]!==p?.source||e[64]!==t?(K=s||o?r.jsxRuntimeExports.jsx(We.GraphFooter,{styles:{footnote:p?.footnote,source:p?.source},classNames:{footnote:x?.footnote,source:x?.source},sources:s,footNote:o,width:t}):null,e[58]=x?.footnote,e[59]=x?.source,e[60]=o,e[61]=s,e[62]=p?.footnote,e[63]=p?.source,e[64]=t,e[65]=K):K=e[65];let oe;return e[66]!==ye||e[67]!==b||e[68]!==M||e[69]!==y||e[70]!==a||e[71]!==h||e[72]!==N||e[73]!==he||e[74]!==ge||e[75]!==G||e[76]!==ve||e[77]!==L||e[78]!==H||e[79]!==A||e[80]!==K||e[81]!==E||e[82]!==t?(oe=r.jsxRuntimeExports.jsxs(ye,{className:he,style:ge,id:y,ref:Fe,"aria-label":b,backgroundColor:M,theme:E,language:h,width:t,height:a,padding:N,children:[G,ve,se,L,le,H,ie,A,ne,K]}),e[66]=ye,e[67]=b,e[68]=M,e[69]=y,e[70]=a,e[71]=h,e[72]=N,e[73]=he,e[74]=ge,e[75]=G,e[76]=ve,e[77]=L,e[78]=H,e[79]=A,e[80]=K,e[81]=E,e[82]=t,e[83]=oe):oe=e[83],oe}function dt(i){return i.value}function mt(i){return{filter:i.column,value:Ve.transformDefaultValue(i.defaultValue)}}function pt(i){return{value:i,label:i}}exports.DataCards=ut;
-//# 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 {}