@raystack/apsara 0.56.7 → 1.0.0-rc.1

package/dist/components/copy-button/copy-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.js","sources":["../../../components/copy-button/copy-button.tsx"],"sourcesContent":["'use client';\n\nimport { CopyIcon } from '@radix-ui/react-icons';\nimport { ElementRef, forwardRef, useState } from 'react';\nimport { useCopyToClipboard } from '~/hooks/useCopyToClipboard';\nimport { CheckCircleFilledIcon } from '~/icons';\nimport { IconButton, IconButtonProps } from '../icon-button/icon-button';\n\nexport interface CopyButtonProps extends IconButtonProps {\n  text: string;\n  resetTimeout?: number;\n  resetIcon?: boolean;\n}\n\nexport const CopyButton = forwardRef<\n  ElementRef<typeof IconButton>,\n  CopyButtonProps\n>(({ text, resetTimeout = 1000, resetIcon = true, ...props }, ref) => {\n  const { copy } = useCopyToClipboard();\n  const [isCopied, setIsCopied] = useState(false);\n\n  async function onCopy() {\n    const res = await copy(text);\n    if (res) {\n      setIsCopied(true);\n      if (resetIcon) {\n        setTimeout(() => {\n          setIsCopied(false);\n        }, resetTimeout);\n      }\n    }\n  }\n\n  return (\n    <IconButton\n      ref={ref}\n      {...props}\n      onClick={onCopy}\n      data-test-id='copy-button'\n    >\n      {isCopied ? (\n        <CheckCircleFilledIcon color='var(--rs-color-foreground-success-primary)' />\n      ) : (\n        <CopyIcon />\n      )}\n    </IconButton>\n  );\n});\n\nCopyButton.displayName = 'CopyButton';\n"],"names":[],"mappings":";;;;;;;;AAca;AAIX;;AAGA;AACE;;;;;;;;;;AAWF;AAcF;AAEA;;"}
+{"version":3,"file":"copy-button.js","sources":["../../../components/copy-button/copy-button.tsx"],"sourcesContent":["'use client';\n\nimport { CopyIcon } from '@radix-ui/react-icons';\nimport { useState } from 'react';\nimport { useCopyToClipboard } from '~/hooks/useCopyToClipboard';\nimport { CheckCircleFilledIcon } from '~/icons';\nimport { IconButton, IconButtonProps } from '../icon-button/icon-button';\n\nexport interface CopyButtonProps extends IconButtonProps {\n  text: string;\n  resetTimeout?: number;\n  resetIcon?: boolean;\n}\n\nexport function CopyButton({\n  text,\n  resetTimeout = 1000,\n  resetIcon = true,\n  ...props\n}: CopyButtonProps) {\n  const { copy } = useCopyToClipboard();\n  const [isCopied, setIsCopied] = useState(false);\n\n  async function onCopy() {\n    const res = await copy(text);\n    if (res) {\n      setIsCopied(true);\n      if (resetIcon) {\n        setTimeout(() => {\n          setIsCopied(false);\n        }, resetTimeout);\n      }\n    }\n  }\n\n  return (\n    <IconButton {...props} onClick={onCopy} data-test-id='copy-button'>\n      {isCopied ? (\n        <CheckCircleFilledIcon color='var(--rs-color-foreground-success-primary)' />\n      ) : (\n        <CopyIcon />\n      )}\n    </IconButton>\n  );\n}\n\nCopyButton.displayName = 'CopyButton';\n"],"names":[],"mappings":";;;;;;;;;AAoBE;;AAGA;AACE;;;;;;;;;;AAWF;AASF;AAEA;;"}

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

@@ -28,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;
@@ -48,36 +48,44 @@ 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, defaultSort } = 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;
@@ -92,8 +100,9 @@ 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 }) })) })] }) }));
 }
+Content.displayName = 'DataTable.Content';
 
 exports.Content = Content;
 //# sourceMappingURL=content.cjs.map

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';\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}\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    defaultSort\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 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              />\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;AAWA;AAOE;;AAEE;AACA;AASF;AACF;AAEA;;AAiBA;AAEA;;AAOI;;AAEA;;;;;AAaA;AAaM;;AAaF;AAGN;AACF;AAEA;AAIM;;AAgBJ;AACA;;AAGA;AACA;AAEA;AAEI;AACA;AACE;;AAEJ;;;;AAOA;AACE;;AAGF;AACE;AACD;AACD;;AAEE;;AAGF;AACE;AACE;AACA;;AAEJ;;;;;AASF;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\nContent.displayName = 'DataTable.Content';\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;AAEA;;"}

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

@@ -1,3 +1,6 @@
 import { DataTableContentProps } from '../data-table.types';
 export declare function Content({ emptyState, zeroState, classNames }: DataTableContentProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Content {
+    var displayName: string;
+}
 //# sourceMappingURL=content.d.ts.map

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;AAiJ7B,wBAAgB,OAAO,CAAC,EACtB,UAAU,EACV,SAAS,EACT,UAAe,EAChB,EAAE,qBAAqB,2CAyGvB"}
+{"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;yBAlHe,OAAO"}

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

@@ -26,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;
@@ -46,36 +46,44 @@ 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, defaultSort } = 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;
@@ -90,8 +98,9 @@ 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 }) })) })] }) }));
 }
+Content.displayName = 'DataTable.Content';
 
 export { Content };
 //# sourceMappingURL=content.js.map

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';\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}\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    defaultSort\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 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              />\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;AAWA;AAOE;;AAEE;AACA;AASF;AACF;AAEA;;AAiBA;AAEA;;AAOI;;AAEA;;;;;AAaA;AAaM;;AAaF;AAGN;AACF;AAEA;AAIM;;AAgBJ;AACA;;AAGA;AACA;AAEA;AAEI;AACA;AACE;;AAEJ;;;;AAOA;AACE;;AAGF;AACE;AACD;AACD;;AAEE;;AAGF;AACE;AACE;AACA;;AAEJ;;;;;AASF;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\nContent.displayName = 'DataTable.Content';\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;AAEA;;"}

package/dist/components/data-table/components/display-settings.cjs

@@ -54,6 +54,7 @@ function DisplaySettings({ trigger = (jsxRuntime.jsx(button.Button, { variant: '
     }
     return (jsxRuntime.jsxs(popover.Popover, { children: [jsxRuntime.jsx(popover.Popover.Trigger, { asChild: true, children: trigger }), jsxRuntime.jsx(popover.Popover.Content, { className: dataTable_module.default['display-popover-content'], align: 'end', children: jsxRuntime.jsxs(flex.Flex, { direction: 'column', children: [jsxRuntime.jsxs(flex.Flex, { direction: 'column', className: dataTable_module.default['display-popover-properties-container'], gap: 5, children: [jsxRuntime.jsx(ordering.Ordering, { columnList: sortableColumns, onChange: onSortChange, value: tableQuery?.sort?.[0] || defaultSort }), jsxRuntime.jsx(grouping.Grouping, { columns: columns, onRemove: onGroupRemove, onChange: onGroupChange, value: tableQuery?.group_by?.[0] || dataTable_types.defaultGroupOption.id })] }), jsxRuntime.jsx(flex.Flex, { className: dataTable_module.default['display-popover-properties-container'], children: jsxRuntime.jsx(displayProperties.DisplayProperties, { columns: columns }) }), jsxRuntime.jsx(flex.Flex, { justify: 'end', className: dataTable_module.default['display-popover-reset-container'], children: jsxRuntime.jsx(button.Button, { variant: 'text', onClick: onReset, color: 'neutral', children: "Reset to default" }) })] }) })] }));
 }
+DisplaySettings.displayName = 'DataTable.DisplayControls';
 
 exports.DisplaySettings = DisplaySettings;
 //# sourceMappingURL=display-settings.cjs.map

package/dist/components/data-table/components/display-settings.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"display-settings.cjs","sources":["../../../../components/data-table/components/display-settings.tsx"],"sourcesContent":["'use client';\n\nimport { MixerHorizontalIcon } from '@radix-ui/react-icons';\n\nimport { ReactNode } from 'react';\nimport { Button } from '../../button';\nimport { Flex } from '../../flex';\nimport { Popover } from '../../popover';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumn,\n  SortOrdersValues,\n  defaultGroupOption\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplayProperties } from './display-properties';\nimport { Grouping } from './grouping';\nimport { Ordering } from './ordering';\n\ninterface DisplaySettingsProps {\n  trigger?: ReactNode;\n}\n\nexport function DisplaySettings<TData, TValue>({\n  trigger = (\n    <Button\n      variant='outline'\n      color='neutral'\n      size='small'\n      leadingIcon={<MixerHorizontalIcon />}\n    >\n      Display\n    </Button>\n  )\n}: DisplaySettingsProps) {\n  const {\n    table,\n    updateTableQuery,\n    tableQuery,\n    defaultSort,\n    onDisplaySettingsReset\n  } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const sortableColumns = columns\n    ?.filter(col => col.columnDef.enableSorting)\n    ?.map(column => {\n      const id = column.id;\n      return {\n        label: column.columnDef.header || id,\n        id: id\n      };\n    });\n\n  function onSortChange(columnId: string, order: SortOrdersValues) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        sort: [{ name: columnId, order }]\n      };\n    });\n  }\n\n  function onGroupChange(columnId: string) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: [columnId]\n      };\n    });\n  }\n\n  function onGroupRemove() {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: []\n      };\n    });\n  }\n\n  function onReset() {\n    onDisplaySettingsReset();\n  }\n\n  return (\n    <Popover>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content\n        className={styles['display-popover-content']}\n        align='end'\n      >\n        <Flex direction='column'>\n          <Flex\n            direction='column'\n            className={styles['display-popover-properties-container']}\n            gap={5}\n          >\n            <Ordering\n              columnList={sortableColumns}\n              onChange={onSortChange}\n              value={tableQuery?.sort?.[0] || defaultSort}\n            />\n            <Grouping\n              columns={columns}\n              onRemove={onGroupRemove}\n              onChange={onGroupChange}\n              value={tableQuery?.group_by?.[0] || defaultGroupOption.id}\n            />\n          </Flex>\n          <Flex className={styles['display-popover-properties-container']}>\n            <DisplayProperties columns={columns} />\n          </Flex>\n          <Flex\n            justify='end'\n            className={styles['display-popover-reset-container']}\n          >\n            <Button variant='text' onClick={onReset} color='neutral'>\n              Reset to default\n            </Button>\n          </Flex>\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBgB;AAYd;AAOA;;;AAIE;AACE;;AAEE;AACA;;AAEJ;AAEF;;;AAGM;;;AAGJ;;;;;AAMI;;;AAGJ;;AAGF;;;AAGM;AACA;;AAEJ;;AAGF;AACE;;AAGF;AAwCF;;"}
+{"version":3,"file":"display-settings.cjs","sources":["../../../../components/data-table/components/display-settings.tsx"],"sourcesContent":["'use client';\n\nimport { MixerHorizontalIcon } from '@radix-ui/react-icons';\n\nimport { ReactNode } from 'react';\nimport { Button } from '../../button';\nimport { Flex } from '../../flex';\nimport { Popover } from '../../popover';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumn,\n  defaultGroupOption,\n  SortOrdersValues\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplayProperties } from './display-properties';\nimport { Grouping } from './grouping';\nimport { Ordering } from './ordering';\n\ninterface DisplaySettingsProps {\n  trigger?: ReactNode;\n}\n\nexport function DisplaySettings<TData, TValue>({\n  trigger = (\n    <Button\n      variant='outline'\n      color='neutral'\n      size='small'\n      leadingIcon={<MixerHorizontalIcon />}\n    >\n      Display\n    </Button>\n  )\n}: DisplaySettingsProps) {\n  const {\n    table,\n    updateTableQuery,\n    tableQuery,\n    defaultSort,\n    onDisplaySettingsReset\n  } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const sortableColumns = columns\n    ?.filter(col => col.columnDef.enableSorting)\n    ?.map(column => {\n      const id = column.id;\n      return {\n        label: column.columnDef.header || id,\n        id: id\n      };\n    });\n\n  function onSortChange(columnId: string, order: SortOrdersValues) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        sort: [{ name: columnId, order }]\n      };\n    });\n  }\n\n  function onGroupChange(columnId: string) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: [columnId]\n      };\n    });\n  }\n\n  function onGroupRemove() {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: []\n      };\n    });\n  }\n\n  function onReset() {\n    onDisplaySettingsReset();\n  }\n\n  return (\n    <Popover>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content\n        className={styles['display-popover-content']}\n        align='end'\n      >\n        <Flex direction='column'>\n          <Flex\n            direction='column'\n            className={styles['display-popover-properties-container']}\n            gap={5}\n          >\n            <Ordering\n              columnList={sortableColumns}\n              onChange={onSortChange}\n              value={tableQuery?.sort?.[0] || defaultSort}\n            />\n            <Grouping\n              columns={columns}\n              onRemove={onGroupRemove}\n              onChange={onGroupChange}\n              value={tableQuery?.group_by?.[0] || defaultGroupOption.id}\n            />\n          </Flex>\n          <Flex className={styles['display-popover-properties-container']}>\n            <DisplayProperties columns={columns} />\n          </Flex>\n          <Flex\n            justify='end'\n            className={styles['display-popover-reset-container']}\n          >\n            <Button variant='text' onClick={onReset} color='neutral'>\n              Reset to default\n            </Button>\n          </Flex>\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  );\n}\n\nDisplaySettings.displayName = 'DataTable.DisplayControls';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBgB;AAYd;AAOA;;;AAIE;AACE;;AAEE;AACA;;AAEJ;AAEF;;;AAGM;;;AAGJ;;;;;AAMI;;;AAGJ;;AAGF;;;AAGM;AACA;;AAEJ;;AAGF;AACE;;AAGF;AAwCF;AAEA;;"}

package/dist/components/data-table/components/display-settings.d.ts

@@ -3,5 +3,8 @@ interface DisplaySettingsProps {
     trigger?: ReactNode;
 }
 export declare function DisplaySettings<TData, TValue>({ trigger }: DisplaySettingsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DisplaySettings {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=display-settings.d.ts.map

package/dist/components/data-table/components/display-settings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"display-settings.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/display-settings.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAelC,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,EAC7C,OASC,EACF,EAAE,oBAAoB,2CA2FtB"}
+{"version":3,"file":"display-settings.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/display-settings.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAelC,UAAU,oBAAoB;IAC5B,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,EAC7C,OASC,EACF,EAAE,oBAAoB,2CA2FtB;yBAtGe,eAAe"}

package/dist/components/data-table/components/display-settings.js

@@ -52,6 +52,7 @@ function DisplaySettings({ trigger = (jsx(Button, { variant: 'outline', color: '
     }
     return (jsxs(Popover, { children: [jsx(Popover.Trigger, { asChild: true, children: trigger }), jsx(Popover.Content, { className: styles['display-popover-content'], align: 'end', children: jsxs(Flex, { direction: 'column', children: [jsxs(Flex, { direction: 'column', className: styles['display-popover-properties-container'], gap: 5, children: [jsx(Ordering, { columnList: sortableColumns, onChange: onSortChange, value: tableQuery?.sort?.[0] || defaultSort }), jsx(Grouping, { columns: columns, onRemove: onGroupRemove, onChange: onGroupChange, value: tableQuery?.group_by?.[0] || defaultGroupOption.id })] }), jsx(Flex, { className: styles['display-popover-properties-container'], children: jsx(DisplayProperties, { columns: columns }) }), jsx(Flex, { justify: 'end', className: styles['display-popover-reset-container'], children: jsx(Button, { variant: 'text', onClick: onReset, color: 'neutral', children: "Reset to default" }) })] }) })] }));
 }
+DisplaySettings.displayName = 'DataTable.DisplayControls';
 
 export { DisplaySettings };
 //# sourceMappingURL=display-settings.js.map

package/dist/components/data-table/components/display-settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"display-settings.js","sources":["../../../../components/data-table/components/display-settings.tsx"],"sourcesContent":["'use client';\n\nimport { MixerHorizontalIcon } from '@radix-ui/react-icons';\n\nimport { ReactNode } from 'react';\nimport { Button } from '../../button';\nimport { Flex } from '../../flex';\nimport { Popover } from '../../popover';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumn,\n  SortOrdersValues,\n  defaultGroupOption\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplayProperties } from './display-properties';\nimport { Grouping } from './grouping';\nimport { Ordering } from './ordering';\n\ninterface DisplaySettingsProps {\n  trigger?: ReactNode;\n}\n\nexport function DisplaySettings<TData, TValue>({\n  trigger = (\n    <Button\n      variant='outline'\n      color='neutral'\n      size='small'\n      leadingIcon={<MixerHorizontalIcon />}\n    >\n      Display\n    </Button>\n  )\n}: DisplaySettingsProps) {\n  const {\n    table,\n    updateTableQuery,\n    tableQuery,\n    defaultSort,\n    onDisplaySettingsReset\n  } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const sortableColumns = columns\n    ?.filter(col => col.columnDef.enableSorting)\n    ?.map(column => {\n      const id = column.id;\n      return {\n        label: column.columnDef.header || id,\n        id: id\n      };\n    });\n\n  function onSortChange(columnId: string, order: SortOrdersValues) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        sort: [{ name: columnId, order }]\n      };\n    });\n  }\n\n  function onGroupChange(columnId: string) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: [columnId]\n      };\n    });\n  }\n\n  function onGroupRemove() {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: []\n      };\n    });\n  }\n\n  function onReset() {\n    onDisplaySettingsReset();\n  }\n\n  return (\n    <Popover>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content\n        className={styles['display-popover-content']}\n        align='end'\n      >\n        <Flex direction='column'>\n          <Flex\n            direction='column'\n            className={styles['display-popover-properties-container']}\n            gap={5}\n          >\n            <Ordering\n              columnList={sortableColumns}\n              onChange={onSortChange}\n              value={tableQuery?.sort?.[0] || defaultSort}\n            />\n            <Grouping\n              columns={columns}\n              onRemove={onGroupRemove}\n              onChange={onGroupChange}\n              value={tableQuery?.group_by?.[0] || defaultGroupOption.id}\n            />\n          </Flex>\n          <Flex className={styles['display-popover-properties-container']}>\n            <DisplayProperties columns={columns} />\n          </Flex>\n          <Flex\n            justify='end'\n            className={styles['display-popover-reset-container']}\n          >\n            <Button variant='text' onClick={onReset} color='neutral'>\n              Reset to default\n            </Button>\n          </Flex>\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAuBgB;AAYd;AAOA;;;AAIE;AACE;;AAEE;AACA;;AAEJ;AAEF;;;AAGM;;;AAGJ;;;;;AAMI;;;AAGJ;;AAGF;;;AAGM;AACA;;AAEJ;;AAGF;AACE;;AAGF;AAwCF;;"}
+{"version":3,"file":"display-settings.js","sources":["../../../../components/data-table/components/display-settings.tsx"],"sourcesContent":["'use client';\n\nimport { MixerHorizontalIcon } from '@radix-ui/react-icons';\n\nimport { ReactNode } from 'react';\nimport { Button } from '../../button';\nimport { Flex } from '../../flex';\nimport { Popover } from '../../popover';\nimport styles from '../data-table.module.css';\nimport {\n  DataTableColumn,\n  defaultGroupOption,\n  SortOrdersValues\n} from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplayProperties } from './display-properties';\nimport { Grouping } from './grouping';\nimport { Ordering } from './ordering';\n\ninterface DisplaySettingsProps {\n  trigger?: ReactNode;\n}\n\nexport function DisplaySettings<TData, TValue>({\n  trigger = (\n    <Button\n      variant='outline'\n      color='neutral'\n      size='small'\n      leadingIcon={<MixerHorizontalIcon />}\n    >\n      Display\n    </Button>\n  )\n}: DisplaySettingsProps) {\n  const {\n    table,\n    updateTableQuery,\n    tableQuery,\n    defaultSort,\n    onDisplaySettingsReset\n  } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const sortableColumns = columns\n    ?.filter(col => col.columnDef.enableSorting)\n    ?.map(column => {\n      const id = column.id;\n      return {\n        label: column.columnDef.header || id,\n        id: id\n      };\n    });\n\n  function onSortChange(columnId: string, order: SortOrdersValues) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        sort: [{ name: columnId, order }]\n      };\n    });\n  }\n\n  function onGroupChange(columnId: string) {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: [columnId]\n      };\n    });\n  }\n\n  function onGroupRemove() {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        group_by: []\n      };\n    });\n  }\n\n  function onReset() {\n    onDisplaySettingsReset();\n  }\n\n  return (\n    <Popover>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content\n        className={styles['display-popover-content']}\n        align='end'\n      >\n        <Flex direction='column'>\n          <Flex\n            direction='column'\n            className={styles['display-popover-properties-container']}\n            gap={5}\n          >\n            <Ordering\n              columnList={sortableColumns}\n              onChange={onSortChange}\n              value={tableQuery?.sort?.[0] || defaultSort}\n            />\n            <Grouping\n              columns={columns}\n              onRemove={onGroupRemove}\n              onChange={onGroupChange}\n              value={tableQuery?.group_by?.[0] || defaultGroupOption.id}\n            />\n          </Flex>\n          <Flex className={styles['display-popover-properties-container']}>\n            <DisplayProperties columns={columns} />\n          </Flex>\n          <Flex\n            justify='end'\n            className={styles['display-popover-reset-container']}\n          >\n            <Button variant='text' onClick={onReset} color='neutral'>\n              Reset to default\n            </Button>\n          </Flex>\n        </Flex>\n      </Popover.Content>\n    </Popover>\n  );\n}\n\nDisplaySettings.displayName = 'DataTable.DisplayControls';\n"],"names":[],"mappings":";;;;;;;;;;;;;AAuBgB;AAYd;AAOA;;;AAIE;AACE;;AAEE;AACA;;AAEJ;AAEF;;;AAGM;;;AAGJ;;;;;AAMI;;;AAGJ;;AAGF;;;AAGM;AACA;;AAEJ;;AAGF;AACE;;AAGF;AAwCF;AAEA;;"}

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 }) {
@@ -53,6 +53,7 @@ function Filters({ classNames, className, trigger }) {
     }) || [];
     return (jsxRuntime.jsxs(flex.Flex, { gap: 3, className: className, children: [appliedFilters.length > 0 && (jsxRuntime.jsx(flex.Flex, { gap: 3, className: classNames?.container, children: appliedFilters.map(filter => (jsxRuntime.jsx(filterChip.FilterChip, { label: filter.label, value: filter.value, onRemove: () => handleRemoveFilter(filter.name), onValueChange: value => handleFilterValueChange(filter.name, value), onOperationChange: operator => handleFilterOperationChange(filter.name, operator), columnType: filter.filterType, options: filter.options, selectProps: filter.selectProps, className: classNames?.filterChips }, filter.name))) })), jsxRuntime.jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter, children: trigger })] }));
 }
+Filters.displayName = 'DataTable.Filters';
 
 exports.Filters = Filters;
 //# sourceMappingURL=filters.cjs.map

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\nFilters.displayName = 'DataTable.Filters';\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;AAEA;;"}

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

@@ -13,5 +13,8 @@ export declare function Filters<TData, TValue>({ classNames, className, trigger
     className?: string;
     trigger?: Trigger<TData, TValue>;
 }): import("react/jsx-runtime").JSX.Element;
+export declare namespace Filters {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=filters.d.ts.map

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;yBAnFe,OAAO"}

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 }) {
@@ -51,6 +51,7 @@ function Filters({ classNames, className, trigger }) {
     }) || [];
     return (jsxs(Flex, { gap: 3, className: className, children: [appliedFilters.length > 0 && (jsx(Flex, { gap: 3, className: classNames?.container, children: appliedFilters.map(filter => (jsx(FilterChip, { label: filter.label, value: filter.value, onRemove: () => handleRemoveFilter(filter.name), onValueChange: value => handleFilterValueChange(filter.name, value), onOperationChange: operator => handleFilterOperationChange(filter.name, operator), columnType: filter.filterType, options: filter.options, selectProps: filter.selectProps, className: classNames?.filterChips }, filter.name))) })), jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter, children: trigger })] }));
 }
+Filters.displayName = 'DataTable.Filters';
 
 export { Filters };
 //# sourceMappingURL=filters.js.map

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\nFilters.displayName = 'DataTable.Filters';\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;AAEA;;"}

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

@@ -2,11 +2,10 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var search = require('../../search/search.cjs');
 var useDataTable = require('../hooks/useDataTable.cjs');
 
-const TableSearch = React.forwardRef(({ autoDisableInZeroState = true, disabled, ...props }, ref) => {
+function TableSearch({ autoDisableInZeroState = true, disabled, ...props }) {
     const { updateTableQuery, tableQuery, shouldShowFilters = false } = useDataTable.useDataTable();
     const handleSearch = (e) => {
         const value = e.target.value;
@@ -29,9 +28,9 @@ const TableSearch = React.forwardRef(({ autoDisableInZeroState = true, disabled,
     // Once search is applied, keep it enabled (even if shouldShowFilters is false)
     const hasSearch = Boolean(tableQuery?.search && tableQuery.search.trim() !== '');
     const isDisabled = disabled ?? (autoDisableInZeroState && !shouldShowFilters && !hasSearch);
-    return (jsxRuntime.jsx(search.Search, { ...props, ref: ref, onChange: handleSearch, value: tableQuery?.search, onClear: handleClear, disabled: isDisabled }));
-});
-TableSearch.displayName = 'TableSearch';
+    return (jsxRuntime.jsx(search.Search, { ...props, onChange: handleSearch, value: tableQuery?.search, onClear: handleClear, disabled: isDisabled }));
+}
+TableSearch.displayName = 'DataTable.Search';
 
 exports.TableSearch = TableSearch;
 //# sourceMappingURL=search.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"search.cjs","sources":["../../../../components/data-table/components/search.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef } from 'react';\nimport { Search } from '../../search';\nimport { SearchProps } from '../../search/search';\nimport { useDataTable } from '../hooks/useDataTable';\n\nexport interface DataTableSearchProps extends SearchProps {\n  /**\n   * Automatically disable search in zero state (when no data and no filters/search applied).\n   * @defaultValue true\n   */\n  autoDisableInZeroState?: boolean;\n}\n\nexport const TableSearch = forwardRef<HTMLInputElement, DataTableSearchProps>(\n  ({ autoDisableInZeroState = true, disabled, ...props }, ref) => {\n    const {\n      updateTableQuery,\n      tableQuery,\n      shouldShowFilters = false\n    } = useDataTable();\n\n    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = e.target.value;\n      updateTableQuery(query => {\n        return {\n          ...query,\n          search: value\n        };\n      });\n    };\n\n    const handleClear = () => {\n      updateTableQuery(query => {\n        return {\n          ...query,\n          search: ''\n        };\n      });\n    };\n\n    // Auto-disable in zero state if enabled, but allow manual override\n    // Once search is applied, keep it enabled (even if shouldShowFilters is false)\n    const hasSearch = Boolean(\n      tableQuery?.search && tableQuery.search.trim() !== ''\n    );\n    const isDisabled =\n      disabled ?? (autoDisableInZeroState && !shouldShowFilters && !hasSearch);\n\n    return (\n      <Search\n        {...props}\n        ref={ref}\n        onChange={handleSearch}\n        value={tableQuery?.search}\n        onClear={handleClear}\n        disabled={isDisabled}\n      />\n    );\n  }\n);\n\nTableSearch.displayName = 'TableSearch';\n"],"names":[],"mappings":";;;;;;;;;AAiBI;AAMA;AACE;;;AAGI;AACA;;AAEJ;AACF;;;;AAKM;AACA;;AAEJ;AACF;;;AAIA;AAGA;AAGA;AAUF;AAGF;;"}
+{"version":3,"file":"search.cjs","sources":["../../../../components/data-table/components/search.tsx"],"sourcesContent":["'use client';\n\nimport { ChangeEvent, type ComponentProps } from 'react';\nimport { Search } from '../../search';\nimport { useDataTable } from '../hooks/useDataTable';\n\nexport interface DataTableSearchProps extends ComponentProps<typeof Search> {\n  /**\n   * Automatically disable search in zero state (when no data and no filters/search applied).\n   * @defaultValue true\n   */\n  autoDisableInZeroState?: boolean;\n}\n\nexport function TableSearch({\n  autoDisableInZeroState = true,\n  disabled,\n  ...props\n}: DataTableSearchProps) {\n  const {\n    updateTableQuery,\n    tableQuery,\n    shouldShowFilters = false\n  } = useDataTable();\n\n  const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {\n    const value = e.target.value;\n    updateTableQuery(query => {\n      return {\n        ...query,\n        search: value\n      };\n    });\n  };\n\n  const handleClear = () => {\n    updateTableQuery(query => {\n      return {\n        ...query,\n        search: ''\n      };\n    });\n  };\n\n  // Auto-disable in zero state if enabled, but allow manual override\n  // Once search is applied, keep it enabled (even if shouldShowFilters is false)\n  const hasSearch = Boolean(\n    tableQuery?.search && tableQuery.search.trim() !== ''\n  );\n  const isDisabled =\n    disabled ?? (autoDisableInZeroState && !shouldShowFilters && !hasSearch);\n\n  return (\n    <Search\n      {...props}\n      onChange={handleSearch}\n      value={tableQuery?.search}\n      onClear={handleClear}\n      disabled={isDisabled}\n    />\n  );\n}\n\nTableSearch.displayName = 'DataTable.Search';\n"],"names":[],"mappings":";;;;;;;AAcgB;AAKd;AAMA;AACE;;;AAGI;AACA;;AAEJ;AACF;;;;AAKM;AACA;;AAEJ;AACF;;;AAIA;AAGA;;AAYF;AAEA;;"}