@uva-glass/component-library 3.55.9 → 3.56.0

package/dist/DataTable-C46IkAmF.js

@@ -0,0 +1,154 @@
+import { t as e } from "./clsx-BWCAbrjV.js";
+import { useVirtualScroll as t } from "./components/DataTable/hooks/useVirtualScroll.js";
+import { useCallback as n, useEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import './assets/DataTable.css';//#region src/components/DataTable/DataTable.module.css
+var l = {
+	"data-table__container": "_data-table__container_rlt5w_1",
+	"data-table__spacer": "_data-table__spacer_rlt5w_8",
+	"data-table": "_data-table_rlt5w_1",
+	"data-table--virtualized": "_data-table--virtualized_rlt5w_21",
+	"data-table__row": "_data-table__row_rlt5w_30",
+	"data-table__header-row": "_data-table__header-row_rlt5w_31",
+	"data-table__row--active": "_data-table__row--active_rlt5w_40",
+	"data-table__cell": "_data-table__cell_rlt5w_48",
+	"data-table__sticky-header": "_data-table__sticky-header_rlt5w_56",
+	"data-table__empty-state": "_data-table__empty-state_rlt5w_75"
+}, u = 4, d = ({ data: d, columns: f, stickyHeader: p = !1, virtualize: m = null, activeKeys: h = [], noDataMessage: g = "No data to display" }) => {
+	let _ = a(null), v = a(null), y = a(null), b = a(null), { visibleItems: x, totalHeight: S, offsetTop: C, onScroll: w, setContainerHeight: T } = t({
+		rowHeight: m?.rowHeight ?? 0,
+		buffer: m?.buffer ?? u,
+		totalItems: d.length
+	}), E = a(!1), D = a(!1), [O, k] = o([]), A = i(() => {
+		if (!f) return {
+			visibleRows: d,
+			rowsToRender: d
+		};
+		let e = m ? x.map((e) => d[e]) : d;
+		return {
+			visibleRows: e.map((e) => {
+				let t = {};
+				return f.forEach((n) => {
+					t[n.key] = e[n.key];
+				}), t;
+			}),
+			rowsToRender: e
+		};
+	}, [
+		f,
+		d,
+		m,
+		x
+	]), j = n((e) => {
+		if (!m) return;
+		let t = e.currentTarget.scrollTop;
+		E.current || (E.current = !0, requestAnimationFrame(() => {
+			w({ currentTarget: { scrollTop: t } }), E.current = !1;
+		}));
+	}, [m, w]), M = (e, t) => typeof e == "function" ? e(t) : e;
+	return r(() => {
+		if (!m || !_.current) return;
+		let e = () => {
+			let e = _.current?.parentElement?.clientHeight ?? 0;
+			D.current || (D.current = !0, requestAnimationFrame(() => {
+				T(e), D.current = !1;
+			}));
+		};
+		return window.addEventListener("resize", e), () => {
+			window.removeEventListener("resize", e);
+		};
+	}, [m, T]), r(() => {
+		_.current && T(_.current.parentElement?.clientHeight ?? 0);
+	}, [T]), r(() => {
+		_.current?.scrollTo({ top: 0 });
+	}, [d]), r(() => {
+		if (!p || !b.current) return;
+		let e = () => {
+			let e = b.current?.querySelector("tr");
+			if (!e) return;
+			let t = e.querySelectorAll("td");
+			k(Array.from(t).map((e) => e.getBoundingClientRect().width));
+		}, t = new ResizeObserver(() => {
+			requestAnimationFrame(e);
+		});
+		return t.observe(b.current), e(), () => t.disconnect();
+	}, [p, A.visibleRows]), d.length ? /* @__PURE__ */ c("div", {
+		className: l["data-table__container"],
+		onScroll: j,
+		ref: _,
+		children: [
+			m && p && f && /* @__PURE__ */ s("table", {
+				className: l["data-table--virtualized"],
+				children: /* @__PURE__ */ s("thead", {
+					className: l["data-table__sticky-header"],
+					children: /* @__PURE__ */ s("tr", {
+						className: l["data-table__header-row"],
+						ref: y,
+						children: f && f.map((e, t) => {
+							let n = O[t] ? `${O[t]}px` : e.fixedWidth;
+							return /* @__PURE__ */ s("th", {
+								className: l["data-table__cell"],
+								style: {
+									width: n,
+									minWidth: n,
+									maxWidth: n
+								},
+								children: M(e?.label)
+							}, e.key);
+						})
+					})
+				})
+			}),
+			/* @__PURE__ */ s("div", {
+				className: l["data-table__spacer"],
+				style: { height: S }
+			}),
+			/* @__PURE__ */ c("table", {
+				className: l["data-table"],
+				style: m ? { transform: `translateY(${C}px)` } : void 0,
+				children: [/* @__PURE__ */ s("thead", {
+					className: e({ [l["data-table__sticky-header"]]: p }),
+					ref: v,
+					children: /* @__PURE__ */ s("tr", {
+						className: l["data-table__header-row"],
+						children: !m || !p ? f && f.map((e, t) => {
+							let n = O[t] ? `${O[t]}px` : e.fixedWidth;
+							return /* @__PURE__ */ s("th", {
+								className: l["data-table__cell"],
+								style: { width: n },
+								children: M(e?.label)
+							}, e.key);
+						}) : /* @__PURE__ */ s("th", {
+							colSpan: f?.length,
+							style: { height: y.current?.clientHeight }
+						})
+					})
+				}), /* @__PURE__ */ s("tbody", {
+					ref: b,
+					children: A.visibleRows.map((t, n) => /* @__PURE__ */ s("tr", {
+						className: e(l["data-table__row"], { [l["data-table__row--active"]]: h?.includes(A.rowsToRender[n].id) }),
+						children: Object.entries(t).map(([e]) => {
+							let t = f?.find((t) => t.key === e);
+							return /* @__PURE__ */ s("td", {
+								className: l["data-table__cell"],
+								style: {
+									width: t?.fixedWidth,
+									height: m ? m.rowHeight : void 0,
+									maxHeight: m ? m.rowHeight : void 0
+								},
+								children: M(t?.cell, A.rowsToRender[n])
+							}, e);
+						})
+					}, A.rowsToRender[n].id))
+				})]
+			})
+		]
+	}) : /* @__PURE__ */ s("div", {
+		className: l["data-table__empty-state"],
+		children: g
+	});
+};
+//#endregion
+export { d as t };
+
+//# sourceMappingURL=DataTable-C46IkAmF.js.map

package/dist/DataTable-C46IkAmF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable-C46IkAmF.js","names":[],"sources":["../src/components/DataTable/DataTable.module.css","../src/components/DataTable/DataTable.tsx"],"sourcesContent":[".data-table__container {\n  height: 100%;\n  overflow-y: auto;\n  position: relative;\n  width: 100%;\n}\n\n.data-table__spacer {\n  background-color: transparent;\n  width: 0.0625rem;\n}\n\n.data-table {\n  border-collapse: collapse;\n  left: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n}\n\n.data-table--virtualized {\n  border-collapse: collapse;\n  left: 0;\n  position: sticky;\n  top: 0;\n  width: 100%;\n  z-index: 10;\n}\n\n.data-table__row,\n.data-table__header-row {\n  background-color: var(--color-uva-white);\n  border-bottom: 0.0625rem solid var(--color-grey-300);\n}\n\n.data-table__row:hover {\n  background-color: var(--color-grey-200);\n}\n\n.data-table__row--active {\n  background-color: var(--color-navy-100);\n}\n\n.data-table__row--active:hover {\n  background-color: var(--color-navy-200);\n}\n\n.data-table__cell {\n  overflow: hidden;\n  padding: 0.6875rem 0.75rem;\n  text-align: left;\n  vertical-align: baseline;\n  white-space: nowrap;\n}\n\n.data-table__sticky-header {\n  background-color: var(--color-uva-white);\n  left: 0;\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.data-table__sticky-header::after {\n  border-bottom: 0.0625rem solid var(--color-grey-300);\n  content: \"\";\n  display: block;\n  height: 0.0625rem;\n  left: 0;\n  position: absolute;\n  top: 100%;\n  width: 100%;\n}\n\n.data-table__empty-state {\n  color: var(--color-grey-600);\n  font-size: 1rem;\n  padding: 2rem;\n  text-align: center;\n}\n","import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode, type UIEvent } from 'react';\r\nimport { clsx } from 'clsx';\r\n\r\nimport styles from './DataTable.module.css';\r\nimport { useVirtualScroll } from './hooks/useVirtualScroll';\r\n\r\ntype DataTablePrimitive = string | number | boolean | null | undefined;\r\ntype DataTableRow = Record<string, DataTablePrimitive>;\r\nexport type DataTableColumnContent<TRow extends object> = ReactNode | ((row: TRow) => ReactNode);\r\ntype DataTableColumn<TRow extends object> = {\r\n  key: Extract<keyof TRow, string>;\r\n  label?: ReactNode | ((row: TRow) => ReactNode);\r\n  cell?: ReactNode | ((row: TRow) => ReactNode);\r\n  fixedWidth?: string;\r\n};\r\ntype DataRow<TRow extends object> = { visibleRows: Partial<TRow>[]; rowsToRender: TRow[] };\r\n\r\nexport type DataTableProps<TRow extends { id: string | number } = DataTableRow & { id: string | number }> = {\r\n  /** The data to be displayed in the table */\r\n  data: TRow[];\r\n  /** The columns configuration for the table */\r\n  columns?: DataTableColumn<TRow>[];\r\n  /** Whether the table header should be sticky */\r\n  stickyHeader?: boolean;\r\n  /** Virtualization settings for the table */\r\n  virtualize?: {\r\n    /** The height of each row in pixels */\r\n    rowHeight: number;\r\n    /** The number of additional rows to render above and below the visible area for smoother scrolling */\r\n    buffer?: number;\r\n  } | null;\r\n  /** The keys in the data objects that indicate whether a row is active (for styling purposes) */\r\n  activeKeys?: (string | number)[];\r\n  /** Message to display when there is no data */\r\n  noDataMessage?: string;\r\n};\r\n\r\nconst DEFAULT_BUFFER = 4;\r\n\r\nexport const DataTable = <TRow extends { id: string | number } = DataTableRow & { id: string | number }>({\r\n  data,\r\n  columns,\r\n  stickyHeader = false,\r\n  virtualize = null,\r\n  activeKeys = [],\r\n  noDataMessage = 'No data to display',\r\n}: DataTableProps<TRow>) => {\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n  const headerRef = useRef<HTMLTableSectionElement>(null);\r\n  const headerRowRef = useRef<HTMLTableRowElement>(null);\r\n  const tbodyRef = useRef<HTMLTableSectionElement>(null);\r\n  const { visibleItems, totalHeight, offsetTop, onScroll, setContainerHeight } = useVirtualScroll({\r\n    rowHeight: virtualize?.rowHeight ?? 0,\r\n    buffer: virtualize?.buffer ?? DEFAULT_BUFFER,\r\n    totalItems: data.length,\r\n  });\r\n  const throttling = useRef(false);\r\n  const resizeThrottling = useRef(false);\r\n  const [columnWidths, setColumnWidths] = useState<number[]>([]);\r\n\r\n  const tableData: DataRow<TRow> = useMemo(() => {\r\n    if (!columns) return { visibleRows: data, rowsToRender: data };\r\n    const rowsToRender = virtualize ? visibleItems.map((index) => data[index]) : data;\r\n    const visibleRows = rowsToRender.map((row) => {\r\n      const newRow: Partial<TRow> = {};\r\n      columns.forEach((col) => {\r\n        newRow[col.key] = row[col.key];\r\n      });\r\n      return newRow;\r\n    });\r\n    return { visibleRows, rowsToRender };\r\n  }, [columns, data, virtualize, visibleItems]);\r\n\r\n  const handleScroll = useCallback(\r\n    (event: UIEvent<HTMLDivElement>) => {\r\n      if (!virtualize) return;\r\n\r\n      const scrollTop = event.currentTarget.scrollTop;\r\n\r\n      if (!throttling.current) {\r\n        throttling.current = true;\r\n\r\n        requestAnimationFrame(() => {\r\n          onScroll({ currentTarget: { scrollTop } } as UIEvent<HTMLElement>);\r\n          throttling.current = false;\r\n        });\r\n      }\r\n    },\r\n    [virtualize, onScroll]\r\n  );\r\n\r\n  const onRenderValue = (value: ((row: TRow) => ReactNode) | ReactNode, row?: TRow) =>\r\n    typeof value === 'function' ? value(row!) : value;\r\n\r\n  useEffect(() => {\r\n    if (!virtualize || !containerRef.current) {\r\n      return;\r\n    }\r\n\r\n    const handleResize = () => {\r\n      const containerHeight = containerRef.current?.parentElement?.clientHeight ?? 0;\r\n\r\n      if (!resizeThrottling.current) {\r\n        resizeThrottling.current = true;\r\n\r\n        requestAnimationFrame(() => {\r\n          setContainerHeight(containerHeight);\r\n          resizeThrottling.current = false;\r\n        });\r\n      }\r\n    };\r\n    window.addEventListener('resize', handleResize);\r\n\r\n    return () => {\r\n      window.removeEventListener('resize', handleResize);\r\n    };\r\n  }, [virtualize, setContainerHeight]);\r\n\r\n  useEffect(() => {\r\n    if (containerRef.current) {\r\n      setContainerHeight(containerRef.current.parentElement?.clientHeight ?? 0);\r\n    }\r\n  }, [setContainerHeight]);\r\n\r\n  useEffect(() => {\r\n    containerRef.current?.scrollTo({ top: 0 });\r\n  }, [data]);\r\n\r\n  useEffect(() => {\r\n    if (!stickyHeader || !tbodyRef.current) return;\r\n\r\n    const measureWidths = () => {\r\n      const firstRow = tbodyRef.current?.querySelector('tr');\r\n      if (!firstRow) return;\r\n\r\n      const cells = firstRow.querySelectorAll('td');\r\n      const widths = Array.from(cells).map((cell) => cell.getBoundingClientRect().width);\r\n\r\n      setColumnWidths(widths);\r\n    };\r\n\r\n    const observer = new ResizeObserver(() => {\r\n      requestAnimationFrame(measureWidths);\r\n    });\r\n\r\n    observer.observe(tbodyRef.current);\r\n\r\n    measureWidths();\r\n\r\n    return () => observer.disconnect();\r\n  }, [stickyHeader, tableData.visibleRows]);\r\n\r\n  return data.length ? (\r\n    <div className={styles['data-table__container']} onScroll={handleScroll} ref={containerRef}>\r\n      {/* sticky header if virtualized  */}\r\n      {virtualize && stickyHeader && columns && (\r\n        <table className={styles['data-table--virtualized']}>\r\n          <thead className={styles['data-table__sticky-header']}>\r\n            <tr className={styles['data-table__header-row']} ref={headerRowRef}>\r\n              {columns &&\r\n                columns.map((column, index) => {\r\n                  const forcedWidth = columnWidths[index] ? `${columnWidths[index]}px` : column.fixedWidth;\r\n                  return (\r\n                    <th\r\n                      key={column.key}\r\n                      className={styles['data-table__cell']}\r\n                      style={{\r\n                        width: forcedWidth,\r\n                        minWidth: forcedWidth,\r\n                        maxWidth: forcedWidth,\r\n                      }}\r\n                    >\r\n                      {onRenderValue(column?.label)}\r\n                    </th>\r\n                  );\r\n                })}\r\n            </tr>\r\n          </thead>\r\n        </table>\r\n      )}\r\n\r\n      <div className={styles['data-table__spacer']} style={{ height: totalHeight }} />\r\n      <table\r\n        className={styles['data-table']}\r\n        style={virtualize ? { transform: `translateY(${offsetTop}px)` } : undefined}\r\n      >\r\n        {/* header */}\r\n        <thead className={clsx({ [styles['data-table__sticky-header']]: stickyHeader })} ref={headerRef}>\r\n          <tr className={styles['data-table__header-row']}>\r\n            {!virtualize || !stickyHeader ? (\r\n              columns &&\r\n              columns.map((column, index) => {\r\n                const forcedWidth = columnWidths[index] ? `${columnWidths[index]}px` : column.fixedWidth;\r\n                return (\r\n                  <th key={column.key} className={styles['data-table__cell']} style={{ width: forcedWidth }}>\r\n                    {onRenderValue(column?.label)}\r\n                  </th>\r\n                );\r\n              })\r\n            ) : (\r\n              <th colSpan={columns?.length} style={{ height: headerRowRef.current?.clientHeight }} />\r\n            )}\r\n          </tr>\r\n        </thead>\r\n\r\n        {/* data rows */}\r\n        <tbody ref={tbodyRef}>\r\n          {tableData.visibleRows.map((row, index) => (\r\n            <tr\r\n              key={tableData.rowsToRender[index].id}\r\n              className={clsx(styles['data-table__row'], {\r\n                [styles['data-table__row--active']]: activeKeys?.includes(tableData.rowsToRender[index].id),\r\n              })}\r\n            >\r\n              {Object.entries(row as Record<string, unknown>).map(([key]) => {\r\n                const column = columns?.find((col) => col.key === key);\r\n                return (\r\n                  <td\r\n                    key={key}\r\n                    className={styles['data-table__cell']}\r\n                    style={{\r\n                      width: column?.fixedWidth,\r\n                      height: virtualize ? virtualize.rowHeight : undefined,\r\n                      maxHeight: virtualize ? virtualize.rowHeight : undefined,\r\n                    }}\r\n                  >\r\n                    {onRenderValue(column?.cell, tableData.rowsToRender[index])}\r\n                  </td>\r\n                );\r\n              })}\r\n            </tr>\r\n          ))}\r\n        </tbody>\r\n      </table>\r\n    </div>\r\n  ) : (\r\n    <div className={styles['data-table__empty-state']}>{noDataMessage}</div>\r\n  );\r\n};\r\n"],"mappings":";;;;;;;;;;;;;;;;GCqCM,IAAiB,GAEV,KAA4F,EACvG,SACA,YACA,kBAAe,IACf,gBAAa,MACb,gBAAa,CAAC,GACd,mBAAgB,2BACU;CAC1B,IAAM,IAAe,EAAuB,IAAI,GAC1C,IAAY,EAAgC,IAAI,GAChD,IAAe,EAA4B,IAAI,GAC/C,IAAW,EAAgC,IAAI,GAC/C,EAAE,iBAAc,gBAAa,cAAW,aAAU,0BAAuB,EAAiB;EAC9F,WAAW,GAAY,aAAa;EACpC,QAAQ,GAAY,UAAU;EAC9B,YAAY,EAAK;CACnB,CAAC,GACK,IAAa,EAAO,EAAK,GACzB,IAAmB,EAAO,EAAK,GAC/B,CAAC,GAAc,KAAmB,EAAmB,CAAC,CAAC,GAEvD,IAA2B,QAAc;EAC7C,IAAI,CAAC,GAAS,OAAO;GAAE,aAAa;GAAM,cAAc;EAAK;EAC7D,IAAM,IAAe,IAAa,EAAa,KAAK,MAAU,EAAK,EAAM,IAAI;EAQ7E,OAAO;GAAE,aAPW,EAAa,KAAK,MAAQ;IAC5C,IAAM,IAAwB,CAAC;IAI/B,OAHA,EAAQ,SAAS,MAAQ;KACvB,EAAO,EAAI,OAAO,EAAI,EAAI;IAC5B,CAAC,GACM;GACT,CACS;GAAa;EAAa;CACrC,GAAG;EAAC;EAAS;EAAM;EAAY;CAAY,CAAC,GAEtC,IAAe,GAClB,MAAmC;EAClC,IAAI,CAAC,GAAY;EAEjB,IAAM,IAAY,EAAM,cAAc;EAEtC,AAAK,EAAW,YACd,EAAW,UAAU,IAErB,4BAA4B;GAE1B,AADA,EAAS,EAAE,eAAe,EAAE,aAAU,EAAE,CAAyB,GACjE,EAAW,UAAU;EACvB,CAAC;CAEL,GACA,CAAC,GAAY,CAAQ,CACvB,GAEM,KAAiB,GAA+C,MACpE,OAAO,KAAU,aAAa,EAAM,CAAI,IAAI;CA4D9C,OA1DA,QAAgB;EACd,IAAI,CAAC,KAAc,CAAC,EAAa,SAC/B;EAGF,IAAM,UAAqB;GACzB,IAAM,IAAkB,EAAa,SAAS,eAAe,gBAAgB;GAE7E,AAAK,EAAiB,YACpB,EAAiB,UAAU,IAE3B,4BAA4B;IAE1B,AADA,EAAmB,CAAe,GAClC,EAAiB,UAAU;GAC7B,CAAC;EAEL;EAGA,OAFA,OAAO,iBAAiB,UAAU,CAAY,SAEjC;GACX,OAAO,oBAAoB,UAAU,CAAY;EACnD;CACF,GAAG,CAAC,GAAY,CAAkB,CAAC,GAEnC,QAAgB;EACd,AAAI,EAAa,WACf,EAAmB,EAAa,QAAQ,eAAe,gBAAgB,CAAC;CAE5E,GAAG,CAAC,CAAkB,CAAC,GAEvB,QAAgB;EACd,EAAa,SAAS,SAAS,EAAE,KAAK,EAAE,CAAC;CAC3C,GAAG,CAAC,CAAI,CAAC,GAET,QAAgB;EACd,IAAI,CAAC,KAAgB,CAAC,EAAS,SAAS;EAExC,IAAM,UAAsB;GAC1B,IAAM,IAAW,EAAS,SAAS,cAAc,IAAI;GACrD,IAAI,CAAC,GAAU;GAEf,IAAM,IAAQ,EAAS,iBAAiB,IAAI;GAG5C,EAFe,MAAM,KAAK,CAAK,EAAE,KAAK,MAAS,EAAK,sBAAsB,EAAE,KAE5D,CAAM;EACxB,GAEM,IAAW,IAAI,qBAAqB;GACxC,sBAAsB,CAAa;EACrC,CAAC;EAMD,OAJA,EAAS,QAAQ,EAAS,OAAO,GAEjC,EAAc,SAED,EAAS,WAAW;CACnC,GAAG,CAAC,GAAc,EAAU,WAAW,CAAC,GAEjC,EAAK,SACV,kBAAC,OAAD;EAAK,WAAW,EAAO;EAA0B,UAAU;EAAc,KAAK;YAA9E;GAEG,KAAc,KAAgB,KAC7B,kBAAC,SAAD;IAAO,WAAW,EAAO;cACvB,kBAAC,SAAD;KAAO,WAAW,EAAO;eACvB,kBAAC,MAAD;MAAI,WAAW,EAAO;MAA2B,KAAK;gBACnD,KACC,EAAQ,KAAK,GAAQ,MAAU;OAC7B,IAAM,IAAc,EAAa,KAAS,GAAG,EAAa,GAAO,MAAM,EAAO;OAC9E,OACE,kBAAC,MAAD;QAEE,WAAW,EAAO;QAClB,OAAO;SACL,OAAO;SACP,UAAU;SACV,UAAU;QACZ;kBAEC,EAAc,GAAQ,KAAK;OAC1B,GATG,EAAO,GASV;MAER,CAAC;KACD,CAAA;IACC,CAAA;GACF,CAAA;GAGT,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAuB,OAAO,EAAE,QAAQ,EAAY;GAAI,CAAA;GAC/E,kBAAC,SAAD;IACE,WAAW,EAAO;IAClB,OAAO,IAAa,EAAE,WAAW,cAAc,EAAU,KAAK,IAAI,KAAA;cAFpE,CAKE,kBAAC,SAAD;KAAO,WAAW,EAAK,GAAG,EAAO,+BAA+B,EAAa,CAAC;KAAG,KAAK;eACpF,kBAAC,MAAD;MAAI,WAAW,EAAO;gBACnB,CAAC,KAAc,CAAC,IACf,KACA,EAAQ,KAAK,GAAQ,MAAU;OAC7B,IAAM,IAAc,EAAa,KAAS,GAAG,EAAa,GAAO,MAAM,EAAO;OAC9E,OACE,kBAAC,MAAD;QAAqB,WAAW,EAAO;QAAqB,OAAO,EAAE,OAAO,EAAY;kBACrF,EAAc,GAAQ,KAAK;OAC1B,GAFK,EAAO,GAEZ;MAER,CAAC,IAED,kBAAC,MAAD;OAAI,SAAS,GAAS;OAAQ,OAAO,EAAE,QAAQ,EAAa,SAAS,aAAa;MAAI,CAAA;KAEtF,CAAA;IACC,CAAA,GAGP,kBAAC,SAAD;KAAO,KAAK;eACT,EAAU,YAAY,KAAK,GAAK,MAC/B,kBAAC,MAAD;MAEE,WAAW,EAAK,EAAO,oBAAoB,GACxC,EAAO,6BAA6B,GAAY,SAAS,EAAU,aAAa,GAAO,EAAE,EAC5F,CAAC;gBAEA,OAAO,QAAQ,CAA8B,EAAE,KAAK,CAAC,OAAS;OAC7D,IAAM,IAAS,GAAS,MAAM,MAAQ,EAAI,QAAQ,CAAG;OACrD,OACE,kBAAC,MAAD;QAEE,WAAW,EAAO;QAClB,OAAO;SACL,OAAO,GAAQ;SACf,QAAQ,IAAa,EAAW,YAAY,KAAA;SAC5C,WAAW,IAAa,EAAW,YAAY,KAAA;QACjD;kBAEC,EAAc,GAAQ,MAAM,EAAU,aAAa,EAAM;OACxD,GATG,CASH;MAER,CAAC;KACC,GArBG,EAAU,aAAa,GAAO,EAqBjC,CACL;IACI,CAAA,CACF;;EACJ;MAEL,kBAAC,OAAD;EAAK,WAAW,EAAO;YAA6B;CAAmB,CAAA;AAE3E"}

package/dist/assets/DataTable.css

@@ -0,0 +1 @@
+._data-table__container_rlt5w_1{width:100%;height:100%;position:relative;overflow-y:auto}._data-table__spacer_rlt5w_8{background-color:#0000;width:.0625rem}._data-table_rlt5w_1{border-collapse:collapse;width:100%;position:absolute;top:0;left:0}._data-table--virtualized_rlt5w_21{border-collapse:collapse;z-index:10;width:100%;position:sticky;top:0;left:0}._data-table__row_rlt5w_30,._data-table__header-row_rlt5w_31{background-color:var(--color-uva-white);border-bottom:.0625rem solid var(--color-grey-300)}._data-table__row_rlt5w_30:hover{background-color:var(--color-grey-200)}._data-table__row--active_rlt5w_40{background-color:var(--color-navy-100)}._data-table__row--active_rlt5w_40:hover{background-color:var(--color-navy-200)}._data-table__cell_rlt5w_48{text-align:left;vertical-align:baseline;white-space:nowrap;padding:.6875rem .75rem;overflow:hidden}._data-table__sticky-header_rlt5w_56{background-color:var(--color-uva-white);z-index:1;position:sticky;top:0;left:0}._data-table__sticky-header_rlt5w_56:after{border-bottom:.0625rem solid var(--color-grey-300);content:"";width:100%;height:.0625rem;display:block;position:absolute;top:100%;left:0}._data-table__empty-state_rlt5w_75{color:var(--color-grey-600);text-align:center;padding:2rem;font-size:1rem}

package/dist/components/Accordion/Accordion.test.js

@@ -1,4 +1,4 @@
-import "../../dist-Cxk2-lJw.js";
+import "../../dist-Dlg0QxSO.js";
 import { t as e } from "../../Accordion-DaCqVof1.js";
 import { i as t, n } from "../../react.esm-GvSawg5E.js";
 import { t as r } from "../../esm-BJhEQquH.js";

package/dist/components/AccordionCard/AccordionCard.test.js

@@ -1,4 +1,4 @@
-import "../../dist-Cxk2-lJw.js";
+import "../../dist-Dlg0QxSO.js";
 import { t as e } from "../../AccordionCard-CD5H9gR1.js";
 import { a as t, i as n, n as r, t as i } from "../../react.esm-GvSawg5E.js";
 import { t as a } from "../../esm-BJhEQquH.js";

package/dist/components/ActionList/ActionList.test.js

@@ -1,4 +1,4 @@
-import "../../dist-Cxk2-lJw.js";
+import "../../dist-Dlg0QxSO.js";
 import { t as e } from "../../ActionList-C0hD9noC.js";
 import { a as t, i as n, n as r } from "../../react.esm-GvSawg5E.js";
 import { t as i } from "../../esm-BJhEQquH.js";

package/dist/components/AppStatusBar/AppStatusBar.test.js

@@ -1,4 +1,4 @@
-import "../../dist-Cxk2-lJw.js";
+import "../../dist-Dlg0QxSO.js";
 import { t as e } from "../../AppStatusBar-BK0yaC4G.js";
 import { i as t, n } from "../../react.esm-GvSawg5E.js";
 import { jsx as r } from "react/jsx-runtime";

package/dist/components/Attention/Attention.test.js

@@ -1,4 +1,4 @@
-import "../../dist-Cxk2-lJw.js";
+import "../../dist-Dlg0QxSO.js";
 import { t as e } from "../../Attention-xqGAJ7-T.js";
 import { i as t, n } from "../../react.esm-GvSawg5E.js";
 import { jsx as r } from "react/jsx-runtime";

package/dist/components/Backdrop/Backdrop.test.js

@@ -1,4 +1,4 @@
-import "../../dist-Cxk2-lJw.js";
+import "../../dist-Dlg0QxSO.js";
 import { t as e } from "../../Backdrop-bQ8kXsge.js";
 import { i as t, n } from "../../react.esm-GvSawg5E.js";
 import { jsx as r } from "react/jsx-runtime";

package/dist/components/Buttons/Button.test.js

@@ -1,4 +1,4 @@
-import "../../dist-Cxk2-lJw.js";
+import "../../dist-Dlg0QxSO.js";
 import { Button as e } from "./Button.js";
 import { i as t, n, t as r } from "../../react.esm-GvSawg5E.js";
 import { jsx as i } from "react/jsx-runtime";

package/dist/components/Buttons/LinkButton.test.js

@@ -1,4 +1,4 @@
-import "../../dist-Cxk2-lJw.js";
+import "../../dist-Dlg0QxSO.js";
 import { LinkButton as e } from "./LinkButton.js";
 import { i as t, n, t as r } from "../../react.esm-GvSawg5E.js";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";

package/dist/components/Buttons/MenuButton.test.js

@@ -1,4 +1,4 @@
-import "../../dist-Cxk2-lJw.js";
+import "../../dist-Dlg0QxSO.js";
 import { MenuButton as e } from "./MenuButton.js";
 import { i as t, n, t as r } from "../../react.esm-GvSawg5E.js";
 import { createRef as i } from "react";

package/dist/components/Card/Card.test.js

@@ -1,4 +1,4 @@
-import "../../dist-Cxk2-lJw.js";
+import "../../dist-Dlg0QxSO.js";
 import { t as e } from "../../Card-BH1ySOiP.js";
 import { i as t, n } from "../../react.esm-GvSawg5E.js";
 import { jsx as r } from "react/jsx-runtime";

package/dist/components/Checkbox/Checkbox.test.js

@@ -1,4 +1,4 @@
-import "../../dist-Cxk2-lJw.js";
+import "../../dist-Dlg0QxSO.js";
 import { t as e } from "../../Checkbox-sAt4To2B.js";
 import { i as t, n } from "../../react.esm-GvSawg5E.js";
 import { t as r } from "../../esm-BJhEQquH.js";

package/dist/components/CheckboxButtonBar/CheckboxButtonBar.test.js

@@ -1,4 +1,4 @@
-import "../../dist-Cxk2-lJw.js";
+import "../../dist-Dlg0QxSO.js";
 import { t as e } from "../../CheckboxButtonBar-DpNnwLzI.js";
 import { i as t, n } from "../../react.esm-GvSawg5E.js";
 import { jsx as r } from "react/jsx-runtime";

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+type DataTablePrimitive = string | number | boolean | null | undefined;
+type DataTableRow = Record<string, DataTablePrimitive>;
+export type DataTableColumnContent<TRow extends object> = ReactNode | ((row: TRow) => ReactNode);
+type DataTableColumn<TRow extends object> = {
+    key: Extract<keyof TRow, string>;
+    label?: ReactNode | ((row: TRow) => ReactNode);
+    cell?: ReactNode | ((row: TRow) => ReactNode);
+    fixedWidth?: string;
+};
+export type DataTableProps<TRow extends {
+    id: string | number;
+} = DataTableRow & {
+    id: string | number;
+}> = {
+    /** The data to be displayed in the table */
+    data: TRow[];
+    /** The columns configuration for the table */
+    columns?: DataTableColumn<TRow>[];
+    /** Whether the table header should be sticky */
+    stickyHeader?: boolean;
+    /** Virtualization settings for the table */
+    virtualize?: {
+        /** The height of each row in pixels */
+        rowHeight: number;
+        /** The number of additional rows to render above and below the visible area for smoother scrolling */
+        buffer?: number;
+    } | null;
+    /** The keys in the data objects that indicate whether a row is active (for styling purposes) */
+    activeKeys?: (string | number)[];
+    /** Message to display when there is no data */
+    noDataMessage?: string;
+};
+export declare const DataTable: <TRow extends {
+    id: string | number;
+} = DataTableRow & {
+    id: string | number;
+}>({ data, columns, stickyHeader, virtualize, activeKeys, noDataMessage, }: DataTableProps<TRow>) => import("react").JSX.Element;
+export {};

package/dist/components/DataTable/DataTable.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../DataTable-C46IkAmF.js";
+export { e as DataTable };

package/dist/components/DataTable/DataTable.stories.d.ts

@@ -0,0 +1,26 @@
+import { Meta } from '@storybook/react';
+import { DataTableProps } from './DataTable';
+interface MockDataProps {
+    id: string;
+    first_name: string;
+    last_name: string;
+    email: string;
+    street: string;
+    street_number: string;
+    zipcode: string | null;
+    city: string;
+    country: string;
+    country_code: string;
+    trade: string;
+    language: string;
+    birthdate: string;
+    quote: string;
+    university: string;
+    appname: string;
+    appversion: string;
+    website: string;
+}
+declare const _default: Meta<DataTableProps<MockDataProps>>;
+export default _default;
+export declare const DataTableExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DataTableProps<MockDataProps>>;
+export declare const DataTableNotVirtualizedExample: import('storybook/internal/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DataTableProps<MockDataProps>>;