@raystack/apsara 0.56.5 → 1.0.0-rc.0

package/dist/components/data-table/components/content.cjs

@@ -13,6 +13,7 @@ var skeleton = require('../../skeleton/skeleton.cjs');
 var table = require('../../table/table.cjs');
 var dataTable_module = require('../data-table.module.css.cjs');
 var useDataTable = require('../hooks/useDataTable.cjs');
+var index = require('../utils/index.cjs');
 
 function Headers({ headerGroups = [], className = '' }) {
     return (jsxRuntime.jsx(table.Table.Header, { className: className, children: headerGroups?.map(headerGroup => (jsxRuntime.jsx(table.Table.Row, { children: headerGroup?.headers?.map(header => {
@@ -27,17 +28,17 @@ function LoaderRows({ rowCount, columnCount }) {
         return (jsxRuntime.jsx(table.Table.Row, { children: columns.map((_, colIndex) => (jsxRuntime.jsx(table.Table.Cell, { children: jsxRuntime.jsx(skeleton.Skeleton, {}) }, 'loading-column-' + colIndex))) }, 'loading-row-' + rowIndex));
     });
 }
-function GroupHeader({ colSpan, data }) {
-    return (jsxRuntime.jsx(table.Table.SectionHeader, { colSpan: colSpan, children: jsxRuntime.jsxs(flex.Flex, { gap: 3, align: 'center', children: [data?.label, data.showGroupCount ? (jsxRuntime.jsx(badge.Badge, { variant: 'neutral', children: data?.count })) : null] }) }));
+function GroupHeader({ colSpan, data, stickySectionHeader }) {
+    return (jsxRuntime.jsx(table.Table.SectionHeader, { colSpan: colSpan, classNames: stickySectionHeader ? { cell: dataTable_module.default.stickySectionHeader } : undefined, children: jsxRuntime.jsxs(flex.Flex, { gap: 3, align: 'center', children: [data?.label, data.showGroupCount ? (jsxRuntime.jsx(badge.Badge, { variant: 'neutral', children: data?.count })) : null] }) }));
 }
-function Rows({ rows = [], onRowClick, classNames, lastRowRef }) {
+function Rows({ rows = [], onRowClick, classNames, lastRowRef, stickyGroupHeader = false }) {
     return rows.map((row, idx) => {
         const isSelected = row.getIsSelected();
         const cells = row.getVisibleCells() || [];
         const isGroupHeader = row.subRows && row.subRows.length > 0;
         const isLastRow = idx === rows.length - 1;
         if (isGroupHeader) {
-            return (jsxRuntime.jsx(GroupHeader, { colSpan: cells.length, data: row.original }, row.id));
+            return (jsxRuntime.jsx(GroupHeader, { colSpan: cells.length, data: row.original, stickySectionHeader: stickyGroupHeader }, row.id));
         }
         return (jsxRuntime.jsx(table.Table.Row, { className: classVarianceAuthority.cx(dataTable_module.default['row'], onRowClick ? dataTable_module.default['clickable'] : '', classNames?.row), "data-state": isSelected && 'selected', ref: isLastRow ? lastRowRef : undefined, onClick: () => onRowClick?.(row.original), children: cells.map(cell => {
                 const columnDef = cell.column.columnDef;
@@ -47,44 +48,51 @@ function Rows({ rows = [], onRowClick, classNames, lastRowRef }) {
 }
 const DefaultEmptyComponent = () => (jsxRuntime.jsx(emptyState.EmptyState, { icon: jsxRuntime.jsx(reactIcons.TableIcon, {}), heading: 'No Data' }));
 function Content({ emptyState, zeroState, classNames = {} }) {
-    const { onRowClick, table: table$1, mode, isLoading, loadMoreData, loadingRowCount = 3, tableQuery } = useDataTable.useDataTable();
+    const { onRowClick, table: table$1, mode, isLoading, loadMoreData, loadingRowCount = 3, tableQuery, defaultSort, stickyGroupHeader = false } = useDataTable.useDataTable();
     const headerGroups = table$1?.getHeaderGroups();
     const rowModel = table$1?.getRowModel();
     const { rows = [] } = rowModel || {};
     const lastRowRef = React.useRef(null);
     const observerRef = React.useRef(null);
+    /* Refs keep callback stable so observer is only recreated when mode/rows.length change; */
+    const loadMoreDataRef = React.useRef(loadMoreData);
+    const isLoadingRef = React.useRef(isLoading);
+    loadMoreDataRef.current = loadMoreData;
+    isLoadingRef.current = isLoading;
     const handleObserver = React.useCallback((entries) => {
         const target = entries[0];
-        if (target.isIntersecting && !isLoading) {
-            loadMoreData();
-        }
-    }, [loadMoreData, isLoading]);
+        if (!target?.isIntersecting)
+            return;
+        if (isLoadingRef.current)
+            return;
+        const loadMore = loadMoreDataRef.current;
+        if (loadMore)
+            loadMore();
+    }, []);
     React.useEffect(() => {
         if (mode !== 'server')
             return;
         if (observerRef.current) {
             observerRef.current.disconnect();
+            observerRef.current = null;
         }
+        const lastRow = lastRowRef.current;
+        if (!lastRow)
+            return;
         observerRef.current = new IntersectionObserver(handleObserver, {
             threshold: 0.1
         });
-        const lastRow = lastRowRef.current;
-        if (lastRow) {
-            observerRef.current.observe(lastRow);
-        }
+        observerRef.current.observe(lastRow);
         return () => {
-            if (observerRef.current && lastRow) {
-                observerRef.current.unobserve(lastRow);
-                observerRef.current.disconnect();
-            }
+            observerRef.current?.disconnect();
+            observerRef.current = null;
         };
     }, [mode, rows.length, handleObserver]);
     const visibleColumnsLength = table$1.getVisibleLeafColumns().length;
     const hasData = rows?.length > 0 || isLoading;
-    const hasFiltersOrSearch = (tableQuery?.filters && tableQuery.filters.length > 0) ||
-        Boolean(tableQuery?.search && tableQuery.search.trim() !== '');
-    const isZeroState = !hasData && !hasFiltersOrSearch;
-    const isEmptyState = !hasData && hasFiltersOrSearch;
+    const hasChanges = index.hasActiveQuery(tableQuery || {}, defaultSort);
+    const isZeroState = !hasData && !hasChanges;
+    const isEmptyState = !hasData && hasChanges;
     const stateToShow = isZeroState
         ? (zeroState ?? emptyState ?? jsxRuntime.jsx(DefaultEmptyComponent, {}))
         : isEmptyState
@@ -92,7 +100,7 @@ function Content({ emptyState, zeroState, classNames = {} }) {
             : null;
     return (jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(dataTable_module.default.contentRoot, classNames.root), children: jsxRuntime.jsxs(table.Table, { className: classNames.table, children: [hasData && (jsxRuntime.jsx(Headers, { headerGroups: headerGroups, className: classNames.header })), jsxRuntime.jsx(table.Table.Body, { className: classNames.body, children: hasData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Rows, { rows: rows, lastRowRef: lastRowRef, onRowClick: onRowClick, classNames: {
                                     row: classNames.row
-                                } }), isLoading ? (jsxRuntime.jsx(LoaderRows, { rowCount: loadingRowCount, columnCount: visibleColumnsLength })) : null] })) : (jsxRuntime.jsx(table.Table.Row, { children: jsxRuntime.jsx(table.Table.Cell, { colSpan: visibleColumnsLength, className: dataTable_module.default.emptyStateCell, children: stateToShow }) })) })] }) }));
+                                }, stickyGroupHeader: stickyGroupHeader }), isLoading ? (jsxRuntime.jsx(LoaderRows, { rowCount: loadingRowCount, columnCount: visibleColumnsLength })) : null] })) : (jsxRuntime.jsx(table.Table.Row, { children: jsxRuntime.jsx(table.Table.Cell, { colSpan: visibleColumnsLength, className: dataTable_module.default.emptyStateCell, children: stateToShow }) })) })] }) }));
 }
 
 exports.Content = Content;

package/dist/components/data-table/components/content.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"content.cjs","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  DataTableContentProps,\n  GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\n\nfunction Headers<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <Table.Header className={className}>\n      {headerGroups?.map(headerGroup => (\n        <Table.Row key={headerGroup?.id}>\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <Table.Head\n                key={header.id}\n                colSpan={header.colSpan}\n                className={cx(styles.head, columnDef.classNames?.header)}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </Table.Head>\n            );\n          })}\n        </Table.Row>\n      ))}\n    </Table.Header>\n  );\n}\n\ninterface RowsProps<TData> {\n  rows: Row<TData>[];\n  onRowClick?: (row: TData) => void;\n  classNames?: {\n    row?: string;\n  };\n  lastRowRef?: React.RefObject<HTMLTableRowElement | null>;\n}\n\nfunction LoaderRows({\n  rowCount,\n  columnCount\n}: {\n  rowCount: number;\n  columnCount: number;\n}) {\n  const rows = Array.from({ length: rowCount });\n  return rows.map((_, rowIndex) => {\n    const columns = Array.from({ length: columnCount });\n    return (\n      <Table.Row key={'loading-row-' + rowIndex}>\n        {columns.map((_, colIndex) => (\n          <Table.Cell key={'loading-column-' + colIndex}>\n            <Skeleton />\n          </Table.Cell>\n        ))}\n      </Table.Row>\n    );\n  });\n}\n\nfunction GroupHeader<TData>({\n  colSpan,\n  data\n}: {\n  colSpan: number;\n  data: GroupedData<TData>;\n}) {\n  return (\n    <Table.SectionHeader colSpan={colSpan}>\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </Table.SectionHeader>\n  );\n}\n\nfunction Rows<TData>({\n  rows = [],\n  onRowClick,\n  classNames,\n  lastRowRef\n}: RowsProps<TData>) {\n  return rows.map((row, idx) => {\n    const isSelected = row.getIsSelected();\n    const cells = row.getVisibleCells() || [];\n    const isGroupHeader = row.subRows && row.subRows.length > 0;\n    const isLastRow = idx === rows.length - 1;\n\n    if (isGroupHeader) {\n      return (\n        <GroupHeader\n          key={row.id}\n          colSpan={cells.length}\n          data={row.original as GroupedData<unknown>}\n        />\n      );\n    }\n\n    return (\n      <Table.Row\n        key={row.id}\n        className={cx(\n          styles['row'],\n          onRowClick ? styles['clickable'] : '',\n          classNames?.row\n        )}\n        data-state={isSelected && 'selected'}\n        ref={isLastRow ? lastRowRef : undefined}\n        onClick={() => onRowClick?.(row.original)}\n      >\n        {cells.map(cell => {\n          const columnDef = cell.column.columnDef as DataTableColumnDef<\n            unknown,\n            unknown\n          >;\n          return (\n            <Table.Cell\n              key={cell.id}\n              className={cx(styles['cell'], columnDef.classNames?.cell)}\n              style={columnDef.styles?.cell}\n            >\n              {flexRender(columnDef.cell, cell.getContext())}\n            </Table.Cell>\n          );\n        })}\n      </Table.Row>\n    );\n  });\n}\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n  emptyState,\n  zeroState,\n  classNames = {}\n}: DataTableContentProps) {\n  const {\n    onRowClick,\n    table,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3,\n    tableQuery\n  } = useDataTable();\n\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  const handleObserver = useCallback(\n    (entries: IntersectionObserverEntry[]) => {\n      const target = entries[0];\n      if (target.isIntersecting && !isLoading) {\n        loadMoreData();\n      }\n    },\n    [loadMoreData, isLoading]\n  );\n\n  useEffect(() => {\n    if (mode !== 'server') return;\n\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n    }\n\n    observerRef.current = new IntersectionObserver(handleObserver, {\n      threshold: 0.1\n    });\n    const lastRow = lastRowRef.current;\n    if (lastRow) {\n      observerRef.current.observe(lastRow);\n    }\n\n    return () => {\n      if (observerRef.current && lastRow) {\n        observerRef.current.unobserve(lastRow);\n        observerRef.current.disconnect();\n      }\n    };\n  }, [mode, rows.length, handleObserver]);\n\n  const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n  const hasData = rows?.length > 0 || isLoading;\n\n  const hasFiltersOrSearch =\n    (tableQuery?.filters && tableQuery.filters.length > 0) ||\n    Boolean(tableQuery?.search && tableQuery.search.trim() !== '');\n\n  const isZeroState = !hasData && !hasFiltersOrSearch;\n  const isEmptyState = !hasData && hasFiltersOrSearch;\n\n  const stateToShow: React.ReactNode = isZeroState\n    ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n    : isEmptyState\n      ? (emptyState ?? <DefaultEmptyComponent />)\n      : null;\n\n  return (\n    <div className={cx(styles.contentRoot, classNames.root)}>\n      <Table className={classNames.table}>\n        {hasData && (\n          <Headers headerGroups={headerGroups} className={classNames.header} />\n        )}\n        <Table.Body className={classNames.body}>\n          {hasData ? (\n            <>\n              <Rows\n                rows={rows}\n                lastRowRef={lastRowRef}\n                onRowClick={onRowClick}\n                classNames={{\n                  row: classNames.row\n                }}\n              />\n              {isLoading ? (\n                <LoaderRows\n                  rowCount={loadingRowCount}\n                  columnCount={visibleColumnsLength}\n                />\n              ) : null}\n            </>\n          ) : (\n            <Table.Row>\n              <Table.Cell\n                colSpan={visibleColumnsLength}\n                className={styles.emptyStateCell}\n              >\n                {stateToShow}\n              </Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAqBA;AAOE;AAKU;;;AAmBZ;AAWA;AAOE;;AAEE;AACA;AASF;AACF;AAEA;;AAiBA;AAEA;;AAOI;;AAEA;;;;;AAaA;AAaM;;AAaF;AAGN;AACF;AAEA;AAIM;;AAeJ;AACA;;AAGA;AACA;AAEA;AAEI;AACA;AACE;;AAEJ;;;;AAOA;AACE;;AAGF;AACE;AACD;AACD;;AAEE;;AAGF;AACE;AACE;AACA;;AAEJ;;;;AAOF;AAEE;AAEF;AACA;;;AAIE;AACE;;AAGJ;;;AAsCF;;"}
+{"version":3,"file":"content.cjs","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  DataTableContentProps,\n  GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { hasActiveQuery } from '../utils';\n\nfunction Headers<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <Table.Header className={className}>\n      {headerGroups?.map(headerGroup => (\n        <Table.Row key={headerGroup?.id}>\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <Table.Head\n                key={header.id}\n                colSpan={header.colSpan}\n                className={cx(styles.head, columnDef.classNames?.header)}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </Table.Head>\n            );\n          })}\n        </Table.Row>\n      ))}\n    </Table.Header>\n  );\n}\n\ninterface RowsProps<TData> {\n  rows: Row<TData>[];\n  onRowClick?: (row: TData) => void;\n  classNames?: {\n    row?: string;\n  };\n  lastRowRef?: React.RefObject<HTMLTableRowElement | null>;\n  stickyGroupHeader?: boolean;\n}\n\nfunction LoaderRows({\n  rowCount,\n  columnCount\n}: {\n  rowCount: number;\n  columnCount: number;\n}) {\n  const rows = Array.from({ length: rowCount });\n  return rows.map((_, rowIndex) => {\n    const columns = Array.from({ length: columnCount });\n    return (\n      <Table.Row key={'loading-row-' + rowIndex}>\n        {columns.map((_, colIndex) => (\n          <Table.Cell key={'loading-column-' + colIndex}>\n            <Skeleton />\n          </Table.Cell>\n        ))}\n      </Table.Row>\n    );\n  });\n}\n\nfunction GroupHeader<TData>({\n  colSpan,\n  data,\n  stickySectionHeader\n}: {\n  colSpan: number;\n  data: GroupedData<TData>;\n  stickySectionHeader?: boolean;\n}) {\n  return (\n    <Table.SectionHeader\n      colSpan={colSpan}\n      classNames={\n        stickySectionHeader ? { cell: styles.stickySectionHeader } : undefined\n      }\n    >\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </Table.SectionHeader>\n  );\n}\n\nfunction Rows<TData>({\n  rows = [],\n  onRowClick,\n  classNames,\n  lastRowRef,\n  stickyGroupHeader = false\n}: RowsProps<TData>) {\n  return rows.map((row, idx) => {\n    const isSelected = row.getIsSelected();\n    const cells = row.getVisibleCells() || [];\n    const isGroupHeader = row.subRows && row.subRows.length > 0;\n    const isLastRow = idx === rows.length - 1;\n\n    if (isGroupHeader) {\n      return (\n        <GroupHeader\n          key={row.id}\n          colSpan={cells.length}\n          data={row.original as GroupedData<unknown>}\n          stickySectionHeader={stickyGroupHeader}\n        />\n      );\n    }\n\n    return (\n      <Table.Row\n        key={row.id}\n        className={cx(\n          styles['row'],\n          onRowClick ? styles['clickable'] : '',\n          classNames?.row\n        )}\n        data-state={isSelected && 'selected'}\n        ref={isLastRow ? lastRowRef : undefined}\n        onClick={() => onRowClick?.(row.original)}\n      >\n        {cells.map(cell => {\n          const columnDef = cell.column.columnDef as DataTableColumnDef<\n            TData,\n            unknown\n          >;\n          return (\n            <Table.Cell\n              key={cell.id}\n              className={cx(styles['cell'], columnDef.classNames?.cell)}\n              style={columnDef.styles?.cell}\n            >\n              {flexRender(columnDef.cell, cell.getContext())}\n            </Table.Cell>\n          );\n        })}\n      </Table.Row>\n    );\n  });\n}\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n  emptyState,\n  zeroState,\n  classNames = {}\n}: DataTableContentProps) {\n  const {\n    onRowClick,\n    table,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3,\n    tableQuery,\n    defaultSort,\n    stickyGroupHeader = false\n  } = useDataTable();\n\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  /* Refs keep callback stable so observer is only recreated when mode/rows.length change; */\n  const loadMoreDataRef = useRef(loadMoreData);\n  const isLoadingRef = useRef(isLoading);\n  loadMoreDataRef.current = loadMoreData;\n  isLoadingRef.current = isLoading;\n\n  const handleObserver = useCallback((entries: IntersectionObserverEntry[]) => {\n    const target = entries[0];\n    if (!target?.isIntersecting) return;\n    if (isLoadingRef.current) return;\n    const loadMore = loadMoreDataRef.current;\n    if (loadMore) loadMore();\n  }, []);\n\n  useEffect(() => {\n    if (mode !== 'server') return;\n\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n      observerRef.current = null;\n    }\n\n    const lastRow = lastRowRef.current;\n    if (!lastRow) return;\n\n    observerRef.current = new IntersectionObserver(handleObserver, {\n      threshold: 0.1\n    });\n    observerRef.current.observe(lastRow);\n\n    return () => {\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n    };\n  }, [mode, rows.length, handleObserver]);\n\n  const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n  const hasData = rows?.length > 0 || isLoading;\n\n  const hasChanges = hasActiveQuery(tableQuery || {}, defaultSort);\n\n  const isZeroState = !hasData && !hasChanges;\n  const isEmptyState = !hasData && hasChanges;\n\n  const stateToShow: React.ReactNode = isZeroState\n    ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n    : isEmptyState\n      ? (emptyState ?? <DefaultEmptyComponent />)\n      : null;\n\n  return (\n    <div className={cx(styles.contentRoot, classNames.root)}>\n      <Table className={classNames.table}>\n        {hasData && (\n          <Headers headerGroups={headerGroups} className={classNames.header} />\n        )}\n        <Table.Body className={classNames.body}>\n          {hasData ? (\n            <>\n              <Rows\n                rows={rows}\n                lastRowRef={lastRowRef}\n                onRowClick={onRowClick}\n                classNames={{\n                  row: classNames.row\n                }}\n                stickyGroupHeader={stickyGroupHeader}\n              />\n              {isLoading ? (\n                <LoaderRows\n                  rowCount={loadingRowCount}\n                  columnCount={visibleColumnsLength}\n                />\n              ) : null}\n            </>\n          ) : (\n            <Table.Row>\n              <Table.Cell\n                colSpan={visibleColumnsLength}\n                className={styles.emptyStateCell}\n              >\n                {stateToShow}\n              </Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsBA;AAOE;AAKU;;;AAmBZ;AAYA;AAOE;;AAEE;AACA;AASF;AACF;AAEA;AASE;AAeF;AAEA;;AAQI;;AAEA;;;;;AAcA;AAaM;;AAaF;AAGN;AACF;AAEA;AAIM;;AAiBJ;AACA;;AAGA;AACA;;AAGA;AACA;AACA;AACA;AAEA;AACE;;;;;AAGA;AACA;AAAc;;;;;AAMd;AACE;AACA;;AAGF;AACA;;AAEA;AACE;AACD;AACD;AAEA;AACE;AACA;AACF;;;;;AASF;AACA;;;AAIE;AACE;;AAGJ;;AAee;AAwBjB;;"}

package/dist/components/data-table/components/content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/content.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEL,qBAAqB,EAEtB,MAAM,qBAAqB,CAAC;AAgJ7B,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,SAAS,EACT,UAAe,EAChB,EAAE,qBAAqB,2CA0GvB"}
+{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/content.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEL,qBAAqB,EAEtB,MAAM,qBAAqB,CAAC;AA2J7B,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,SAAS,EACT,UAAe,EAChB,EAAE,qBAAqB,2CA8GvB"}

package/dist/components/data-table/components/content.js

@@ -11,6 +11,7 @@ import { Skeleton } from '../../skeleton/skeleton.js';
 import { Table } from '../../table/table.js';
 import styles from '../data-table.module.css.js';
 import { useDataTable } from '../hooks/useDataTable.js';
+import { hasActiveQuery } from '../utils/index.js';
 
 function Headers({ headerGroups = [], className = '' }) {
     return (jsx(Table.Header, { className: className, children: headerGroups?.map(headerGroup => (jsx(Table.Row, { children: headerGroup?.headers?.map(header => {
@@ -25,17 +26,17 @@ function LoaderRows({ rowCount, columnCount }) {
         return (jsx(Table.Row, { children: columns.map((_, colIndex) => (jsx(Table.Cell, { children: jsx(Skeleton, {}) }, 'loading-column-' + colIndex))) }, 'loading-row-' + rowIndex));
     });
 }
-function GroupHeader({ colSpan, data }) {
-    return (jsx(Table.SectionHeader, { colSpan: colSpan, children: jsxs(Flex, { gap: 3, align: 'center', children: [data?.label, data.showGroupCount ? (jsx(Badge, { variant: 'neutral', children: data?.count })) : null] }) }));
+function GroupHeader({ colSpan, data, stickySectionHeader }) {
+    return (jsx(Table.SectionHeader, { colSpan: colSpan, classNames: stickySectionHeader ? { cell: styles.stickySectionHeader } : undefined, children: jsxs(Flex, { gap: 3, align: 'center', children: [data?.label, data.showGroupCount ? (jsx(Badge, { variant: 'neutral', children: data?.count })) : null] }) }));
 }
-function Rows({ rows = [], onRowClick, classNames, lastRowRef }) {
+function Rows({ rows = [], onRowClick, classNames, lastRowRef, stickyGroupHeader = false }) {
     return rows.map((row, idx) => {
         const isSelected = row.getIsSelected();
         const cells = row.getVisibleCells() || [];
         const isGroupHeader = row.subRows && row.subRows.length > 0;
         const isLastRow = idx === rows.length - 1;
         if (isGroupHeader) {
-            return (jsx(GroupHeader, { colSpan: cells.length, data: row.original }, row.id));
+            return (jsx(GroupHeader, { colSpan: cells.length, data: row.original, stickySectionHeader: stickyGroupHeader }, row.id));
         }
         return (jsx(Table.Row, { className: cx(styles['row'], onRowClick ? styles['clickable'] : '', classNames?.row), "data-state": isSelected && 'selected', ref: isLastRow ? lastRowRef : undefined, onClick: () => onRowClick?.(row.original), children: cells.map(cell => {
                 const columnDef = cell.column.columnDef;
@@ -45,44 +46,51 @@ function Rows({ rows = [], onRowClick, classNames, lastRowRef }) {
 }
 const DefaultEmptyComponent = () => (jsx(EmptyState, { icon: jsx(TableIcon, {}), heading: 'No Data' }));
 function Content({ emptyState, zeroState, classNames = {} }) {
-    const { onRowClick, table, mode, isLoading, loadMoreData, loadingRowCount = 3, tableQuery } = useDataTable();
+    const { onRowClick, table, mode, isLoading, loadMoreData, loadingRowCount = 3, tableQuery, defaultSort, stickyGroupHeader = false } = useDataTable();
     const headerGroups = table?.getHeaderGroups();
     const rowModel = table?.getRowModel();
     const { rows = [] } = rowModel || {};
     const lastRowRef = useRef(null);
     const observerRef = useRef(null);
+    /* Refs keep callback stable so observer is only recreated when mode/rows.length change; */
+    const loadMoreDataRef = useRef(loadMoreData);
+    const isLoadingRef = useRef(isLoading);
+    loadMoreDataRef.current = loadMoreData;
+    isLoadingRef.current = isLoading;
     const handleObserver = useCallback((entries) => {
         const target = entries[0];
-        if (target.isIntersecting && !isLoading) {
-            loadMoreData();
-        }
-    }, [loadMoreData, isLoading]);
+        if (!target?.isIntersecting)
+            return;
+        if (isLoadingRef.current)
+            return;
+        const loadMore = loadMoreDataRef.current;
+        if (loadMore)
+            loadMore();
+    }, []);
     useEffect(() => {
         if (mode !== 'server')
             return;
         if (observerRef.current) {
             observerRef.current.disconnect();
+            observerRef.current = null;
         }
+        const lastRow = lastRowRef.current;
+        if (!lastRow)
+            return;
         observerRef.current = new IntersectionObserver(handleObserver, {
             threshold: 0.1
         });
-        const lastRow = lastRowRef.current;
-        if (lastRow) {
-            observerRef.current.observe(lastRow);
-        }
+        observerRef.current.observe(lastRow);
         return () => {
-            if (observerRef.current && lastRow) {
-                observerRef.current.unobserve(lastRow);
-                observerRef.current.disconnect();
-            }
+            observerRef.current?.disconnect();
+            observerRef.current = null;
         };
     }, [mode, rows.length, handleObserver]);
     const visibleColumnsLength = table.getVisibleLeafColumns().length;
     const hasData = rows?.length > 0 || isLoading;
-    const hasFiltersOrSearch = (tableQuery?.filters && tableQuery.filters.length > 0) ||
-        Boolean(tableQuery?.search && tableQuery.search.trim() !== '');
-    const isZeroState = !hasData && !hasFiltersOrSearch;
-    const isEmptyState = !hasData && hasFiltersOrSearch;
+    const hasChanges = hasActiveQuery(tableQuery || {}, defaultSort);
+    const isZeroState = !hasData && !hasChanges;
+    const isEmptyState = !hasData && hasChanges;
     const stateToShow = isZeroState
         ? (zeroState ?? emptyState ?? jsx(DefaultEmptyComponent, {}))
         : isEmptyState
@@ -90,7 +98,7 @@ function Content({ emptyState, zeroState, classNames = {} }) {
             : null;
     return (jsx("div", { className: cx(styles.contentRoot, classNames.root), children: jsxs(Table, { className: classNames.table, children: [hasData && (jsx(Headers, { headerGroups: headerGroups, className: classNames.header })), jsx(Table.Body, { className: classNames.body, children: hasData ? (jsxs(Fragment, { children: [jsx(Rows, { rows: rows, lastRowRef: lastRowRef, onRowClick: onRowClick, classNames: {
                                     row: classNames.row
-                                } }), isLoading ? (jsx(LoaderRows, { rowCount: loadingRowCount, columnCount: visibleColumnsLength })) : null] })) : (jsx(Table.Row, { children: jsx(Table.Cell, { colSpan: visibleColumnsLength, className: styles.emptyStateCell, children: stateToShow }) })) })] }) }));
+                                }, stickyGroupHeader: stickyGroupHeader }), isLoading ? (jsx(LoaderRows, { rowCount: loadingRowCount, columnCount: visibleColumnsLength })) : null] })) : (jsx(Table.Row, { children: jsx(Table.Cell, { colSpan: visibleColumnsLength, className: styles.emptyStateCell, children: stateToShow }) })) })] }) }));
 }
 
 export { Content };

package/dist/components/data-table/components/content.js.map

@@ -1 +1 @@
-{"version":3,"file":"content.js","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  DataTableContentProps,\n  GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\n\nfunction Headers<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <Table.Header className={className}>\n      {headerGroups?.map(headerGroup => (\n        <Table.Row key={headerGroup?.id}>\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <Table.Head\n                key={header.id}\n                colSpan={header.colSpan}\n                className={cx(styles.head, columnDef.classNames?.header)}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </Table.Head>\n            );\n          })}\n        </Table.Row>\n      ))}\n    </Table.Header>\n  );\n}\n\ninterface RowsProps<TData> {\n  rows: Row<TData>[];\n  onRowClick?: (row: TData) => void;\n  classNames?: {\n    row?: string;\n  };\n  lastRowRef?: React.RefObject<HTMLTableRowElement | null>;\n}\n\nfunction LoaderRows({\n  rowCount,\n  columnCount\n}: {\n  rowCount: number;\n  columnCount: number;\n}) {\n  const rows = Array.from({ length: rowCount });\n  return rows.map((_, rowIndex) => {\n    const columns = Array.from({ length: columnCount });\n    return (\n      <Table.Row key={'loading-row-' + rowIndex}>\n        {columns.map((_, colIndex) => (\n          <Table.Cell key={'loading-column-' + colIndex}>\n            <Skeleton />\n          </Table.Cell>\n        ))}\n      </Table.Row>\n    );\n  });\n}\n\nfunction GroupHeader<TData>({\n  colSpan,\n  data\n}: {\n  colSpan: number;\n  data: GroupedData<TData>;\n}) {\n  return (\n    <Table.SectionHeader colSpan={colSpan}>\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </Table.SectionHeader>\n  );\n}\n\nfunction Rows<TData>({\n  rows = [],\n  onRowClick,\n  classNames,\n  lastRowRef\n}: RowsProps<TData>) {\n  return rows.map((row, idx) => {\n    const isSelected = row.getIsSelected();\n    const cells = row.getVisibleCells() || [];\n    const isGroupHeader = row.subRows && row.subRows.length > 0;\n    const isLastRow = idx === rows.length - 1;\n\n    if (isGroupHeader) {\n      return (\n        <GroupHeader\n          key={row.id}\n          colSpan={cells.length}\n          data={row.original as GroupedData<unknown>}\n        />\n      );\n    }\n\n    return (\n      <Table.Row\n        key={row.id}\n        className={cx(\n          styles['row'],\n          onRowClick ? styles['clickable'] : '',\n          classNames?.row\n        )}\n        data-state={isSelected && 'selected'}\n        ref={isLastRow ? lastRowRef : undefined}\n        onClick={() => onRowClick?.(row.original)}\n      >\n        {cells.map(cell => {\n          const columnDef = cell.column.columnDef as DataTableColumnDef<\n            unknown,\n            unknown\n          >;\n          return (\n            <Table.Cell\n              key={cell.id}\n              className={cx(styles['cell'], columnDef.classNames?.cell)}\n              style={columnDef.styles?.cell}\n            >\n              {flexRender(columnDef.cell, cell.getContext())}\n            </Table.Cell>\n          );\n        })}\n      </Table.Row>\n    );\n  });\n}\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n  emptyState,\n  zeroState,\n  classNames = {}\n}: DataTableContentProps) {\n  const {\n    onRowClick,\n    table,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3,\n    tableQuery\n  } = useDataTable();\n\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  const handleObserver = useCallback(\n    (entries: IntersectionObserverEntry[]) => {\n      const target = entries[0];\n      if (target.isIntersecting && !isLoading) {\n        loadMoreData();\n      }\n    },\n    [loadMoreData, isLoading]\n  );\n\n  useEffect(() => {\n    if (mode !== 'server') return;\n\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n    }\n\n    observerRef.current = new IntersectionObserver(handleObserver, {\n      threshold: 0.1\n    });\n    const lastRow = lastRowRef.current;\n    if (lastRow) {\n      observerRef.current.observe(lastRow);\n    }\n\n    return () => {\n      if (observerRef.current && lastRow) {\n        observerRef.current.unobserve(lastRow);\n        observerRef.current.disconnect();\n      }\n    };\n  }, [mode, rows.length, handleObserver]);\n\n  const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n  const hasData = rows?.length > 0 || isLoading;\n\n  const hasFiltersOrSearch =\n    (tableQuery?.filters && tableQuery.filters.length > 0) ||\n    Boolean(tableQuery?.search && tableQuery.search.trim() !== '');\n\n  const isZeroState = !hasData && !hasFiltersOrSearch;\n  const isEmptyState = !hasData && hasFiltersOrSearch;\n\n  const stateToShow: React.ReactNode = isZeroState\n    ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n    : isEmptyState\n      ? (emptyState ?? <DefaultEmptyComponent />)\n      : null;\n\n  return (\n    <div className={cx(styles.contentRoot, classNames.root)}>\n      <Table className={classNames.table}>\n        {hasData && (\n          <Headers headerGroups={headerGroups} className={classNames.header} />\n        )}\n        <Table.Body className={classNames.body}>\n          {hasData ? (\n            <>\n              <Rows\n                rows={rows}\n                lastRowRef={lastRowRef}\n                onRowClick={onRowClick}\n                classNames={{\n                  row: classNames.row\n                }}\n              />\n              {isLoading ? (\n                <LoaderRows\n                  rowCount={loadingRowCount}\n                  columnCount={visibleColumnsLength}\n                />\n              ) : null}\n            </>\n          ) : (\n            <Table.Row>\n              <Table.Cell\n                colSpan={visibleColumnsLength}\n                className={styles.emptyStateCell}\n              >\n                {stateToShow}\n              </Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAqBA;AAOE;AAKU;;;AAmBZ;AAWA;AAOE;;AAEE;AACA;AASF;AACF;AAEA;;AAiBA;AAEA;;AAOI;;AAEA;;;;;AAaA;AAaM;;AAaF;AAGN;AACF;AAEA;AAIM;;AAeJ;AACA;;AAGA;AACA;AAEA;AAEI;AACA;AACE;;AAEJ;;;;AAOA;AACE;;AAGF;AACE;AACD;AACD;;AAEE;;AAGF;AACE;AACE;AACA;;AAEJ;;;;AAOF;AAEE;AAEF;AACA;;;AAIE;AACE;;AAGJ;;;AAsCF;;"}
+{"version":3,"file":"content.js","sources":["../../../../components/data-table/components/content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport { Table } from '../../table';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  DataTableContentProps,\n  GroupedData\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { hasActiveQuery } from '../utils';\n\nfunction Headers<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <Table.Header className={className}>\n      {headerGroups?.map(headerGroup => (\n        <Table.Row key={headerGroup?.id}>\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <Table.Head\n                key={header.id}\n                colSpan={header.colSpan}\n                className={cx(styles.head, columnDef.classNames?.header)}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </Table.Head>\n            );\n          })}\n        </Table.Row>\n      ))}\n    </Table.Header>\n  );\n}\n\ninterface RowsProps<TData> {\n  rows: Row<TData>[];\n  onRowClick?: (row: TData) => void;\n  classNames?: {\n    row?: string;\n  };\n  lastRowRef?: React.RefObject<HTMLTableRowElement | null>;\n  stickyGroupHeader?: boolean;\n}\n\nfunction LoaderRows({\n  rowCount,\n  columnCount\n}: {\n  rowCount: number;\n  columnCount: number;\n}) {\n  const rows = Array.from({ length: rowCount });\n  return rows.map((_, rowIndex) => {\n    const columns = Array.from({ length: columnCount });\n    return (\n      <Table.Row key={'loading-row-' + rowIndex}>\n        {columns.map((_, colIndex) => (\n          <Table.Cell key={'loading-column-' + colIndex}>\n            <Skeleton />\n          </Table.Cell>\n        ))}\n      </Table.Row>\n    );\n  });\n}\n\nfunction GroupHeader<TData>({\n  colSpan,\n  data,\n  stickySectionHeader\n}: {\n  colSpan: number;\n  data: GroupedData<TData>;\n  stickySectionHeader?: boolean;\n}) {\n  return (\n    <Table.SectionHeader\n      colSpan={colSpan}\n      classNames={\n        stickySectionHeader ? { cell: styles.stickySectionHeader } : undefined\n      }\n    >\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </Table.SectionHeader>\n  );\n}\n\nfunction Rows<TData>({\n  rows = [],\n  onRowClick,\n  classNames,\n  lastRowRef,\n  stickyGroupHeader = false\n}: RowsProps<TData>) {\n  return rows.map((row, idx) => {\n    const isSelected = row.getIsSelected();\n    const cells = row.getVisibleCells() || [];\n    const isGroupHeader = row.subRows && row.subRows.length > 0;\n    const isLastRow = idx === rows.length - 1;\n\n    if (isGroupHeader) {\n      return (\n        <GroupHeader\n          key={row.id}\n          colSpan={cells.length}\n          data={row.original as GroupedData<unknown>}\n          stickySectionHeader={stickyGroupHeader}\n        />\n      );\n    }\n\n    return (\n      <Table.Row\n        key={row.id}\n        className={cx(\n          styles['row'],\n          onRowClick ? styles['clickable'] : '',\n          classNames?.row\n        )}\n        data-state={isSelected && 'selected'}\n        ref={isLastRow ? lastRowRef : undefined}\n        onClick={() => onRowClick?.(row.original)}\n      >\n        {cells.map(cell => {\n          const columnDef = cell.column.columnDef as DataTableColumnDef<\n            TData,\n            unknown\n          >;\n          return (\n            <Table.Cell\n              key={cell.id}\n              className={cx(styles['cell'], columnDef.classNames?.cell)}\n              style={columnDef.styles?.cell}\n            >\n              {flexRender(columnDef.cell, cell.getContext())}\n            </Table.Cell>\n          );\n        })}\n      </Table.Row>\n    );\n  });\n}\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function Content({\n  emptyState,\n  zeroState,\n  classNames = {}\n}: DataTableContentProps) {\n  const {\n    onRowClick,\n    table,\n    mode,\n    isLoading,\n    loadMoreData,\n    loadingRowCount = 3,\n    tableQuery,\n    defaultSort,\n    stickyGroupHeader = false\n  } = useDataTable();\n\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const lastRowRef = useRef<HTMLTableRowElement | null>(null);\n  const observerRef = useRef<IntersectionObserver | null>(null);\n\n  /* Refs keep callback stable so observer is only recreated when mode/rows.length change; */\n  const loadMoreDataRef = useRef(loadMoreData);\n  const isLoadingRef = useRef(isLoading);\n  loadMoreDataRef.current = loadMoreData;\n  isLoadingRef.current = isLoading;\n\n  const handleObserver = useCallback((entries: IntersectionObserverEntry[]) => {\n    const target = entries[0];\n    if (!target?.isIntersecting) return;\n    if (isLoadingRef.current) return;\n    const loadMore = loadMoreDataRef.current;\n    if (loadMore) loadMore();\n  }, []);\n\n  useEffect(() => {\n    if (mode !== 'server') return;\n\n    if (observerRef.current) {\n      observerRef.current.disconnect();\n      observerRef.current = null;\n    }\n\n    const lastRow = lastRowRef.current;\n    if (!lastRow) return;\n\n    observerRef.current = new IntersectionObserver(handleObserver, {\n      threshold: 0.1\n    });\n    observerRef.current.observe(lastRow);\n\n    return () => {\n      observerRef.current?.disconnect();\n      observerRef.current = null;\n    };\n  }, [mode, rows.length, handleObserver]);\n\n  const visibleColumnsLength = table.getVisibleLeafColumns().length;\n\n  const hasData = rows?.length > 0 || isLoading;\n\n  const hasChanges = hasActiveQuery(tableQuery || {}, defaultSort);\n\n  const isZeroState = !hasData && !hasChanges;\n  const isEmptyState = !hasData && hasChanges;\n\n  const stateToShow: React.ReactNode = isZeroState\n    ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n    : isEmptyState\n      ? (emptyState ?? <DefaultEmptyComponent />)\n      : null;\n\n  return (\n    <div className={cx(styles.contentRoot, classNames.root)}>\n      <Table className={classNames.table}>\n        {hasData && (\n          <Headers headerGroups={headerGroups} className={classNames.header} />\n        )}\n        <Table.Body className={classNames.body}>\n          {hasData ? (\n            <>\n              <Rows\n                rows={rows}\n                lastRowRef={lastRowRef}\n                onRowClick={onRowClick}\n                classNames={{\n                  row: classNames.row\n                }}\n                stickyGroupHeader={stickyGroupHeader}\n              />\n              {isLoading ? (\n                <LoaderRows\n                  rowCount={loadingRowCount}\n                  columnCount={visibleColumnsLength}\n                />\n              ) : null}\n            </>\n          ) : (\n            <Table.Row>\n              <Table.Cell\n                colSpan={visibleColumnsLength}\n                className={styles.emptyStateCell}\n              >\n                {stateToShow}\n              </Table.Cell>\n            </Table.Row>\n          )}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAsBA;AAOE;AAKU;;;AAmBZ;AAYA;AAOE;;AAEE;AACA;AASF;AACF;AAEA;AASE;AAeF;AAEA;;AAQI;;AAEA;;;;;AAcA;AAaM;;AAaF;AAGN;AACF;AAEA;AAIM;;AAiBJ;AACA;;AAGA;AACA;;AAGA;AACA;AACA;AACA;AAEA;AACE;;;;;AAGA;AACA;AAAc;;;;;AAMd;AACE;AACA;;AAGF;AACA;;AAEA;AACE;AACD;AACD;AAEA;AACE;AACA;AACF;;;;;AASF;AACA;;;AAIE;AACE;;AAGJ;;AAee;AAwBjB;;"}

package/dist/components/data-table/components/filters.cjs

@@ -6,10 +6,10 @@ var React = require('react');
 var filter = require('../../../icons/assets/filter.svg.cjs');
 var filters = require('../../../types/filters.cjs');
 var button = require('../../button/button.cjs');
-var dropdownMenu = require('../../dropdown-menu/dropdown-menu.cjs');
 var filterChip = require('../../filter-chip/filter-chip.cjs');
 var flex = require('../../flex/flex.cjs');
 var iconButton = require('../../icon-button/icon-button.cjs');
+var menu = require('../../menu/menu.cjs');
 var useDataTable = require('../hooks/useDataTable.cjs');
 var useFilters = require('../hooks/useFilters.cjs');
 
@@ -25,10 +25,10 @@ function AddFilter({ columnList = [], appliedFiltersSet, onAddFilter, children }
         else
             return (jsxRuntime.jsx(button.Button, { variant: 'text', size: 'small', leadingIcon: jsxRuntime.jsx(filter.ReactComponent, {}), color: 'neutral', children: "Filter" }));
     }, [children, appliedFiltersSet, availableFilters]);
-    return availableFilters.length > 0 ? (jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [jsxRuntime.jsx(dropdownMenu.DropdownMenu.Trigger, { asChild: true, children: trigger }), jsxRuntime.jsx(dropdownMenu.DropdownMenu.Content, { children: availableFilters?.map(column => {
+    return availableFilters.length > 0 ? (jsxRuntime.jsxs(menu.Menu, { children: [jsxRuntime.jsx(menu.Menu.Trigger, { render: React.isValidElement(trigger) ? trigger : jsxRuntime.jsx("button", { children: trigger }) }), jsxRuntime.jsx(menu.Menu.Content, { children: availableFilters?.map(column => {
                     const columnDef = column.columnDef;
                     const id = columnDef.accessorKey || column.id;
-                    return (jsxRuntime.jsx(dropdownMenu.DropdownMenu.Item, { onClick: () => onAddFilter(column), children: columnDef.header || id }, id));
+                    return (jsxRuntime.jsx(menu.Menu.Item, { onClick: () => onAddFilter(column), children: columnDef.header || id }, id));
                 }) })] })) : null;
 }
 function Filters({ classNames, className, trigger }) {

package/dist/components/data-table/components/filters.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"filters.cjs","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode, useMemo } from 'react';\nimport { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport { Button } from '../../button';\nimport { DropdownMenu } from '../../dropdown-menu';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ntype Trigger<TData, TValue> =\n  | ReactNode\n  | (({\n      availableFilters,\n      appliedFilters\n    }: {\n      availableFilters: DataTableColumn<TData, TValue>[];\n      appliedFilters: Set<string>;\n    }) => ReactNode);\n\ninterface AddFilterProps<TData, TValue> {\n  columnList: DataTableColumn<TData, TValue>[];\n  appliedFiltersSet: Set<string>;\n  onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n  children?: Trigger<TData, TValue>;\n}\n\nfunction AddFilter<TData, TValue>({\n  columnList = [],\n  appliedFiltersSet,\n  onAddFilter,\n  children\n}: AddFilterProps<TData, TValue>) {\n  const availableFilters = columnList?.filter(\n    col => !appliedFiltersSet.has(col.id)\n  );\n\n  const trigger = useMemo(() => {\n    if (typeof children === 'function')\n      return children({ availableFilters, appliedFilters: appliedFiltersSet });\n    else if (children) return children;\n    else if (appliedFiltersSet.size > 0)\n      return (\n        <IconButton size={4}>\n          <FilterIcon />\n        </IconButton>\n      );\n    else\n      return (\n        <Button\n          variant='text'\n          size='small'\n          leadingIcon={<FilterIcon />}\n          color='neutral'\n        >\n          Filter\n        </Button>\n      );\n  }, [children, appliedFiltersSet, availableFilters]);\n\n  return availableFilters.length > 0 ? (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        {availableFilters?.map(column => {\n          const columnDef = column.columnDef;\n          const id = columnDef.accessorKey || column.id;\n          return (\n            <DropdownMenu.Item key={id} onClick={() => onAddFilter(column)}>\n              {columnDef.header || id}\n            </DropdownMenu.Item>\n          );\n        })}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  ) : null;\n}\n\nexport function Filters<TData, TValue>({\n  classNames,\n  className,\n  trigger\n}: {\n  classNames?: {\n    container?: string;\n    filterChips?: string;\n    addFilter?: string;\n  };\n  className?: string;\n  trigger?: Trigger<TData, TValue>;\n}) {\n  const { table, tableQuery } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const {\n    onAddFilter,\n    handleRemoveFilter,\n    handleFilterValueChange,\n    handleFilterOperationChange\n  } = useFilters<TData, TValue>();\n\n  const columnList = columns?.filter(\n    column => column.columnDef.enableColumnFilter\n  );\n\n  const appliedFiltersSet = new Set(\n    tableQuery?.filters?.map(filter => filter.name)\n  );\n\n  const appliedFilters =\n    tableQuery?.filters?.map(filter => {\n      const columnDef = columns?.find(col => {\n        const columnDef = col.columnDef;\n        const id = columnDef.accessorKey || col.id;\n        return id === filter.name;\n      })?.columnDef;\n      return {\n        filterType: columnDef?.filterType || FilterType.string,\n        label: (columnDef?.header as string) || '',\n        options: columnDef?.filterOptions || [],\n        selectProps: columnDef?.filterProps?.select,\n        ...filter\n      };\n    }) || [];\n\n  return (\n    <Flex gap={3} className={className}>\n      {appliedFilters.length > 0 && (\n        <Flex gap={3} className={classNames?.container}>\n          {appliedFilters.map(filter => (\n            <FilterChip\n              key={filter.name}\n              label={filter.label}\n              value={filter.value}\n              onRemove={() => handleRemoveFilter(filter.name)}\n              onValueChange={value =>\n                handleFilterValueChange(filter.name, value)\n              }\n              onOperationChange={operator =>\n                handleFilterOperationChange(\n                  filter.name,\n                  operator as FilterOperatorTypes\n                )\n              }\n              columnType={filter.filterType}\n              options={filter.options}\n              selectProps={filter.selectProps}\n              className={classNames?.filterChips}\n            />\n          ))}\n        </Flex>\n      )}\n      <AddFilter\n        columnList={columnList}\n        appliedFiltersSet={appliedFiltersSet}\n        onAddFilter={onAddFilter}\n      >\n        {trigger}\n      </AddFilter>\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA+BA;;AAUE;;;AAGO;AAAc;AACd;AACH;;;;AAkBJ;AAKQ;;;;AAWV;AAEM;;AAcJ;AAEA;AAOA;;;;AAWM;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;;;AAIN;AAoCF;;"}
+{"version":3,"file":"filters.cjs","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["'use client';\n\nimport React, { isValidElement, ReactNode, useMemo } from 'react';\nimport { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport { Button } from '../../button';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { Menu } from '../../menu';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ntype Trigger<TData, TValue> =\n  | ReactNode\n  | (({\n      availableFilters,\n      appliedFilters\n    }: {\n      availableFilters: DataTableColumn<TData, TValue>[];\n      appliedFilters: Set<string>;\n    }) => ReactNode);\n\ninterface AddFilterProps<TData, TValue> {\n  columnList: DataTableColumn<TData, TValue>[];\n  appliedFiltersSet: Set<string>;\n  onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n  children?: Trigger<TData, TValue>;\n}\n\nfunction AddFilter<TData, TValue>({\n  columnList = [],\n  appliedFiltersSet,\n  onAddFilter,\n  children\n}: AddFilterProps<TData, TValue>) {\n  const availableFilters = columnList?.filter(\n    col => !appliedFiltersSet.has(col.id)\n  );\n\n  const trigger = useMemo(() => {\n    if (typeof children === 'function')\n      return children({ availableFilters, appliedFilters: appliedFiltersSet });\n    else if (children) return children;\n    else if (appliedFiltersSet.size > 0)\n      return (\n        <IconButton size={4}>\n          <FilterIcon />\n        </IconButton>\n      );\n    else\n      return (\n        <Button\n          variant='text'\n          size='small'\n          leadingIcon={<FilterIcon />}\n          color='neutral'\n        >\n          Filter\n        </Button>\n      );\n  }, [children, appliedFiltersSet, availableFilters]);\n\n  return availableFilters.length > 0 ? (\n    <Menu>\n      <Menu.Trigger\n        render={isValidElement(trigger) ? trigger : <button>{trigger}</button>}\n      />\n      <Menu.Content>\n        {availableFilters?.map(column => {\n          const columnDef = column.columnDef;\n          const id = columnDef.accessorKey || column.id;\n          return (\n            <Menu.Item key={id} onClick={() => onAddFilter(column)}>\n              {columnDef.header || id}\n            </Menu.Item>\n          );\n        })}\n      </Menu.Content>\n    </Menu>\n  ) : null;\n}\n\nexport function Filters<TData, TValue>({\n  classNames,\n  className,\n  trigger\n}: {\n  classNames?: {\n    container?: string;\n    filterChips?: string;\n    addFilter?: string;\n  };\n  className?: string;\n  trigger?: Trigger<TData, TValue>;\n}) {\n  const { table, tableQuery } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const {\n    onAddFilter,\n    handleRemoveFilter,\n    handleFilterValueChange,\n    handleFilterOperationChange\n  } = useFilters<TData, TValue>();\n\n  const columnList = columns?.filter(\n    column => column.columnDef.enableColumnFilter\n  );\n\n  const appliedFiltersSet = new Set(\n    tableQuery?.filters?.map(filter => filter.name)\n  );\n\n  const appliedFilters =\n    tableQuery?.filters?.map(filter => {\n      const columnDef = columns?.find(col => {\n        const columnDef = col.columnDef;\n        const id = columnDef.accessorKey || col.id;\n        return id === filter.name;\n      })?.columnDef;\n      return {\n        filterType: columnDef?.filterType || FilterType.string,\n        label: (columnDef?.header as string) || '',\n        options: columnDef?.filterOptions || [],\n        selectProps: columnDef?.filterProps?.select,\n        ...filter\n      };\n    }) || [];\n\n  return (\n    <Flex gap={3} className={className}>\n      {appliedFilters.length > 0 && (\n        <Flex gap={3} className={classNames?.container}>\n          {appliedFilters.map(filter => (\n            <FilterChip\n              key={filter.name}\n              label={filter.label}\n              value={filter.value}\n              onRemove={() => handleRemoveFilter(filter.name)}\n              onValueChange={value =>\n                handleFilterValueChange(filter.name, value)\n              }\n              onOperationChange={operator =>\n                handleFilterOperationChange(\n                  filter.name,\n                  operator as FilterOperatorTypes\n                )\n              }\n              columnType={filter.filterType}\n              options={filter.options}\n              selectProps={filter.selectProps}\n              className={classNames?.filterChips}\n            />\n          ))}\n        </Flex>\n      )}\n      <AddFilter\n        columnList={columnList}\n        appliedFiltersSet={appliedFiltersSet}\n        onAddFilter={onAddFilter}\n      >\n        {trigger}\n      </AddFilter>\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA+BA;;AAUE;;;AAGO;AAAc;AACd;AACH;;;;;AAyBI;;;;AAWV;AAEM;;AAcJ;AAEA;AAOA;;;;AAWM;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;;;AAIN;AAoCF;;"}

package/dist/components/data-table/components/filters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/filters.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAQ3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAItD,KAAK,OAAO,CAAC,KAAK,EAAE,MAAM,IACtB,SAAS,GACT,CAAC,CAAC,EACA,gBAAgB,EAChB,cAAc,EACf,EAAE;IACD,gBAAgB,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;IACnD,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAC7B,KAAK,SAAS,CAAC,CAAC;AA4DrB,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,EACrC,UAAU,EACV,SAAS,EACT,OAAO,EACR,EAAE;IACD,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAClC,2CAuEA"}
+{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/filters.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAkB,SAAS,EAAW,MAAM,OAAO,CAAC;AAQlE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAItD,KAAK,OAAO,CAAC,KAAK,EAAE,MAAM,IACtB,SAAS,GACT,CAAC,CAAC,EACA,gBAAgB,EAChB,cAAc,EACf,EAAE;IACD,gBAAgB,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;IACnD,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAC7B,KAAK,SAAS,CAAC,CAAC;AA8DrB,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,EACrC,UAAU,EACV,SAAS,EACT,OAAO,EACR,EAAE;IACD,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAClC,2CAuEA"}

package/dist/components/data-table/components/filters.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { useMemo, isValidElement } from 'react';
 import { ReactComponent as SvgFilter } from '../../../icons/assets/filter.svg.js';
 import { FilterType } from '../../../types/filters.js';
 import { Button } from '../../button/button.js';
-import { DropdownMenu } from '../../dropdown-menu/dropdown-menu.js';
 import { FilterChip } from '../../filter-chip/filter-chip.js';
 import { Flex } from '../../flex/flex.js';
 import { IconButton } from '../../icon-button/icon-button.js';
+import { Menu } from '../../menu/menu.js';
 import { useDataTable } from '../hooks/useDataTable.js';
 import { useFilters } from '../hooks/useFilters.js';
 
@@ -23,10 +23,10 @@ function AddFilter({ columnList = [], appliedFiltersSet, onAddFilter, children }
         else
             return (jsx(Button, { variant: 'text', size: 'small', leadingIcon: jsx(SvgFilter, {}), color: 'neutral', children: "Filter" }));
     }, [children, appliedFiltersSet, availableFilters]);
-    return availableFilters.length > 0 ? (jsxs(DropdownMenu, { children: [jsx(DropdownMenu.Trigger, { asChild: true, children: trigger }), jsx(DropdownMenu.Content, { children: availableFilters?.map(column => {
+    return availableFilters.length > 0 ? (jsxs(Menu, { children: [jsx(Menu.Trigger, { render: isValidElement(trigger) ? trigger : jsx("button", { children: trigger }) }), jsx(Menu.Content, { children: availableFilters?.map(column => {
                     const columnDef = column.columnDef;
                     const id = columnDef.accessorKey || column.id;
-                    return (jsx(DropdownMenu.Item, { onClick: () => onAddFilter(column), children: columnDef.header || id }, id));
+                    return (jsx(Menu.Item, { onClick: () => onAddFilter(column), children: columnDef.header || id }, id));
                 }) })] })) : null;
 }
 function Filters({ classNames, className, trigger }) {

package/dist/components/data-table/components/filters.js.map

@@ -1 +1 @@
-{"version":3,"file":"filters.js","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode, useMemo } from 'react';\nimport { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport { Button } from '../../button';\nimport { DropdownMenu } from '../../dropdown-menu';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ntype Trigger<TData, TValue> =\n  | ReactNode\n  | (({\n      availableFilters,\n      appliedFilters\n    }: {\n      availableFilters: DataTableColumn<TData, TValue>[];\n      appliedFilters: Set<string>;\n    }) => ReactNode);\n\ninterface AddFilterProps<TData, TValue> {\n  columnList: DataTableColumn<TData, TValue>[];\n  appliedFiltersSet: Set<string>;\n  onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n  children?: Trigger<TData, TValue>;\n}\n\nfunction AddFilter<TData, TValue>({\n  columnList = [],\n  appliedFiltersSet,\n  onAddFilter,\n  children\n}: AddFilterProps<TData, TValue>) {\n  const availableFilters = columnList?.filter(\n    col => !appliedFiltersSet.has(col.id)\n  );\n\n  const trigger = useMemo(() => {\n    if (typeof children === 'function')\n      return children({ availableFilters, appliedFilters: appliedFiltersSet });\n    else if (children) return children;\n    else if (appliedFiltersSet.size > 0)\n      return (\n        <IconButton size={4}>\n          <FilterIcon />\n        </IconButton>\n      );\n    else\n      return (\n        <Button\n          variant='text'\n          size='small'\n          leadingIcon={<FilterIcon />}\n          color='neutral'\n        >\n          Filter\n        </Button>\n      );\n  }, [children, appliedFiltersSet, availableFilters]);\n\n  return availableFilters.length > 0 ? (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        {availableFilters?.map(column => {\n          const columnDef = column.columnDef;\n          const id = columnDef.accessorKey || column.id;\n          return (\n            <DropdownMenu.Item key={id} onClick={() => onAddFilter(column)}>\n              {columnDef.header || id}\n            </DropdownMenu.Item>\n          );\n        })}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  ) : null;\n}\n\nexport function Filters<TData, TValue>({\n  classNames,\n  className,\n  trigger\n}: {\n  classNames?: {\n    container?: string;\n    filterChips?: string;\n    addFilter?: string;\n  };\n  className?: string;\n  trigger?: Trigger<TData, TValue>;\n}) {\n  const { table, tableQuery } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const {\n    onAddFilter,\n    handleRemoveFilter,\n    handleFilterValueChange,\n    handleFilterOperationChange\n  } = useFilters<TData, TValue>();\n\n  const columnList = columns?.filter(\n    column => column.columnDef.enableColumnFilter\n  );\n\n  const appliedFiltersSet = new Set(\n    tableQuery?.filters?.map(filter => filter.name)\n  );\n\n  const appliedFilters =\n    tableQuery?.filters?.map(filter => {\n      const columnDef = columns?.find(col => {\n        const columnDef = col.columnDef;\n        const id = columnDef.accessorKey || col.id;\n        return id === filter.name;\n      })?.columnDef;\n      return {\n        filterType: columnDef?.filterType || FilterType.string,\n        label: (columnDef?.header as string) || '',\n        options: columnDef?.filterOptions || [],\n        selectProps: columnDef?.filterProps?.select,\n        ...filter\n      };\n    }) || [];\n\n  return (\n    <Flex gap={3} className={className}>\n      {appliedFilters.length > 0 && (\n        <Flex gap={3} className={classNames?.container}>\n          {appliedFilters.map(filter => (\n            <FilterChip\n              key={filter.name}\n              label={filter.label}\n              value={filter.value}\n              onRemove={() => handleRemoveFilter(filter.name)}\n              onValueChange={value =>\n                handleFilterValueChange(filter.name, value)\n              }\n              onOperationChange={operator =>\n                handleFilterOperationChange(\n                  filter.name,\n                  operator as FilterOperatorTypes\n                )\n              }\n              columnType={filter.filterType}\n              options={filter.options}\n              selectProps={filter.selectProps}\n              className={classNames?.filterChips}\n            />\n          ))}\n        </Flex>\n      )}\n      <AddFilter\n        columnList={columnList}\n        appliedFiltersSet={appliedFiltersSet}\n        onAddFilter={onAddFilter}\n      >\n        {trigger}\n      </AddFilter>\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AA+BA;;AAUE;;;AAGO;AAAc;AACd;AACH;;;;AAkBJ;AAKQ;;;;AAWV;AAEM;;AAcJ;AAEA;AAOA;;;;AAWM;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;;;AAIN;AAoCF;;"}
+{"version":3,"file":"filters.js","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["'use client';\n\nimport React, { isValidElement, ReactNode, useMemo } from 'react';\nimport { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport { Button } from '../../button';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { Menu } from '../../menu';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ntype Trigger<TData, TValue> =\n  | ReactNode\n  | (({\n      availableFilters,\n      appliedFilters\n    }: {\n      availableFilters: DataTableColumn<TData, TValue>[];\n      appliedFilters: Set<string>;\n    }) => ReactNode);\n\ninterface AddFilterProps<TData, TValue> {\n  columnList: DataTableColumn<TData, TValue>[];\n  appliedFiltersSet: Set<string>;\n  onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n  children?: Trigger<TData, TValue>;\n}\n\nfunction AddFilter<TData, TValue>({\n  columnList = [],\n  appliedFiltersSet,\n  onAddFilter,\n  children\n}: AddFilterProps<TData, TValue>) {\n  const availableFilters = columnList?.filter(\n    col => !appliedFiltersSet.has(col.id)\n  );\n\n  const trigger = useMemo(() => {\n    if (typeof children === 'function')\n      return children({ availableFilters, appliedFilters: appliedFiltersSet });\n    else if (children) return children;\n    else if (appliedFiltersSet.size > 0)\n      return (\n        <IconButton size={4}>\n          <FilterIcon />\n        </IconButton>\n      );\n    else\n      return (\n        <Button\n          variant='text'\n          size='small'\n          leadingIcon={<FilterIcon />}\n          color='neutral'\n        >\n          Filter\n        </Button>\n      );\n  }, [children, appliedFiltersSet, availableFilters]);\n\n  return availableFilters.length > 0 ? (\n    <Menu>\n      <Menu.Trigger\n        render={isValidElement(trigger) ? trigger : <button>{trigger}</button>}\n      />\n      <Menu.Content>\n        {availableFilters?.map(column => {\n          const columnDef = column.columnDef;\n          const id = columnDef.accessorKey || column.id;\n          return (\n            <Menu.Item key={id} onClick={() => onAddFilter(column)}>\n              {columnDef.header || id}\n            </Menu.Item>\n          );\n        })}\n      </Menu.Content>\n    </Menu>\n  ) : null;\n}\n\nexport function Filters<TData, TValue>({\n  classNames,\n  className,\n  trigger\n}: {\n  classNames?: {\n    container?: string;\n    filterChips?: string;\n    addFilter?: string;\n  };\n  className?: string;\n  trigger?: Trigger<TData, TValue>;\n}) {\n  const { table, tableQuery } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const {\n    onAddFilter,\n    handleRemoveFilter,\n    handleFilterValueChange,\n    handleFilterOperationChange\n  } = useFilters<TData, TValue>();\n\n  const columnList = columns?.filter(\n    column => column.columnDef.enableColumnFilter\n  );\n\n  const appliedFiltersSet = new Set(\n    tableQuery?.filters?.map(filter => filter.name)\n  );\n\n  const appliedFilters =\n    tableQuery?.filters?.map(filter => {\n      const columnDef = columns?.find(col => {\n        const columnDef = col.columnDef;\n        const id = columnDef.accessorKey || col.id;\n        return id === filter.name;\n      })?.columnDef;\n      return {\n        filterType: columnDef?.filterType || FilterType.string,\n        label: (columnDef?.header as string) || '',\n        options: columnDef?.filterOptions || [],\n        selectProps: columnDef?.filterProps?.select,\n        ...filter\n      };\n    }) || [];\n\n  return (\n    <Flex gap={3} className={className}>\n      {appliedFilters.length > 0 && (\n        <Flex gap={3} className={classNames?.container}>\n          {appliedFilters.map(filter => (\n            <FilterChip\n              key={filter.name}\n              label={filter.label}\n              value={filter.value}\n              onRemove={() => handleRemoveFilter(filter.name)}\n              onValueChange={value =>\n                handleFilterValueChange(filter.name, value)\n              }\n              onOperationChange={operator =>\n                handleFilterOperationChange(\n                  filter.name,\n                  operator as FilterOperatorTypes\n                )\n              }\n              columnType={filter.filterType}\n              options={filter.options}\n              selectProps={filter.selectProps}\n              className={classNames?.filterChips}\n            />\n          ))}\n        </Flex>\n      )}\n      <AddFilter\n        columnList={columnList}\n        appliedFiltersSet={appliedFiltersSet}\n        onAddFilter={onAddFilter}\n      >\n        {trigger}\n      </AddFilter>\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AA+BA;;AAUE;;;AAGO;AAAc;AACd;AACH;;;;;AAyBI;;;;AAWV;AAEM;;AAcJ;AAEA;AAOA;;;;AAWM;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;;;AAIN;AAoCF;;"}

package/dist/components/data-table/components/virtualized-content.cjs

@@ -13,7 +13,9 @@ var emptyState = require('../../empty-state/empty-state.cjs');
 var flex = require('../../flex/flex.cjs');
 var skeleton = require('../../skeleton/skeleton.cjs');
 var dataTable_module = require('../data-table.module.css.cjs');
+var dataTable_types = require('../data-table.types.cjs');
 var useDataTable = require('../hooks/useDataTable.cjs');
+var index = require('../utils/index.cjs');
 
 function VirtualHeaders({ headerGroups = [], className = '' }) {
     return (jsxRuntime.jsx("div", { role: 'rowgroup', className: classVarianceAuthority.cx(dataTable_module.default.virtualHeaderGroup, className), children: headerGroups?.map(headerGroup => (jsxRuntime.jsx("div", { role: 'row', className: dataTable_module.default.virtualHeaderRow, children: headerGroup?.headers?.map(header => {
@@ -55,11 +57,25 @@ function VirtualLoaderRows({ columns, rowHeight, count }) {
 }
 const DefaultEmptyComponent = () => (jsxRuntime.jsx(emptyState.EmptyState, { icon: jsxRuntime.jsx(reactIcons.TableIcon, {}), heading: 'No Data' }));
 function VirtualizedContent({ rowHeight = 40, groupHeaderHeight, overscan = 5, loadMoreOffset = 100, emptyState, zeroState, classNames = {} }) {
-    const { onRowClick, table, isLoading, loadMoreData, tableQuery, loadingRowCount = 3 } = useDataTable.useDataTable();
+    const { onRowClick, table, isLoading, loadMoreData, tableQuery, defaultSort, loadingRowCount = 3, stickyGroupHeader = false } = useDataTable.useDataTable();
     const headerGroups = table?.getHeaderGroups();
     const rowModel = table?.getRowModel();
     const { rows = [] } = rowModel || {};
     const scrollContainerRef = React.useRef(null);
+    const headerRef = React.useRef(null);
+    const [stickyGroup, setStickyGroup] = React.useState(null);
+    const [headerHeight, setHeaderHeight] = React.useState(40);
+    const groupBy = tableQuery?.group_by?.[0];
+    const isGrouped = Boolean(groupBy) && groupBy !== dataTable_types.defaultGroupOption.id;
+    const groupHeaderList = React.useMemo(() => {
+        const list = [];
+        rows.forEach((row, i) => {
+            if (row.subRows && row.subRows.length > 0) {
+                list.push({ index: i, data: row.original });
+            }
+        });
+        return list;
+    }, [rows]);
     const showLoaderRows = isLoading && rows.length > 0;
     const virtualizer = reactVirtual.useVirtualizer({
         count: rows.length,
@@ -71,20 +87,51 @@ function VirtualizedContent({ rowHeight = 40, groupHeaderHeight, overscan = 5, l
         },
         overscan
     });
+    const updateStickyGroup = React.useCallback(() => {
+        if (!stickyGroupHeader || !isGrouped || groupHeaderList.length === 0) {
+            setStickyGroup(null);
+            return;
+        }
+        const items = virtualizer.getVirtualItems();
+        const firstIndex = items[0]?.index ?? 0;
+        const current = groupHeaderList
+            .filter(g => g.index <= firstIndex)
+            .pop()?.data;
+        setStickyGroup(current ?? null);
+    }, [stickyGroupHeader, isGrouped, groupHeaderList, virtualizer]);
     const handleVirtualScroll = React.useCallback(() => {
-        if (!scrollContainerRef.current || isLoading)
+        const el = scrollContainerRef.current;
+        if (!el)
             return;
-        const { scrollTop, scrollHeight, clientHeight } = scrollContainerRef.current;
+        if (stickyGroupHeader)
+            updateStickyGroup();
+        if (isLoading)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = el;
         if (scrollHeight - scrollTop - clientHeight < loadMoreOffset) {
             loadMoreData();
         }
-    }, [isLoading, loadMoreData, loadMoreOffset]);
+    }, [
+        stickyGroupHeader,
+        isLoading,
+        loadMoreData,
+        loadMoreOffset,
+        updateStickyGroup
+    ]);
     const totalHeight = virtualizer.getTotalSize();
+    React.useLayoutEffect(() => {
+        if (headerRef.current) {
+            setHeaderHeight(headerRef.current.getBoundingClientRect().height);
+        }
+    }, [headerGroups]);
+    React.useLayoutEffect(() => {
+        if (stickyGroupHeader)
+            updateStickyGroup();
+    }, [stickyGroupHeader, updateStickyGroup, groupHeaderList, isGrouped]);
     const hasData = rows?.length > 0 || isLoading;
-    const hasFiltersOrSearch = (tableQuery?.filters && tableQuery.filters.length > 0) ||
-        Boolean(tableQuery?.search && tableQuery.search.trim() !== '');
-    const isZeroState = !hasData && !hasFiltersOrSearch;
-    const isEmptyState = !hasData && hasFiltersOrSearch;
+    const hasChanges = index.hasActiveQuery(tableQuery || {}, defaultSort);
+    const isZeroState = !hasData && !hasChanges;
+    const isEmptyState = !hasData && hasChanges;
     const stateToShow = isZeroState
         ? (zeroState ?? emptyState ?? jsxRuntime.jsx(DefaultEmptyComponent, {}))
         : isEmptyState
@@ -94,7 +141,7 @@ function VirtualizedContent({ rowHeight = 40, groupHeaderHeight, overscan = 5, l
         return jsxRuntime.jsx("div", { className: classNames.root, children: stateToShow });
     }
     const visibleColumns = table.getVisibleLeafColumns();
-    return (jsxRuntime.jsxs("div", { ref: scrollContainerRef, className: classVarianceAuthority.cx(classNames.root, dataTable_module.default.scrollContainer), onScroll: handleVirtualScroll, children: [jsxRuntime.jsxs("div", { role: 'table', className: classVarianceAuthority.cx(dataTable_module.default.virtualTable, classNames.table), children: [jsxRuntime.jsx(VirtualHeaders, { headerGroups: headerGroups, className: classVarianceAuthority.cx(dataTable_module.default.stickyHeader, classNames.header) }), jsxRuntime.jsx("div", { role: 'rowgroup', className: classVarianceAuthority.cx(dataTable_module.default.virtualBodyGroup, classNames.body), style: { height: totalHeight }, children: jsxRuntime.jsx(VirtualRows, { rows: rows, virtualizer: virtualizer, onRowClick: onRowClick, classNames: {
+    return (jsxRuntime.jsxs("div", { ref: scrollContainerRef, className: classVarianceAuthority.cx(classNames.root, dataTable_module.default.scrollContainer), onScroll: handleVirtualScroll, children: [jsxRuntime.jsxs("div", { role: 'table', className: classVarianceAuthority.cx(dataTable_module.default.virtualTable, classNames.table), children: [jsxRuntime.jsx("div", { ref: headerRef, children: jsxRuntime.jsx(VirtualHeaders, { headerGroups: headerGroups, className: classVarianceAuthority.cx(dataTable_module.default.stickyHeader, classNames.header) }) }), stickyGroupHeader && isGrouped && stickyGroup && (jsxRuntime.jsx("div", { role: 'row', className: dataTable_module.default.stickyGroupAnchor, style: { top: headerHeight }, children: jsxRuntime.jsxs(flex.Flex, { gap: 3, align: 'center', children: [stickyGroup.label, stickyGroup.showGroupCount ? (jsxRuntime.jsx(badge.Badge, { variant: 'neutral', children: stickyGroup.count })) : null] }) })), jsxRuntime.jsx("div", { role: 'rowgroup', className: classVarianceAuthority.cx(dataTable_module.default.virtualBodyGroup, classNames.body), style: { height: totalHeight }, children: jsxRuntime.jsx(VirtualRows, { rows: rows, virtualizer: virtualizer, onRowClick: onRowClick, classNames: {
                                 row: classNames.row
                             } }) })] }), showLoaderRows && (jsxRuntime.jsx(VirtualLoaderRows, { columns: visibleColumns, rowHeight: rowHeight, count: loadingRowCount }))] }));
 }

package/dist/components/data-table/components/virtualized-content.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"virtualized-content.cjs","sources":["../../../../components/data-table/components/virtualized-content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useRef } from 'react';\nimport tableStyles from '~/components/table/table.module.css';\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  GroupedData,\n  VirtualizedContentProps\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\n\nfunction VirtualHeaders<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <div role='rowgroup' className={cx(styles.virtualHeaderGroup, className)}>\n      {headerGroups?.map(headerGroup => (\n        <div\n          role='row'\n          key={headerGroup?.id}\n          className={styles.virtualHeaderRow}\n        >\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <div\n                role='columnheader'\n                key={header.id}\n                className={cx(\n                  tableStyles.head,\n                  styles.virtualHead,\n                  columnDef.classNames?.header\n                )}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </div>\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction VirtualGroupHeader<TData>({\n  data,\n  style\n}: {\n  data: GroupedData<TData>;\n  style?: React.CSSProperties;\n}) {\n  return (\n    <div role='row' className={styles.virtualSectionHeader} style={style}>\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </div>\n  );\n}\n\nfunction VirtualRows<TData>({\n  rows,\n  virtualizer,\n  onRowClick,\n  classNames\n}: {\n  rows: Row<TData>[];\n  virtualizer: ReturnType<typeof useVirtualizer>;\n  onRowClick?: (row: TData) => void;\n  classNames?: { row?: string };\n}) {\n  const items = virtualizer.getVirtualItems();\n\n  return items.map((item, idx) => {\n    const row = rows[item.index];\n    if (!row) return null;\n\n    const isSelected = row.getIsSelected();\n    const cells = row.getVisibleCells() || [];\n    const isGroupHeader = row.subRows && row.subRows.length > 0;\n    const rowKey = row.id + '-' + item.index;\n\n    const positionStyle: React.CSSProperties = {\n      height: item.size,\n      top: item.start\n    };\n\n    if (isGroupHeader) {\n      return (\n        <VirtualGroupHeader\n          key={rowKey}\n          data={row.original as GroupedData<unknown>}\n          style={positionStyle}\n        />\n      );\n    }\n\n    return (\n      <div\n        role='row'\n        key={rowKey}\n        className={cx(\n          styles.virtualRow,\n          styles['row'],\n          onRowClick ? styles['clickable'] : '',\n          classNames?.row\n        )}\n        style={positionStyle}\n        data-state={isSelected && 'selected'}\n        onClick={() => onRowClick?.(row.original)}\n      >\n        {cells.map(cell => {\n          const columnDef = cell.column.columnDef as DataTableColumnDef<\n            unknown,\n            unknown\n          >;\n          return (\n            <div\n              role='cell'\n              key={cell.id}\n              className={cx(\n                tableStyles.cell,\n                styles.virtualCell,\n                columnDef.classNames?.cell\n              )}\n              style={columnDef.styles?.cell}\n            >\n              {flexRender(columnDef.cell, cell.getContext())}\n            </div>\n          );\n        })}\n      </div>\n    );\n  });\n}\n\nfunction VirtualLoaderRows({\n  columns,\n  rowHeight,\n  count\n}: {\n  columns: ReturnType<\n    ReturnType<typeof useDataTable>['table']['getVisibleLeafColumns']\n  >;\n  rowHeight: number;\n  count: number;\n}) {\n  return (\n    <div className={styles.stickyLoaderContainer}>\n      {Array.from({ length: count }).map((_, rowIndex) => (\n        <div\n          role='row'\n          key={'loading-row-' + rowIndex}\n          className={cx(styles.virtualRow, styles['row'], styles.loaderRow)}\n          style={{ height: rowHeight }}\n        >\n          {columns.map((col, colIndex) => {\n            const columnDef = col.columnDef as DataTableColumnDef<\n              unknown,\n              unknown\n            >;\n            return (\n              <div\n                role='cell'\n                key={'loading-column-' + colIndex}\n                className={cx(\n                  tableStyles.cell,\n                  styles.virtualCell,\n                  columnDef.classNames?.cell\n                )}\n                style={columnDef.styles?.cell}\n              >\n                <Skeleton containerClassName={styles['flex-1']} />\n              </div>\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function VirtualizedContent({\n  rowHeight = 40,\n  groupHeaderHeight,\n  overscan = 5,\n  loadMoreOffset = 100,\n  emptyState,\n  zeroState,\n  classNames = {}\n}: VirtualizedContentProps) {\n  const {\n    onRowClick,\n    table,\n    isLoading,\n    loadMoreData,\n    tableQuery,\n    loadingRowCount = 3\n  } = useDataTable();\n\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const scrollContainerRef = useRef<HTMLDivElement | null>(null);\n\n  const showLoaderRows = isLoading && rows.length > 0;\n\n  const virtualizer = useVirtualizer({\n    count: rows.length,\n    getScrollElement: () => scrollContainerRef.current,\n    estimateSize: index => {\n      const row = rows[index];\n      const isGroupHeader = row?.subRows && row.subRows.length > 0;\n      return isGroupHeader ? (groupHeaderHeight ?? rowHeight) : rowHeight;\n    },\n    overscan\n  });\n\n  const handleVirtualScroll = useCallback(() => {\n    if (!scrollContainerRef.current || isLoading) return;\n    const { scrollTop, scrollHeight, clientHeight } =\n      scrollContainerRef.current;\n    if (scrollHeight - scrollTop - clientHeight < loadMoreOffset) {\n      loadMoreData();\n    }\n  }, [isLoading, loadMoreData, loadMoreOffset]);\n\n  const totalHeight = virtualizer.getTotalSize();\n\n  const hasData = rows?.length > 0 || isLoading;\n\n  const hasFiltersOrSearch =\n    (tableQuery?.filters && tableQuery.filters.length > 0) ||\n    Boolean(tableQuery?.search && tableQuery.search.trim() !== '');\n\n  const isZeroState = !hasData && !hasFiltersOrSearch;\n  const isEmptyState = !hasData && hasFiltersOrSearch;\n\n  const stateToShow: React.ReactNode = isZeroState\n    ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n    : isEmptyState\n      ? (emptyState ?? <DefaultEmptyComponent />)\n      : null;\n\n  if (!hasData) {\n    return <div className={classNames.root}>{stateToShow}</div>;\n  }\n\n  const visibleColumns = table.getVisibleLeafColumns();\n\n  return (\n    <div\n      ref={scrollContainerRef}\n      className={cx(classNames.root, styles.scrollContainer)}\n      onScroll={handleVirtualScroll}\n    >\n      <div role='table' className={cx(styles.virtualTable, classNames.table)}>\n        <VirtualHeaders\n          headerGroups={headerGroups}\n          className={cx(styles.stickyHeader, classNames.header)}\n        />\n        <div\n          role='rowgroup'\n          className={cx(styles.virtualBodyGroup, classNames.body)}\n          style={{ height: totalHeight }}\n        >\n          <VirtualRows\n            rows={rows}\n            virtualizer={virtualizer}\n            onRowClick={onRowClick}\n            classNames={{\n              row: classNames.row\n            }}\n          />\n        </div>\n      </div>\n      {showLoaderRows && (\n        <VirtualLoaderRows\n          columns={visibleColumns}\n          rowHeight={rowHeight}\n          count={loadingRowCount}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAqBA;;AAgBY;;;AAuBZ;AAEA;;AAiBA;AAEA;AAWE;;;AAIE;AAAU;AAEV;;AAEA;;AAGA;;;;;AAME;;AASF;AAeM;;AAkBF;AAGN;AACF;AAEA;AAWE;AAUU;;;AAuBZ;AAEA;AAIM;AASJ;AASA;AACA;;AAGA;;;;AAME;;AAEE;AACA;AACA;;;AAGH;AAED;AACE;;;;AAIE;;;AAIJ;;AAIA;AAEE;AAEF;AACA;;;AAIE;AACE;;;;;AAOJ;;;;AAqCF;;"}
+{"version":3,"file":"virtualized-content.cjs","sources":["../../../../components/data-table/components/virtualized-content.tsx"],"sourcesContent":["'use client';\n\nimport { TableIcon } from '@radix-ui/react-icons';\nimport type { HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { cx } from 'class-variance-authority';\nimport { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport tableStyles from '~/components/table/table.module.css';\nimport { Badge } from '../../badge';\nimport { EmptyState } from '../../empty-state';\nimport { Flex } from '../../flex';\nimport { Skeleton } from '../../skeleton';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumnDef,\n  defaultGroupOption,\n  GroupedData,\n  VirtualizedContentProps\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { hasActiveQuery } from '../utils';\n\nfunction VirtualHeaders<TData>({\n  headerGroups = [],\n  className = ''\n}: {\n  headerGroups: HeaderGroup<TData>[];\n  className?: string;\n}) {\n  return (\n    <div role='rowgroup' className={cx(styles.virtualHeaderGroup, className)}>\n      {headerGroups?.map(headerGroup => (\n        <div\n          role='row'\n          key={headerGroup?.id}\n          className={styles.virtualHeaderRow}\n        >\n          {headerGroup?.headers?.map(header => {\n            const columnDef = header.column.columnDef as DataTableColumnDef<\n              TData,\n              unknown\n            >;\n            return (\n              <div\n                role='columnheader'\n                key={header.id}\n                className={cx(\n                  tableStyles.head,\n                  styles.virtualHead,\n                  columnDef.classNames?.header\n                )}\n                style={columnDef.styles?.header}\n              >\n                {flexRender(columnDef.header, header.getContext())}\n              </div>\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction VirtualGroupHeader<TData>({\n  data,\n  style\n}: {\n  data: GroupedData<TData>;\n  style?: React.CSSProperties;\n}) {\n  return (\n    <div role='row' className={styles.virtualSectionHeader} style={style}>\n      <Flex gap={3} align='center'>\n        {data?.label}\n        {data.showGroupCount ? (\n          <Badge variant='neutral'>{data?.count}</Badge>\n        ) : null}\n      </Flex>\n    </div>\n  );\n}\n\nfunction VirtualRows<TData>({\n  rows,\n  virtualizer,\n  onRowClick,\n  classNames\n}: {\n  rows: Row<TData>[];\n  virtualizer: ReturnType<typeof useVirtualizer>;\n  onRowClick?: (row: TData) => void;\n  classNames?: { row?: string };\n}) {\n  const items = virtualizer.getVirtualItems();\n\n  return items.map((item, idx) => {\n    const row = rows[item.index];\n    if (!row) return null;\n\n    const isSelected = row.getIsSelected();\n    const cells = row.getVisibleCells() || [];\n    const isGroupHeader = row.subRows && row.subRows.length > 0;\n    const rowKey = row.id + '-' + item.index;\n\n    const positionStyle: React.CSSProperties = {\n      height: item.size,\n      top: item.start\n    };\n\n    if (isGroupHeader) {\n      return (\n        <VirtualGroupHeader\n          key={rowKey}\n          data={row.original as GroupedData<unknown>}\n          style={positionStyle}\n        />\n      );\n    }\n\n    return (\n      <div\n        role='row'\n        key={rowKey}\n        className={cx(\n          styles.virtualRow,\n          styles['row'],\n          onRowClick ? styles['clickable'] : '',\n          classNames?.row\n        )}\n        style={positionStyle}\n        data-state={isSelected && 'selected'}\n        onClick={() => onRowClick?.(row.original)}\n      >\n        {cells.map(cell => {\n          const columnDef = cell.column.columnDef as DataTableColumnDef<\n            TData,\n            unknown\n          >;\n          return (\n            <div\n              role='cell'\n              key={cell.id}\n              className={cx(\n                tableStyles.cell,\n                styles.virtualCell,\n                columnDef.classNames?.cell\n              )}\n              style={columnDef.styles?.cell}\n            >\n              {flexRender(columnDef.cell, cell.getContext())}\n            </div>\n          );\n        })}\n      </div>\n    );\n  });\n}\n\nfunction VirtualLoaderRows({\n  columns,\n  rowHeight,\n  count\n}: {\n  columns: ReturnType<\n    ReturnType<typeof useDataTable>['table']['getVisibleLeafColumns']\n  >;\n  rowHeight: number;\n  count: number;\n}) {\n  return (\n    <div className={styles.stickyLoaderContainer}>\n      {Array.from({ length: count }).map((_, rowIndex) => (\n        <div\n          role='row'\n          key={'loading-row-' + rowIndex}\n          className={cx(styles.virtualRow, styles['row'], styles.loaderRow)}\n          style={{ height: rowHeight }}\n        >\n          {columns.map((col, colIndex) => {\n            const columnDef = col.columnDef as DataTableColumnDef<\n              unknown,\n              unknown\n            >;\n            return (\n              <div\n                role='cell'\n                key={'loading-column-' + colIndex}\n                className={cx(\n                  tableStyles.cell,\n                  styles.virtualCell,\n                  columnDef.classNames?.cell\n                )}\n                style={columnDef.styles?.cell}\n              >\n                <Skeleton containerClassName={styles['flex-1']} />\n              </div>\n            );\n          })}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nconst DefaultEmptyComponent = () => (\n  <EmptyState icon={<TableIcon />} heading='No Data' />\n);\n\nexport function VirtualizedContent({\n  rowHeight = 40,\n  groupHeaderHeight,\n  overscan = 5,\n  loadMoreOffset = 100,\n  emptyState,\n  zeroState,\n  classNames = {}\n}: VirtualizedContentProps) {\n  const {\n    onRowClick,\n    table,\n    isLoading,\n    loadMoreData,\n    tableQuery,\n    defaultSort,\n    loadingRowCount = 3,\n    stickyGroupHeader = false\n  } = useDataTable();\n\n  const headerGroups = table?.getHeaderGroups();\n  const rowModel = table?.getRowModel();\n  const { rows = [] } = rowModel || {};\n\n  const scrollContainerRef = useRef<HTMLDivElement | null>(null);\n  const headerRef = useRef<HTMLDivElement | null>(null);\n  const [stickyGroup, setStickyGroup] = useState<GroupedData<unknown> | null>(\n    null\n  );\n  const [headerHeight, setHeaderHeight] = useState(40);\n\n  const groupBy = tableQuery?.group_by?.[0];\n  const isGrouped = Boolean(groupBy) && groupBy !== defaultGroupOption.id;\n\n  const groupHeaderList = useMemo(() => {\n    const list: { index: number; data: GroupedData<unknown> }[] = [];\n    rows.forEach((row, i) => {\n      if (row.subRows && row.subRows.length > 0) {\n        list.push({ index: i, data: row.original as GroupedData<unknown> });\n      }\n    });\n    return list;\n  }, [rows]);\n\n  const showLoaderRows = isLoading && rows.length > 0;\n\n  const virtualizer = useVirtualizer({\n    count: rows.length,\n    getScrollElement: () => scrollContainerRef.current,\n    estimateSize: index => {\n      const row = rows[index];\n      const isGroupHeader = row?.subRows && row.subRows.length > 0;\n      return isGroupHeader ? (groupHeaderHeight ?? rowHeight) : rowHeight;\n    },\n    overscan\n  });\n\n  const updateStickyGroup = useCallback(() => {\n    if (!stickyGroupHeader || !isGrouped || groupHeaderList.length === 0) {\n      setStickyGroup(null);\n      return;\n    }\n    const items = virtualizer.getVirtualItems();\n    const firstIndex = items[0]?.index ?? 0;\n    const current = groupHeaderList\n      .filter(g => g.index <= firstIndex)\n      .pop()?.data;\n    setStickyGroup(current ?? null);\n  }, [stickyGroupHeader, isGrouped, groupHeaderList, virtualizer]);\n\n  const handleVirtualScroll = useCallback(() => {\n    const el = scrollContainerRef.current;\n    if (!el) return;\n    if (stickyGroupHeader) updateStickyGroup();\n    if (isLoading) return;\n    const { scrollTop, scrollHeight, clientHeight } = el;\n    if (scrollHeight - scrollTop - clientHeight < loadMoreOffset) {\n      loadMoreData();\n    }\n  }, [\n    stickyGroupHeader,\n    isLoading,\n    loadMoreData,\n    loadMoreOffset,\n    updateStickyGroup\n  ]);\n\n  const totalHeight = virtualizer.getTotalSize();\n\n  useLayoutEffect(() => {\n    if (headerRef.current) {\n      setHeaderHeight(headerRef.current.getBoundingClientRect().height);\n    }\n  }, [headerGroups]);\n\n  useLayoutEffect(() => {\n    if (stickyGroupHeader) updateStickyGroup();\n  }, [stickyGroupHeader, updateStickyGroup, groupHeaderList, isGrouped]);\n\n  const hasData = rows?.length > 0 || isLoading;\n\n  const hasChanges = hasActiveQuery(tableQuery || {}, defaultSort);\n\n  const isZeroState = !hasData && !hasChanges;\n  const isEmptyState = !hasData && hasChanges;\n\n  const stateToShow: React.ReactNode = isZeroState\n    ? (zeroState ?? emptyState ?? <DefaultEmptyComponent />)\n    : isEmptyState\n      ? (emptyState ?? <DefaultEmptyComponent />)\n      : null;\n\n  if (!hasData) {\n    return <div className={classNames.root}>{stateToShow}</div>;\n  }\n\n  const visibleColumns = table.getVisibleLeafColumns();\n\n  return (\n    <div\n      ref={scrollContainerRef}\n      className={cx(classNames.root, styles.scrollContainer)}\n      onScroll={handleVirtualScroll}\n    >\n      <div role='table' className={cx(styles.virtualTable, classNames.table)}>\n        <div ref={headerRef}>\n          <VirtualHeaders\n            headerGroups={headerGroups}\n            className={cx(styles.stickyHeader, classNames.header)}\n          />\n        </div>\n        {stickyGroupHeader && isGrouped && stickyGroup && (\n          <div\n            role='row'\n            className={styles.stickyGroupAnchor}\n            style={{ top: headerHeight }}\n          >\n            <Flex gap={3} align='center'>\n              {stickyGroup.label}\n              {stickyGroup.showGroupCount ? (\n                <Badge variant='neutral'>{stickyGroup.count}</Badge>\n              ) : null}\n            </Flex>\n          </div>\n        )}\n        <div\n          role='rowgroup'\n          className={cx(styles.virtualBodyGroup, classNames.body)}\n          style={{ height: totalHeight }}\n        >\n          <VirtualRows\n            rows={rows}\n            virtualizer={virtualizer}\n            onRowClick={onRowClick}\n            classNames={{\n              row: classNames.row\n            }}\n          />\n        </div>\n      </div>\n      {showLoaderRows && (\n        <VirtualLoaderRows\n          columns={visibleColumns}\n          rowHeight={rowHeight}\n          count={loadingRowCount}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAuBA;;AAgBY;;;AAuBZ;AAEA;;AAiBA;AAEA;AAWE;;;AAIE;AAAU;AAEV;;AAEA;;AAGA;;;;;AAME;;AASF;AAeM;;AAkBF;AAGN;AACF;AAEA;AAWE;AAUU;;;AAuBZ;AAEA;AAIM;;AAoBJ;AACA;;AAGA;AACA;;;;AAOA;AAEA;;;AAGI;AACE;;AAEJ;AACA;AACF;;;;AAME;;AAEE;AACA;AACA;;;AAGH;AAED;AACE;;;;AAIA;;;;;AAKA;;AAGF;AACE;AACA;;AACA;AAAuB;AACvB;;;;AAGE;;AAEJ;;;;;;AAMC;AAED;;AAGE;;;AAGF;;AAGE;AAAuB;;;;AAOzB;AACA;;;AAIE;AACE;;;;;AAOJ;AAEA;;;AAmDF;;"}