@uva-glass/component-library 3.57.4 → 3.57.5

package/dist/{DataTable-Guuh0GZc.js → DataTable-UslvEf3c.js}

@@ -67,8 +67,8 @@ var l = {
 		let e = () => {
 			let e = x.current?.querySelector("tr");
 			if (!e) return;
-			let t = e.querySelectorAll("td");
-			A(Array.from(t).map((e) => e.getBoundingClientRect().width));
+			let t = e.querySelectorAll("td"), n = Array.from(t).map((e) => e.getBoundingClientRect().width);
+			A(n);
 		}, t = new ResizeObserver(() => {
 			requestAnimationFrame(e);
 		});
@@ -155,4 +155,4 @@ var l = {
 //#endregion
 export { d as t };
 
-//# sourceMappingURL=DataTable-Guuh0GZc.js.map
+//# sourceMappingURL=DataTable-UslvEf3c.js.map

package/dist/{DataTable-Guuh0GZc.js.map → DataTable-UslvEf3c.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DataTable-Guuh0GZc.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__header-row {\n  border-left: 0.0625rem solid transparent;\n  border-right: 0.0625rem solid transparent;\n}\n\n.data-table__row {\n  border-left: 0.0625rem solid var(--color-grey-300);\n  border-right: 0.0625rem solid var(--color-grey-300);\n}\n\n.data-table__row--hoverable: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.data-table__row--hoverable: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}\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  /** Disable hover styling on rows */\r\n  noHover?: boolean;\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  noHover = false,\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                [styles['data-table__row--hoverable']]: !noHover,\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":";;;;;;;;;;;;;;;;;GCuCM,IAAiB,GAEV,KAA4F,EACvG,SACA,YACA,kBAAe,IACf,gBAAa,MACb,gBAAa,CAAC,GACd,mBAAgB,sBAChB,aAAU,SACgB;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,CAAC,CAAC,KAAK,MAAS,EAAK,sBAAsB,CAAC,CAAC,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;QACxC,EAAO,6BAA6B,EAAW,SAAS,EAAU,aAAa,EAAM,CAAC,EAAE;QACxF,EAAO,gCAAgC,CAAC;MAC3C,CAAC;gBAEA,OAAO,QAAQ,CAA8B,CAAC,CAAC,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,GAtBG,EAAU,aAAa,EAAM,CAAC,EAsBjC,CACL;IACI,CAAA,CACF;;EACJ;MAEL,kBAAC,OAAD;EAAK,WAAW,EAAO;YAA6B;CAAmB,CAAA;AAE3E"}
+{"version":3,"file":"DataTable-UslvEf3c.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__header-row {\n  border-left: 0.0625rem solid transparent;\n  border-right: 0.0625rem solid transparent;\n}\n\n.data-table__row {\n  border-left: 0.0625rem solid var(--color-grey-300);\n  border-right: 0.0625rem solid var(--color-grey-300);\n}\n\n.data-table__row--hoverable: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.data-table__row--hoverable: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}\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  /** Disable hover styling on rows */\r\n  noHover?: boolean;\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  noHover = false,\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                [styles['data-table__row--hoverable']]: !noHover,\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":"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"}