@raystack/apsara 1.0.0-rc.0 → 1.0.0-rc.1

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

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

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

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

@@ -1,10 +1,14 @@
-import { SearchProps } from '../../search/search';
-export interface DataTableSearchProps extends SearchProps {
+import { type ComponentProps } from 'react';
+import { Search } from '../../search';
+export interface DataTableSearchProps extends ComponentProps<typeof Search> {
     /**
      * Automatically disable search in zero state (when no data and no filters/search applied).
      * @defaultValue true
      */
     autoDisableInZeroState?: boolean;
 }
-export declare const TableSearch: import("react").ForwardRefExoticComponent<DataTableSearchProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare function TableSearch({ autoDisableInZeroState, disabled, ...props }: DataTableSearchProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TableSearch {
+    var displayName: string;
+}
 //# sourceMappingURL=search.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/search.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,WAAW,mHA8CvB,CAAC"}
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/search.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAAC,OAAO,MAAM,CAAC;IACzE;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,wBAAgB,WAAW,CAAC,EAC1B,sBAA6B,EAC7B,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,2CA2CtB;yBA/Ce,WAAW"}

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

@@ -1,10 +1,9 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
 import { Search } from '../../search/search.js';
 import { useDataTable } from '../hooks/useDataTable.js';
 
-const TableSearch = forwardRef(({ autoDisableInZeroState = true, disabled, ...props }, ref) => {
+function TableSearch({ autoDisableInZeroState = true, disabled, ...props }) {
     const { updateTableQuery, tableQuery, shouldShowFilters = false } = useDataTable();
     const handleSearch = (e) => {
         const value = e.target.value;
@@ -27,9 +26,9 @@ const TableSearch = forwardRef(({ autoDisableInZeroState = true, disabled, ...pr
     // 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 (jsx(Search, { ...props, ref: ref, onChange: handleSearch, value: tableQuery?.search, onClear: handleClear, disabled: isDisabled }));
-});
-TableSearch.displayName = 'TableSearch';
+    return (jsx(Search, { ...props, onChange: handleSearch, value: tableQuery?.search, onClear: handleClear, disabled: isDisabled }));
+}
+TableSearch.displayName = 'DataTable.Search';
 
 export { TableSearch };
 //# sourceMappingURL=search.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"search.js","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.js","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;;"}

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

@@ -16,6 +16,7 @@ function Toolbar({ className }) {
     }
     return (jsxRuntime.jsxs(flex.Flex, { className: classVarianceAuthority.cx(dataTable_module.default['toolbar'], className), justify: 'between', align: 'center', children: [jsxRuntime.jsx(filters.Filters, {}), jsxRuntime.jsx(displaySettings.DisplaySettings, {})] }));
 }
+Toolbar.displayName = 'DataTable.Toolbar';
 
 exports.Toolbar = Toolbar;
 //# sourceMappingURL=toolbar.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.cjs","sources":["../../../../components/data-table/components/toolbar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Flex } from '../../flex';\nimport styles from '../data-table.module.css';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplaySettings } from './display-settings';\nimport { Filters } from './filters';\n\nexport function Toolbar<TData, TValue>({ className }: { className?: string }) {\n  const { shouldShowFilters = false } = useDataTable();\n\n  if (!shouldShowFilters) {\n    return null;\n  }\n\n  return (\n    <Flex\n      className={cx(styles['toolbar'], className)}\n      justify='between'\n      align='center'\n    >\n      <Filters<TData, TValue> />\n      <DisplaySettings />\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AASgB;;;AAIZ;;AAGF;AAUF;;"}
+{"version":3,"file":"toolbar.cjs","sources":["../../../../components/data-table/components/toolbar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Flex } from '../../flex';\nimport styles from '../data-table.module.css';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplaySettings } from './display-settings';\nimport { Filters } from './filters';\n\nexport function Toolbar<TData, TValue>({ className }: { className?: string }) {\n  const { shouldShowFilters = false } = useDataTable();\n\n  if (!shouldShowFilters) {\n    return null;\n  }\n\n  return (\n    <Flex\n      className={cx(styles['toolbar'], className)}\n      justify='between'\n      align='center'\n    >\n      <Filters<TData, TValue> />\n      <DisplaySettings />\n    </Flex>\n  );\n}\n\nToolbar.displayName = 'DataTable.Toolbar';\n"],"names":[],"mappings":";;;;;;;;;;;AASgB;;;AAIZ;;AAGF;AAUF;AAEA;;"}

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

@@ -1,4 +1,7 @@
 export declare function Toolbar<TData, TValue>({ className }: {
     className?: string;
 }): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace Toolbar {
+    var displayName: string;
+}
 //# sourceMappingURL=toolbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/toolbar.tsx"],"names":[],"mappings":"AASA,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,kDAiB3E"}
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/toolbar.tsx"],"names":[],"mappings":"AASA,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,kDAiB3E;yBAjBe,OAAO"}

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

@@ -14,6 +14,7 @@ function Toolbar({ className }) {
     }
     return (jsxs(Flex, { className: cx(styles['toolbar'], className), justify: 'between', align: 'center', children: [jsx(Filters, {}), jsx(DisplaySettings, {})] }));
 }
+Toolbar.displayName = 'DataTable.Toolbar';
 
 export { Toolbar };
 //# sourceMappingURL=toolbar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","sources":["../../../../components/data-table/components/toolbar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Flex } from '../../flex';\nimport styles from '../data-table.module.css';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplaySettings } from './display-settings';\nimport { Filters } from './filters';\n\nexport function Toolbar<TData, TValue>({ className }: { className?: string }) {\n  const { shouldShowFilters = false } = useDataTable();\n\n  if (!shouldShowFilters) {\n    return null;\n  }\n\n  return (\n    <Flex\n      className={cx(styles['toolbar'], className)}\n      justify='between'\n      align='center'\n    >\n      <Filters<TData, TValue> />\n      <DisplaySettings />\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AASgB;;;AAIZ;;AAGF;AAUF;;"}
+{"version":3,"file":"toolbar.js","sources":["../../../../components/data-table/components/toolbar.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { Flex } from '../../flex';\nimport styles from '../data-table.module.css';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { DisplaySettings } from './display-settings';\nimport { Filters } from './filters';\n\nexport function Toolbar<TData, TValue>({ className }: { className?: string }) {\n  const { shouldShowFilters = false } = useDataTable();\n\n  if (!shouldShowFilters) {\n    return null;\n  }\n\n  return (\n    <Flex\n      className={cx(styles['toolbar'], className)}\n      justify='between'\n      align='center'\n    >\n      <Filters<TData, TValue> />\n      <DisplaySettings />\n    </Flex>\n  );\n}\n\nToolbar.displayName = 'DataTable.Toolbar';\n"],"names":[],"mappings":";;;;;;;;;AASgB;;;AAIZ;;AAGF;AAUF;AAEA;;"}

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

@@ -145,6 +145,7 @@ function VirtualizedContent({ rowHeight = 40, groupHeaderHeight, overscan = 5, l
                                 row: classNames.row
                             } }) })] }), showLoaderRows && (jsxRuntime.jsx(VirtualLoaderRows, { columns: visibleColumns, rowHeight: rowHeight, count: loadingRowCount }))] }));
 }
+VirtualizedContent.displayName = 'DataTable.VirtualizedContent';
 
 exports.VirtualizedContent = VirtualizedContent;
 //# sourceMappingURL=virtualized-content.cjs.map

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"virtualized-content.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/virtualized-content.tsx"],"names":[],"mappings":"AAcA,OAAO,EAIL,uBAAuB,EACxB,MAAM,qBAAqB,CAAC;AA8L7B,wBAAgB,kBAAkB,CAAC,EACjC,SAAc,EACd,iBAAiB,EACjB,QAAY,EACZ,cAAoB,EACpB,UAAU,EACV,SAAS,EACT,UAAe,EAChB,EAAE,uBAAuB,2CAiKzB"}
+{"version":3,"file":"virtualized-content.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/virtualized-content.tsx"],"names":[],"mappings":"AAcA,OAAO,EAIL,uBAAuB,EACxB,MAAM,qBAAqB,CAAC;AA8L7B,wBAAgB,kBAAkB,CAAC,EACjC,SAAc,EACd,iBAAiB,EACjB,QAAY,EACZ,cAAoB,EACpB,UAAU,EACV,SAAS,EACT,UAAe,EAChB,EAAE,uBAAuB,2CAiKzB;yBAzKe,kBAAkB"}

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

@@ -143,6 +143,7 @@ function VirtualizedContent({ rowHeight = 40, groupHeaderHeight, overscan = 5, l
                                 row: classNames.row
                             } }) })] }), showLoaderRows && (jsx(VirtualLoaderRows, { columns: visibleColumns, rowHeight: rowHeight, count: loadingRowCount }))] }));
 }
+VirtualizedContent.displayName = 'DataTable.VirtualizedContent';
 
 export { VirtualizedContent };
 //# sourceMappingURL=virtualized-content.js.map

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

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

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

@@ -142,8 +142,9 @@ function DataTableRoot({ data = [], columns, query, mode = 'client', isLoading =
         shouldShowFilters,
         stickyGroupHeader
     ]);
-    return (jsxRuntime.jsx(context.TableContext.Provider, { value: contextValue, children: children }));
+    return jsxRuntime.jsx(context.TableContext, { value: contextValue, children: children });
 }
+DataTableRoot.displayName = 'DataTable';
 const DataTable = Object.assign(DataTableRoot, {
     Content: content.Content,
     VirtualizedContent: virtualizedContent.VirtualizedContent,

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

@@ -1 +1 @@
-{"version":3,"file":"data-table.cjs","sources":["../../../components/data-table/data-table.tsx"],"sourcesContent":["'use client';\n\nimport {\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getSortedRowModel,\n  Updater,\n  useReactTable,\n  VisibilityState\n} from '@tanstack/react-table';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Content } from './components/content';\nimport { DisplaySettings } from './components/display-settings';\nimport { Filters } from './components/filters';\nimport { TableSearch } from './components/search';\nimport { Toolbar } from './components/toolbar';\nimport { VirtualizedContent } from './components/virtualized-content';\nimport { TableContext } from './context';\nimport {\n  DataTableProps,\n  defaultGroupOption,\n  GroupedData,\n  InternalQuery,\n  TableContextType,\n  TableQueryUpdateFn\n} from './data-table.types';\nimport {\n  getColumnsWithFilterFn,\n  getDefaultTableQuery,\n  getInitialColumnVisibility,\n  groupData,\n  hasQueryChanged,\n  queryToTableState,\n  transformToDataTableQuery\n} from './utils';\n\nfunction DataTableRoot<TData, TValue>({\n  data = [],\n  columns,\n  query,\n  mode = 'client',\n  isLoading = false,\n  loadingRowCount = 3,\n  defaultSort,\n  children,\n  onTableQueryChange,\n  onLoadMore,\n  onRowClick,\n  onColumnVisibilityChange,\n  stickyGroupHeader = false,\n  getRowId\n}: React.PropsWithChildren<DataTableProps<TData, TValue>>) {\n  const defaultTableQuery = useMemo(\n    () => getDefaultTableQuery(defaultSort, query),\n    [defaultSort, query]\n  );\n  const initialColumnVisibility = getInitialColumnVisibility(columns);\n\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(\n    initialColumnVisibility\n  );\n  const handleColumnVisibilityChange = useCallback(\n    (value: Updater<VisibilityState>) => {\n      setColumnVisibility(prev => {\n        const newValue = typeof value === 'function' ? value(prev) : value;\n        onColumnVisibilityChange?.(newValue);\n        return newValue;\n      });\n    },\n    [onColumnVisibilityChange]\n  );\n\n  const [tableQuery, setTableQuery] =\n    useState<InternalQuery>(defaultTableQuery);\n\n  const oldQueryRef = useRef<InternalQuery | null>(null);\n\n  const reactTableState = useMemo(\n    () => queryToTableState(tableQuery),\n    [tableQuery]\n  );\n\n  const onDisplaySettingsReset = useCallback(() => {\n    setTableQuery(prev => ({\n      ...prev,\n      ...defaultTableQuery,\n      sort: [defaultSort],\n      group_by: [defaultGroupOption.id]\n    }));\n    handleColumnVisibilityChange(initialColumnVisibility);\n  }, [\n    defaultSort,\n    defaultTableQuery,\n    initialColumnVisibility,\n    handleColumnVisibilityChange\n  ]);\n\n  const group_by = tableQuery.group_by?.[0];\n\n  const columnsWithFilters = useMemo(\n    () => getColumnsWithFilterFn<TData, TValue>(columns, tableQuery.filters),\n    [columns, tableQuery.filters]\n  );\n\n  const groupedData = useMemo(\n    () => groupData(data, group_by, columns),\n    [data, group_by, columns]\n  );\n\n  useEffect(() => {\n    if (\n      tableQuery &&\n      onTableQueryChange &&\n      hasQueryChanged(oldQueryRef.current, tableQuery) &&\n      mode === 'server'\n    ) {\n      onTableQueryChange(transformToDataTableQuery(tableQuery));\n      oldQueryRef.current = tableQuery;\n    }\n  }, [tableQuery, onTableQueryChange]);\n\n  const table = useReactTable({\n    data: groupedData as unknown as TData[],\n    columns: columnsWithFilters,\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    getSubRows: row => (row as unknown as GroupedData<TData>)?.subRows || [],\n    getSortedRowModel: mode === 'server' ? undefined : getSortedRowModel(),\n    getFilteredRowModel: mode === 'server' ? undefined : getFilteredRowModel(),\n    manualSorting: mode === 'server',\n    manualFiltering: mode === 'server',\n    onColumnVisibilityChange: handleColumnVisibilityChange,\n    globalFilterFn: mode === 'server' ? undefined : 'auto',\n    initialState: {\n      columnVisibility: initialColumnVisibility\n    },\n    filterFromLeafRows: true,\n    state: {\n      ...reactTableState,\n      columnVisibility: columnVisibility,\n      expanded:\n        group_by && group_by !== defaultGroupOption.id ? true : undefined\n    }\n  });\n\n  function updateTableQuery(fn: TableQueryUpdateFn) {\n    setTableQuery(prev => fn(prev));\n  }\n\n  const loadMoreData = useCallback(() => {\n    if (mode === 'server' && onLoadMore) {\n      onLoadMore();\n    }\n  }, [mode, onLoadMore]);\n\n  const searchQuery = query?.search;\n  useEffect(() => {\n    if (searchQuery) {\n      updateTableQuery(prev => ({\n        ...prev,\n        search: searchQuery\n      }));\n    }\n  }, [searchQuery]);\n\n  // Determine if filters should be visible\n  // Filters should be visible if there is data OR if filters are applied (empty state)\n  // Filters should NOT be visible if no data AND no filters (zero state)\n  // Note: Search alone does not show the filter bar\n  const shouldShowFilters = useMemo(() => {\n    const hasFilters = tableQuery?.filters && tableQuery.filters.length > 0;\n\n    try {\n      const rowModel = table.getRowModel();\n      const hasData = (rowModel?.rows?.length ?? 0) > 0;\n      return hasData || hasFilters;\n    } catch {\n      // If table is not ready yet, check if we have initial data\n      // If no filters and no data, don't show filters\n      return hasFilters || data.length > 0;\n    }\n  }, [table, tableQuery, data.length]);\n\n  const contextValue: TableContextType<TData, TValue> = useMemo(() => {\n    return {\n      table,\n      columns,\n      mode,\n      isLoading,\n      loadMoreData,\n      tableQuery,\n      updateTableQuery,\n      onDisplaySettingsReset,\n      defaultSort,\n      loadingRowCount,\n      onRowClick,\n      shouldShowFilters,\n      stickyGroupHeader\n    };\n  }, [\n    table,\n    columns,\n    mode,\n    isLoading,\n    loadMoreData,\n    tableQuery,\n    updateTableQuery,\n    onDisplaySettingsReset,\n    defaultSort,\n    loadingRowCount,\n    onRowClick,\n    shouldShowFilters,\n    stickyGroupHeader\n  ]);\n\n  return (\n    <TableContext.Provider value={contextValue}>\n      {children}\n    </TableContext.Provider>\n  );\n}\n\nexport const DataTable = Object.assign(DataTableRoot, {\n  Content: Content,\n  VirtualizedContent: VirtualizedContent,\n  Toolbar: Toolbar,\n  Search: TableSearch,\n  Filters: Filters,\n  DisplayControls: DisplaySettings\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAqCA;;AAoBE;;AAKA;;AAGM;AACA;AACA;AACF;AACF;;AAOF;AAEA;AAKA;AACE;AACE;AACA;;AAEA;AACD;;AAEH;;;;;AAKC;;;;;AAeC;;AAGE;;AAGA;AACA;;AAEJ;;AAGE;AACA;;;;;AAKA;AACA;;;AAGA;;AAEA;AACE;AACD;AACD;AACA;AACE;AACA;AACA;AAED;AACF;;;;AAMD;AACE;AACE;;AAEJ;AAEA;;;AAGI;AACE;AACA;AACD;;AAEL;;;;;AAMA;AACE;AAEA;AACE;AACA;;;AAEA;;;AAGA;;;AAIJ;;;;;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;AAcC;AAED;AAKF;;AAGE;AACA;AACA;AACA;AACA;AACA;AACD;;"}
+{"version":3,"file":"data-table.cjs","sources":["../../../components/data-table/data-table.tsx"],"sourcesContent":["'use client';\n\nimport {\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getSortedRowModel,\n  Updater,\n  useReactTable,\n  VisibilityState\n} from '@tanstack/react-table';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Content } from './components/content';\nimport { DisplaySettings } from './components/display-settings';\nimport { Filters } from './components/filters';\nimport { TableSearch } from './components/search';\nimport { Toolbar } from './components/toolbar';\nimport { VirtualizedContent } from './components/virtualized-content';\nimport { TableContext } from './context';\nimport {\n  DataTableProps,\n  defaultGroupOption,\n  GroupedData,\n  InternalQuery,\n  TableContextType,\n  TableQueryUpdateFn\n} from './data-table.types';\nimport {\n  getColumnsWithFilterFn,\n  getDefaultTableQuery,\n  getInitialColumnVisibility,\n  groupData,\n  hasQueryChanged,\n  queryToTableState,\n  transformToDataTableQuery\n} from './utils';\n\nfunction DataTableRoot<TData, TValue>({\n  data = [],\n  columns,\n  query,\n  mode = 'client',\n  isLoading = false,\n  loadingRowCount = 3,\n  defaultSort,\n  children,\n  onTableQueryChange,\n  onLoadMore,\n  onRowClick,\n  onColumnVisibilityChange,\n  stickyGroupHeader = false,\n  getRowId\n}: React.PropsWithChildren<DataTableProps<TData, TValue>>) {\n  const defaultTableQuery = useMemo(\n    () => getDefaultTableQuery(defaultSort, query),\n    [defaultSort, query]\n  );\n  const initialColumnVisibility = getInitialColumnVisibility(columns);\n\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(\n    initialColumnVisibility\n  );\n  const handleColumnVisibilityChange = useCallback(\n    (value: Updater<VisibilityState>) => {\n      setColumnVisibility(prev => {\n        const newValue = typeof value === 'function' ? value(prev) : value;\n        onColumnVisibilityChange?.(newValue);\n        return newValue;\n      });\n    },\n    [onColumnVisibilityChange]\n  );\n\n  const [tableQuery, setTableQuery] =\n    useState<InternalQuery>(defaultTableQuery);\n\n  const oldQueryRef = useRef<InternalQuery | null>(null);\n\n  const reactTableState = useMemo(\n    () => queryToTableState(tableQuery),\n    [tableQuery]\n  );\n\n  const onDisplaySettingsReset = useCallback(() => {\n    setTableQuery(prev => ({\n      ...prev,\n      ...defaultTableQuery,\n      sort: [defaultSort],\n      group_by: [defaultGroupOption.id]\n    }));\n    handleColumnVisibilityChange(initialColumnVisibility);\n  }, [\n    defaultSort,\n    defaultTableQuery,\n    initialColumnVisibility,\n    handleColumnVisibilityChange\n  ]);\n\n  const group_by = tableQuery.group_by?.[0];\n\n  const columnsWithFilters = useMemo(\n    () => getColumnsWithFilterFn<TData, TValue>(columns, tableQuery.filters),\n    [columns, tableQuery.filters]\n  );\n\n  const groupedData = useMemo(\n    () => groupData(data, group_by, columns),\n    [data, group_by, columns]\n  );\n\n  useEffect(() => {\n    if (\n      tableQuery &&\n      onTableQueryChange &&\n      hasQueryChanged(oldQueryRef.current, tableQuery) &&\n      mode === 'server'\n    ) {\n      onTableQueryChange(transformToDataTableQuery(tableQuery));\n      oldQueryRef.current = tableQuery;\n    }\n  }, [tableQuery, onTableQueryChange]);\n\n  const table = useReactTable({\n    data: groupedData as unknown as TData[],\n    columns: columnsWithFilters,\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    getSubRows: row => (row as unknown as GroupedData<TData>)?.subRows || [],\n    getSortedRowModel: mode === 'server' ? undefined : getSortedRowModel(),\n    getFilteredRowModel: mode === 'server' ? undefined : getFilteredRowModel(),\n    manualSorting: mode === 'server',\n    manualFiltering: mode === 'server',\n    onColumnVisibilityChange: handleColumnVisibilityChange,\n    globalFilterFn: mode === 'server' ? undefined : 'auto',\n    initialState: {\n      columnVisibility: initialColumnVisibility\n    },\n    filterFromLeafRows: true,\n    state: {\n      ...reactTableState,\n      columnVisibility: columnVisibility,\n      expanded:\n        group_by && group_by !== defaultGroupOption.id ? true : undefined\n    }\n  });\n\n  function updateTableQuery(fn: TableQueryUpdateFn) {\n    setTableQuery(prev => fn(prev));\n  }\n\n  const loadMoreData = useCallback(() => {\n    if (mode === 'server' && onLoadMore) {\n      onLoadMore();\n    }\n  }, [mode, onLoadMore]);\n\n  const searchQuery = query?.search;\n  useEffect(() => {\n    if (searchQuery) {\n      updateTableQuery(prev => ({\n        ...prev,\n        search: searchQuery\n      }));\n    }\n  }, [searchQuery]);\n\n  // Determine if filters should be visible\n  // Filters should be visible if there is data OR if filters are applied (empty state)\n  // Filters should NOT be visible if no data AND no filters (zero state)\n  // Note: Search alone does not show the filter bar\n  const shouldShowFilters = useMemo(() => {\n    const hasFilters = tableQuery?.filters && tableQuery.filters.length > 0;\n\n    try {\n      const rowModel = table.getRowModel();\n      const hasData = (rowModel?.rows?.length ?? 0) > 0;\n      return hasData || hasFilters;\n    } catch {\n      // If table is not ready yet, check if we have initial data\n      // If no filters and no data, don't show filters\n      return hasFilters || data.length > 0;\n    }\n  }, [table, tableQuery, data.length]);\n\n  const contextValue: TableContextType<TData, TValue> = useMemo(() => {\n    return {\n      table,\n      columns,\n      mode,\n      isLoading,\n      loadMoreData,\n      tableQuery,\n      updateTableQuery,\n      onDisplaySettingsReset,\n      defaultSort,\n      loadingRowCount,\n      onRowClick,\n      shouldShowFilters,\n      stickyGroupHeader\n    };\n  }, [\n    table,\n    columns,\n    mode,\n    isLoading,\n    loadMoreData,\n    tableQuery,\n    updateTableQuery,\n    onDisplaySettingsReset,\n    defaultSort,\n    loadingRowCount,\n    onRowClick,\n    shouldShowFilters,\n    stickyGroupHeader\n  ]);\n\n  return <TableContext value={contextValue}>{children}</TableContext>;\n}\n\nDataTableRoot.displayName = 'DataTable';\n\nexport const DataTable = Object.assign(DataTableRoot, {\n  Content: Content,\n  VirtualizedContent: VirtualizedContent,\n  Toolbar: Toolbar,\n  Search: TableSearch,\n  Filters: Filters,\n  DisplayControls: DisplaySettings\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAqCA;;AAoBE;;AAKA;;AAGM;AACA;AACA;AACF;AACF;;AAOF;AAEA;AAKA;AACE;AACE;AACA;;AAEA;AACD;;AAEH;;;;;AAKC;;;;;AAeC;;AAGE;;AAGA;AACA;;AAEJ;;AAGE;AACA;;;;;AAKA;AACA;;;AAGA;;AAEA;AACE;AACD;AACD;AACA;AACE;AACA;AACA;AAED;AACF;;;;AAMD;AACE;AACE;;AAEJ;AAEA;;;AAGI;AACE;AACA;AACD;;AAEL;;;;;AAMA;AACE;AAEA;AACE;AACA;;;AAEA;;;AAGA;;;AAIJ;;;;;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;AAcC;;AAGH;AAEA;;AAGE;AACA;AACA;AACA;AACA;AACA;AACD;;"}

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

@@ -1,15 +1,19 @@
 import { Content } from './components/content';
 import { DisplaySettings } from './components/display-settings';
 import { Filters } from './components/filters';
+import { TableSearch } from './components/search';
 import { Toolbar } from './components/toolbar';
 import { VirtualizedContent } from './components/virtualized-content';
 import { DataTableProps } from './data-table.types';
 declare function DataTableRoot<TData, TValue>({ data, columns, query, mode, isLoading, loadingRowCount, defaultSort, children, onTableQueryChange, onLoadMore, onRowClick, onColumnVisibilityChange, stickyGroupHeader, getRowId }: React.PropsWithChildren<DataTableProps<TData, TValue>>): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTableRoot {
+    var displayName: string;
+}
 export declare const DataTable: typeof DataTableRoot & {
     Content: typeof Content;
     VirtualizedContent: typeof VirtualizedContent;
     Toolbar: typeof Toolbar;
-    Search: import("react").ForwardRefExoticComponent<import("./components/search").DataTableSearchProps & import("react").RefAttributes<HTMLInputElement>>;
+    Search: typeof TableSearch;
     Filters: typeof Filters;
     DisplayControls: typeof DisplaySettings;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../components/data-table/data-table.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAEtE,OAAO,EACL,cAAc,EAMf,MAAM,oBAAoB,CAAC;AAW5B,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,EACpC,IAAS,EACT,OAAO,EACP,KAAK,EACL,IAAe,EACf,SAAiB,EACjB,eAAmB,EACnB,WAAW,EACX,QAAQ,EACR,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,wBAAwB,EACxB,iBAAyB,EACzB,QAAQ,EACT,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,2CA0KxD;AAED,eAAO,MAAM,SAAS;;;;;;;CAOpB,CAAC"}
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../components/data-table/data-table.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAEtE,OAAO,EACL,cAAc,EAMf,MAAM,oBAAoB,CAAC;AAW5B,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,EACpC,IAAS,EACT,OAAO,EACP,KAAK,EACL,IAAe,EACf,SAAiB,EACjB,eAAmB,EACnB,WAAW,EACX,QAAQ,EACR,kBAAkB,EAClB,UAAU,EACV,UAAU,EACV,wBAAwB,EACxB,iBAAyB,EACzB,QAAQ,EACT,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,2CAsKxD;kBArLQ,aAAa;;;AAyLtB,eAAO,MAAM,SAAS;;;;;;;CAOpB,CAAC"}

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

@@ -140,8 +140,9 @@ function DataTableRoot({ data = [], columns, query, mode = 'client', isLoading =
         shouldShowFilters,
         stickyGroupHeader
     ]);
-    return (jsx(TableContext.Provider, { value: contextValue, children: children }));
+    return jsx(TableContext, { value: contextValue, children: children });
 }
+DataTableRoot.displayName = 'DataTable';
 const DataTable = Object.assign(DataTableRoot, {
     Content: Content,
     VirtualizedContent: VirtualizedContent,

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

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","sources":["../../../components/data-table/data-table.tsx"],"sourcesContent":["'use client';\n\nimport {\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getSortedRowModel,\n  Updater,\n  useReactTable,\n  VisibilityState\n} from '@tanstack/react-table';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Content } from './components/content';\nimport { DisplaySettings } from './components/display-settings';\nimport { Filters } from './components/filters';\nimport { TableSearch } from './components/search';\nimport { Toolbar } from './components/toolbar';\nimport { VirtualizedContent } from './components/virtualized-content';\nimport { TableContext } from './context';\nimport {\n  DataTableProps,\n  defaultGroupOption,\n  GroupedData,\n  InternalQuery,\n  TableContextType,\n  TableQueryUpdateFn\n} from './data-table.types';\nimport {\n  getColumnsWithFilterFn,\n  getDefaultTableQuery,\n  getInitialColumnVisibility,\n  groupData,\n  hasQueryChanged,\n  queryToTableState,\n  transformToDataTableQuery\n} from './utils';\n\nfunction DataTableRoot<TData, TValue>({\n  data = [],\n  columns,\n  query,\n  mode = 'client',\n  isLoading = false,\n  loadingRowCount = 3,\n  defaultSort,\n  children,\n  onTableQueryChange,\n  onLoadMore,\n  onRowClick,\n  onColumnVisibilityChange,\n  stickyGroupHeader = false,\n  getRowId\n}: React.PropsWithChildren<DataTableProps<TData, TValue>>) {\n  const defaultTableQuery = useMemo(\n    () => getDefaultTableQuery(defaultSort, query),\n    [defaultSort, query]\n  );\n  const initialColumnVisibility = getInitialColumnVisibility(columns);\n\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(\n    initialColumnVisibility\n  );\n  const handleColumnVisibilityChange = useCallback(\n    (value: Updater<VisibilityState>) => {\n      setColumnVisibility(prev => {\n        const newValue = typeof value === 'function' ? value(prev) : value;\n        onColumnVisibilityChange?.(newValue);\n        return newValue;\n      });\n    },\n    [onColumnVisibilityChange]\n  );\n\n  const [tableQuery, setTableQuery] =\n    useState<InternalQuery>(defaultTableQuery);\n\n  const oldQueryRef = useRef<InternalQuery | null>(null);\n\n  const reactTableState = useMemo(\n    () => queryToTableState(tableQuery),\n    [tableQuery]\n  );\n\n  const onDisplaySettingsReset = useCallback(() => {\n    setTableQuery(prev => ({\n      ...prev,\n      ...defaultTableQuery,\n      sort: [defaultSort],\n      group_by: [defaultGroupOption.id]\n    }));\n    handleColumnVisibilityChange(initialColumnVisibility);\n  }, [\n    defaultSort,\n    defaultTableQuery,\n    initialColumnVisibility,\n    handleColumnVisibilityChange\n  ]);\n\n  const group_by = tableQuery.group_by?.[0];\n\n  const columnsWithFilters = useMemo(\n    () => getColumnsWithFilterFn<TData, TValue>(columns, tableQuery.filters),\n    [columns, tableQuery.filters]\n  );\n\n  const groupedData = useMemo(\n    () => groupData(data, group_by, columns),\n    [data, group_by, columns]\n  );\n\n  useEffect(() => {\n    if (\n      tableQuery &&\n      onTableQueryChange &&\n      hasQueryChanged(oldQueryRef.current, tableQuery) &&\n      mode === 'server'\n    ) {\n      onTableQueryChange(transformToDataTableQuery(tableQuery));\n      oldQueryRef.current = tableQuery;\n    }\n  }, [tableQuery, onTableQueryChange]);\n\n  const table = useReactTable({\n    data: groupedData as unknown as TData[],\n    columns: columnsWithFilters,\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    getSubRows: row => (row as unknown as GroupedData<TData>)?.subRows || [],\n    getSortedRowModel: mode === 'server' ? undefined : getSortedRowModel(),\n    getFilteredRowModel: mode === 'server' ? undefined : getFilteredRowModel(),\n    manualSorting: mode === 'server',\n    manualFiltering: mode === 'server',\n    onColumnVisibilityChange: handleColumnVisibilityChange,\n    globalFilterFn: mode === 'server' ? undefined : 'auto',\n    initialState: {\n      columnVisibility: initialColumnVisibility\n    },\n    filterFromLeafRows: true,\n    state: {\n      ...reactTableState,\n      columnVisibility: columnVisibility,\n      expanded:\n        group_by && group_by !== defaultGroupOption.id ? true : undefined\n    }\n  });\n\n  function updateTableQuery(fn: TableQueryUpdateFn) {\n    setTableQuery(prev => fn(prev));\n  }\n\n  const loadMoreData = useCallback(() => {\n    if (mode === 'server' && onLoadMore) {\n      onLoadMore();\n    }\n  }, [mode, onLoadMore]);\n\n  const searchQuery = query?.search;\n  useEffect(() => {\n    if (searchQuery) {\n      updateTableQuery(prev => ({\n        ...prev,\n        search: searchQuery\n      }));\n    }\n  }, [searchQuery]);\n\n  // Determine if filters should be visible\n  // Filters should be visible if there is data OR if filters are applied (empty state)\n  // Filters should NOT be visible if no data AND no filters (zero state)\n  // Note: Search alone does not show the filter bar\n  const shouldShowFilters = useMemo(() => {\n    const hasFilters = tableQuery?.filters && tableQuery.filters.length > 0;\n\n    try {\n      const rowModel = table.getRowModel();\n      const hasData = (rowModel?.rows?.length ?? 0) > 0;\n      return hasData || hasFilters;\n    } catch {\n      // If table is not ready yet, check if we have initial data\n      // If no filters and no data, don't show filters\n      return hasFilters || data.length > 0;\n    }\n  }, [table, tableQuery, data.length]);\n\n  const contextValue: TableContextType<TData, TValue> = useMemo(() => {\n    return {\n      table,\n      columns,\n      mode,\n      isLoading,\n      loadMoreData,\n      tableQuery,\n      updateTableQuery,\n      onDisplaySettingsReset,\n      defaultSort,\n      loadingRowCount,\n      onRowClick,\n      shouldShowFilters,\n      stickyGroupHeader\n    };\n  }, [\n    table,\n    columns,\n    mode,\n    isLoading,\n    loadMoreData,\n    tableQuery,\n    updateTableQuery,\n    onDisplaySettingsReset,\n    defaultSort,\n    loadingRowCount,\n    onRowClick,\n    shouldShowFilters,\n    stickyGroupHeader\n  ]);\n\n  return (\n    <TableContext.Provider value={contextValue}>\n      {children}\n    </TableContext.Provider>\n  );\n}\n\nexport const DataTable = Object.assign(DataTableRoot, {\n  Content: Content,\n  VirtualizedContent: VirtualizedContent,\n  Toolbar: Toolbar,\n  Search: TableSearch,\n  Filters: Filters,\n  DisplayControls: DisplaySettings\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAqCA;;AAoBE;;AAKA;;AAGM;AACA;AACA;AACF;AACF;;AAOF;AAEA;AAKA;AACE;AACE;AACA;;AAEA;AACD;;AAEH;;;;;AAKC;;;;;AAeC;;AAGE;;AAGA;AACA;;AAEJ;;AAGE;AACA;;;;;AAKA;AACA;;;AAGA;;AAEA;AACE;AACD;AACD;AACA;AACE;AACA;AACA;AAED;AACF;;;;AAMD;AACE;AACE;;AAEJ;AAEA;;;AAGI;AACE;AACA;AACD;;AAEL;;;;;AAMA;AACE;AAEA;AACE;AACA;;;AAEA;;;AAGA;;;AAIJ;;;;;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;AAcC;AAED;AAKF;;AAGE;AACA;AACA;AACA;AACA;AACA;AACD;;"}
+{"version":3,"file":"data-table.js","sources":["../../../components/data-table/data-table.tsx"],"sourcesContent":["'use client';\n\nimport {\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getSortedRowModel,\n  Updater,\n  useReactTable,\n  VisibilityState\n} from '@tanstack/react-table';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Content } from './components/content';\nimport { DisplaySettings } from './components/display-settings';\nimport { Filters } from './components/filters';\nimport { TableSearch } from './components/search';\nimport { Toolbar } from './components/toolbar';\nimport { VirtualizedContent } from './components/virtualized-content';\nimport { TableContext } from './context';\nimport {\n  DataTableProps,\n  defaultGroupOption,\n  GroupedData,\n  InternalQuery,\n  TableContextType,\n  TableQueryUpdateFn\n} from './data-table.types';\nimport {\n  getColumnsWithFilterFn,\n  getDefaultTableQuery,\n  getInitialColumnVisibility,\n  groupData,\n  hasQueryChanged,\n  queryToTableState,\n  transformToDataTableQuery\n} from './utils';\n\nfunction DataTableRoot<TData, TValue>({\n  data = [],\n  columns,\n  query,\n  mode = 'client',\n  isLoading = false,\n  loadingRowCount = 3,\n  defaultSort,\n  children,\n  onTableQueryChange,\n  onLoadMore,\n  onRowClick,\n  onColumnVisibilityChange,\n  stickyGroupHeader = false,\n  getRowId\n}: React.PropsWithChildren<DataTableProps<TData, TValue>>) {\n  const defaultTableQuery = useMemo(\n    () => getDefaultTableQuery(defaultSort, query),\n    [defaultSort, query]\n  );\n  const initialColumnVisibility = getInitialColumnVisibility(columns);\n\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(\n    initialColumnVisibility\n  );\n  const handleColumnVisibilityChange = useCallback(\n    (value: Updater<VisibilityState>) => {\n      setColumnVisibility(prev => {\n        const newValue = typeof value === 'function' ? value(prev) : value;\n        onColumnVisibilityChange?.(newValue);\n        return newValue;\n      });\n    },\n    [onColumnVisibilityChange]\n  );\n\n  const [tableQuery, setTableQuery] =\n    useState<InternalQuery>(defaultTableQuery);\n\n  const oldQueryRef = useRef<InternalQuery | null>(null);\n\n  const reactTableState = useMemo(\n    () => queryToTableState(tableQuery),\n    [tableQuery]\n  );\n\n  const onDisplaySettingsReset = useCallback(() => {\n    setTableQuery(prev => ({\n      ...prev,\n      ...defaultTableQuery,\n      sort: [defaultSort],\n      group_by: [defaultGroupOption.id]\n    }));\n    handleColumnVisibilityChange(initialColumnVisibility);\n  }, [\n    defaultSort,\n    defaultTableQuery,\n    initialColumnVisibility,\n    handleColumnVisibilityChange\n  ]);\n\n  const group_by = tableQuery.group_by?.[0];\n\n  const columnsWithFilters = useMemo(\n    () => getColumnsWithFilterFn<TData, TValue>(columns, tableQuery.filters),\n    [columns, tableQuery.filters]\n  );\n\n  const groupedData = useMemo(\n    () => groupData(data, group_by, columns),\n    [data, group_by, columns]\n  );\n\n  useEffect(() => {\n    if (\n      tableQuery &&\n      onTableQueryChange &&\n      hasQueryChanged(oldQueryRef.current, tableQuery) &&\n      mode === 'server'\n    ) {\n      onTableQueryChange(transformToDataTableQuery(tableQuery));\n      oldQueryRef.current = tableQuery;\n    }\n  }, [tableQuery, onTableQueryChange]);\n\n  const table = useReactTable({\n    data: groupedData as unknown as TData[],\n    columns: columnsWithFilters,\n    getRowId,\n    getCoreRowModel: getCoreRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    getSubRows: row => (row as unknown as GroupedData<TData>)?.subRows || [],\n    getSortedRowModel: mode === 'server' ? undefined : getSortedRowModel(),\n    getFilteredRowModel: mode === 'server' ? undefined : getFilteredRowModel(),\n    manualSorting: mode === 'server',\n    manualFiltering: mode === 'server',\n    onColumnVisibilityChange: handleColumnVisibilityChange,\n    globalFilterFn: mode === 'server' ? undefined : 'auto',\n    initialState: {\n      columnVisibility: initialColumnVisibility\n    },\n    filterFromLeafRows: true,\n    state: {\n      ...reactTableState,\n      columnVisibility: columnVisibility,\n      expanded:\n        group_by && group_by !== defaultGroupOption.id ? true : undefined\n    }\n  });\n\n  function updateTableQuery(fn: TableQueryUpdateFn) {\n    setTableQuery(prev => fn(prev));\n  }\n\n  const loadMoreData = useCallback(() => {\n    if (mode === 'server' && onLoadMore) {\n      onLoadMore();\n    }\n  }, [mode, onLoadMore]);\n\n  const searchQuery = query?.search;\n  useEffect(() => {\n    if (searchQuery) {\n      updateTableQuery(prev => ({\n        ...prev,\n        search: searchQuery\n      }));\n    }\n  }, [searchQuery]);\n\n  // Determine if filters should be visible\n  // Filters should be visible if there is data OR if filters are applied (empty state)\n  // Filters should NOT be visible if no data AND no filters (zero state)\n  // Note: Search alone does not show the filter bar\n  const shouldShowFilters = useMemo(() => {\n    const hasFilters = tableQuery?.filters && tableQuery.filters.length > 0;\n\n    try {\n      const rowModel = table.getRowModel();\n      const hasData = (rowModel?.rows?.length ?? 0) > 0;\n      return hasData || hasFilters;\n    } catch {\n      // If table is not ready yet, check if we have initial data\n      // If no filters and no data, don't show filters\n      return hasFilters || data.length > 0;\n    }\n  }, [table, tableQuery, data.length]);\n\n  const contextValue: TableContextType<TData, TValue> = useMemo(() => {\n    return {\n      table,\n      columns,\n      mode,\n      isLoading,\n      loadMoreData,\n      tableQuery,\n      updateTableQuery,\n      onDisplaySettingsReset,\n      defaultSort,\n      loadingRowCount,\n      onRowClick,\n      shouldShowFilters,\n      stickyGroupHeader\n    };\n  }, [\n    table,\n    columns,\n    mode,\n    isLoading,\n    loadMoreData,\n    tableQuery,\n    updateTableQuery,\n    onDisplaySettingsReset,\n    defaultSort,\n    loadingRowCount,\n    onRowClick,\n    shouldShowFilters,\n    stickyGroupHeader\n  ]);\n\n  return <TableContext value={contextValue}>{children}</TableContext>;\n}\n\nDataTableRoot.displayName = 'DataTable';\n\nexport const DataTable = Object.assign(DataTableRoot, {\n  Content: Content,\n  VirtualizedContent: VirtualizedContent,\n  Toolbar: Toolbar,\n  Search: TableSearch,\n  Filters: Filters,\n  DisplayControls: DisplaySettings\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAqCA;;AAoBE;;AAKA;;AAGM;AACA;AACA;AACF;AACF;;AAOF;AAEA;AAKA;AACE;AACE;AACA;;AAEA;AACD;;AAEH;;;;;AAKC;;;;;AAeC;;AAGE;;AAGA;AACA;;AAEJ;;AAGE;AACA;;;;;AAKA;AACA;;;AAGA;;AAEA;AACE;AACD;AACD;AACA;AACE;AACA;AACA;AAED;AACF;;;;AAMD;AACE;AACE;;AAEJ;AAEA;;;AAGI;AACE;AACA;AACD;;AAEL;;;;;AAMA;AACE;AAEA;AACE;AACA;;;AAEA;;;AAGA;;;AAIJ;;;;;;;;;;;;;;;;AAgBA;;;;;;;;;;;;;;AAcC;;AAGH;AAEA;;AAGE;AACA;AACA;AACA;AACA;AACA;AACD;;"}