{"version":3,"sources":["../package/DataTable.tsx","../package/DataTableDragToggleProvider.tsx","../package/DataTableColumns.context.ts","../package/DataTableEmptyRow.tsx","../package/DataTableEmptyState.tsx","../package/icons/IconDatabaseOff.tsx","../package/DataTableFooter.tsx","../package/DataTableFooterCell.tsx","../package/hooks/useColumnResize.ts","../package/hooks/useDataTableColumnReorder.ts","../package/hooks/useDataTableColumnResize.ts","../package/hooks/useDataTableColumns.ts","../package/hooks/useDataTableColumnToggle.ts","../package/hooks/useDataTableInjectCssVariables.ts","../package/hooks/useIsomorphicLayoutEffect.ts","../package/hooks/useStableValue.ts","../package/hooks/useLastSelectionChangeIndex.ts","../package/hooks/useMediaQueries.ts","../package/hooks/useMediaQueriesStringOrFunction.ts","../package/hooks/useMediaQueryStringOrFunction.ts","../package/hooks/useRowExpansion.ts","../package/utils.ts","../package/hooks/useRowExpansionStatus.ts","../package/utilityClasses.ts","../package/DataTableFooterSelectorPlaceholderCell.tsx","../package/DataTableHeader.tsx","../package/DataTableColumnGroupHeaderCell.tsx","../package/DataTableHeaderCell.tsx","../package/DataTableHeaderCellFilter.tsx","../package/icons/IconFilter.tsx","../package/icons/IconFilterFilled.tsx","../package/DataTableResizableHeaderHandle.tsx","../package/icons/IconArrowUp.tsx","../package/icons/IconArrowsVertical.tsx","../package/icons/IconGripVertical.tsx","../package/icons/IconX.tsx","../package/DataTableHeaderSelectorCell.tsx","../package/DataTableLoader.tsx","../package/DataTablePagination.tsx","../package/DataTablePageSizeSelector.tsx","../package/cssVariables.ts","../package/icons/IconSelector.tsx","../package/DataTableRow.tsx","../package/DataTableRowCell.tsx","../package/DataTableRowExpansion.tsx","../package/DataTableRowSelectorCell.tsx","../package/DataTableScrollArea.tsx","../package/DataTableDraggableRow.tsx"],"sourcesContent":["import { Box, Table, type MantineSize } from '@mantine/core';\nimport { useMergedRef } from '@mantine/hooks';\nimport clsx from 'clsx';\nimport type { RefObject } from 'react';\nimport { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { DataTableColumnsProvider } from './DataTableDragToggleProvider';\nimport { DataTableEmptyRow } from './DataTableEmptyRow';\nimport { DataTableEmptyState } from './DataTableEmptyState';\nimport { DataTableFooter } from './DataTableFooter';\nimport { DataTableHeader } from './DataTableHeader';\nimport { DataTableLoader } from './DataTableLoader';\nimport { DataTablePagination } from './DataTablePagination';\nimport { DataTableRow } from './DataTableRow';\nimport { DataTableScrollArea } from './DataTableScrollArea';\nimport { getTableCssVariables } from './cssVariables';\nimport {\n useDataTableColumns,\n useDataTableInjectCssVariables,\n useLastSelectionChangeIndex,\n useRowExpansion,\n} from './hooks';\nimport type { DataTableProps } from './types';\nimport { TEXT_SELECTION_DISABLED } from './utilityClasses';\nimport { differenceBy, flattenColumns, getRecordId, uniqBy } from './utils';\n\nexport function DataTable({\n withTableBorder,\n borderRadius,\n textSelectionDisabled,\n height = '100%',\n minHeight,\n maxHeight,\n shadow,\n verticalAlign = 'center',\n fetching,\n columns,\n storeColumnsKey,\n groups,\n pinFirstColumn,\n pinLastColumn,\n defaultColumnProps,\n defaultColumnRender,\n idAccessor = 'id',\n records,\n selectionTrigger = 'checkbox',\n selectedRecords,\n onSelectedRecordsChange,\n selectionColumnClassName,\n selectionColumnStyle,\n isRecordSelectable,\n selectionCheckboxProps,\n allRecordsSelectionCheckboxProps = { 'aria-label': 'Select all records' },\n getRecordSelectionCheckboxProps = (_, index) => ({ 'aria-label': `Select record ${index + 1}` }),\n sortStatus,\n sortIcons,\n onSortStatusChange,\n horizontalSpacing,\n page,\n onPageChange,\n totalRecords,\n recordsPerPage,\n onRecordsPerPageChange,\n recordsPerPageOptions,\n recordsPerPageLabel = 'Records per page',\n paginationWithEdges,\n paginationWithControls,\n paginationActiveTextColor,\n paginationActiveBackgroundColor,\n paginationSize = 'sm',\n paginationText = ({ from, to, totalRecords }) => `${from} - ${to} / ${totalRecords}`,\n paginationWrapBreakpoint = 'sm',\n getPaginationControlProps = (control) => {\n if (control === 'previous') {\n return { 'aria-label': 'Previous page' };\n } else if (control === 'next') {\n return { 'aria-label': 'Next page' };\n }\n return {};\n },\n getPaginationItemProps,\n renderPagination,\n loaderBackgroundBlur,\n customLoader,\n loaderSize,\n loaderType,\n loaderColor,\n loadingText = '...',\n emptyState,\n noRecordsText = 'No records',\n noRecordsIcon,\n highlightOnHover,\n striped,\n noHeader,\n onRowClick,\n onRowDoubleClick,\n onRowContextMenu,\n onCellClick,\n onCellDoubleClick,\n onCellContextMenu,\n onScroll,\n onScrollToTop,\n onScrollToBottom,\n onScrollToLeft,\n onScrollToRight,\n c,\n backgroundColor,\n borderColor,\n rowBorderColor,\n stripedColor,\n highlightOnHoverColor,\n rowColor,\n rowBackgroundColor,\n rowExpansion,\n rowClassName,\n rowStyle,\n customRowAttributes,\n scrollViewportRef,\n scrollAreaProps,\n tableRef,\n bodyRef,\n m,\n my,\n mx,\n mt,\n mb,\n ml,\n mr,\n className,\n classNames,\n style,\n styles,\n rowFactory,\n tableWrapper,\n ...otherProps\n}: DataTableProps) {\n const effectiveColumns = useMemo(() => {\n return groups ? flattenColumns(groups) : columns!;\n }, [columns, groups]);\n\n // When columns are resizable, start with auto layout to let the browser\n // compute natural widths, then capture them and switch to fixed layout.\n const [fixedLayoutEnabled, setFixedLayoutEnabled] = useState(false);\n\n const { refs, onScroll: handleScrollPositionChange } = useDataTableInjectCssVariables({\n scrollCallbacks: {\n onScroll,\n onScrollToTop,\n onScrollToBottom,\n onScrollToLeft,\n onScrollToRight,\n },\n withRowBorders: otherProps.withRowBorders,\n });\n\n const dragToggle = useDataTableColumns({\n key: storeColumnsKey,\n columns: effectiveColumns,\n headerRef: refs.header as RefObject,\n scrollViewportRef: refs.scrollViewport as RefObject,\n onFixedLayoutChange: setFixedLayoutEnabled,\n });\n\n const mergedTableRef = useMergedRef(refs.table, tableRef);\n const mergedViewportRef = useMergedRef(refs.scrollViewport, scrollViewportRef);\n const rowExpansionInfo = useRowExpansion({ rowExpansion, records, idAccessor });\n\n // Track when we should reset scroll due to pagination, but defer until data is rendered\n const resetScrollPending = useRef(false);\n const prevPageRef = useRef(page);\n const recordsAtPageChangeRef = useRef(records);\n\n const handlePageChange = useCallback(\n (newPage: number) => {\n resetScrollPending.current = true;\n recordsAtPageChangeRef.current = records;\n onPageChange!(newPage);\n },\n [onPageChange, records]\n );\n\n // Handle externally-driven page changes\n useEffect(() => {\n if (prevPageRef.current !== page) {\n resetScrollPending.current = true;\n recordsAtPageChangeRef.current = records;\n prevPageRef.current = page;\n }\n }, [page, records]);\n\n const recordsLength = records?.length;\n\n // Reset scroll position when changing pages (sync) or when records change (async)\n useLayoutEffect(() => {\n if (!resetScrollPending.current) return;\n if (fetching) return;\n if (records === recordsAtPageChangeRef.current) return;\n\n const viewport = refs.scrollViewport.current;\n if (!viewport) return;\n\n const raf = requestAnimationFrame(() => {\n viewport.scrollTo({ top: 0, left: 0 });\n resetScrollPending.current = false;\n });\n\n return () => cancelAnimationFrame(raf);\n }, [fetching, records, refs.scrollViewport]);\n\n const recordIds = records?.map((record) => getRecordId(record, idAccessor));\n const selectionColumnVisible = !!selectedRecords;\n const selectedRecordIds = selectedRecords?.map((record) => getRecordId(record, idAccessor));\n const hasRecordsAndSelectedRecords =\n recordIds !== undefined && selectedRecordIds !== undefined && selectedRecordIds.length > 0;\n\n const selectableRecords = isRecordSelectable ? records?.filter(isRecordSelectable) : records;\n const selectableRecordIds = selectableRecords?.map((record) => getRecordId(record, idAccessor));\n\n const allSelectableRecordsSelected =\n hasRecordsAndSelectedRecords && selectableRecordIds!.every((id) => selectedRecordIds.includes(id));\n const someRecordsSelected =\n hasRecordsAndSelectedRecords && selectableRecordIds!.some((id) => selectedRecordIds.includes(id));\n\n const handleHeaderSelectionChange = useCallback(() => {\n if (selectedRecords && onSelectedRecordsChange) {\n onSelectedRecordsChange(\n allSelectableRecordsSelected\n ? selectedRecords.filter((record) => !selectableRecordIds!.includes(getRecordId(record, idAccessor)))\n : uniqBy([...selectedRecords, ...selectableRecords!], (record) => getRecordId(record, idAccessor))\n );\n }\n }, [\n allSelectableRecordsSelected,\n idAccessor,\n onSelectedRecordsChange,\n selectableRecordIds,\n selectableRecords,\n selectedRecords,\n ]);\n\n const { lastSelectionChangeIndex, setLastSelectionChangeIndex } = useLastSelectionChangeIndex(recordIds);\n const selectorCellShadowVisible = selectionColumnVisible && !pinFirstColumn;\n\n const marginProperties = { m, my, mx, mt, mb, ml, mr };\n\n const TableWrapper = useCallback(\n ({ children }: { children: React.ReactNode }) => {\n if (tableWrapper) return tableWrapper({ children });\n return children;\n },\n [tableWrapper]\n );\n\n return (\n \n ({\n ...getTableCssVariables({\n theme,\n c,\n backgroundColor,\n borderColor,\n rowBorderColor,\n stripedColor,\n highlightOnHoverColor,\n }),\n borderRadius: theme.radius[borderRadius as MantineSize] || borderRadius,\n boxShadow: theme.shadows[shadow as MantineSize] || shadow,\n height,\n minHeight,\n maxHeight,\n }),\n style,\n styles?.root,\n {\n position: 'relative',\n },\n ]}\n >\n \n \n \n {noHeader ? null : (\n \n \n ref={refs.header}\n selectionColumnHeaderRef={refs.selectionColumnHeader}\n className={classNames?.header}\n style={styles?.header}\n columns={effectiveColumns}\n defaultColumnProps={defaultColumnProps}\n groups={groups}\n sortStatus={sortStatus}\n sortIcons={sortIcons}\n onSortStatusChange={onSortStatusChange}\n selectionTrigger={selectionTrigger}\n selectionVisible={selectionColumnVisible}\n selectionChecked={allSelectableRecordsSelected}\n selectionIndeterminate={someRecordsSelected && !allSelectableRecordsSelected}\n onSelectionChange={handleHeaderSelectionChange}\n selectionCheckboxProps={{ ...selectionCheckboxProps, ...allRecordsSelectionCheckboxProps }}\n selectorCellShadowVisible={selectorCellShadowVisible}\n selectionColumnClassName={selectionColumnClassName}\n selectionColumnStyle={selectionColumnStyle}\n withColumnBorders={otherProps.withColumnBorders}\n />\n \n )}\n \n {recordsLength ? (\n records.map((record, index) => {\n const recordId = getRecordId(record, idAccessor);\n const isSelected = selectedRecordIds?.includes(recordId) || false;\n\n let handleSelectionChange: React.MouseEventHandler | undefined;\n\n if (onSelectedRecordsChange && selectedRecords) {\n handleSelectionChange = (e) => {\n if (e.nativeEvent.shiftKey && lastSelectionChangeIndex !== null) {\n const targetRecords = records.filter(\n index > lastSelectionChangeIndex\n ? (rec, idx) =>\n idx >= lastSelectionChangeIndex &&\n idx <= index &&\n (isRecordSelectable ? isRecordSelectable(rec, idx) : true)\n : (rec, idx) =>\n idx >= index &&\n idx <= lastSelectionChangeIndex &&\n (isRecordSelectable ? isRecordSelectable(rec, idx) : true)\n );\n onSelectedRecordsChange(\n isSelected\n ? differenceBy(selectedRecords, targetRecords, (r) => getRecordId(r, idAccessor))\n : uniqBy([...selectedRecords, ...targetRecords], (r) => getRecordId(r, idAccessor))\n );\n } else {\n onSelectedRecordsChange(\n isSelected\n ? selectedRecords.filter((rec) => getRecordId(rec, idAccessor) !== recordId)\n : uniqBy([...selectedRecords, record], (rec) => getRecordId(rec, idAccessor))\n );\n }\n setLastSelectionChangeIndex(index);\n };\n }\n\n return (\n \n key={recordId as React.Key}\n record={record}\n index={index}\n columns={effectiveColumns}\n defaultColumnProps={defaultColumnProps}\n defaultColumnRender={defaultColumnRender}\n selectionTrigger={selectionTrigger}\n selectionVisible={selectionColumnVisible}\n selectionChecked={isSelected}\n onSelectionChange={handleSelectionChange}\n isRecordSelectable={isRecordSelectable}\n selectionCheckboxProps={selectionCheckboxProps}\n getSelectionCheckboxProps={getRecordSelectionCheckboxProps}\n onClick={onRowClick}\n onDoubleClick={onRowDoubleClick}\n onCellClick={onCellClick}\n onCellDoubleClick={onCellDoubleClick}\n onContextMenu={onRowContextMenu}\n onCellContextMenu={onCellContextMenu}\n expansion={rowExpansionInfo}\n color={rowColor}\n backgroundColor={rowBackgroundColor}\n className={rowClassName}\n style={rowStyle}\n customAttributes={customRowAttributes}\n selectorCellShadowVisible={selectorCellShadowVisible}\n selectionColumnClassName={selectionColumnClassName}\n selectionColumnStyle={selectionColumnStyle}\n idAccessor={idAccessor as string}\n rowFactory={rowFactory}\n />\n );\n })\n ) : (\n \n )}\n \n\n {effectiveColumns.some(({ footer }) => footer) && (\n \n ref={refs.footer}\n className={classNames?.footer}\n style={styles?.footer}\n columns={effectiveColumns}\n defaultColumnProps={defaultColumnProps}\n selectionVisible={selectionColumnVisible}\n selectorCellShadowVisible={selectorCellShadowVisible}\n />\n )}\n \n \n \n {!!(page && recordsLength) && (\n \n )}\n \n \n {emptyState}\n \n \n \n );\n}\n","'use client';\n\nimport { useState, type Dispatch, type PropsWithChildren, type SetStateAction } from 'react';\nimport { DataTableColumnsContextProvider } from './DataTableColumns.context';\nimport type { DataTableColumnToggle } from './hooks';\n\ntype DataTableColumnsProviderProps = PropsWithChildren<{\n columnsOrder: string[];\n setColumnsOrder: Dispatch>;\n resetColumnsOrder: () => void;\n\n columnsToggle: DataTableColumnToggle[];\n setColumnsToggle: Dispatch>;\n resetColumnsToggle: () => void;\n\n setColumnWidth: (accessor: string, width: string | number) => void;\n setMultipleColumnWidths: (updates: Array<{ accessor: string; width: string | number }>) => void;\n resetColumnsWidth: () => void;\n}>;\n\nexport const DataTableColumnsProvider = (props: DataTableColumnsProviderProps) => {\n const {\n children,\n columnsOrder,\n setColumnsOrder,\n columnsToggle,\n setColumnsToggle,\n\n resetColumnsOrder,\n resetColumnsToggle,\n\n setColumnWidth,\n setMultipleColumnWidths,\n resetColumnsWidth,\n } = props;\n\n const [sourceColumn, setSourceColumn] = useState('');\n const [targetColumn, setTargetColumn] = useState('');\n\n const swapColumns = () => {\n if (!columnsOrder || !setColumnsOrder || !sourceColumn || !targetColumn) {\n return;\n }\n const sourceIndex = columnsOrder.indexOf(sourceColumn);\n const targetIndex = columnsOrder.indexOf(targetColumn);\n\n if (sourceIndex !== -1 && targetIndex !== -1) {\n const removedColumn = columnsOrder.splice(sourceIndex, 1)[0];\n\n columnsOrder.splice(targetIndex, 0, removedColumn);\n\n // update the columns order\n setColumnsOrder([...columnsOrder]);\n }\n };\n\n return (\n \n {children}\n \n );\n};\n","import { createSafeContext } from '@mantine/core';\nimport type { Dispatch, SetStateAction } from 'react';\nimport type { DataTableColumnToggle } from './hooks';\n\ninterface DataTableColumnsContext {\n // accessor of the column which is currently dragged\n sourceColumn: string;\n setSourceColumn: Dispatch>;\n\n // accessor of the column which is currently hovered\n targetColumn: string;\n setTargetColumn: Dispatch>;\n\n // swap the source column with the target column\n swapColumns: () => void;\n\n // reset to the default columns order\n resetColumnsOrder: () => void;\n\n columnsToggle: DataTableColumnToggle[];\n setColumnsToggle: Dispatch>;\n resetColumnsToggle: () => void;\n\n setColumnWidth: (accessor: string, width: string | number) => void;\n setMultipleColumnWidths: (updates: Array<{ accessor: string; width: string | number }>) => void;\n resetColumnsWidth: () => void;\n}\n\nexport const [DataTableColumnsContextProvider, useDataTableColumnsContext] = createSafeContext(\n 'useDataTableColumnsContext must be used within DataTableColumnProvider'\n);\n","export function DataTableEmptyRow() {\n return (\n \n \n \n );\n}\n","import { Center, Text } from '@mantine/core';\nimport { IconDatabaseOff } from './icons/IconDatabaseOff';\n\ntype DataTableEmptyStateProps = React.PropsWithChildren<{\n icon: React.ReactNode | undefined;\n text: string;\n active: boolean;\n}>;\n\nexport function DataTableEmptyState({ icon, text, active, children }: DataTableEmptyStateProps) {\n return (\n
\n {children || (\n <>\n {icon || (\n
\n \n
\n )}\n \n {text}\n \n \n )}\n
\n );\n}\n","export function IconDatabaseOff() {\n return (\n \n \n \n \n \n \n \n );\n}\n","import { TableTfoot, TableTr, type MantineStyleProp } from '@mantine/core';\nimport clsx from 'clsx';\nimport { DataTableFooterCell } from './DataTableFooterCell';\nimport { DataTableFooterSelectorPlaceholderCell } from './DataTableFooterSelectorPlaceholderCell';\nimport type { DataTableColumn, DataTableDefaultColumnProps } from './types';\n\ntype DataTableFooterProps = {\n className: string | undefined;\n style: MantineStyleProp | undefined;\n columns: DataTableColumn[];\n defaultColumnProps: DataTableDefaultColumnProps | undefined;\n selectionVisible: boolean;\n selectorCellShadowVisible: boolean;\n ref: React.Ref;\n};\n\nexport function DataTableFooter({\n className,\n style,\n columns,\n defaultColumnProps,\n selectionVisible,\n selectorCellShadowVisible,\n ref,\n}: DataTableFooterProps) {\n return (\n \n \n {selectionVisible && }\n {columns.map(({ hidden, ...columnProps }) => {\n if (hidden) return null;\n\n const {\n accessor,\n visibleMediaQuery,\n textAlign,\n width,\n footer,\n footerClassName,\n footerStyle,\n noWrap,\n ellipsis,\n } = { ...defaultColumnProps, ...columnProps };\n\n return (\n \n key={accessor as React.Key}\n className={footerClassName}\n style={footerStyle}\n visibleMediaQuery={visibleMediaQuery}\n textAlign={textAlign}\n width={width}\n title={footer}\n noWrap={noWrap}\n ellipsis={ellipsis}\n />\n );\n })}\n \n \n );\n}\n","import { TableTh, type MantineStyleProp, type MantineTheme } from '@mantine/core';\nimport clsx from 'clsx';\nimport { useMediaQueryStringOrFunction } from './hooks';\nimport type { DataTableColumn } from './types';\nimport { ELLIPSIS, NOWRAP, TEXT_ALIGN_CENTER, TEXT_ALIGN_LEFT, TEXT_ALIGN_RIGHT } from './utilityClasses';\n\ntype DataTableFooterCellProps = {\n className: string | undefined;\n style: MantineStyleProp | undefined;\n visibleMediaQuery: string | ((theme: MantineTheme) => string) | undefined;\n title: React.ReactNode | undefined;\n} & Pick, 'noWrap' | 'ellipsis' | 'textAlign' | 'width'>;\n\nexport function DataTableFooterCell({\n className,\n style,\n visibleMediaQuery,\n title,\n noWrap,\n ellipsis,\n textAlign,\n width,\n}: DataTableFooterCellProps) {\n if (!useMediaQueryStringOrFunction(visibleMediaQuery)) return null;\n return (\n \n {title}\n \n );\n}\n","import { useCallback, useRef, useState } from 'react';\n\ninterface UseColumnResizeProps {\n onColumnResize: (updates: Array<{ accessor: string; width: string | number }>) => void;\n minColumnWidth?: number;\n}\n\ninterface ResizeState {\n isResizing: boolean;\n startX: number;\n originalWidths: { current: number; next: number };\n currentAccessor: string;\n nextAccessor: string | null;\n}\n\nexport const useColumnResize = ({ onColumnResize, minColumnWidth = 50 }: UseColumnResizeProps) => {\n const [resizeState, setResizeState] = useState(null);\n const currentColumnRef = useRef(null);\n const nextColumnRef = useRef(null);\n\n const startResize = useCallback(\n (event: React.MouseEvent, currentColumn: HTMLTableCellElement, currentAccessor: string) => {\n event.preventDefault();\n event.stopPropagation();\n\n const nextColumn = currentColumn.nextElementSibling as HTMLTableCellElement | null;\n if (!nextColumn) {\n return false;\n }\n\n const nextAccessor = nextColumn.getAttribute('data-accessor');\n if (!nextAccessor) {\n return false;\n }\n\n const currentWidth = currentColumn.getBoundingClientRect().width;\n const nextWidth = nextColumn.getBoundingClientRect().width;\n\n currentColumnRef.current = currentColumn;\n nextColumnRef.current = nextColumn;\n\n setResizeState({\n isResizing: true,\n startX: event.clientX,\n originalWidths: { current: currentWidth, next: nextWidth },\n currentAccessor,\n nextAccessor,\n });\n\n // Global styles for better UX\n document.body.style.cursor = 'col-resize';\n document.body.style.userSelect = 'none';\n\n return true;\n },\n []\n );\n\n const updateResize = useCallback(\n (clientX: number) => {\n if (!resizeState || !currentColumnRef.current || !nextColumnRef.current) return;\n\n const deltaX = clientX - resizeState.startX;\n\n // Calculate the actual delta we can apply based on constraints\n const actualDelta = Math.min(\n deltaX,\n resizeState.originalWidths.next - minColumnWidth // Don't shrink next below minimum\n );\n\n const finalCurrentWidth = resizeState.originalWidths.current + actualDelta;\n const finalNextWidth = resizeState.originalWidths.next - actualDelta;\n\n // Apply to DOM for immediate visual feedback\n currentColumnRef.current.style.width = `${finalCurrentWidth}px`;\n nextColumnRef.current.style.width = `${finalNextWidth}px`;\n\n return { finalCurrentWidth, finalNextWidth };\n },\n [resizeState, minColumnWidth]\n );\n\n const endResize = useCallback(() => {\n if (!resizeState || !currentColumnRef.current || !nextColumnRef.current) return;\n\n // Reset global styles\n document.body.style.cursor = 'initial';\n document.body.style.userSelect = 'initial';\n\n // Get final widths\n const currentWidth = currentColumnRef.current.getBoundingClientRect().width;\n const nextWidth = nextColumnRef.current.getBoundingClientRect().width;\n\n // Update through callback\n const updates = [{ accessor: resizeState.currentAccessor, width: `${currentWidth}px` }];\n\n if (resizeState.nextAccessor) {\n updates.push({ accessor: resizeState.nextAccessor, width: `${nextWidth}px` });\n }\n\n onColumnResize(updates);\n\n // Clean up\n setResizeState(null);\n currentColumnRef.current = null;\n nextColumnRef.current = null;\n }, [resizeState, onColumnResize]);\n\n const cancelResize = useCallback(() => {\n if (!resizeState) return;\n\n // Reset global styles\n document.body.style.cursor = 'initial';\n document.body.style.userSelect = 'initial';\n\n // Reset column widths to original values\n if (currentColumnRef.current) {\n currentColumnRef.current.style.width = `${resizeState.originalWidths.current}px`;\n }\n if (nextColumnRef.current) {\n nextColumnRef.current.style.width = `${resizeState.originalWidths.next}px`;\n }\n\n // Clean up\n setResizeState(null);\n currentColumnRef.current = null;\n nextColumnRef.current = null;\n }, [resizeState]);\n\n const resetColumnWidths = useCallback(\n (currentAccessor: string, nextAccessor?: string) => {\n const updates = [{ accessor: currentAccessor, width: 'initial' }];\n if (nextAccessor) {\n updates.push({ accessor: nextAccessor, width: 'initial' });\n }\n onColumnResize(updates);\n },\n [onColumnResize]\n );\n\n return {\n isResizing: !!resizeState,\n startResize,\n updateResize,\n endResize,\n cancelResize,\n resetColumnWidths,\n };\n};\n","import { useLocalStorage } from '@mantine/hooks';\nimport type { DataTableColumn } from '../types/DataTableColumn';\n\n/**\n * Hook to handle column reordering with localStorage persistence.\n * @see https://icflorescu.github.io/mantine-datatable/examples/column-dragging-and-toggling/\n */\nexport function useDataTableColumnReorder({\n key,\n columns = [],\n getInitialValueInEffect = true,\n}: {\n /**\n * The key to use in localStorage to store the columns order.\n */\n key: string | undefined;\n /**\n * Columns definitions.\n */\n columns: DataTableColumn[];\n /**\n * If set to true, value will be updated in useEffect after mount.\n * @default true\n */\n getInitialValueInEffect?: boolean;\n}) {\n // Align order with current columns definition\n function alignColumnsOrder(columnsOrder: string[], columns: DataTableColumn[]) {\n const updatedColumnsOrder: string[] = [];\n\n // Keep existing order for columns that still exist\n columnsOrder.forEach((col) => {\n if (columns.find((c) => c.accessor === col)) {\n updatedColumnsOrder.push(col);\n }\n });\n\n // Add new columns to the end\n columns.forEach((col) => {\n if (!updatedColumnsOrder.includes(col.accessor as string)) {\n updatedColumnsOrder.push(col.accessor as string);\n }\n });\n\n return updatedColumnsOrder;\n }\n\n // Default columns order is the order of the columns in the array\n const defaultColumnsOrder = (columns && columns.map((column) => column.accessor)) || [];\n\n const [columnsOrder, _setColumnsOrder] = useLocalStorage({\n key: key ? `${key}-columns-order` : '',\n defaultValue: key ? (defaultColumnsOrder as string[]) : undefined,\n getInitialValueInEffect,\n });\n\n function setColumnsOrder(order: string[] | ((prev: string[]) => string[])) {\n if (key) {\n _setColumnsOrder(order);\n }\n }\n\n const resetColumnsOrder = () => {\n setColumnsOrder(defaultColumnsOrder as string[]);\n };\n\n // If no key is provided, return unmanaged state\n if (!key) {\n return {\n columnsOrder: columnsOrder as string[],\n setColumnsOrder,\n resetColumnsOrder,\n } as const;\n }\n\n // Align order with current columns\n const alignedColumnsOrder = alignColumnsOrder(columnsOrder, columns);\n const prevColumnsOrder = JSON.stringify(columnsOrder);\n\n if (JSON.stringify(alignedColumnsOrder) !== prevColumnsOrder) {\n setColumnsOrder(alignedColumnsOrder);\n }\n\n return {\n columnsOrder: alignedColumnsOrder,\n setColumnsOrder,\n resetColumnsOrder,\n } as const;\n}\n","import { useLocalStorage } from '@mantine/hooks';\nimport { useCallback, useEffect, useMemo, useRef, useState, type RefObject } from 'react';\nimport type { DataTableColumn } from '../types/DataTableColumn';\n\ntype DataTableColumnWidth = Record;\n\n/**\n * Hook to handle column resizing with localStorage persistence and auto-resize calculation.\n * @see https://icflorescu.github.io/mantine-datatable/examples/column-resizing/\n */\nexport function useDataTableColumnResize({\n key,\n columns = [],\n getInitialValueInEffect = true,\n headerRef,\n onFixedLayoutChange,\n}: {\n /**\n * The key to use in localStorage to store the columns width.\n */\n key: string | undefined;\n /**\n * Columns definitions.\n */\n columns: DataTableColumn[];\n /**\n * If set to true, value will be updated in useEffect after mount.\n * @default true\n */\n getInitialValueInEffect?: boolean;\n /**\n * Reference to the table header element for measuring column widths.\n */\n headerRef?: RefObject;\n /**\n * Reference to the scroll viewport for calculating overflow.\n */\n scrollViewportRef?: RefObject;\n /**\n * Callback to control fixed layout state in the parent component.\n */\n onFixedLayoutChange?: (enabled: boolean) => void;\n}) {\n const isInitializedRef = useRef(false);\n const naturalWidthsRef = useRef>({});\n const [isSSR, setIsSSR] = useState(true);\n\n // Check if columns have resizable feature\n const hasResizableColumns = useMemo(() => {\n return columns.some((c) => c.resizable && !c.hidden && c.accessor !== '__selection__');\n }, [columns]);\n\n // Get resizable columns\n const resizableColumns = useMemo(() => {\n return columns.filter((c) => c.resizable && !c.hidden && c.accessor !== '__selection__');\n }, [columns]);\n\n // Check if we need to measure natural widths (columns without explicit width)\n const needsNaturalMeasurement = useMemo(() => {\n return resizableColumns.some((c) => c.width === undefined || c.width === '' || c.width === 'initial');\n }, [resizableColumns]);\n\n // Create default column widths - use explicit widths or 'auto' for natural sizing\n // Exclude selection column from width management\n const getDefaultColumnsWidth = useCallback(() => {\n return columns\n .filter((column) => column.accessor !== '__selection__')\n .map((column) => ({\n [column.accessor]: column.width ?? 'auto',\n }));\n }, [columns]);\n\n const [storedColumnsWidth, setStoredColumnsWidth] = useLocalStorage({\n key: key ? `${key}-columns-width` : '',\n defaultValue: key ? getDefaultColumnsWidth() : undefined,\n getInitialValueInEffect: false, // We'll handle initialization manually\n });\n\n // Current effective column widths (combines stored + measured natural widths)\n const [effectiveColumnsWidth, setEffectiveColumnsWidth] = useState(() =>\n getDefaultColumnsWidth()\n );\n\n // Handle SSR\n useEffect(() => {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setIsSSR(false);\n }, []);\n\n // Measure natural widths of columns\n const measureNaturalWidths = useCallback(() => {\n if (!headerRef?.current || isSSR) return {};\n\n const thead = headerRef.current;\n const headerCells = Array.from(thead.querySelectorAll('th[data-accessor]'));\n const naturalWidths: Record = {};\n\n headerCells.forEach((cell) => {\n const accessor = cell.getAttribute('data-accessor');\n if (!accessor || accessor === '__selection__') return;\n\n const column = resizableColumns.find((c) => c.accessor === accessor);\n if (!column) return;\n\n // Only measure if column doesn't have explicit width\n if (column.width === undefined || column.width === '' || column.width === 'initial') {\n const rect = cell.getBoundingClientRect();\n naturalWidths[accessor] = Math.round(rect.width);\n }\n });\n\n return naturalWidths;\n }, [headerRef, resizableColumns, isSSR]);\n\n // Update column widths (both stored and effective)\n // Filter out selection column from updates\n const updateColumnWidths = useCallback(\n (updates: Array<{ accessor: string; width: string | number }>) => {\n // Filter out any updates to the selection column\n const filteredUpdates = updates.filter((update) => update.accessor !== '__selection__');\n\n const newWidths = effectiveColumnsWidth.map((column) => {\n const accessor = Object.keys(column)[0];\n const update = filteredUpdates.find((u) => u.accessor === accessor);\n\n if (update) {\n return { [accessor]: update.width };\n }\n return column;\n });\n\n setEffectiveColumnsWidth(newWidths);\n\n // Also update stored widths if we have a key\n if (key) {\n setStoredColumnsWidth(newWidths);\n }\n },\n [effectiveColumnsWidth, key, setStoredColumnsWidth]\n );\n\n const setMultipleColumnWidths = useCallback(\n (updates: Array<{ accessor: string; width: string | number }>) => {\n updateColumnWidths(updates);\n },\n [updateColumnWidths]\n );\n\n // Initialize column widths (measure natural widths and apply stored widths)\n const initializeColumnWidths = useCallback(() => {\n if (!headerRef?.current || !onFixedLayoutChange || isSSR) return;\n\n // First, measure natural widths if needed\n if (needsNaturalMeasurement) {\n // Temporarily use auto layout to get natural widths\n onFixedLayoutChange(false);\n\n // Wait for layout to settle, then measure\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n const naturalWidths = measureNaturalWidths();\n naturalWidthsRef.current = { ...naturalWidthsRef.current, ...naturalWidths };\n\n // Create effective widths combining stored and natural widths\n // Exclude selection column from width management\n const newEffectiveWidths = columns\n .filter((column) => column.accessor !== '__selection__')\n .map((column) => {\n const accessor = column.accessor as string;\n\n // Check if we have a stored width for this column\n const storedWidth = storedColumnsWidth?.find((w) => Object.keys(w)[0] === accessor);\n if (storedWidth && storedWidth[accessor] !== 'auto') {\n return { [accessor]: storedWidth[accessor] };\n }\n\n // Use natural width if available, otherwise use column definition or auto\n const naturalWidth = naturalWidths[accessor];\n if (naturalWidth) {\n return { [accessor]: `${naturalWidth}px` };\n }\n\n return { [accessor]: column.width ?? 'auto' };\n });\n\n setEffectiveColumnsWidth(newEffectiveWidths);\n\n // Switch to fixed layout for resizing\n setTimeout(() => {\n onFixedLayoutChange(true);\n isInitializedRef.current = true;\n }, 10);\n });\n });\n } else {\n // All columns have explicit widths, use them directly\n // Exclude selection column from width management\n const explicitWidths = columns\n .filter((column) => column.accessor !== '__selection__')\n .map((column) => ({\n [column.accessor]: column.width ?? 'auto',\n }));\n\n setEffectiveColumnsWidth(explicitWidths);\n onFixedLayoutChange(true);\n isInitializedRef.current = true;\n }\n }, [\n headerRef,\n onFixedLayoutChange,\n isSSR,\n needsNaturalMeasurement,\n measureNaturalWidths,\n columns,\n storedColumnsWidth,\n ]);\n\n const measureAndSetColumnWidths = initializeColumnWidths;\n\n // Initialize on mount and when columns change\n useEffect(() => {\n if (!hasResizableColumns || !onFixedLayoutChange || isSSR) {\n onFixedLayoutChange?.(false);\n return;\n }\n\n // Reset initialization flag when columns change\n isInitializedRef.current = false;\n\n // Initialize after a short delay to ensure DOM is ready\n const timeoutId = setTimeout(() => {\n initializeColumnWidths();\n }, 50);\n\n return () => clearTimeout(timeoutId);\n }, [hasResizableColumns, onFixedLayoutChange, isSSR, initializeColumnWidths]);\n\n // Load stored widths on client-side hydration\n useEffect(() => {\n if (isSSR || !key || !getInitialValueInEffect) return;\n\n // Apply stored widths if available\n if (storedColumnsWidth && storedColumnsWidth.length > 0) {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setEffectiveColumnsWidth(storedColumnsWidth);\n }\n }, [isSSR, key, getInitialValueInEffect, storedColumnsWidth]);\n // Reset all columns to their natural/initial widths\n const resetColumnsWidth = useCallback(() => {\n // Clear stored widths\n if (key) {\n setStoredColumnsWidth(getDefaultColumnsWidth());\n }\n\n // Reset to natural widths\n naturalWidthsRef.current = {};\n isInitializedRef.current = false;\n\n // Re-initialize to measure natural widths\n if (onFixedLayoutChange) {\n onFixedLayoutChange(false);\n setTimeout(() => {\n initializeColumnWidths();\n }, 10);\n }\n }, [key, setStoredColumnsWidth, getDefaultColumnsWidth, onFixedLayoutChange, initializeColumnWidths]);\n\n // Set width for a single column\n const setColumnWidth = useCallback(\n (accessor: string, width: string | number) => {\n updateColumnWidths([{ accessor, width }]);\n },\n [updateColumnWidths]\n );\n\n // Check if all resizable columns are using auto/natural widths\n const allResizableWidthsInitial = useMemo(() => {\n if (!hasResizableColumns) return false;\n return effectiveColumnsWidth\n .filter((colWidth) => {\n const accessor = Object.keys(colWidth)[0];\n return resizableColumns.some((c) => c.accessor === accessor);\n })\n .every((colWidth) => {\n const width = Object.values(colWidth)[0];\n return width === 'auto' || width === 'initial';\n });\n }, [hasResizableColumns, effectiveColumnsWidth, resizableColumns]);\n\n return {\n columnsWidth: effectiveColumnsWidth,\n setColumnsWidth: updateColumnWidths,\n setColumnWidth,\n setMultipleColumnWidths,\n resetColumnsWidth,\n hasResizableColumns,\n allResizableWidthsInitial,\n measureAndSetColumnWidths,\n } as const;\n}\n","import { useMemo, type RefObject } from 'react';\nimport type { DataTableColumn } from '../types/DataTableColumn';\nimport { useDataTableColumnReorder } from './useDataTableColumnReorder';\nimport { useDataTableColumnResize } from './useDataTableColumnResize';\nimport { useDataTableColumnToggle, type DataTableColumnToggle } from './useDataTableColumnToggle';\n\nexport type { DataTableColumnToggle };\n\n/**\n * Hook to handle column features such as drag-and-drop reordering, visibility toggling and resizing.\n * @see https://icflorescu.github.io/mantine-datatable/examples/column-dragging-and-toggling/\n */\nexport const useDataTableColumns = ({\n key,\n columns = [],\n getInitialValueInEffect = true,\n headerRef,\n scrollViewportRef,\n onFixedLayoutChange,\n}: {\n /**\n * The key to use in localStorage to store the columns order and toggle state.\n */\n key: string | undefined;\n /**\n * Columns definitions.\n */\n columns: DataTableColumn[];\n /**\n * If set to true, value will be updated in useEffect after mount.\n * @default true\n */\n getInitialValueInEffect?: boolean;\n /**\n * Reference to the table header element for measuring column widths.\n */\n headerRef?: RefObject;\n /**\n * Reference to the scroll viewport for calculating overflow.\n */\n scrollViewportRef?: RefObject;\n /**\n * Callback to control fixed layout state in the parent component.\n */\n onFixedLayoutChange?: (enabled: boolean) => void;\n}) => {\n // Use specialized hooks for each feature\n const { columnsOrder, setColumnsOrder, resetColumnsOrder } = useDataTableColumnReorder({\n key,\n columns,\n getInitialValueInEffect,\n });\n\n const { columnsToggle, setColumnsToggle, resetColumnsToggle } = useDataTableColumnToggle({\n key,\n columns,\n getInitialValueInEffect,\n });\n\n const {\n columnsWidth,\n setColumnsWidth,\n setColumnWidth,\n setMultipleColumnWidths,\n resetColumnsWidth,\n hasResizableColumns,\n allResizableWidthsInitial,\n measureAndSetColumnWidths,\n } = useDataTableColumnResize({\n key,\n columns,\n getInitialValueInEffect,\n headerRef,\n scrollViewportRef,\n onFixedLayoutChange,\n });\n\n // Compute effective columns based on order, toggle, and width\n const effectiveColumns = useMemo(() => {\n if (!columnsOrder) {\n return columns;\n }\n\n const result = columnsOrder\n .map((order) => columns.find((column) => column.accessor === order))\n .map((column) => {\n return {\n ...column,\n hidden:\n column?.hidden ||\n !columnsToggle.find((toggle) => {\n return toggle.accessor === column?.accessor;\n })?.toggled,\n };\n }) as DataTableColumn[];\n\n const newWidths = result.map((column) => {\n // Skip width application for selection column\n if (column?.accessor === '__selection__') {\n return column;\n }\n\n return {\n ...column,\n width: columnsWidth.find((width) => {\n return width[column?.accessor as string];\n })?.[column?.accessor as string],\n };\n });\n\n return newWidths;\n }, [columns, columnsOrder, columnsToggle, columnsWidth]);\n\n return {\n effectiveColumns: effectiveColumns as DataTableColumn[],\n\n // Order handling\n setColumnsOrder,\n columnsOrder: columnsOrder as string[],\n resetColumnsOrder,\n\n // Toggle handling\n columnsToggle: columnsToggle as DataTableColumnToggle[],\n setColumnsToggle,\n resetColumnsToggle,\n\n // Resize handling\n columnsWidth,\n setColumnsWidth,\n setColumnWidth,\n setMultipleColumnWidths,\n resetColumnsWidth,\n hasResizableColumns,\n allResizableWidthsInitial,\n measureAndSetColumnWidths,\n } as const;\n};\n","import { useLocalStorage } from '@mantine/hooks';\nimport type { DataTableColumn } from '../types/DataTableColumn';\n\nexport type DataTableColumnToggle = {\n accessor: string;\n defaultToggle: boolean;\n toggleable: boolean;\n toggled: boolean;\n};\n\n/**\n * Hook to handle column visibility toggling with localStorage persistence.\n * @see https://icflorescu.github.io/mantine-datatable/examples/column-dragging-and-toggling/\n */\nexport function useDataTableColumnToggle({\n key,\n columns = [],\n getInitialValueInEffect = true,\n}: {\n /**\n * The key to use in localStorage to store the columns toggle state.\n */\n key: string | undefined;\n /**\n * Columns definitions.\n */\n columns: DataTableColumn[];\n /**\n * If set to true, value will be updated in useEffect after mount.\n * @default true\n */\n getInitialValueInEffect?: boolean;\n}) {\n // Align toggle state with current columns definition\n function alignColumnsToggle(columnsToggle: DataTableColumnToggle[], columns: DataTableColumn[]) {\n const updatedColumnsToggle: DataTableColumnToggle[] = [];\n\n // Keep existing toggle states for columns that still exist\n columnsToggle.forEach((col) => {\n if (columns.find((c) => c.accessor === col.accessor)) {\n updatedColumnsToggle.push(col);\n }\n });\n\n // Add toggle state for new columns\n columns.forEach((col) => {\n if (!updatedColumnsToggle.find((c) => c.accessor === col.accessor)) {\n updatedColumnsToggle.push({\n accessor: col.accessor as string,\n defaultToggle: col.defaultToggle || true,\n toggleable: col.toggleable as boolean,\n toggled: col.defaultToggle === undefined ? true : col.defaultToggle,\n });\n }\n });\n\n return updatedColumnsToggle as DataTableColumnToggle[];\n }\n\n // Default columns toggle state\n const defaultColumnsToggle =\n columns &&\n columns.map((column) => ({\n accessor: column.accessor,\n defaultToggle: column.defaultToggle || true,\n toggleable: column.toggleable,\n toggled: column.defaultToggle === undefined ? true : column.defaultToggle,\n }));\n\n const [columnsToggle, _setColumnsToggle] = useLocalStorage({\n key: key ? `${key}-columns-toggle` : '',\n defaultValue: key ? (defaultColumnsToggle as DataTableColumnToggle[]) : undefined,\n getInitialValueInEffect,\n });\n\n function setColumnsToggle(\n toggle: DataTableColumnToggle[] | ((prev: DataTableColumnToggle[]) => DataTableColumnToggle[])\n ) {\n if (key) {\n _setColumnsToggle(toggle);\n }\n }\n\n const resetColumnsToggle = () => {\n setColumnsToggle(defaultColumnsToggle as DataTableColumnToggle[]);\n };\n\n // If no key is provided, return unmanaged state\n if (!key) {\n return {\n columnsToggle: columnsToggle as DataTableColumnToggle[],\n setColumnsToggle,\n resetColumnsToggle,\n } as const;\n }\n\n // Align toggle state with current columns\n const alignedColumnsToggle = alignColumnsToggle(columnsToggle, columns);\n const prevColumnsToggle = JSON.stringify(columnsToggle);\n\n if (JSON.stringify(alignedColumnsToggle) !== prevColumnsToggle) {\n setColumnsToggle(alignedColumnsToggle);\n }\n\n return {\n columnsToggle: alignedColumnsToggle,\n setColumnsToggle,\n resetColumnsToggle,\n } as const;\n}\n","import { rem } from '@mantine/core';\nimport { useCallback, useEffect, useRef } from 'react';\nimport type { DataTableScrollProps } from '../types/DataTableScrollProps';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\nimport { useStableValue } from './useStableValue';\n\nconst VAR_HEADER_HEIGHT = '--mantine-datatable-header-height';\nconst VAR_FOOTER_HEIGHT = '--mantine-datatable-footer-height';\nconst VAR_SELECTION_COLUMN_WIDTH = '--mantine-datatable-selection-column-width';\nconst VAR_LAST_ROW_BORDER_BOTTOM = '--mantine-datatable-last-row-border-bottom';\n\ninterface UseDataTableInjectCssVariablesOpts {\n scrollCallbacks: DataTableScrollProps;\n withRowBorders: boolean | undefined;\n}\n\ntype OnScroll = NonNullable;\n\ntype Rect = {\n width: number;\n height: number;\n};\n\ntype Pos = 'top' | 'bottom' | 'left' | 'right';\n\nfunction setCssVar(root: HTMLDivElement | null, name: string, value: string) {\n root?.style.setProperty(name, value);\n}\n\nfunction getRect(entry: ResizeObserverEntry): Rect {\n const boxSize = entry.borderBoxSize?.[0] || entry.contentBoxSize?.[0];\n if (boxSize) {\n return {\n width: boxSize.inlineSize,\n height: boxSize.blockSize,\n };\n } else {\n return { width: entry.contentRect.width, height: entry.contentRect.height };\n }\n}\n\nfunction observe(elem: HTMLElement | null, onChange: (rect: Rect) => unknown, onCancel: () => unknown) {\n if (elem) {\n const observer = new ResizeObserver((entries) => {\n const entry = entries[0];\n if (entry) {\n onChange(getRect(entry));\n }\n });\n observer.observe(elem);\n return () => {\n observer.disconnect();\n onCancel();\n };\n }\n}\n\nexport function useDataTableInjectCssVariables({\n scrollCallbacks,\n withRowBorders,\n}: UseDataTableInjectCssVariablesOpts) {\n const refs = {\n root: useRef(null),\n table: useRef(null),\n scrollViewport: useRef(null),\n header: useRef(null),\n footer: useRef(null),\n selectionColumnHeader: useRef(null),\n };\n const { root, table, scrollViewport, header, footer, selectionColumnHeader } = refs;\n\n const stableDependencies = useStableValue({ withRowBorders });\n const stableScrollCallbacks = useStableValue(scrollCallbacks);\n const processScrollingRef = useRef<() => void>(() => void 0);\n const processLastRowBottomBorderRef = useRef<() => void>(() => void 0);\n const onScroll = useCallback((ev) => {\n stableScrollCallbacks.current.onScroll?.(ev);\n processScrollingRef.current();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n return observe(\n header.current,\n (rect) => {\n setCssVar(root.current, VAR_HEADER_HEIGHT, `${rect.height}px`);\n },\n () => setCssVar(root.current, VAR_HEADER_HEIGHT, '0')\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [header.current]);\n\n useEffect(() => {\n return observe(\n footer.current,\n (rect) => {\n setCssVar(root.current, VAR_FOOTER_HEIGHT, `${rect.height}px`);\n },\n () => setCssVar(root.current, VAR_FOOTER_HEIGHT, '0')\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [footer.current]);\n\n useEffect(() => {\n return observe(\n selectionColumnHeader.current,\n (rect) => {\n setCssVar(root.current, VAR_SELECTION_COLUMN_WIDTH, `${rect.width}px`);\n },\n () => setCssVar(root.current, VAR_SELECTION_COLUMN_WIDTH, '0')\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectionColumnHeader.current]);\n\n useIsomorphicLayoutEffect(() => {\n if (typeof window === undefined) {\n return;\n }\n const scrollPosition: Record = {\n top: true,\n bottom: true,\n left: true,\n right: true,\n };\n let tableRect: Rect = { width: 0, height: 0 };\n let scrollRect: Rect = { width: 0, height: 0 };\n\n function setScrolledTo(pos: Pos, value: boolean) {\n const old = scrollPosition[pos];\n scrollPosition[pos] = value;\n setCssVar(root.current, `--mantine-datatable-${pos}-shadow-opacity`, value ? '0' : '1');\n return old;\n }\n\n function processFooterPosition() {\n const diff = tableRect.height - scrollRect.height;\n const relative = diff < 0;\n setCssVar(root.current, '--mantine-datatable-footer-position', relative ? 'relative' : 'sticky');\n setCssVar(root.current, '--mantine-datatable-footer-bottom', relative ? `${diff}px` : '0');\n }\n\n function processLastRowBottomBorder() {\n if (stableDependencies.current.withRowBorders && tableRect.height < scrollRect.height) {\n setCssVar(\n root.current,\n VAR_LAST_ROW_BORDER_BOTTOM,\n `${rem('1px')} solid var(--mantine-datatable-border-color)`\n );\n } else {\n setCssVar(root.current, VAR_LAST_ROW_BORDER_BOTTOM, 'unset');\n }\n }\n processLastRowBottomBorderRef.current = processLastRowBottomBorder;\n\n function processScrolling() {\n const callbacks = stableScrollCallbacks.current;\n const viewport = scrollViewport.current;\n const scrollTop = viewport?.scrollTop ?? 0;\n const scrollLeft = viewport?.scrollLeft ?? 0;\n\n const newScrolledToTop = scrollTop === 0;\n const newScrolledToBottom = tableRect.height - scrollTop - scrollRect.height < 1;\n const scrolledToTop = setScrolledTo('top', newScrolledToTop);\n const scrolledToBottom = setScrolledTo('bottom', newScrolledToBottom);\n if (newScrolledToTop && newScrolledToTop !== scrolledToTop) callbacks.onScrollToTop?.();\n if (newScrolledToBottom && newScrolledToBottom !== scrolledToBottom) callbacks.onScrollToBottom?.();\n\n // In RTL mode, scrollLeft behavior varies by browser:\n // - Chrome/Edge: starts at 0, goes negative when scrolling left (towards visual left)\n // - Firefox: starts at 0, goes negative when scrolling left\n // - Safari: starts at 0, goes negative when scrolling left\n // The key insight: in RTL, scrollLeft=0 means we're at the RIGHT edge (visual start)\n // and negative/max values mean we're at the LEFT edge (visual end)\n const isRtl = viewport ? getComputedStyle(viewport).direction === 'rtl' : false;\n const maxScrollLeft = (viewport?.scrollWidth ?? 0) - scrollRect.width;\n\n let newScrolledToLeft: boolean;\n let newScrolledToRight: boolean;\n\n if (isRtl) {\n // In RTL with modern browsers, scrollLeft is 0 at right edge, negative when scrolling left\n const absScrollLeft = Math.abs(scrollLeft);\n // At right edge (RTL start): absScrollLeft ≈ 0, so scrolledToRight = true (no right shadow)\n // At left edge (RTL end): absScrollLeft ≈ maxScrollLeft, so scrolledToLeft = true (no left shadow)\n newScrolledToRight = absScrollLeft < 1;\n newScrolledToLeft = maxScrollLeft - absScrollLeft < 1;\n } else {\n newScrolledToLeft = scrollLeft < 1;\n newScrolledToRight = tableRect.width - scrollLeft - scrollRect.width < 1;\n }\n\n const scrolledToLeft = setScrolledTo('left', newScrolledToLeft);\n const scrolledToRight = setScrolledTo('right', newScrolledToRight);\n if (newScrolledToLeft && newScrolledToLeft !== scrolledToLeft) callbacks.onScrollToLeft?.();\n if (newScrolledToRight && newScrolledToRight !== scrolledToRight) callbacks.onScrollToRight?.();\n }\n processScrollingRef.current = processScrolling;\n const observer = new ResizeObserver((entries) => {\n for (const entry of entries) {\n switch (entry.target.tagName) {\n case 'TABLE': {\n tableRect = getRect(entry);\n break;\n }\n case 'DIV': {\n scrollRect = getRect(entry);\n break;\n }\n }\n }\n processScrolling();\n processFooterPosition();\n processLastRowBottomBorder();\n });\n\n observer.observe(table.current!);\n observer.observe(scrollViewport.current!);\n\n return () => {\n observer.disconnect();\n };\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n processLastRowBottomBorderRef.current();\n }, [withRowBorders]);\n\n return {\n refs,\n onScroll,\n };\n}\n","import { useEffect, useLayoutEffect } from 'react';\n\nexport const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n","import { useRef } from 'react';\n\nexport interface ReadonlyRef {\n readonly current: T;\n}\n\nexport function useStableValue(value: T): ReadonlyRef {\n const ref = useRef(value);\n // eslint-disable-next-line react-hooks/refs\n ref.current = value;\n return ref;\n}\n","import { useEffect, useState } from 'react';\n\nexport function useLastSelectionChangeIndex(recordIds: unknown[] | undefined) {\n const [lastSelectionChangeIndex, setLastSelectionChangeIndex] = useState(null);\n const recordIdsString = recordIds?.join(':') || '';\n useEffect(() => {\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setLastSelectionChangeIndex(null);\n }, [recordIdsString]);\n\n return { lastSelectionChangeIndex, setLastSelectionChangeIndex };\n}\n","// Modified from https://github.com/mantinedev/mantine/blob/8c12a76c56da51af34213f18dd67c8b72a0ddb44/src/mantine-hooks/src/use-media-query/use-media-query.ts\n\nimport { useEffect, useRef, useState } from 'react';\n\nexport interface UseMediaQueryOptions {\n getInitialValueInEffect: boolean;\n}\n\n/**\n * Older versions of Safari (shipped with Catalina and before) do not support addEventListener on matchMedia\n * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent\n * */\nfunction attachMediaListeners(queries: MediaQueryList[], callback: (matches: boolean[]) => void) {\n const callbackWrapper = () => {\n callback(queries.map((query) => query.matches));\n };\n const subscriptions = queries.map((query) => {\n try {\n query.addEventListener('change', callbackWrapper);\n return () => query.removeEventListener('change', callbackWrapper);\n } catch {\n query.addListener(callbackWrapper);\n return () => query.removeListener(callbackWrapper);\n }\n });\n return () => {\n subscriptions.forEach((unsubscribe) => unsubscribe());\n };\n}\n\nfunction getInitialValue(queries: string[], initialValues?: boolean[]) {\n if (initialValues) {\n return initialValues;\n }\n\n if (typeof window !== 'undefined' && 'matchMedia' in window) {\n return queries.map((query) => window.matchMedia(query).matches);\n }\n\n return queries.map(() => false);\n}\n\nexport function useMediaQueries(\n queries: string[],\n initialValues?: boolean[],\n { getInitialValueInEffect }: UseMediaQueryOptions = {\n getInitialValueInEffect: true,\n }\n) {\n const [matches, setMatches] = useState(\n getInitialValueInEffect ? initialValues : getInitialValue(queries, initialValues)\n );\n const queryRef = useRef(null);\n\n useEffect(() => {\n if ('matchMedia' in window) {\n queryRef.current = queries.map((query) => window.matchMedia(query));\n setMatches(queryRef.current.map((queryResult) => queryResult.matches));\n return attachMediaListeners(queryRef.current, (event) => {\n setMatches(event);\n });\n }\n\n return undefined;\n }, [queries]);\n\n return matches;\n}\n","import { useMantineTheme, type MantineTheme } from '@mantine/core';\nimport { useMemo } from 'react';\nimport { useMediaQueries } from './useMediaQueries';\n\nexport function useMediaQueriesStringOrFunction(queries: (string | ((theme: MantineTheme) => string) | undefined)[]) {\n const theme = useMantineTheme();\n const values = useMemo(\n () => queries.map((query) => (typeof query === 'function' ? query(theme) : query) ?? ''),\n [queries, theme]\n );\n const defaults = useMemo(() => queries.map(() => true), [queries]);\n return useMediaQueries(values, defaults);\n}\n","import { useMantineTheme, type MantineTheme } from '@mantine/core';\nimport { useMediaQuery } from '@mantine/hooks';\n\nexport function useMediaQueryStringOrFunction(mediaQuery: string | ((theme: MantineTheme) => string) | undefined) {\n const theme = useMantineTheme();\n const mediaQueryValue = typeof mediaQuery === 'function' ? mediaQuery(theme) : mediaQuery;\n return useMediaQuery(mediaQueryValue || '', true);\n}\n","import { useState } from 'react';\nimport type { DataTableRowExpansionProps } from '../types/DataTableRowExpansionProps';\nimport { getRecordId } from '../utils';\n\nexport function useRowExpansion({\n rowExpansion,\n records,\n idAccessor,\n}: {\n rowExpansion?: DataTableRowExpansionProps;\n records: T[] | undefined;\n idAccessor: (keyof T | (string & NonNullable)) | ((record: T) => React.Key);\n}) {\n let initiallyExpandedRecordIds: unknown[] = [];\n if (rowExpansion && records) {\n const { trigger, allowMultiple, initiallyExpanded } = rowExpansion;\n if (records && trigger === 'always') {\n initiallyExpandedRecordIds = records.map((r) => getRecordId(r, idAccessor));\n } else if (initiallyExpanded) {\n initiallyExpandedRecordIds = records\n .filter((record, index) => initiallyExpanded({ record, index }))\n .map((r) => getRecordId(r, idAccessor));\n if (!allowMultiple) {\n initiallyExpandedRecordIds = [initiallyExpandedRecordIds[0]];\n }\n }\n }\n\n let expandedRecordIds: unknown[];\n let setExpandedRecordIds: ((expandedRecordIds: unknown[]) => void) | undefined;\n const expandedRecordIdsState = useState(initiallyExpandedRecordIds);\n\n if (rowExpansion) {\n const { expandable, trigger, allowMultiple, collapseProps, content } = rowExpansion;\n if (rowExpansion.expanded) {\n ({ recordIds: expandedRecordIds, onRecordIdsChange: setExpandedRecordIds } = rowExpansion.expanded);\n } else {\n [expandedRecordIds, setExpandedRecordIds] = expandedRecordIdsState;\n }\n\n const collapseRow = (record: T) =>\n setExpandedRecordIds?.(expandedRecordIds.filter((id) => id !== getRecordId(record, idAccessor)));\n\n return {\n expandOnClick: trigger !== 'always' && trigger !== 'never',\n isRowExpanded: (record: T) =>\n trigger === 'always' ? true : expandedRecordIds.includes(getRecordId(record, idAccessor)),\n isExpandable: ({ record, index }: { record: T; index: number }) => {\n if (!expandable) {\n return true;\n }\n return expandable({ record, index });\n },\n expandRow: (record: T) => {\n const recordId = getRecordId(record, idAccessor);\n setExpandedRecordIds?.(allowMultiple ? [...expandedRecordIds, recordId] : [recordId]);\n },\n collapseRow,\n collapseProps,\n content:\n ({ record, index }: { record: T; index: number }) =>\n () =>\n content({ record, index, collapse: () => collapseRow(record) }),\n };\n }\n}\n","import type { DropResult } from '@hello-pangea/dnd';\nimport type { DataTableColumn, DataTableColumnGroup } from './types';\n\n/**\n * Utility function that returns a humanized version of a string, e.g. \"camelCase\" -> \"Camel Case\"\n */\nexport function humanize(value: string) {\n const str = value\n .replace(/([a-z\\d])([A-Z]+)/g, '$1 $2')\n .replace(/\\W|_/g, ' ')\n .trim()\n .toLowerCase();\n return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;\n}\n\n/**\n * Utility function that returns an array of values that are present in the first array but not in the second\n */\nexport function differenceBy(arr1: T[], arr2: T[], iteratee: (value: T) => unknown) {\n return arr1.filter((c) => !arr2.map(iteratee).includes(iteratee(c)));\n}\n\n/**\n * Utility function that returns an array of unique values from a given array\n */\nexport function uniqBy(arr: T[], iteratee: (value: T) => unknown) {\n return arr.filter((x, i, self) => i === self.findIndex((y) => iteratee(x) === iteratee(y)));\n}\n\n/**\n * Utility function that returns the value at a given path in an object\n */\nexport function getValueAtPath(obj: T, path: keyof T | (string & NonNullable)) {\n if (!path) return undefined;\n const pathArray = (path as string).match(/([^[.\\]])+/g) as string[];\n return pathArray.reduce((prevObj: unknown, key) => prevObj && (prevObj as Record)[key], obj);\n}\n\n/**\n * Utility function that returns the record id using idAccessor\n */\nexport function getRecordId(\n record: T,\n idAccessor: keyof T | (string & NonNullable) | ((record: T) => React.Key)\n) {\n return typeof idAccessor === 'string'\n ? getValueAtPath(record, idAccessor)\n : (idAccessor as (record: T) => React.Key)(record);\n}\n\n/**\n * Utility function that reorders an array of records by a given field used for drag'n'drop functionality.\n * @see https://github.com/hello-pangea/dnd\n */\nexport function reorderRecords(dropResult: DropResult, records: T[]): T[] {\n const draft = structuredClone(records);\n const prev = draft[dropResult.source.index];\n\n if (dropResult.destination) {\n draft.splice(dropResult.source.index, 1);\n draft.splice(dropResult.destination.index, 0, prev);\n }\n\n return draft;\n}\n\n/**\n * Utility function that swaps elements of an array, by a given result from drag'n'drop functionality.\n * @see https://github.com/hello-pangea/dnd\n */\nexport function swapRecords(dropResult: DropResult, records: T[]): T[] {\n const draft = structuredClone(records);\n\n const destination = dropResult.destination;\n\n if (!destination) return draft;\n\n const sourceEl = draft[dropResult.source.index];\n const destEl = draft[destination.index];\n\n draft.splice(destination.index, 1, sourceEl);\n draft.splice(dropResult.source.index, 1, destEl);\n\n return draft;\n}\n\n/**\n * Calculates the maximum depth of nested column groups\n */\nexport function getMaxGroupDepth(groups: readonly DataTableColumnGroup[]): number {\n if (!groups || groups.length === 0) return 0;\n\n return Math.max(\n ...groups.map((group) => {\n if (group.groups && group.groups.length > 0) {\n return 1 + getMaxGroupDepth(group.groups);\n }\n return 1;\n })\n );\n}\n\n/**\n * Flattens nested column groups to extract all columns at the deepest level\n */\nexport function flattenColumns(groups: DataTableColumnGroup[]): DataTableColumn[] {\n const columns: DataTableColumn[] = [];\n\n for (const group of groups) {\n if (group.columns && group.columns.length > 0) {\n columns.push(...group.columns.filter((col) => col != null));\n } else if (group.groups && group.groups.length > 0) {\n columns.push(...flattenColumns(group.groups));\n }\n }\n\n return columns.filter((col) => col != null);\n}\n\n/**\n * Calculates the column span for a group based on visible columns\n */\nexport function calculateColSpan(group: DataTableColumnGroup, visibles?: (boolean | undefined)[]): number {\n if (group.columns && group.columns.length > 0) {\n return group.columns.filter((column, index) => {\n if (column.hidden) return false;\n return visibles ? visibles[index] !== false : true;\n }).length;\n }\n\n if (group.groups && group.groups.length > 0) {\n return group.groups.reduce((sum, subGroup) => {\n return sum + calculateColSpan(subGroup, visibles);\n }, 0);\n }\n\n return 0;\n}\n\n/**\n * Gets all groups at a specific depth level\n */\nexport function getGroupsAtDepth(\n groups: readonly DataTableColumnGroup[],\n targetDepth: number,\n currentDepth: number = 0\n): DataTableColumnGroup[] {\n if (currentDepth === targetDepth) {\n return [...groups];\n }\n\n const result: DataTableColumnGroup[] = [];\n for (const group of groups) {\n if (group.groups && group.groups.length > 0) {\n result.push(...getGroupsAtDepth(group.groups, targetDepth, currentDepth + 1));\n }\n }\n\n return result;\n}\n\n/**\n * Checks if a group needs a right border based on its position and context\n */\nexport function needsRightBorder(\n isLastGroup: boolean,\n hasMoreColumnsAfter: boolean,\n withColumnBorders: boolean\n): boolean {\n if (!withColumnBorders) return false;\n return !isLastGroup || hasMoreColumnsAfter;\n}\n","import { useTimeout } from '@mantine/hooks';\nimport { useEffect, useState } from 'react';\n\nexport function useRowExpansionStatus(open: boolean, transitionDuration?: number) {\n const [expanded, setExpanded] = useState(open);\n const [visible, setVisible] = useState(open);\n\n const expand = useTimeout(() => setExpanded(true), 0);\n const hide = useTimeout(() => setVisible(false), transitionDuration || 200);\n\n useEffect(() => {\n if (open) {\n hide.clear();\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setVisible(true);\n expand.start();\n } else {\n expand.clear();\n setExpanded(false);\n hide.start();\n }\n }, [expand, hide, open]);\n\n return { expanded, visible };\n}\n","export const NOWRAP = 'mantine-datatable-nowrap';\nexport const ELLIPSIS = 'mantine-datatable-ellipsis';\nexport const POINTER_CURSOR = 'mantine-datatable-pointer-cursor';\nexport const CONTEXT_MENU_CURSOR = 'mantine-datatable-context-menu-cursor';\nexport const TEXT_SELECTION_DISABLED = 'mantine-datatable-text-selection-disabled';\nexport const TEXT_ALIGN_LEFT = 'mantine-datatable-text-align-left';\nexport const TEXT_ALIGN_CENTER = 'mantine-datatable-text-align-center';\nexport const TEXT_ALIGN_RIGHT = 'mantine-datatable-text-align-right';\n","import { TableTh } from '@mantine/core';\n\ntype DataTableFooterSelectorPlaceholderCellProps = {\n shadowVisible: boolean;\n};\n\nexport function DataTableFooterSelectorPlaceholderCell({ shadowVisible }: DataTableFooterSelectorPlaceholderCellProps) {\n return (\n \n );\n}\n","import {\n Checkbox,\n Group,\n Popover,\n PopoverDropdown,\n PopoverTarget,\n Stack,\n TableThead,\n TableTr,\n type CheckboxProps,\n type MantineStyleProp,\n} from '@mantine/core';\nimport clsx from 'clsx';\nimport { useState } from 'react';\nimport { DataTableColumnGroupHeaderCell } from './DataTableColumnGroupHeaderCell';\nimport { useDataTableColumnsContext } from './DataTableColumns.context';\nimport { DataTableHeaderCell } from './DataTableHeaderCell';\nimport { DataTableHeaderSelectorCell } from './DataTableHeaderSelectorCell';\nimport type { DataTableColumnToggle } from './hooks';\nimport type { DataTableColumn, DataTableColumnGroup, DataTableSelectionTrigger, DataTableSortProps } from './types';\nimport { getGroupsAtDepth, getMaxGroupDepth, humanize } from './utils';\n\ntype DataTableHeaderProps = {\n selectionColumnHeaderRef: React.ForwardedRef;\n className: string | undefined;\n style?: MantineStyleProp;\n sortStatus: DataTableSortProps['sortStatus'];\n sortIcons: DataTableSortProps['sortIcons'];\n onSortStatusChange: DataTableSortProps['onSortStatusChange'];\n columns: DataTableColumn[];\n defaultColumnProps: Omit, 'accessor'> | undefined;\n groups: readonly DataTableColumnGroup[] | undefined;\n selectionTrigger: DataTableSelectionTrigger;\n selectionVisible: boolean;\n selectionChecked: boolean;\n selectionIndeterminate: boolean;\n onSelectionChange: (() => void) | undefined;\n selectionCheckboxProps: CheckboxProps;\n selectorCellShadowVisible: boolean;\n selectionColumnClassName: string | undefined;\n selectionColumnStyle: MantineStyleProp;\n withColumnBorders?: boolean;\n ref: React.Ref;\n};\n\nexport function DataTableHeader({\n selectionColumnHeaderRef,\n className,\n style,\n sortStatus,\n sortIcons,\n onSortStatusChange,\n columns,\n defaultColumnProps,\n groups,\n selectionTrigger,\n selectionVisible,\n selectionChecked,\n selectionIndeterminate,\n onSelectionChange,\n selectionCheckboxProps,\n selectorCellShadowVisible,\n selectionColumnClassName,\n selectionColumnStyle,\n withColumnBorders = false,\n ref,\n}: DataTableHeaderProps) {\n const maxGroupDepth = groups ? getMaxGroupDepth(groups) : 0;\n const totalHeaderRows = maxGroupDepth > 0 ? maxGroupDepth + 1 : 1;\n\n const allRecordsSelectorCell = selectionVisible ? (\n \n ) : null;\n\n const { columnsToggle, setColumnsToggle } = useDataTableColumnsContext();\n const [columnsPopoverOpened, setColumnsPopoverOpened] = useState(false);\n const someColumnsToggleable = columns.some((column) => column.toggleable);\n\n const columnToggleCheckboxLabels = someColumnsToggleable\n ? Object.fromEntries(columns.map(({ accessor, title }) => [accessor, title ?? humanize(String(accessor))]))\n : undefined;\n\n const content = (\n {\n e.preventDefault();\n setColumnsPopoverOpened((columnsPopoverOpened) => !columnsPopoverOpened);\n }\n : undefined\n }\n >\n {groups &&\n Array.from({ length: maxGroupDepth }, (_, depthIndex) => {\n const groupsAtDepth = getGroupsAtDepth(groups, depthIndex);\n\n return (\n \n {depthIndex === 0 && allRecordsSelectorCell}\n {groupsAtDepth.map((group, index) => {\n return (\n \n );\n })}\n \n );\n })}\n\n \n {!groups && allRecordsSelectorCell}\n\n {columns.map(({ hidden, ...columnProps }, index) => {\n if (hidden) return null;\n\n const {\n accessor,\n visibleMediaQuery,\n textAlign,\n width,\n title,\n sortable,\n draggable,\n toggleable,\n resizable,\n titleClassName,\n titleStyle,\n filter,\n filterPopoverProps,\n filterPopoverDisableClickOutside,\n filtering,\n sortKey,\n } = { ...defaultColumnProps, ...columnProps };\n\n return (\n \n key={accessor as React.Key}\n accessor={accessor}\n className={titleClassName}\n style={titleStyle}\n visibleMediaQuery={visibleMediaQuery}\n textAlign={textAlign}\n width={width}\n title={title}\n sortable={sortable}\n draggable={draggable}\n toggleable={toggleable}\n // we won't display the resize handle for the last column to avoid overflow render issues\n resizable={resizable && index < columns.length - 1}\n sortStatus={sortStatus}\n sortIcons={sortIcons}\n sortKey={sortKey}\n onSortStatusChange={onSortStatusChange}\n filter={filter}\n filterPopoverProps={filterPopoverProps}\n filterPopoverDisableClickOutside={filterPopoverDisableClickOutside}\n filtering={filtering}\n />\n );\n })}\n \n \n );\n\n return someColumnsToggleable ? (\n \n {content}\n \n \n {columnsToggle\n .filter((column) => column.toggleable)\n .map((column: DataTableColumnToggle) => {\n return (\n \n {\n setColumnsToggle(\n columnsToggle.map((c: DataTableColumnToggle) => {\n if (c.accessor === column.accessor) {\n return { ...c, toggled: e.currentTarget.checked };\n }\n return c;\n })\n );\n }}\n />\n \n );\n })}\n \n \n \n ) : (\n content\n );\n}\n","import { TableTh } from '@mantine/core';\nimport clsx from 'clsx';\nimport { useMemo } from 'react';\nimport { useMediaQueriesStringOrFunction } from './hooks';\nimport type { DataTableColumnGroup } from './types';\nimport { TEXT_ALIGN_CENTER, TEXT_ALIGN_LEFT, TEXT_ALIGN_RIGHT } from './utilityClasses';\nimport { calculateColSpan, flattenColumns, humanize, needsRightBorder } from './utils';\n\ntype DataTableColumnGroupHeaderCellProps = {\n group: DataTableColumnGroup;\n maxDepth: number;\n currentDepth: number;\n previousGroups: readonly DataTableColumnGroup[];\n isLastGroup: boolean;\n withColumnBorders?: boolean;\n totalTableColumns: number;\n};\n\nexport function DataTableColumnGroupHeaderCell({\n group: { id, columns, groups, title, textAlign, className, style },\n maxDepth,\n currentDepth,\n previousGroups,\n isLastGroup,\n withColumnBorders = false,\n totalTableColumns,\n}: DataTableColumnGroupHeaderCellProps) {\n const allColumns = useMemo(() => {\n if (columns && columns.length > 0) {\n return columns;\n }\n if (groups && groups.length > 0) {\n return flattenColumns([{ id, columns, groups }]);\n }\n return [];\n }, [columns, groups, id]);\n\n const queries = useMemo(() => allColumns.map(({ visibleMediaQuery }) => visibleMediaQuery), [allColumns]);\n const visibles = useMediaQueriesStringOrFunction(queries);\n\n const colSpan = useMemo(() => {\n return calculateColSpan({ id, columns, groups }, visibles);\n }, [id, columns, groups, visibles]);\n\n const columnsBeforeGroup = useMemo(() => {\n return previousGroups.reduce((sum, g) => sum + calculateColSpan(g, visibles), 0);\n }, [previousGroups, visibles]);\n\n const hasSubGroups = groups && groups.length > 0;\n const rowSpan = hasSubGroups ? 1 : maxDepth - currentDepth;\n\n const hasMoreColumns = columnsBeforeGroup + colSpan < totalTableColumns;\n const needsBorder = needsRightBorder(isLastGroup, hasMoreColumns, withColumnBorders);\n\n return colSpan > 0 ? (\n 1 ? rowSpan : undefined}\n className={clsx(\n 'mantine-datatable-column-group-header-cell',\n {\n [TEXT_ALIGN_LEFT]: textAlign === 'left',\n [TEXT_ALIGN_CENTER]: textAlign === 'center',\n [TEXT_ALIGN_RIGHT]: textAlign === 'right',\n 'mantine-datatable-column-group-header-cell--needs-border': needsBorder,\n },\n className\n )}\n style={style}\n >\n {title ?? humanize(id)}\n \n ) : null;\n}\n","import { ActionIcon, Box, Center, Flex, Group, TableTh, type MantineStyleProp, type MantineTheme } from '@mantine/core';\nimport clsx from 'clsx';\nimport { useRef, useState } from 'react';\nimport { useDataTableColumnsContext } from './DataTableColumns.context';\nimport { DataTableHeaderCellFilter } from './DataTableHeaderCellFilter';\nimport { DataTableResizableHeaderHandle } from './DataTableResizableHeaderHandle';\nimport { useMediaQueryStringOrFunction } from './hooks';\nimport { IconArrowUp } from './icons/IconArrowUp';\nimport { IconArrowsVertical } from './icons/IconArrowsVertical';\nimport { IconGripVertical } from './icons/IconGripVertical';\nimport { IconX } from './icons/IconX';\nimport type { DataTableColumn, DataTableSortProps } from './types';\nimport { ELLIPSIS, NOWRAP, TEXT_ALIGN_CENTER, TEXT_ALIGN_LEFT, TEXT_ALIGN_RIGHT } from './utilityClasses';\nimport { humanize } from './utils';\n\ntype DataTableHeaderCellProps = {\n className: string | undefined;\n style: MantineStyleProp | undefined;\n visibleMediaQuery: string | ((theme: MantineTheme) => string) | undefined;\n title: React.ReactNode | undefined;\n sortStatus: DataTableSortProps['sortStatus'];\n sortIcons: DataTableSortProps['sortIcons'];\n onSortStatusChange: DataTableSortProps['onSortStatusChange'];\n} & Pick<\n DataTableColumn,\n | 'accessor'\n | 'sortable'\n | 'draggable'\n | 'toggleable'\n | 'resizable'\n | 'textAlign'\n | 'width'\n | 'filter'\n | 'filterPopoverProps'\n | 'filterPopoverDisableClickOutside'\n | 'filtering'\n | 'sortKey'\n>;\n\nexport function DataTableHeaderCell({\n className,\n style,\n accessor,\n visibleMediaQuery,\n title,\n sortable,\n draggable,\n toggleable,\n resizable,\n sortIcons,\n textAlign,\n width,\n sortStatus,\n onSortStatusChange,\n filter,\n filterPopoverProps,\n filterPopoverDisableClickOutside,\n filtering,\n sortKey,\n}: DataTableHeaderCellProps) {\n const { setSourceColumn, setTargetColumn, swapColumns, setColumnsToggle } = useDataTableColumnsContext();\n const [dragOver, setDragOver] = useState(false);\n const columnRef = useRef(null);\n\n if (!useMediaQueryStringOrFunction(visibleMediaQuery)) return null;\n const text = title ?? humanize(accessor as string);\n const tooltip = typeof text === 'string' ? text : undefined;\n\n const sortAction =\n sortable && onSortStatusChange\n ? (e?: React.BaseSyntheticEvent) => {\n if (e?.defaultPrevented) return;\n\n onSortStatusChange({\n sortKey,\n columnAccessor: accessor,\n direction:\n sortStatus?.columnAccessor === accessor\n ? sortStatus.direction === 'asc'\n ? 'desc'\n : 'asc'\n : (sortStatus?.direction ?? 'asc'),\n });\n }\n : undefined;\n\n const handleColumnDragStart = (e: React.DragEvent) => {\n e.stopPropagation();\n setSourceColumn(accessor as string);\n setDragOver(false);\n };\n\n const handleColumnDragOver = (e: React.DragEvent) => {\n e.preventDefault();\n setTargetColumn(accessor as string);\n setDragOver(true);\n };\n\n const handleColumnDrop = () => {\n setTargetColumn(accessor as string);\n setDragOver(false);\n swapColumns();\n };\n\n const handleColumnDragEnter = () => {\n setDragOver(true);\n };\n\n const handleColumnDragLeave = () => {\n setDragOver(false);\n };\n\n const handleColumnToggle = (e: React.MouseEvent) => {\n e.stopPropagation();\n\n setColumnsToggle((columnsToggle) =>\n columnsToggle.map((c) => {\n if (c.accessor === accessor) {\n return { ...c, toggled: false };\n }\n return c;\n })\n );\n };\n\n return (\n e.key === 'Enter' && sortAction?.()}\n ref={columnRef}\n >\n \n \n {draggable ? (\n
\n ) => {\n e.stopPropagation();\n }}\n >\n \n \n
\n ) : null}\n \n {text}\n \n \n {toggleable ? (\n
\n \n \n \n
\n ) : null}\n {sortable || sortStatus?.columnAccessor === accessor ? (\n <>\n {sortStatus?.columnAccessor === accessor ? (\n \n {sortIcons?.sorted || }\n \n ) : (\n \n {sortIcons?.unsorted || }\n \n )}\n \n ) : null}\n {filter ? (\n \n {filter}\n \n ) : null}\n \n {resizable && accessor !== '__selection__' ? (\n \n ) : null}\n \n );\n}\n","import { ActionIcon, Popover, PopoverDropdown, PopoverTarget } from '@mantine/core';\nimport { useClickOutside, useDisclosure } from '@mantine/hooks';\nimport type { RefObject } from 'react';\nimport { IconFilter } from './icons/IconFilter';\nimport { IconFilterFilled } from './icons/IconFilterFilled';\nimport type { DataTableColumn } from './types';\n\ntype DataTableHeaderCellFilterProps = {\n children: DataTableColumn['filter'];\n filterPopoverProps: DataTableColumn['filterPopoverProps'];\n filterPopoverDisableClickOutside?: DataTableColumn['filterPopoverDisableClickOutside'];\n isActive: boolean;\n};\n\nexport function DataTableHeaderCellFilter({\n children,\n isActive,\n filterPopoverProps,\n filterPopoverDisableClickOutside,\n}: DataTableHeaderCellFilterProps) {\n const [isOpen, { close, toggle }] = useDisclosure(false);\n const Icon = isActive ? IconFilterFilled : IconFilter;\n let ref: RefObject | undefined = useClickOutside(close);\n if (filterPopoverDisableClickOutside) ref = undefined;\n\n return (\n \n \n {\n e.preventDefault();\n toggle();\n }}\n onKeyDown={(e) => e.stopPropagation()}\n >\n \n \n \n e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>\n {typeof children === 'function' ? children({ close }) : children}\n \n \n );\n}\n","export function IconFilter() {\n return (\n \n \n \n \n );\n}\n","export function IconFilterFilled() {\n return (\n \n \n \n \n );\n}\n","import { useDirection } from '@mantine/core';\nimport type { RefObject } from 'react';\nimport { useCallback, useRef, useState } from 'react';\nimport { useDataTableColumnsContext } from './DataTableColumns.context';\n\ntype DataTableResizableHeaderHandleProps = {\n accessor: string;\n columnRef: RefObject;\n};\n\nexport const DataTableResizableHeaderHandle = (props: DataTableResizableHeaderHandleProps) => {\n const { accessor, columnRef } = props;\n const [isResizing, setIsResizing] = useState(false);\n const startXRef = useRef(0);\n const originalWidthsRef = useRef<{ current: number; next: number }>({ current: 0, next: 0 });\n\n const { dir } = useDirection();\n const isRTL = dir === 'rtl';\n\n const { setMultipleColumnWidths } = useDataTableColumnsContext();\n\n const handleMouseDown = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (!columnRef.current) return;\n\n const currentColumn = columnRef.current;\n\n // Find the next resizable data column (skip selection column)\n let nextColumn = currentColumn.nextElementSibling as HTMLTableCellElement | null;\n while (nextColumn) {\n const nextAccessor = nextColumn.getAttribute('data-accessor');\n if (nextAccessor && nextAccessor !== '__selection__') {\n break; // Found a valid data column\n }\n nextColumn = nextColumn.nextElementSibling as HTMLTableCellElement | null;\n }\n\n if (!nextColumn) {\n return; // No next column to resize with\n }\n\n const nextAccessor = nextColumn.getAttribute('data-accessor');\n if (!nextAccessor) {\n return; // Next column missing data-accessor\n }\n\n // Special handling for next column being selection column\n const isNextSelection = nextAccessor === '__selection__';\n\n // Store initial state\n setIsResizing(true);\n startXRef.current = event.clientX;\n\n // Get current computed widths (not getBoundingClientRect which might include borders/padding)\n const currentWidth = currentColumn.offsetWidth;\n const nextWidth = nextColumn.offsetWidth;\n\n originalWidthsRef.current = {\n current: currentWidth,\n next: nextWidth,\n };\n\n // Global mouse event handlers\n const handleMouseMove = (moveEvent: MouseEvent) => {\n if (!columnRef.current) return;\n\n const currentCol = columnRef.current;\n const nextCol = currentCol.nextElementSibling as HTMLTableCellElement | null;\n if (!nextCol) return;\n\n let deltaX = moveEvent.clientX - startXRef.current;\n\n // In RTL, reverse the deltaX to make resizing follow mouse movement naturally\n if (isRTL) {\n deltaX = -deltaX;\n }\n\n const minWidth = 50;\n\n // Calculate the maximum possible movement in both directions\n const maxShrinkCurrent = originalWidthsRef.current.current - minWidth;\n const maxShrinkNext = originalWidthsRef.current.next - minWidth;\n\n // Limit deltaX to respect both columns' minimum widths\n const constrainedDelta = Math.max(\n -maxShrinkCurrent, // Don't shrink current below minimum\n Math.min(deltaX, maxShrinkNext) // Don't shrink next below minimum\n );\n\n const finalCurrentWidth = originalWidthsRef.current.current + constrainedDelta;\n const finalNextWidth = originalWidthsRef.current.next - constrainedDelta;\n\n // Apply to DOM immediately for smooth visual feedback\n currentCol.style.width = `${finalCurrentWidth}px`;\n nextCol.style.width = `${finalNextWidth}px`;\n\n // Ensure the table maintains fixed layout during resize\n currentCol.style.minWidth = `${finalCurrentWidth}px`;\n currentCol.style.maxWidth = `${finalCurrentWidth}px`;\n nextCol.style.minWidth = `${finalNextWidth}px`;\n nextCol.style.maxWidth = `${finalNextWidth}px`;\n };\n\n const handleMouseUp = () => {\n if (!columnRef.current) return;\n\n const currentCol = columnRef.current;\n const nextCol = currentCol.nextElementSibling as HTMLTableCellElement | null;\n\n setIsResizing(false);\n\n // Reset global styles\n document.body.style.cursor = 'initial';\n document.body.style.userSelect = 'initial';\n\n // Get final widths from the applied styles\n const finalCurrentWidth = parseInt(currentCol.style.width) || currentCol.offsetWidth;\n const finalNextWidth = nextCol ? parseInt(nextCol.style.width) || nextCol.offsetWidth : 0;\n\n // Update context with final widths\n const updates = [{ accessor, width: `${finalCurrentWidth}px` }];\n\n if (nextCol && !isNextSelection) {\n const nextAccessor = nextCol.getAttribute('data-accessor');\n if (nextAccessor) {\n updates.push({\n accessor: nextAccessor,\n width: `${finalNextWidth}px`,\n });\n }\n }\n\n // Update the context AFTER we've applied the styles\n setTimeout(() => {\n setMultipleColumnWidths(updates);\n }, 0);\n\n // Remove event listeners\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleMouseUp);\n };\n\n // Set global styles\n document.body.style.cursor = 'col-resize';\n document.body.style.userSelect = 'none';\n\n // Add event listeners\n document.addEventListener('mousemove', handleMouseMove);\n document.addEventListener('mouseup', handleMouseUp);\n },\n [accessor, columnRef, isRTL, setMultipleColumnWidths]\n );\n\n const handleDoubleClick = useCallback(() => {\n if (!columnRef.current) return;\n\n const currentColumn = columnRef.current;\n const nextColumn = currentColumn.nextElementSibling as HTMLTableCellElement | null;\n\n // Clear any inline styles that might interfere with natural sizing\n currentColumn.style.width = '';\n currentColumn.style.minWidth = '';\n currentColumn.style.maxWidth = '';\n\n // Reset current column to auto width\n const updates = [{ accessor, width: 'auto' }];\n\n if (nextColumn) {\n nextColumn.style.width = '';\n nextColumn.style.minWidth = '';\n nextColumn.style.maxWidth = '';\n\n const nextAccessor = nextColumn.getAttribute('data-accessor');\n // Only reset next column if it's not the selection column\n if (nextAccessor && nextAccessor !== '__selection__') {\n updates.push({ accessor: nextAccessor, width: 'auto' });\n }\n }\n\n // Use setTimeout to ensure DOM changes are applied before context update\n setTimeout(() => {\n setMultipleColumnWidths(updates);\n }, 0);\n }, [accessor, columnRef, setMultipleColumnWidths]);\n\n return (\n event.stopPropagation()} // Prevent column sorting\n title=\"Drag to resize column, double-click to reset\"\n />\n );\n};\n","export function IconArrowUp() {\n return (\n \n \n \n \n \n \n );\n}\n","export function IconArrowsVertical() {\n return (\n \n \n \n \n \n \n );\n}\n","export function IconGripVertical() {\n return (\n \n \n \n \n \n \n \n \n \n );\n}\n","export function IconX() {\n return (\n \n \n \n \n \n );\n}\n","import type { MantineStyleProp } from '@mantine/core';\nimport { Checkbox, TableTh, type CheckboxProps } from '@mantine/core';\nimport clsx from 'clsx';\nimport type { DataTableSelectionTrigger } from './types';\nimport { POINTER_CURSOR } from './utilityClasses';\n\ntype DataTableHeaderSelectorCellProps = {\n className: string | undefined;\n style: MantineStyleProp | undefined;\n trigger: DataTableSelectionTrigger;\n shadowVisible: boolean;\n checked: boolean;\n indeterminate: boolean;\n checkboxProps: CheckboxProps;\n onChange: (() => void) | undefined;\n rowSpan: number | undefined;\n ref: React.Ref;\n};\n\nexport function DataTableHeaderSelectorCell({\n className,\n style,\n trigger,\n shadowVisible,\n checked,\n indeterminate,\n checkboxProps,\n onChange,\n rowSpan,\n ref,\n}: DataTableHeaderSelectorCellProps) {\n const enabled = !checkboxProps.disabled;\n\n return (\n \n \n \n );\n}\n","import { Center, Loader, type MantineColor, type MantineLoader, type MantineSize } from '@mantine/core';\nimport clsx from 'clsx';\n\ntype DataTableLoaderProps = {\n fetching: boolean | undefined;\n customContent: React.ReactNode | undefined;\n backgroundBlur: number | undefined;\n size: MantineSize | (string & NonNullable) | number | undefined;\n type: MantineLoader | undefined;\n color: MantineColor | undefined;\n};\n\nexport function DataTableLoader({ fetching, customContent, backgroundBlur, size, type, color }: DataTableLoaderProps) {\n return (\n \n {fetching && (customContent || )}\n \n );\n}\n","import { Box, Pagination, Text, rem, type MantineSpacing, type MantineStyleProp } from '@mantine/core';\nimport clsx from 'clsx';\nimport { DataTablePageSizeSelector } from './DataTablePageSizeSelector';\nimport { getPaginationCssVariables } from './cssVariables';\nimport { useMediaQueryStringOrFunction } from './hooks';\nimport type { DataTablePaginationProps } from './types';\nimport type { PaginationRenderContext } from './types/PaginationRenderContext';\nimport type { WithOptionalProperty, WithRequiredProperty } from './types/utils';\n\ntype DataTablePaginationComponentProps = WithOptionalProperty<\n WithRequiredProperty<\n DataTablePaginationProps,\n 'loadingText' | 'paginationSize' | 'recordsPerPageLabel' | 'paginationWrapBreakpoint' | 'getPaginationControlProps'\n >,\n 'onRecordsPerPageChange' | 'recordsPerPageOptions' | 'renderPagination'\n> & {\n className: string | undefined;\n style: MantineStyleProp | undefined;\n fetching: boolean | undefined;\n recordsLength: number | undefined;\n horizontalSpacing: MantineSpacing | undefined;\n noRecordsText: string;\n};\n\nexport function DataTablePagination({\n className,\n style,\n fetching,\n page,\n onPageChange,\n paginationWithEdges,\n paginationWithControls,\n paginationActiveTextColor,\n paginationActiveBackgroundColor,\n paginationSize,\n loadingText,\n noRecordsText,\n paginationText,\n totalRecords,\n recordsPerPage,\n onRecordsPerPageChange,\n recordsPerPageLabel,\n recordsPerPageOptions,\n recordsLength,\n horizontalSpacing,\n paginationWrapBreakpoint,\n getPaginationControlProps,\n getPaginationItemProps,\n renderPagination,\n}: DataTablePaginationComponentProps) {\n let paginationTextValue: React.ReactNode;\n if (totalRecords) {\n const from = (page - 1) * recordsPerPage + 1;\n const to = from + (recordsLength || 0) - 1;\n paginationTextValue = paginationText!({ from, to, totalRecords });\n } else {\n paginationTextValue = fetching ? loadingText : noRecordsText;\n }\n\n const totalPages = totalRecords && recordsPerPage ? Math.max(1, Math.ceil(totalRecords / recordsPerPage)) : 1;\n\n const from = totalRecords ? (page - 1) * (recordsPerPage ?? 0) + 1 : undefined;\n const to = totalRecords ? (from ?? 1) + (recordsLength ?? 0) - 1 : undefined;\n\n const isAbovePaginationWrapBreakpoint = useMediaQueryStringOrFunction(\n ({ breakpoints }) =>\n `(min-width: ${\n typeof paginationWrapBreakpoint === 'number'\n ? `${rem(paginationWrapBreakpoint)}rem`\n : breakpoints[paginationWrapBreakpoint] || paginationWrapBreakpoint\n })`\n );\n\n const isWrapped = !isAbovePaginationWrapBreakpoint;\n\n const Controls: PaginationRenderContext['Controls'] = {\n Text: (props) => (\n \n {paginationTextValue}\n \n ),\n PageSizeSelector: (props) =>\n recordsPerPageOptions ? (\n \n ) : (\n <>\n ),\n Pagination: (props) => (\n \n getPaginationCssVariables({\n theme,\n paginationActiveTextColor,\n paginationActiveBackgroundColor,\n })\n : undefined\n }\n withEdges={paginationWithEdges}\n withControls={paginationWithControls}\n value={page}\n onChange={onPageChange}\n size={paginationSize}\n total={totalPages}\n getControlProps={getPaginationControlProps}\n getItemProps={getPaginationItemProps}\n {...props}\n />\n ),\n };\n\n const ctx: PaginationRenderContext = {\n state: {\n paginationSize,\n page,\n totalPages,\n totalRecords,\n recordsPerPage,\n recordsLength,\n fetching,\n from,\n to,\n isWrapped,\n },\n actions: {\n setPage: (n) => onPageChange?.(n),\n setRecordsPerPage: onRecordsPerPageChange ? (n) => onRecordsPerPageChange(n) : undefined,\n },\n Controls,\n };\n\n return (\n \n {typeof renderPagination === 'function' ? (\n renderPagination(ctx)\n ) : (\n <>\n \n \n \n \n )}\n \n );\n}\n","import type { MantineColor } from '@mantine/core';\nimport { Button, Group, Menu, MenuDropdown, MenuItem, MenuTarget, Text, rem, type MantineSize } from '@mantine/core';\nimport clsx from 'clsx';\nimport { getPaginationCssVariables } from './cssVariables';\nimport { IconSelector } from './icons/IconSelector';\n\ntype DataTablePageSizeSelectorComponentProps = {\n size: MantineSize;\n label: string;\n values: number[];\n value: number;\n activeTextColor: MantineColor | { dark: MantineColor; light: MantineColor } | undefined;\n activeBackgroundColor: MantineColor | { dark: MantineColor; light: MantineColor } | undefined;\n onChange: (value: number) => void;\n};\n\nconst HEIGHT: Record = { xs: rem(22), sm: rem(26), md: rem(32), lg: rem(38), xl: rem(44) };\n\nexport function DataTablePageSizeSelector({\n size,\n label,\n values,\n value,\n activeTextColor,\n activeBackgroundColor,\n onChange,\n}: DataTablePageSizeSelectorComponentProps) {\n return (\n \n \n {label}\n \n \n \n }\n style={[\n { fontWeight: 'normal' },\n (theme) => ({\n height: HEIGHT[size],\n paddingLeft: theme.spacing[size],\n paddingRight: theme.spacing[size],\n }),\n ]}\n >\n {value}\n \n \n \n {values.map((v) => {\n const isCurrent = v === value;\n return (\n \n getPaginationCssVariables({\n theme,\n paginationActiveTextColor: activeTextColor,\n paginationActiveBackgroundColor: activeBackgroundColor,\n })\n : undefined,\n ]}\n disabled={isCurrent}\n onClick={() => onChange(v)}\n >\n \n {v}\n \n \n );\n })}\n \n \n \n );\n}\n","import { parseThemeColor, type MantineColor, type MantineTheme } from '@mantine/core';\nimport type { DataTableProps } from './types';\n\nexport function getColor(\n color: MantineColor | undefined | { light: MantineColor; dark: MantineColor },\n theme: MantineTheme,\n colorScheme: 'light' | 'dark'\n) {\n return color\n ? parseThemeColor({\n color: typeof color === 'object' ? color[colorScheme] : color,\n theme,\n }).value\n : undefined;\n}\n\nexport function getTableCssVariables({\n theme,\n c,\n backgroundColor,\n borderColor,\n rowBorderColor,\n stripedColor,\n highlightOnHoverColor,\n}: Pick<\n DataTableProps,\n 'c' | 'backgroundColor' | 'borderColor' | 'rowBorderColor' | 'stripedColor' | 'highlightOnHoverColor'\n> & {\n theme: MantineTheme;\n}) {\n return {\n '--mantine-datatable-color-light': getColor(c, theme, 'light'),\n '--mantine-datatable-color-dark': getColor(c, theme, 'dark'),\n\n '--mantine-datatable-background-color-light': getColor(backgroundColor, theme, 'light'),\n '--mantine-datatable-background-color-dark': getColor(backgroundColor, theme, 'dark'),\n\n '--mantine-datatable-border-color-light': getColor(borderColor, theme, 'light'),\n '--mantine-datatable-border-color-dark': getColor(borderColor, theme, 'dark'),\n\n '--mantine-datatable-row-border-color-light': getColor(rowBorderColor, theme, 'light'),\n '--mantine-datatable-row-border-color-dark': getColor(rowBorderColor, theme, 'dark'),\n\n '--mantine-datatable-striped-color-light': getColor(stripedColor, theme, 'light'),\n '--mantine-datatable-striped-color-dark': getColor(stripedColor, theme, 'dark'),\n\n '--mantine-datatable-highlight-on-hover-color-light': getColor(highlightOnHoverColor, theme, 'light'),\n '--mantine-datatable-highlight-on-hover-color-dark': getColor(highlightOnHoverColor, theme, 'dark'),\n };\n}\n\nexport function getPaginationCssVariables({\n theme,\n paginationActiveTextColor,\n paginationActiveBackgroundColor,\n}: Pick & {\n theme: MantineTheme;\n}) {\n return {\n '--mantine-datatable-pagination-active-text-color-light': getColor(paginationActiveTextColor, theme, 'light'),\n '--mantine-datatable-pagination-active-text-color-dark': getColor(paginationActiveTextColor, theme, 'dark'),\n\n '--mantine-datatable-pagination-active-background-color-light': getColor(\n paginationActiveBackgroundColor,\n theme,\n 'light'\n ),\n '--mantine-datatable-pagination-active-background-color-dark': getColor(\n paginationActiveBackgroundColor,\n theme,\n 'dark'\n ),\n };\n}\n\nexport function getRowCssVariables({\n theme,\n color,\n backgroundColor,\n}: {\n theme: MantineTheme;\n color: MantineColor | undefined | { light: MantineColor; dark: MantineColor };\n backgroundColor: MantineColor | undefined | { light: MantineColor; dark: MantineColor };\n}) {\n return {\n '--mantine-datatable-row-color-light': getColor(color, theme, 'light'),\n '--mantine-datatable-row-color-dark': getColor(color, theme, 'dark'),\n '--mantine-datatable-row-background-color-light': getColor(backgroundColor, theme, 'light'),\n '--mantine-datatable-row-background-color-dark': getColor(backgroundColor, theme, 'dark'),\n };\n}\n","export function IconSelector() {\n return (\n \n \n \n \n \n );\n}\n","import type { MantineTheme } from '@mantine/core';\nimport { TableTr, type CheckboxProps, type MantineColor, type MantineStyleProp } from '@mantine/core';\nimport clsx from 'clsx';\nimport { DataTableRowCell } from './DataTableRowCell';\nimport { DataTableRowExpansion } from './DataTableRowExpansion';\nimport { DataTableRowSelectorCell } from './DataTableRowSelectorCell';\nimport { getRowCssVariables } from './cssVariables';\nimport type { useRowExpansion } from './hooks';\nimport type {\n DataTableCellClickHandler,\n DataTableColumn,\n DataTableDefaultColumnProps,\n DataTableProps,\n DataTableRowClickHandler,\n DataTableSelectionTrigger,\n} from './types';\nimport { CONTEXT_MENU_CURSOR, POINTER_CURSOR } from './utilityClasses';\n\ntype DataTableRowProps = {\n record: T;\n index: number;\n columns: DataTableColumn[];\n defaultColumnProps: DataTableDefaultColumnProps | undefined;\n defaultColumnRender:\n | ((record: T, index: number, accessor: keyof T | (string & NonNullable)) => React.ReactNode)\n | undefined;\n selectionTrigger: DataTableSelectionTrigger;\n selectionVisible: boolean;\n selectionChecked: boolean;\n onSelectionChange: React.MouseEventHandler | undefined;\n isRecordSelectable: ((record: T, index: number) => boolean) | undefined;\n selectionCheckboxProps: CheckboxProps | undefined;\n getSelectionCheckboxProps: (record: T, index: number) => CheckboxProps;\n onClick: DataTableRowClickHandler | undefined;\n onDoubleClick: DataTableRowClickHandler | undefined;\n onContextMenu: DataTableRowClickHandler | undefined;\n onCellClick: DataTableCellClickHandler | undefined;\n onCellDoubleClick: DataTableCellClickHandler | undefined;\n onCellContextMenu: DataTableCellClickHandler | undefined;\n expansion: ReturnType>;\n customAttributes?: (record: T, index: number) => Record;\n color:\n | ((record: T, index: number) => MantineColor | undefined | { light: MantineColor; dark: MantineColor })\n | undefined;\n backgroundColor:\n | ((record: T, index: number) => MantineColor | undefined | { light: MantineColor; dark: MantineColor })\n | undefined;\n className?: string | ((record: T, index: number) => string | undefined);\n style?: (record: T, index: number) => MantineStyleProp | undefined;\n selectorCellShadowVisible: boolean;\n selectionColumnClassName: string | undefined;\n selectionColumnStyle: MantineStyleProp | undefined;\n idAccessor: string;\n} & Pick, 'rowFactory'>;\n\nexport function DataTableRow({\n record,\n index,\n columns,\n defaultColumnProps,\n defaultColumnRender,\n selectionTrigger,\n selectionVisible,\n selectionChecked,\n onSelectionChange,\n isRecordSelectable,\n selectionCheckboxProps,\n getSelectionCheckboxProps,\n onClick,\n onDoubleClick,\n onContextMenu,\n onCellClick,\n onCellDoubleClick,\n onCellContextMenu,\n expansion,\n customAttributes,\n color,\n backgroundColor,\n className,\n style,\n selectorCellShadowVisible,\n selectionColumnClassName,\n selectionColumnStyle,\n rowFactory,\n}: Readonly>) {\n const cols = (\n <>\n {selectionVisible && (\n \n className={selectionColumnClassName}\n style={selectionColumnStyle}\n record={record}\n index={index}\n trigger={selectionTrigger}\n withRightShadow={selectorCellShadowVisible}\n checked={selectionChecked}\n disabled={!onSelectionChange || (isRecordSelectable ? !isRecordSelectable(record, index) : false)}\n onChange={onSelectionChange}\n checkboxProps={selectionCheckboxProps}\n getCheckboxProps={getSelectionCheckboxProps}\n />\n )}\n\n {columns.map(({ hidden, hiddenContent, ...columnProps }, columnIndex) => {\n if (hidden || hiddenContent) return null;\n\n const {\n accessor,\n visibleMediaQuery,\n textAlign,\n noWrap,\n ellipsis,\n width,\n render,\n cellsClassName,\n cellsStyle,\n customCellAttributes,\n } = { ...defaultColumnProps, ...columnProps };\n\n return (\n \n key={accessor as React.Key}\n className={typeof cellsClassName === 'function' ? cellsClassName(record, index) : cellsClassName}\n style={cellsStyle?.(record, index)}\n visibleMediaQuery={visibleMediaQuery}\n record={record}\n index={index}\n onClick={\n onCellClick\n ? (event) => onCellClick({ event, record, index, column: columnProps, columnIndex })\n : undefined\n }\n onDoubleClick={\n onCellDoubleClick\n ? (event) => onCellDoubleClick({ event, record, index, column: columnProps, columnIndex })\n : undefined\n }\n onContextMenu={\n onCellContextMenu\n ? (event) => onCellContextMenu({ event, record, index, column: columnProps, columnIndex })\n : undefined\n }\n accessor={accessor}\n textAlign={textAlign}\n noWrap={noWrap}\n ellipsis={ellipsis}\n width={width}\n render={render}\n defaultRender={defaultColumnRender}\n customCellAttributes={customCellAttributes}\n />\n );\n })}\n \n );\n\n const expandedElement = expansion && (\n