@dynatrace/strato-components 3.5.2 → 3.7.0

package/esm/tables/DataTable/hooks/useColumns.js

@@ -12,7 +12,7 @@ import {
   getAlignmentBasedOnType,
   isDatatableLogContentColumnConfig
 } from "../features/ColumnTypes/ColumnTypes.js";
-import { SPACER_COLUMN } from "../features/Layout/Layout.js";
+import { SPACER_COLUMN } from "../features/Layout/LayoutColumnDef.js";
 import { applySortTypes } from "../features/Sorting/sort-types.js";
 function isDataTableGroupColumnDef(columnDef) {
   return columnDef !== null && typeof columnDef === "object" && "columns" in columnDef && Array.isArray(columnDef.columns);
@@ -128,7 +128,9 @@ function useColumns(propColumns) {
       if (isDataTableGroupColumnDef(firstLevelColumn)) {
         const groupColumn = {
           id: firstLevelColumn.id,
-          header: createHeaderRenderer(firstLevelColumn.header),
+          header: createHeaderRenderer(
+            firstLevelColumn.header
+          ),
           width: firstLevelColumn.width,
           enableSorting: false,
           columns: firstLevelColumn.columns?.map(
@@ -141,10 +143,7 @@ function useColumns(propColumns) {
         };
         createdColumns.push(groupColumn);
         for (const secondLevelColumn of firstLevelColumn.columns ?? []) {
-          propColumnMap.set(
-            secondLevelColumn.id,
-            secondLevelColumn
-          );
+          propColumnMap.set(secondLevelColumn.id, secondLevelColumn);
         }
       } else if (isDataTableDisplayColumnDef(firstLevelColumn)) {
         createdColumns.push(createDisplayColumnDef(firstLevelColumn));

package/esm/tables/DataTable/hooks/useColumns.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/hooks/useColumns.tsx"],
-  "sourcesContent": ["import { useMemo } from 'react';\n\nimport { makeAccessorFunction } from './makeAccessorFunction.js';\nimport {\n  type CellContext,\n  type ColumnDef,\n  type ColumnDefTemplate,\n} from './useTable/types.js';\nimport { LogContentHighlight } from '../../utils/log-content-highlighting.js';\nimport { replaceUrlsWithLinks } from '../../utils/replace-urls-with-links.js';\nimport {\n  applyColumnFormatters,\n  formatCellValue,\n} from '../features/CellFormatter/CellFormatter.js';\nimport {\n  applyColumnTypes,\n  getAlignmentBasedOnType,\n  isDatatableLogContentColumnConfig,\n} from '../features/ColumnTypes/ColumnTypes.js';\nimport { SPACER_COLUMN } from '../features/Layout/Layout.js';\nimport { applySortTypes } from '../features/Sorting/sort-types.js';\nimport type {\n  DataTableCustomCell,\n  DataTableColumnDef,\n  DataTableDisplayColumnDef,\n  DataTableGroupColumnDef,\n  DataTableRowData,\n} from '../public.api.js';\n\n/**\n * @public\n * Type guard to determine if a given column definition is a `DataTableGroupColumnDef`.\n */\nexport function isDataTableGroupColumnDef<\n  TData extends DataTableRowData,\n  TValue = unknown,\n>(columnDef: unknown): columnDef is DataTableGroupColumnDef<TData, TValue> {\n  return (\n    columnDef !== null &&\n    typeof columnDef === 'object' &&\n    'columns' in columnDef &&\n    Array.isArray((columnDef as { columns: Array<unknown> }).columns)\n  );\n}\n\n/**\n * @public\n * Type guard to determine if a given column definition is a `DataTableDisplayColumnDef`.\n */\nexport function isDataTableDisplayColumnDef<\n  TData extends DataTableRowData,\n  TValue = unknown,\n>(columnDef: unknown): columnDef is DataTableDisplayColumnDef<TData, TValue> {\n  return (\n    columnDef !== null &&\n    typeof columnDef === 'object' &&\n    'accessor' in columnDef\n  );\n}\n\n/**\n * @internal\n * Helper function to transform the public accessor key to the correct\n * member config for the tanstack/react-table ColumnDef.\n */\nfunction splitAccessor<TData extends DataTableRowData, TValue = unknown>(\n  column: DataTableDisplayColumnDef<TData, TValue>,\n): {\n  accessorKey?: string;\n  accessorFn?: (row: TData) => TValue;\n} {\n  if (typeof column.accessor === 'string') {\n    if (column.accessor.includes('.') || column.accessor.includes('[')) {\n      return {\n        accessorFn: makeAccessorFunction(column.accessor),\n      };\n    }\n\n    return {\n      accessorKey: column.accessor,\n    };\n  }\n\n  if (typeof column.accessor === 'function') {\n    return {\n      accessorFn: column.accessor,\n    };\n  }\n  return {};\n}\n\n/**\n * Maps the given header renderer to the internal header renderer and prevents\n * leaking.\n * @internal\n */\nfunction createHeaderRenderer<TData extends DataTableRowData>(\n  header: DataTableColumnDef<TData>['header'],\n) {\n  // We need to map the function from the outside here in order to not leak\n  // tanstack table internals.\n  if (typeof header === 'function') {\n    return () => header();\n  }\n  return header;\n}\n\n/**\n * Prepares all exposed functions for the custom cell renderer.\n */\nfunction createCellRenderer<TData extends DataTableRowData, TValue>(\n  consumerCustomCell: DataTableCustomCell<TData, TValue>,\n  consumerColumnDef: DataTableDisplayColumnDef<TData, TValue>,\n): ColumnDefTemplate<CellContext<TData, TValue>> {\n  return ({ getValue, row, column }) => {\n    const lineWrap = column.getIsLineWrapped();\n\n    return consumerCustomCell({\n      value: getValue(),\n      rowIndex: row.index,\n      rowData: row.original,\n      rowId: row.id,\n      format: (value) => formatCellValue(value, consumerColumnDef),\n      formatLogContent: (logContent: string) => {\n        const truncationLimit = isDatatableLogContentColumnConfig(\n          consumerColumnDef.config,\n        )\n          ? consumerColumnDef.config.truncationLimit\n          : undefined;\n        return (\n          <LogContentHighlight\n            logContent={logContent}\n            lineWrap={lineWrap}\n            truncationLimit={truncationLimit}\n          />\n        );\n      },\n      detectLinks: replaceUrlsWithLinks,\n      isLineWrapped: lineWrap,\n    });\n  };\n}\n\n/**\n * @internal\n * Helper function to convert from the public `DataTableDisplayColumnDef` to the internally used\n * ColumnDef.\n */\nfunction createDisplayColumnDef<\n  TData extends DataTableRowData,\n  TValue = unknown,\n>(\n  columnDef: DataTableDisplayColumnDef<TData, TValue>,\n): ColumnDef<TData, TValue> {\n  const hasFormatter =\n    columnDef.columnType !== 'meterbar' &&\n    columnDef.columnType !== 'sparkline' &&\n    columnDef.columnType !== 'gantt' &&\n    !!columnDef.formatter;\n\n  const composedDef: ColumnDef<TData, TValue> = {\n    id: columnDef.id,\n    header: createHeaderRenderer(columnDef.header),\n    label: columnDef.label,\n    width: columnDef.width,\n    minWidth: columnDef.minWidth,\n    maxWidth: columnDef.maxWidth,\n    alignment:\n      columnDef.alignment ?? getAlignmentBasedOnType(columnDef.columnType),\n    enableSorting: columnDef.disableSorting ? !columnDef.disableSorting : true,\n    sortAccessor: columnDef.sortAccessor,\n    sortDescFirst: columnDef.sortDescFirst,\n    invertSorting: columnDef.sortInverted,\n    enableHiding: !columnDef.disableColumnHiding,\n    thresholds: columnDef.thresholds,\n    meta: {\n      config: columnDef.config,\n      hasFormatter,\n      hasCustomCellRenderer: columnDef.cell !== undefined,\n      hasCustomHeaderRenderer: typeof columnDef.header !== 'string',\n    },\n    ...splitAccessor(columnDef),\n    ...applySortTypes(columnDef),\n  };\n\n  if (columnDef.columnType) {\n    composedDef.columnType = columnDef.columnType;\n  }\n\n  if (columnDef.cell) {\n    const customCell = columnDef.cell;\n\n    if (typeof customCell === 'string') {\n      composedDef.cell = customCell;\n      return composedDef;\n    }\n\n    if (typeof customCell === 'function') {\n      return {\n        ...composedDef,\n        cell: createCellRenderer(customCell, columnDef),\n      };\n    }\n\n    return composedDef;\n  }\n\n  return {\n    ...composedDef,\n    ...applyColumnTypes(columnDef, composedDef),\n    ...applyColumnFormatters(columnDef),\n  };\n}\n\n/**\n * Helper hook that will calculate which columns are enabled within the DataTable\n * @internal\n */\nexport function useColumns<TData extends DataTableRowData, TValue = unknown>(\n  propColumns: DataTableColumnDef<TData, TValue>[],\n) {\n  return useMemo(() => {\n    const createdColumns: ColumnDef<TData>[] = [];\n    const propColumnMap = new Map<string, DataTableColumnDef<TData, TValue>>();\n\n    // Iterate through the columns and create the definitions required\n    for (const firstLevelColumn of propColumns) {\n      propColumnMap.set(firstLevelColumn.id, firstLevelColumn);\n      if (isDataTableGroupColumnDef(firstLevelColumn)) {\n        const groupColumn: ColumnDef<TData, TValue> = {\n          id: firstLevelColumn.id,\n          header: createHeaderRenderer(firstLevelColumn.header),\n          width: firstLevelColumn.width,\n          enableSorting: false,\n          columns: firstLevelColumn.columns?.map((childColumn) =>\n            createDisplayColumnDef<TData>(childColumn),\n          ),\n          alignment: firstLevelColumn.alignment,\n          meta: {\n            hasCustomHeaderRenderer:\n              typeof firstLevelColumn.header !== 'string',\n          },\n        };\n        createdColumns.push(groupColumn);\n\n        for (const secondLevelColumn of firstLevelColumn.columns ?? []) {\n          propColumnMap.set(\n            secondLevelColumn.id,\n            secondLevelColumn as DataTableDisplayColumnDef<TData, TValue>,\n          );\n        }\n      } else if (isDataTableDisplayColumnDef(firstLevelColumn)) {\n        createdColumns.push(createDisplayColumnDef<TData>(firstLevelColumn));\n      }\n    }\n\n    // Insert a last column to spread\n    if (createdColumns.length > 0) {\n      createdColumns.push(SPACER_COLUMN as ColumnDef<TData>);\n    }\n\n    return [createdColumns, propColumnMap] as const;\n  }, [propColumns]);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type {\n  CellContext,\n  CellData,\n  ColumnDef,\n  ColumnDefTemplate,\n  RowData,\n  StringOrTemplateHeader,\n} from '@tanstack/react-table';\nimport { useMemo } from 'react';\n\nimport { makeAccessorFunction } from './makeAccessorFunction.js';\nimport { LogContentHighlight } from '../../utils/log-content-highlighting.js';\nimport { replaceUrlsWithLinks } from '../../utils/replace-urls-with-links.js';\nimport {\n  applyColumnFormatters,\n  formatCellValue,\n} from '../features/CellFormatter/CellFormatter.js';\nimport {\n  applyColumnTypes,\n  getAlignmentBasedOnType,\n  isDatatableLogContentColumnConfig,\n} from '../features/ColumnTypes/ColumnTypes.js';\nimport { SPACER_COLUMN } from '../features/Layout/LayoutColumnDef.js';\nimport { applySortTypes } from '../features/Sorting/sort-types.js';\nimport type { TDataTableFeatures } from '../features/types/features.types.js';\nimport type {\n  DataTableCustomCell,\n  DataTableColumnDef,\n  DataTableDisplayColumnDef,\n  DataTableGroupColumnDef,\n  DataTableRowData,\n} from '../public.api.js';\n\n/**\n * Type guard to determine if a given column definition is a `DataTableGroupColumnDef`.\n * @public\n */\nexport function isDataTableGroupColumnDef<\n  TData extends DataTableRowData,\n  TValue = unknown,\n>(columnDef: unknown): columnDef is DataTableGroupColumnDef<TData, TValue> {\n  return (\n    columnDef !== null &&\n    typeof columnDef === 'object' &&\n    'columns' in columnDef &&\n    Array.isArray((columnDef as { columns: Array<unknown> }).columns)\n  );\n}\n\n/**\n * Type guard to determine if a given column definition is a `DataTableDisplayColumnDef`.\n * @public\n */\nexport function isDataTableDisplayColumnDef<\n  TData extends DataTableRowData,\n  TValue = unknown,\n>(columnDef: unknown): columnDef is DataTableDisplayColumnDef<TData, TValue> {\n  return (\n    columnDef !== null &&\n    typeof columnDef === 'object' &&\n    'accessor' in columnDef\n  );\n}\n\n/**\n * Helper function to transform the public accessor key to the correct\n * member config for the tanstack/react-table ColumnDef.\n */\nfunction splitAccessor<TData extends DataTableRowData, TValue = unknown>(\n  column: DataTableDisplayColumnDef<TData, TValue>,\n): {\n  accessorKey?: string;\n  accessorFn?: (row: TData) => TValue;\n} {\n  if (typeof column.accessor === 'string') {\n    if (column.accessor.includes('.') || column.accessor.includes('[')) {\n      return {\n        accessorFn: makeAccessorFunction(column.accessor),\n      };\n    }\n\n    return {\n      accessorKey: column.accessor,\n    };\n  }\n\n  if (typeof column.accessor === 'function') {\n    return {\n      accessorFn: column.accessor,\n    };\n  }\n  return {};\n}\n\n/**\n * Maps the given header renderer to the internal header renderer and prevents\n * leaking.\n */\nfunction createHeaderRenderer<TData extends DataTableRowData, TValue = unknown>(\n  header: DataTableColumnDef<TData>['header'],\n): StringOrTemplateHeader<TDataTableFeatures, RowData, TValue> | undefined {\n  // We need to map the function from the outside here in order to not leak\n  // tanstack table internals.\n  if (typeof header === 'function') {\n    return () => header();\n  }\n  return header;\n}\n\n/**\n * Prepares all exposed functions for the custom cell renderer.\n */\nfunction createCellRenderer<TData extends RowData, TValue>(\n  consumerCustomCell: DataTableCustomCell<TData, TValue>,\n  consumerColumnDef: DataTableDisplayColumnDef<TData, TValue>,\n): ColumnDefTemplate<CellContext<TDataTableFeatures, TData, TValue>> {\n  return ({ getValue, row, column }) => {\n    const lineWrap = column.getIsLineWrapped();\n\n    return consumerCustomCell({\n      value: getValue(),\n      rowIndex: row.index,\n      rowData: row.original,\n      rowId: row.id,\n      format: (value) => formatCellValue(value, consumerColumnDef),\n      formatLogContent: (logContent: string) => {\n        const truncationLimit = isDatatableLogContentColumnConfig(\n          consumerColumnDef.config,\n        )\n          ? consumerColumnDef.config.truncationLimit\n          : undefined;\n        return (\n          <LogContentHighlight\n            logContent={logContent}\n            lineWrap={lineWrap}\n            truncationLimit={truncationLimit}\n          />\n        );\n      },\n      detectLinks: replaceUrlsWithLinks,\n      isLineWrapped: lineWrap,\n    });\n  };\n}\n\n/**\n * Helper function to convert from the public `DataTableDisplayColumnDef` to the internally used\n * ColumnDef.\n */\nfunction createDisplayColumnDef(\n  columnDef: DataTableDisplayColumnDef<DataTableRowData, unknown>,\n): ColumnDef<TDataTableFeatures, RowData, CellData> {\n  const hasFormatter =\n    columnDef.columnType !== 'meterbar' &&\n    columnDef.columnType !== 'sparkline' &&\n    columnDef.columnType !== 'gantt' &&\n    !!columnDef.formatter;\n\n  const composedDef: ColumnDef<TDataTableFeatures, RowData, CellData> = {\n    id: columnDef.id,\n    header: createHeaderRenderer(columnDef.header),\n    label: columnDef.label,\n    width: columnDef.width,\n    minWidth: columnDef.minWidth,\n    maxWidth: columnDef.maxWidth,\n    alignment:\n      columnDef.alignment ?? getAlignmentBasedOnType(columnDef.columnType),\n    enableSorting: columnDef.disableSorting ? !columnDef.disableSorting : true,\n    sortAccessor: columnDef.sortAccessor,\n    sortDescFirst: columnDef.sortDescFirst,\n    invertSorting: columnDef.sortInverted,\n    enableHiding: !columnDef.disableColumnHiding,\n    thresholds: columnDef.thresholds,\n    meta: {\n      config: columnDef.config,\n      hasFormatter,\n      hasCustomCellRenderer: columnDef.cell !== undefined,\n      hasCustomHeaderRenderer: typeof columnDef.header !== 'string',\n    },\n    ...splitAccessor(columnDef),\n    ...applySortTypes(columnDef),\n  };\n\n  if (columnDef.columnType) {\n    composedDef.columnType = columnDef.columnType;\n  }\n\n  if (columnDef.cell) {\n    const customCell = columnDef.cell;\n\n    if (typeof customCell === 'string') {\n      composedDef.cell = customCell;\n      return composedDef;\n    }\n\n    if (typeof customCell === 'function') {\n      return {\n        ...composedDef,\n        cell: createCellRenderer(customCell, columnDef),\n      };\n    }\n\n    return composedDef;\n  }\n\n  return {\n    ...composedDef,\n    ...applyColumnTypes(columnDef, composedDef),\n    ...applyColumnFormatters(columnDef),\n  };\n}\n\n/**\n * Helper hook that will calculate which columns are enabled within the DataTable\n * @internal\n */\nexport function useColumns(\n  propColumns: DataTableColumnDef<DataTableRowData, unknown>[],\n): [\n  ColumnDef<TDataTableFeatures, RowData, CellData>[],\n  Map<string, DataTableColumnDef<DataTableRowData, unknown>>,\n] {\n  return useMemo(() => {\n    const createdColumns: ColumnDef<TDataTableFeatures, RowData, CellData>[] =\n      [];\n    const propColumnMap = new Map<\n      string,\n      DataTableColumnDef<DataTableRowData, CellData>\n    >();\n\n    // Iterate through the columns and create the definitions required\n    for (const firstLevelColumn of propColumns) {\n      propColumnMap.set(firstLevelColumn.id, firstLevelColumn);\n      if (\n        isDataTableGroupColumnDef<DataTableRowData, CellData>(firstLevelColumn)\n      ) {\n        const groupColumn: ColumnDef<TDataTableFeatures, RowData, CellData> = {\n          id: firstLevelColumn.id,\n          header: createHeaderRenderer<RowData, CellData>(\n            firstLevelColumn.header,\n          ),\n          width: firstLevelColumn.width,\n          enableSorting: false,\n          columns: firstLevelColumn.columns?.map((childColumn) =>\n            createDisplayColumnDef(childColumn),\n          ),\n          alignment: firstLevelColumn.alignment,\n          meta: {\n            hasCustomHeaderRenderer:\n              typeof firstLevelColumn.header !== 'string',\n          },\n        };\n        createdColumns.push(groupColumn);\n\n        for (const secondLevelColumn of firstLevelColumn.columns ?? []) {\n          propColumnMap.set(secondLevelColumn.id, secondLevelColumn);\n        }\n      } else if (isDataTableDisplayColumnDef(firstLevelColumn)) {\n        createdColumns.push(createDisplayColumnDef(firstLevelColumn));\n      }\n    }\n\n    // Insert a last column to spread\n    if (createdColumns.length > 0) {\n      createdColumns.push(SPACER_COLUMN);\n    }\n\n    return [createdColumns, propColumnMap] as const;\n  }, [propColumns]);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/tables/DataTable/hooks/useDataTableSlots.js

@@ -10,7 +10,7 @@ import {
 import {
   _isDataTableToolbar
 } from "../components/Toolbar/DataTableToolbar.js";
-import { _isDataTablePagination } from "../features/Pagination/Pagination.js";
+import { _isDataTablePagination } from "../features/Pagination/usePagination.js";
 function useDataTableSlots(children) {
   return useMemo(() => {
     const slots = {

package/esm/tables/DataTable/hooks/useDataTableSlots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/hooks/useDataTableSlots.ts"],
-  "sourcesContent": ["import { Children, type ReactElement, type ReactNode, useMemo } from 'react';\nimport { isElement } from 'react-is';\n\nimport { _isEmptyState } from '../components/DataTableEmptyState.js';\nimport {\n  _isDataTableSelectedRowsActions,\n  type DataTableSelectedRowsActionsProps,\n} from '../components/TableActions/DataTableSelectedRowsActions.js';\nimport {\n  _isTableActions,\n  type DataTableTableActionsProps,\n} from '../components/TableActions/DataTableTableActions.js';\nimport {\n  _isDataTableToolbar,\n  type DataTableToolbarProps,\n} from '../components/Toolbar/DataTableToolbar.js';\nimport type { DataTablePaginationProps } from '../features/Pagination/pagination-types.js';\nimport { _isDataTablePagination } from '../features/Pagination/Pagination.js';\nimport type { DataTableRowData } from '../public.api.js';\n\n/** @internal */\nexport type DataTableSlots<TData extends DataTableRowData> = {\n  pagination: ReactElement<DataTablePaginationProps> | null;\n  toolbarProps: DataTableToolbarProps | null;\n  emptyState: ReactElement | null;\n  tableActions: ReactElement<DataTableTableActionsProps> | null;\n  selectedRowsActions: ReactElement<\n    DataTableSelectedRowsActionsProps<TData>\n  > | null;\n};\n\n/**\n * @internal\n */\nexport function useDataTableSlots<TData extends DataTableRowData>(\n  children: ReactNode,\n): DataTableSlots<TData> {\n  return useMemo(() => {\n    const slots: DataTableSlots<TData> = {\n      pagination: null,\n      toolbarProps: null,\n      selectedRowsActions: null,\n      emptyState: null,\n      tableActions: null,\n    };\n\n    Children.forEach(children, (child) => {\n      if (isElement(child)) {\n        if (_isDataTableToolbar(child)) {\n          slots.toolbarProps = child.props;\n        }\n        if (_isTableActions(child)) {\n          slots.tableActions = child;\n        }\n        if (_isEmptyState(child)) {\n          slots.emptyState = child;\n        }\n        if (_isDataTablePagination(child)) {\n          slots.pagination = child;\n        }\n        if (_isDataTableSelectedRowsActions(child)) {\n          slots.selectedRowsActions = child;\n        }\n      }\n    });\n    return slots;\n  }, [children]);\n}\n"],
+  "sourcesContent": ["import { Children, type ReactElement, type ReactNode, useMemo } from 'react';\nimport { isElement } from 'react-is';\n\nimport { _isEmptyState } from '../components/DataTableEmptyState.js';\nimport {\n  _isDataTableSelectedRowsActions,\n  type DataTableSelectedRowsActionsProps,\n} from '../components/TableActions/DataTableSelectedRowsActions.js';\nimport {\n  _isTableActions,\n  type DataTableTableActionsProps,\n} from '../components/TableActions/DataTableTableActions.js';\nimport {\n  _isDataTableToolbar,\n  type DataTableToolbarProps,\n} from '../components/Toolbar/DataTableToolbar.js';\nimport type { DataTablePaginationProps } from '../features/Pagination/pagination-types.js';\nimport { _isDataTablePagination } from '../features/Pagination/usePagination.js';\nimport type { DataTableRowData } from '../public.api.js';\n\n/** @internal */\nexport type DataTableSlots<TData extends DataTableRowData> = {\n  pagination: ReactElement<DataTablePaginationProps> | null;\n  toolbarProps: DataTableToolbarProps | null;\n  emptyState: ReactElement | null;\n  tableActions: ReactElement<DataTableTableActionsProps> | null;\n  selectedRowsActions: ReactElement<\n    DataTableSelectedRowsActionsProps<TData>\n  > | null;\n};\n\n/**\n * @internal\n */\nexport function useDataTableSlots<TData extends DataTableRowData>(\n  children: ReactNode,\n): DataTableSlots<TData> {\n  return useMemo(() => {\n    const slots: DataTableSlots<TData> = {\n      pagination: null,\n      toolbarProps: null,\n      selectedRowsActions: null,\n      emptyState: null,\n      tableActions: null,\n    };\n\n    Children.forEach(children, (child) => {\n      if (isElement(child)) {\n        if (_isDataTableToolbar(child)) {\n          slots.toolbarProps = child.props;\n        }\n        if (_isTableActions(child)) {\n          slots.tableActions = child;\n        }\n        if (_isEmptyState(child)) {\n          slots.emptyState = child;\n        }\n        if (_isDataTablePagination(child)) {\n          slots.pagination = child;\n        }\n        if (_isDataTableSelectedRowsActions(child)) {\n          slots.selectedRowsActions = child;\n        }\n      }\n    });\n    return slots;\n  }, [children]);\n}\n"],
   "mappings": "AAAA,SAAS,UAA6C,eAAe;AACrE,SAAS,iBAAiB;AAE1B,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAEK;AAEP,SAAS,8BAA8B;AAiBhC,SAAS,kBACd,UACuB;AACvB,SAAO,QAAQ,MAAM;AACnB,UAAM,QAA+B;AAAA,MACnC,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,qBAAqB;AAAA,MACrB,YAAY;AAAA,MACZ,cAAc;AAAA,IAChB;AAEA,aAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,UAAI,UAAU,KAAK,GAAG;AACpB,YAAI,oBAAoB,KAAK,GAAG;AAC9B,gBAAM,eAAe,MAAM;AAAA,QAC7B;AACA,YAAI,gBAAgB,KAAK,GAAG;AAC1B,gBAAM,eAAe;AAAA,QACvB;AACA,YAAI,cAAc,KAAK,GAAG;AACxB,gBAAM,aAAa;AAAA,QACrB;AACA,YAAI,uBAAuB,KAAK,GAAG;AACjC,gBAAM,aAAa;AAAA,QACrB;AACA,YAAI,gCAAgC,KAAK,GAAG;AAC1C,gBAAM,sBAAsB;AAAA,QAC9B;AAAA,MACF;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,CAAC;AACf;",
   "names": []
 }

package/esm/tables/DataTable/hooks/useHeaderCellInteractions.js

@@ -1,4 +1,8 @@
-import { useCallback } from "react";
+import {
+  useCallback,
+  useLayoutEffect,
+  useRef
+} from "react";
 import * as headerCellStyles from "../components/DataTableHeaderCell.sty.js";
 import { DATA_TABLE_NARROW_HEADER_THRESHOLDS } from "../constants.js";
 function isInteractiveElement(element) {
@@ -9,45 +13,66 @@ function useHeaderCellInteractions({
   headerCell,
   canSort,
   canColumnActions,
+  isActiveFloatingMenu,
   rowDensity,
-  getToggleSortingHandler
+  toggleSortingHandler
 }) {
+  const isHoveredRef = useRef(false);
+  const isNarrowRef = useRef(false);
+  function clearHoverState(cell) {
+    isHoveredRef.current = false;
+    isNarrowRef.current = false;
+    cell.classList.remove(headerCellStyles.hovered, headerCellStyles.narrow);
+  }
+  useLayoutEffect(() => {
+    if (!isActiveFloatingMenu || !isHoveredRef.current || !headerCell) {
+      return;
+    }
+    headerCell.classList.add(headerCellStyles.hovered);
+  }, [isActiveFloatingMenu, headerCell]);
   const handleCellActionsClose = useCallback(() => {
     if (headerCell) {
-      headerCell.classList.remove(
-        headerCellStyles.hovered,
-        headerCellStyles.narrow
-      );
+      clearHoverState(headerCell);
     }
   }, [headerCell]);
   const handleCellMouseEnter = useCallback(() => {
     if (!headerCell || !canColumnActions && !canSort) {
       return;
     }
+    isHoveredRef.current = true;
     headerCell.classList.add(headerCellStyles.hovered);
     const widthThreshold = DATA_TABLE_NARROW_HEADER_THRESHOLDS[rowDensity];
     if (!widthThreshold) {
       return;
     }
     const headerWidth = headerCell.getBoundingClientRect().width;
-    if (headerWidth <= widthThreshold) {
+    isNarrowRef.current = headerWidth <= widthThreshold;
+    if (isNarrowRef.current) {
       headerCell.classList.add(headerCellStyles.narrow);
     }
   }, [canSort, canColumnActions, headerCell, rowDensity]);
-  const handleCellMouseLeave = useCallback(() => {
-    if (!headerCell) {
-      return;
-    }
-    const cellAction = headerCell.querySelector('[data-trigger="useraction"]');
-    const isOpen = cellAction?.getAttribute("data-state") === "open";
-    if (isOpen) {
-      return;
-    }
-    headerCell.classList.remove(
-      headerCellStyles.hovered,
-      headerCellStyles.narrow
-    );
-  }, [headerCell]);
+  const handleCellMouseLeave = useCallback(
+    (event) => {
+      if (!headerCell) {
+        return;
+      }
+      if (event.relatedTarget instanceof HTMLElement && event.relatedTarget.dataset.trigger === "context-action") {
+        return;
+      }
+      const columnActionsMenu = headerCell.querySelector(
+        '[data-trigger="useraction"]'
+      );
+      const isOpen = columnActionsMenu?.getAttribute("data-state") === "open";
+      if (isOpen) {
+        return;
+      }
+      if (headerCell.matches(":hover")) {
+        return;
+      }
+      clearHoverState(headerCell);
+    },
+    [headerCell]
+  );
   const handleCellClick = useCallback(
     (event) => {
       const { target } = event;
@@ -55,7 +80,7 @@ function useHeaderCellInteractions({
         return;
       }
       if ("headerRow" in target.dataset) {
-        getToggleSortingHandler?.()?.(event);
+        toggleSortingHandler?.(event);
         return;
       }
       const columnHeader = target.closest('[role="columnheader"]');
@@ -69,9 +94,9 @@ function useHeaderCellInteractions({
         }
         currentElement = currentElement.parentElement;
       }
-      getToggleSortingHandler?.()?.(event);
+      toggleSortingHandler?.(event);
     },
-    [getToggleSortingHandler]
+    [toggleSortingHandler]
   );
   return {
     handleCellActionsClose,

package/esm/tables/DataTable/hooks/useHeaderCellInteractions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/hooks/useHeaderCellInteractions.ts"],
-  "sourcesContent": ["import { useCallback, type MouseEvent as ReactMouseEvent } from 'react';\n\nimport * as headerCellStyles from '../components/DataTableHeaderCell.sty.js';\nimport { DATA_TABLE_NARROW_HEADER_THRESHOLDS } from '../constants.js';\n\ninterface UseHeaderCellInteractionsParams {\n  headerCell: HTMLDivElement | null;\n  canSort: boolean;\n  canColumnActions: boolean;\n  rowDensity: 'default' | 'condensed' | 'comfortable';\n  getToggleSortingHandler: () => undefined | ((event: unknown) => void);\n}\n\ninterface UseHeaderCellInteractionsResult {\n  handleCellActionsClose: () => void;\n  handleCellMouseEnter: () => void;\n  handleCellMouseLeave: () => void;\n  handleCellClick: (event: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n}\n\n/**\n * Checks whether an element is interactive.\n */\nfunction isInteractiveElement(element: HTMLElement | SVGElement): boolean {\n  const interactiveTags = ['BUTTON', 'A', 'LABEL', 'INPUT', 'SELECT'];\n\n  return !!(\n    interactiveTags.includes(element.tagName) ||\n    element.getAttribute('tabindex')\n  );\n}\n\nexport function useHeaderCellInteractions({\n  headerCell,\n  canSort,\n  canColumnActions,\n  rowDensity,\n  getToggleSortingHandler,\n}: UseHeaderCellInteractionsParams): UseHeaderCellInteractionsResult {\n  const handleCellActionsClose = useCallback((): void => {\n    if (headerCell) {\n      // remove the hovered and narrow state\n      headerCell.classList.remove(\n        headerCellStyles.hovered,\n        headerCellStyles.narrow,\n      );\n    }\n  }, [headerCell]);\n\n  const handleCellMouseEnter = useCallback((): void => {\n    if (!headerCell || (!canColumnActions && !canSort)) {\n      return;\n    }\n\n    headerCell.classList.add(headerCellStyles.hovered);\n\n    const widthThreshold = DATA_TABLE_NARROW_HEADER_THRESHOLDS[rowDensity];\n    if (!widthThreshold) {\n      return;\n    }\n\n    const headerWidth = headerCell.getBoundingClientRect().width;\n    if (headerWidth <= widthThreshold) {\n      headerCell.classList.add(headerCellStyles.narrow);\n    }\n  }, [canSort, canColumnActions, headerCell, rowDensity]);\n\n  const handleCellMouseLeave = useCallback((): void => {\n    if (!headerCell) {\n      return;\n    }\n    const cellAction = headerCell.querySelector('[data-trigger=\"useraction\"]');\n    const isOpen = cellAction?.getAttribute('data-state') === 'open';\n    if (isOpen) {\n      // keep the hovered state while the cell actions menu is open\n      return;\n    }\n    // remove the hovered and narrow state\n    headerCell.classList.remove(\n      headerCellStyles.hovered,\n      headerCellStyles.narrow,\n    );\n  }, [headerCell]);\n\n  const handleCellClick = useCallback(\n    (event: ReactMouseEvent<HTMLDivElement, MouseEvent>): void => {\n      const { target } = event;\n\n      if (!(target instanceof HTMLElement) && !(target instanceof SVGElement)) {\n        return;\n      }\n\n      if ('headerRow' in target.dataset) {\n        getToggleSortingHandler?.()?.(event);\n        return;\n      }\n\n      const columnHeader = target.closest('[role=\"columnheader\"]');\n      if (!columnHeader) {\n        return;\n      }\n\n      let currentElement: typeof target | null = target;\n      while (currentElement && currentElement !== columnHeader) {\n        if (isInteractiveElement(currentElement)) {\n          return;\n        }\n        currentElement = currentElement.parentElement;\n      }\n\n      getToggleSortingHandler?.()?.(event);\n    },\n    [getToggleSortingHandler],\n  );\n\n  return {\n    handleCellActionsClose,\n    handleCellMouseEnter,\n    handleCellMouseLeave,\n    handleCellClick,\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,mBAAuD;AAEhE,YAAY,sBAAsB;AAClC,SAAS,2CAA2C;AAoBpD,SAAS,qBAAqB,SAA4C;AACxE,QAAM,kBAAkB,CAAC,UAAU,KAAK,SAAS,SAAS,QAAQ;AAElE,SAAO,CAAC,EACN,gBAAgB,SAAS,QAAQ,OAAO,KACxC,QAAQ,aAAa,UAAU;AAEnC;AAEO,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqE;AACnE,QAAM,yBAAyB,YAAY,MAAY;AACrD,QAAI,YAAY;AAEd,iBAAW,UAAU;AAAA,QACnB,iBAAiB;AAAA,QACjB,iBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,uBAAuB,YAAY,MAAY;AACnD,QAAI,CAAC,cAAe,CAAC,oBAAoB,CAAC,SAAU;AAClD;AAAA,IACF;AAEA,eAAW,UAAU,IAAI,iBAAiB,OAAO;AAEjD,UAAM,iBAAiB,oCAAoC,UAAU;AACrE,QAAI,CAAC,gBAAgB;AACnB;AAAA,IACF;AAEA,UAAM,cAAc,WAAW,sBAAsB,EAAE;AACvD,QAAI,eAAe,gBAAgB;AACjC,iBAAW,UAAU,IAAI,iBAAiB,MAAM;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,SAAS,kBAAkB,YAAY,UAAU,CAAC;AAEtD,QAAM,uBAAuB,YAAY,MAAY;AACnD,QAAI,CAAC,YAAY;AACf;AAAA,IACF;AACA,UAAM,aAAa,WAAW,cAAc,6BAA6B;AACzE,UAAM,SAAS,YAAY,aAAa,YAAY,MAAM;AAC1D,QAAI,QAAQ;AAEV;AAAA,IACF;AAEA,eAAW,UAAU;AAAA,MACnB,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,kBAAkB;AAAA,IACtB,CAAC,UAA6D;AAC5D,YAAM,EAAE,OAAO,IAAI;AAEnB,UAAI,EAAE,kBAAkB,gBAAgB,EAAE,kBAAkB,aAAa;AACvE;AAAA,MACF;AAEA,UAAI,eAAe,OAAO,SAAS;AACjC,kCAA0B,IAAI,KAAK;AACnC;AAAA,MACF;AAEA,YAAM,eAAe,OAAO,QAAQ,uBAAuB;AAC3D,UAAI,CAAC,cAAc;AACjB;AAAA,MACF;AAEA,UAAI,iBAAuC;AAC3C,aAAO,kBAAkB,mBAAmB,cAAc;AACxD,YAAI,qBAAqB,cAAc,GAAG;AACxC;AAAA,QACF;AACA,yBAAiB,eAAe;AAAA,MAClC;AAEA,gCAA0B,IAAI,KAAK;AAAA,IACrC;AAAA,IACA,CAAC,uBAAuB;AAAA,EAC1B;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import {\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport * as headerCellStyles from '../components/DataTableHeaderCell.sty.js';\nimport { DATA_TABLE_NARROW_HEADER_THRESHOLDS } from '../constants.js';\n\ninterface UseHeaderCellInteractionsParams {\n  headerCell: HTMLDivElement | null;\n  canSort: boolean;\n  canColumnActions: boolean;\n  isActiveFloatingMenu: boolean;\n  rowDensity: 'default' | 'condensed' | 'comfortable';\n  toggleSortingHandler?: (event: unknown) => void;\n}\n\ninterface UseHeaderCellInteractionsResult {\n  handleCellActionsClose: () => void;\n  handleCellMouseEnter: () => void;\n  handleCellMouseLeave: (\n    event: ReactMouseEvent<HTMLDivElement, MouseEvent>,\n  ) => void;\n  handleCellClick: (event: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n}\n\n/**\n * Checks whether an element is interactive.\n */\nfunction isInteractiveElement(element: HTMLElement | SVGElement): boolean {\n  const interactiveTags = ['BUTTON', 'A', 'LABEL', 'INPUT', 'SELECT'];\n\n  return !!(\n    interactiveTags.includes(element.tagName) ||\n    element.getAttribute('tabindex')\n  );\n}\n\nexport function useHeaderCellInteractions({\n  headerCell,\n  canSort,\n  canColumnActions,\n  isActiveFloatingMenu,\n  rowDensity,\n  toggleSortingHandler,\n}: UseHeaderCellInteractionsParams): UseHeaderCellInteractionsResult {\n  const isHoveredRef = useRef(false);\n  const isNarrowRef = useRef(false);\n\n  function clearHoverState(cell: HTMLDivElement): void {\n    isHoveredRef.current = false;\n    isNarrowRef.current = false;\n    // remove the hovered and narrow state\n    cell.classList.remove(headerCellStyles.hovered, headerCellStyles.narrow);\n  }\n\n  // When the floating menu opens for this header, React's re-render overwrites\n  // element.className and drops the imperatively-managed `hovered` class. Restore it\n  // so the sorting arrow stays visible while the cursor is still over the column.\n  useLayoutEffect(() => {\n    if (!isActiveFloatingMenu || !isHoveredRef.current || !headerCell) {\n      return;\n    }\n    headerCell.classList.add(headerCellStyles.hovered);\n  }, [isActiveFloatingMenu, headerCell]);\n\n  const handleCellActionsClose = useCallback((): void => {\n    if (headerCell) {\n      clearHoverState(headerCell);\n    }\n  }, [headerCell]);\n\n  const handleCellMouseEnter = useCallback((): void => {\n    if (!headerCell || (!canColumnActions && !canSort)) {\n      return;\n    }\n\n    isHoveredRef.current = true;\n    headerCell.classList.add(headerCellStyles.hovered);\n\n    const widthThreshold = DATA_TABLE_NARROW_HEADER_THRESHOLDS[rowDensity];\n    if (!widthThreshold) {\n      return;\n    }\n\n    const headerWidth = headerCell.getBoundingClientRect().width;\n    isNarrowRef.current = headerWidth <= widthThreshold;\n    if (isNarrowRef.current) {\n      headerCell.classList.add(headerCellStyles.narrow);\n    }\n  }, [canSort, canColumnActions, headerCell, rowDensity]);\n\n  const handleCellMouseLeave = useCallback(\n    (event: ReactMouseEvent<HTMLDivElement, MouseEvent>): void => {\n      if (!headerCell) {\n        return;\n      }\n\n      // When the column actions menu is opened on right-click, its trigger button is portalled\n      // into the document.body which fires mouseleave on the header cell with relatedTarget pointing\n      // at that button. Since the floating menu lives outside the header cell's subtree, we need\n      // to detect it via relatedTarget and keep the hovered state.\n      if (\n        event.relatedTarget instanceof HTMLElement &&\n        event.relatedTarget.dataset.trigger === 'context-action'\n      ) {\n        return;\n      }\n\n      const columnActionsMenu = headerCell.querySelector(\n        '[data-trigger=\"useraction\"]',\n      );\n      const isOpen = columnActionsMenu?.getAttribute('data-state') === 'open';\n      if (isOpen) {\n        // keep the hovered state while the column actions menu is open\n        return;\n      }\n\n      // Ensure that inline cell actions menu remains visible during sorting by header click.\n      // When sort state changes (unsorted \u2194 sorted), the CSS marginRight offset changes,\n      // causing a layout shift that fires mouseleave while the pointer is still inside the cell.\n      if (headerCell.matches(':hover')) {\n        return;\n      }\n\n      clearHoverState(headerCell);\n    },\n    [headerCell],\n  );\n\n  const handleCellClick = useCallback(\n    (event: ReactMouseEvent<HTMLDivElement, MouseEvent>): void => {\n      const { target } = event;\n      if (!(target instanceof HTMLElement) && !(target instanceof SVGElement)) {\n        return;\n      }\n\n      if ('headerRow' in target.dataset) {\n        toggleSortingHandler?.(event);\n        return;\n      }\n\n      const columnHeader = target.closest('[role=\"columnheader\"]');\n      if (!columnHeader) {\n        return;\n      }\n\n      let currentElement: typeof target | null = target;\n      while (currentElement && currentElement !== columnHeader) {\n        if (isInteractiveElement(currentElement)) {\n          return;\n        }\n        currentElement = currentElement.parentElement;\n      }\n\n      toggleSortingHandler?.(event);\n    },\n    [toggleSortingHandler],\n  );\n\n  return {\n    handleCellActionsClose,\n    handleCellMouseEnter,\n    handleCellMouseLeave,\n    handleCellClick,\n  };\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,YAAY,sBAAsB;AAClC,SAAS,2CAA2C;AAuBpD,SAAS,qBAAqB,SAA4C;AACxE,QAAM,kBAAkB,CAAC,UAAU,KAAK,SAAS,SAAS,QAAQ;AAElE,SAAO,CAAC,EACN,gBAAgB,SAAS,QAAQ,OAAO,KACxC,QAAQ,aAAa,UAAU;AAEnC;AAEO,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqE;AACnE,QAAM,eAAe,OAAO,KAAK;AACjC,QAAM,cAAc,OAAO,KAAK;AAEhC,WAAS,gBAAgB,MAA4B;AACnD,iBAAa,UAAU;AACvB,gBAAY,UAAU;AAEtB,SAAK,UAAU,OAAO,iBAAiB,SAAS,iBAAiB,MAAM;AAAA,EACzE;AAKA,kBAAgB,MAAM;AACpB,QAAI,CAAC,wBAAwB,CAAC,aAAa,WAAW,CAAC,YAAY;AACjE;AAAA,IACF;AACA,eAAW,UAAU,IAAI,iBAAiB,OAAO;AAAA,EACnD,GAAG,CAAC,sBAAsB,UAAU,CAAC;AAErC,QAAM,yBAAyB,YAAY,MAAY;AACrD,QAAI,YAAY;AACd,sBAAgB,UAAU;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,uBAAuB,YAAY,MAAY;AACnD,QAAI,CAAC,cAAe,CAAC,oBAAoB,CAAC,SAAU;AAClD;AAAA,IACF;AAEA,iBAAa,UAAU;AACvB,eAAW,UAAU,IAAI,iBAAiB,OAAO;AAEjD,UAAM,iBAAiB,oCAAoC,UAAU;AACrE,QAAI,CAAC,gBAAgB;AACnB;AAAA,IACF;AAEA,UAAM,cAAc,WAAW,sBAAsB,EAAE;AACvD,gBAAY,UAAU,eAAe;AACrC,QAAI,YAAY,SAAS;AACvB,iBAAW,UAAU,IAAI,iBAAiB,MAAM;AAAA,IAClD;AAAA,EACF,GAAG,CAAC,SAAS,kBAAkB,YAAY,UAAU,CAAC;AAEtD,QAAM,uBAAuB;AAAA,IAC3B,CAAC,UAA6D;AAC5D,UAAI,CAAC,YAAY;AACf;AAAA,MACF;AAMA,UACE,MAAM,yBAAyB,eAC/B,MAAM,cAAc,QAAQ,YAAY,kBACxC;AACA;AAAA,MACF;AAEA,YAAM,oBAAoB,WAAW;AAAA,QACnC;AAAA,MACF;AACA,YAAM,SAAS,mBAAmB,aAAa,YAAY,MAAM;AACjE,UAAI,QAAQ;AAEV;AAAA,MACF;AAKA,UAAI,WAAW,QAAQ,QAAQ,GAAG;AAChC;AAAA,MACF;AAEA,sBAAgB,UAAU;AAAA,IAC5B;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,kBAAkB;AAAA,IACtB,CAAC,UAA6D;AAC5D,YAAM,EAAE,OAAO,IAAI;AACnB,UAAI,EAAE,kBAAkB,gBAAgB,EAAE,kBAAkB,aAAa;AACvE;AAAA,MACF;AAEA,UAAI,eAAe,OAAO,SAAS;AACjC,+BAAuB,KAAK;AAC5B;AAAA,MACF;AAEA,YAAM,eAAe,OAAO,QAAQ,uBAAuB;AAC3D,UAAI,CAAC,cAAc;AACjB;AAAA,MACF;AAEA,UAAI,iBAAuC;AAC3C,aAAO,kBAAkB,mBAAmB,cAAc;AACxD,YAAI,qBAAqB,cAAc,GAAG;AACxC;AAAA,QACF;AACA,yBAAiB,eAAe;AAAA,MAClC;AAEA,6BAAuB,KAAK;AAAA,IAC9B;AAAA,IACA,CAAC,oBAAoB;AAAA,EACvB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/tables/DataTable/hooks/useHeaderDragAndDrop.js

@@ -1,5 +1,7 @@
 import { useSortable } from "@dnd-kit/sortable";
-import { useRef } from "react";
+import {
+  useRef
+} from "react";
 import { isDragMotion } from "../features/ColumnOrder/column-order-dnd-utils.js";
 function useHeaderCellDragAndDrop({
   headerId,
@@ -9,6 +11,7 @@ function useHeaderCellDragAndDrop({
 }) {
   const touchStart = useRef();
   const portalRef = useRef(null);
+  const mouseDownTarget = useRef(null);
   const { setNodeRef, isDragging, attributes, listeners } = useSortable({
     id: headerId,
     data: {
@@ -20,7 +23,16 @@ function useHeaderCellDragAndDrop({
   const dragAndDropProps = columnDragAndDropMode === "none" ? void 0 : {
     ...attributes,
     draggable: true,
-    onDragStart: (event) => listeners?.onMouseDown(event),
+    onMouseDown: (event) => {
+      mouseDownTarget.current = event.target;
+    },
+    onDragStart: (event) => {
+      const isResizing = mouseDownTarget.current instanceof HTMLElement && mouseDownTarget.current.closest('[data-trigger="resize"]') !== null;
+      if (isResizing) {
+        event.preventDefault();
+      }
+      listeners?.onMouseDown(event);
+    },
     onTouchStart: (event) => {
       touchStart.current = event;
     },

package/esm/tables/DataTable/hooks/useHeaderDragAndDrop.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/hooks/useHeaderDragAndDrop.ts"],
-  "sourcesContent": ["import type { DraggableAttributes } from '@dnd-kit/core';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { type DragEvent, type RefObject, type TouchEvent, useRef } from 'react';\n\nimport type { Column } from './useTable/types.js';\nimport { isDragMotion } from '../features/ColumnOrder/column-order-dnd-utils.js';\n\ninterface UseHeaderCellDragAndDropParams {\n  /**\n   * Unique identifier for the header cell.\n   */\n  headerId: string;\n  /**\n   * Column instanceassociated with the header cell.\n   */\n  column: Column<unknown, unknown>;\n  /**\n   * Index of the column based on the virtualization index.\n   */\n  columnIndex: number;\n  /**\n   * Mode for column drag-and-drop functionality.\n   */\n  columnDragAndDropMode: 'none' | 'enabled' | 'only';\n}\n\ninterface UseHeaderCellDragAndDropResult {\n  /**\n   * Ref to set on the draggable element.\n   */\n  setNodeRef: (node: HTMLElement | null) => void;\n\n  /**\n   * Whether the header is currently being dragged.\n   */\n  isDragging: boolean;\n\n  /**\n   * Ref for the portal container when dragging.\n   */\n  portalRef: RefObject<HTMLElement | null>;\n\n  /**\n   * Props to spread on the draggable element (undefined if drag-and-drop is disabled).\n   */\n  dragAndDropProps:\n    | ({\n        /**\n         * Indicates that the element is draggable.\n         */\n        draggable: boolean;\n        /**\n         * Event handler for the drag start event.\n         */\n        onDragStart: (event: DragEvent<HTMLElement>) => void;\n        /**\n         * Event handler for the touch start event.\n         */\n        onTouchStart: (event: TouchEvent<HTMLElement>) => void;\n        /**\n         * Event handler for the touch move event.\n         */\n        onTouchMove: (event: TouchEvent<HTMLElement>) => void;\n      } & DraggableAttributes)\n    | undefined;\n}\n\n/**\n * Hook that encapsulates drag-and-drop functionality for header cells.\n *\n * @param params - Configuration for drag-and-drop behavior\n * @returns Drag-and-drop state and props to spread on the header element\n * @internal\n */\nexport function useHeaderCellDragAndDrop({\n  headerId,\n  column,\n  columnIndex,\n  columnDragAndDropMode,\n}: UseHeaderCellDragAndDropParams): UseHeaderCellDragAndDropResult {\n  const touchStart = useRef<TouchEvent>();\n  const portalRef = useRef<HTMLElement>(null);\n\n  const { setNodeRef, isDragging, attributes, listeners } = useSortable({\n    id: headerId,\n    data: {\n      portalRef,\n      column,\n      columnIndex,\n    },\n  });\n\n  const dragAndDropProps =\n    columnDragAndDropMode === 'none'\n      ? undefined\n      : {\n          ...attributes,\n          draggable: true,\n          onDragStart: (event: DragEvent<HTMLElement>) =>\n            listeners?.onMouseDown(event),\n          onTouchStart: (event: TouchEvent<HTMLElement>) => {\n            touchStart.current = event;\n          },\n          onTouchMove: (event: TouchEvent<HTMLElement>) => {\n            if (isDragMotion(event, touchStart?.current)) {\n              listeners?.onTouchStart(event);\n            }\n          },\n        };\n\n  return {\n    setNodeRef,\n    isDragging,\n    portalRef,\n    dragAndDropProps,\n  };\n}\n"],
-  "mappings": "AACA,SAAS,mBAAmB;AAC5B,SAA0D,cAAc;AAGxE,SAAS,oBAAoB;AAqEtB,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmE;AACjE,QAAM,aAAa,OAAmB;AACtC,QAAM,YAAY,OAAoB,IAAI;AAE1C,QAAM,EAAE,YAAY,YAAY,YAAY,UAAU,IAAI,YAAY;AAAA,IACpE,IAAI;AAAA,IACJ,MAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,mBACJ,0BAA0B,SACtB,SACA;AAAA,IACE,GAAG;AAAA,IACH,WAAW;AAAA,IACX,aAAa,CAAC,UACZ,WAAW,YAAY,KAAK;AAAA,IAC9B,cAAc,CAAC,UAAmC;AAChD,iBAAW,UAAU;AAAA,IACvB;AAAA,IACA,aAAa,CAAC,UAAmC;AAC/C,UAAI,aAAa,OAAO,YAAY,OAAO,GAAG;AAC5C,mBAAW,aAAa,KAAK;AAAA,MAC/B;AAAA,IACF;AAAA,EACF;AAEN,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { DraggableAttributes } from '@dnd-kit/core';\nimport { useSortable } from '@dnd-kit/sortable';\nimport type { Column, RowData, TableFeatures } from '@tanstack/react-table';\nimport {\n  type DragEvent,\n  type MouseEvent,\n  type RefObject,\n  type TouchEvent,\n  useRef,\n} from 'react';\n\nimport { isDragMotion } from '../features/ColumnOrder/column-order-dnd-utils.js';\n\ninterface UseHeaderCellDragAndDropParams<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> {\n  /**\n   * Unique identifier for the header cell.\n   */\n  headerId: string;\n  /**\n   * Column instanceassociated with the header cell.\n   */\n  column: Column<TFeatures, TData>;\n  /**\n   * Index of the column based on the virtualization index.\n   */\n  columnIndex: number;\n  /**\n   * Mode for column drag-and-drop functionality.\n   */\n  columnDragAndDropMode: 'none' | 'enabled' | 'only';\n}\n\ninterface UseHeaderCellDragAndDropResult {\n  /**\n   * Ref to set on the draggable element.\n   */\n  setNodeRef: (node: HTMLElement | null) => void;\n\n  /**\n   * Whether the header is currently being dragged.\n   */\n  isDragging: boolean;\n\n  /**\n   * Ref for the portal container when dragging.\n   */\n  portalRef: RefObject<HTMLElement | null>;\n\n  /**\n   * Props to spread on the draggable element (undefined if drag-and-drop is disabled).\n   */\n  dragAndDropProps:\n    | ({\n        /**\n         * Indicates that the element is draggable.\n         */\n        draggable: boolean;\n        /**\n         * Event handler for the mouse down event. Tracks which element received the\n         * mousedown so that onDragStart can ignore drags initiated from child controls\n         * (e.g. the resize handle).\n         */\n        onMouseDown: (event: MouseEvent<HTMLElement>) => void;\n        /**\n         * Event handler for the drag start event.\n         */\n        onDragStart: (event: DragEvent<HTMLElement>) => void;\n        /**\n         * Event handler for the touch start event.\n         */\n        onTouchStart: (event: TouchEvent<HTMLElement>) => void;\n        /**\n         * Event handler for the touch move event.\n         */\n        onTouchMove: (event: TouchEvent<HTMLElement>) => void;\n      } & DraggableAttributes)\n    | undefined;\n}\n\n/**\n * Hook that encapsulates drag-and-drop functionality for header cells.\n *\n * @param params - Configuration for drag-and-drop behavior\n * @returns Drag-and-drop state and props to spread on the header element\n * @internal\n */\nexport function useHeaderCellDragAndDrop<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>({\n  headerId,\n  column,\n  columnIndex,\n  columnDragAndDropMode,\n}: UseHeaderCellDragAndDropParams<\n  TFeatures,\n  TData\n>): UseHeaderCellDragAndDropResult {\n  const touchStart = useRef<TouchEvent>();\n  const portalRef = useRef<HTMLElement>(null);\n  const mouseDownTarget = useRef<EventTarget | null>(null);\n\n  const { setNodeRef, isDragging, attributes, listeners } = useSortable({\n    id: headerId,\n    data: {\n      portalRef,\n      column,\n      columnIndex,\n    },\n  });\n\n  const dragAndDropProps =\n    columnDragAndDropMode === 'none'\n      ? undefined\n      : {\n          ...attributes,\n          draggable: true,\n          onMouseDown: (event: MouseEvent<HTMLElement>) => {\n            mouseDownTarget.current = event.target;\n          },\n          onDragStart: (event: DragEvent<HTMLElement>) => {\n            // Firefox fires dragstart on a draggable ancestor even when the pointer went down on a\n            // non-draggable child (e.g. the resize handle). Skip column reorder activation in that case.\n            const isResizing =\n              mouseDownTarget.current instanceof HTMLElement &&\n              mouseDownTarget.current.closest('[data-trigger=\"resize\"]') !==\n                null;\n\n            if (isResizing) {\n              event.preventDefault();\n            }\n            listeners?.onMouseDown(event);\n          },\n          onTouchStart: (event: TouchEvent<HTMLElement>) => {\n            touchStart.current = event;\n          },\n          onTouchMove: (event: TouchEvent<HTMLElement>) => {\n            if (isDragMotion(event, touchStart?.current)) {\n              listeners?.onTouchStart(event);\n            }\n          },\n        };\n\n  return {\n    setNodeRef,\n    isDragging,\n    portalRef,\n    dragAndDropProps,\n  };\n}\n"],
+  "mappings": "AACA,SAAS,mBAAmB;AAE5B;AAAA,EAKE;AAAA,OACK;AAEP,SAAS,oBAAoB;AA8EtB,SAAS,yBAGd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGmC;AACjC,QAAM,aAAa,OAAmB;AACtC,QAAM,YAAY,OAAoB,IAAI;AAC1C,QAAM,kBAAkB,OAA2B,IAAI;AAEvD,QAAM,EAAE,YAAY,YAAY,YAAY,UAAU,IAAI,YAAY;AAAA,IACpE,IAAI;AAAA,IACJ,MAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,mBACJ,0BAA0B,SACtB,SACA;AAAA,IACE,GAAG;AAAA,IACH,WAAW;AAAA,IACX,aAAa,CAAC,UAAmC;AAC/C,sBAAgB,UAAU,MAAM;AAAA,IAClC;AAAA,IACA,aAAa,CAAC,UAAkC;AAG9C,YAAM,aACJ,gBAAgB,mBAAmB,eACnC,gBAAgB,QAAQ,QAAQ,yBAAyB,MACvD;AAEJ,UAAI,YAAY;AACd,cAAM,eAAe;AAAA,MACvB;AACA,iBAAW,YAAY,KAAK;AAAA,IAC9B;AAAA,IACA,cAAc,CAAC,UAAmC;AAChD,iBAAW,UAAU;AAAA,IACvB;AAAA,IACA,aAAa,CAAC,UAAmC;AAC/C,UAAI,aAAa,OAAO,YAAY,OAAO,GAAG;AAC5C,mBAAW,aAAa,KAAK;AAAA,MAC/B;AAAA,IACF;AAAA,EACF;AAEN,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/tables/DataTable/hooks/usePaginationEmptyPageCorrection.js

@@ -1,18 +1,28 @@
 import { useEffect } from "react";
 function usePaginationEmptyPageCorrection(table) {
-  const currentPageRowCount = table.getPaginationRowModel().rows.length;
+  const currentPageRowCount = table.getPaginatedRowModel().rows.length;
+  const { enablePagination, controlledPageIndex } = table.options;
+  const setPageIndex = table.setPageIndex;
+  const getCoreRowModel = table.getCoreRowModel;
+  const getPagination = table.atoms.pagination?.get;
   useEffect(() => {
-    const { enablePagination, controlledPageIndex } = table.options;
     if (enablePagination === false || controlledPageIndex === true) {
       return;
     }
-    const { pageIndex, pageSize } = table.getState().pagination;
+    const { pageIndex, pageSize } = getPagination?.() ?? {};
     if (pageIndex > 0 && currentPageRowCount === 0) {
-      const totalRowCount = table.getCoreRowModel().rows.length;
+      const totalRowCount = getCoreRowModel().rows.length;
       const firstNonEmptyPrevPage = Math.ceil(totalRowCount / pageSize) - 1;
-      table.setPageIndex(firstNonEmptyPrevPage, "internal");
+      setPageIndex(firstNonEmptyPrevPage, "internal");
     }
-  }, [table, currentPageRowCount]);
+  }, [
+    controlledPageIndex,
+    currentPageRowCount,
+    enablePagination,
+    getCoreRowModel,
+    getPagination,
+    setPageIndex
+  ]);
 }
 export {
   usePaginationEmptyPageCorrection

package/esm/tables/DataTable/hooks/usePaginationEmptyPageCorrection.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/hooks/usePaginationEmptyPageCorrection.ts"],
-  "sourcesContent": ["import { useEffect } from 'react';\n\nimport type { Table } from './useTable/types.js';\n\n/**\n * Updates the page index to the last non-empty page when the current page is empty.\n * Necessary for paginated tables with sub-rows.\n * @internal\n */\nexport function usePaginationEmptyPageCorrection<TData>(\n  table: Table<TData>,\n): void {\n  const currentPageRowCount = table.getPaginationRowModel().rows.length;\n\n  useEffect(() => {\n    const { enablePagination, controlledPageIndex } = table.options;\n\n    if (enablePagination === false || controlledPageIndex === true) {\n      return;\n    }\n\n    const { pageIndex, pageSize } = table.getState().pagination;\n\n    // If there are no rows to display on the current page, navigate to the last non-empty page\n    if (pageIndex > 0 && currentPageRowCount === 0) {\n      const totalRowCount = table.getCoreRowModel().rows.length;\n      const firstNonEmptyPrevPage = Math.ceil(totalRowCount / pageSize) - 1;\n      table.setPageIndex(firstNonEmptyPrevPage, 'internal');\n    }\n  }, [table, currentPageRowCount]);\n}\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AASnB,SAAS,iCACd,OACM;AACN,QAAM,sBAAsB,MAAM,sBAAsB,EAAE,KAAK;AAE/D,YAAU,MAAM;AACd,UAAM,EAAE,kBAAkB,oBAAoB,IAAI,MAAM;AAExD,QAAI,qBAAqB,SAAS,wBAAwB,MAAM;AAC9D;AAAA,IACF;AAEA,UAAM,EAAE,WAAW,SAAS,IAAI,MAAM,SAAS,EAAE;AAGjD,QAAI,YAAY,KAAK,wBAAwB,GAAG;AAC9C,YAAM,gBAAgB,MAAM,gBAAgB,EAAE,KAAK;AACnD,YAAM,wBAAwB,KAAK,KAAK,gBAAgB,QAAQ,IAAI;AACpE,YAAM,aAAa,uBAAuB,UAAU;AAAA,IACtD;AAAA,EACF,GAAG,CAAC,OAAO,mBAAmB,CAAC;AACjC;",
+  "sourcesContent": ["import type { RowData, Table } from '@tanstack/react-table';\nimport { useEffect } from 'react';\n\nimport type { TDataTableFeatures } from '../features/types/features.types.js';\n\n/**\n * Updates the page index to the last non-empty page when the current page is empty.\n * Necessary for paginated tables with sub-rows.\n * @internal\n */\nexport function usePaginationEmptyPageCorrection<TData extends RowData>(\n  table: Table<TDataTableFeatures, TData>,\n): void {\n  const currentPageRowCount = table.getPaginatedRowModel().rows.length;\n  const { enablePagination, controlledPageIndex } = table.options;\n  const setPageIndex = table.setPageIndex;\n  const getCoreRowModel = table.getCoreRowModel;\n  const getPagination = table.atoms.pagination?.get;\n\n  useEffect(() => {\n    if (enablePagination === false || controlledPageIndex === true) {\n      return;\n    }\n\n    const { pageIndex, pageSize } = getPagination?.() ?? {};\n\n    // If there are no rows to display on the current page, navigate to the last non-empty page\n    if (pageIndex > 0 && currentPageRowCount === 0) {\n      const totalRowCount = getCoreRowModel().rows.length;\n      const firstNonEmptyPrevPage = Math.ceil(totalRowCount / pageSize) - 1;\n      setPageIndex(firstNonEmptyPrevPage, 'internal');\n    }\n  }, [\n    controlledPageIndex,\n    currentPageRowCount,\n    enablePagination,\n    getCoreRowModel,\n    getPagination,\n    setPageIndex,\n  ]);\n}\n"],
+  "mappings": "AACA,SAAS,iBAAiB;AASnB,SAAS,iCACd,OACM;AACN,QAAM,sBAAsB,MAAM,qBAAqB,EAAE,KAAK;AAC9D,QAAM,EAAE,kBAAkB,oBAAoB,IAAI,MAAM;AACxD,QAAM,eAAe,MAAM;AAC3B,QAAM,kBAAkB,MAAM;AAC9B,QAAM,gBAAgB,MAAM,MAAM,YAAY;AAE9C,YAAU,MAAM;AACd,QAAI,qBAAqB,SAAS,wBAAwB,MAAM;AAC9D;AAAA,IACF;AAEA,UAAM,EAAE,WAAW,SAAS,IAAI,gBAAgB,KAAK,CAAC;AAGtD,QAAI,YAAY,KAAK,wBAAwB,GAAG;AAC9C,YAAM,gBAAgB,gBAAgB,EAAE,KAAK;AAC7C,YAAM,wBAAwB,KAAK,KAAK,gBAAgB,QAAQ,IAAI;AACpE,mBAAa,uBAAuB,UAAU;AAAA,IAChD;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
   "names": []
 }

package/esm/tables/DataTable/hooks/useTable/datatable-typeguards.js

@@ -1,3 +1,13 @@
+function isGroupColumnDefConfig(columnDef) {
+  return typeof columnDef === "object" && // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  columnDef.columns !== void 0 && // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Array.isArray(columnDef.columns);
+}
+function isDisplayColumnDefConfig(columnDef) {
+  return typeof columnDef === "object" && // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  columnDef.columns === void 0 && // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  !Array.isArray(columnDef.columns);
+}
 function isGroupColumnDef(columnDef) {
   return typeof columnDef === "object" && columnDef.columns !== void 0 && Array.isArray(columnDef.columns);
 }
@@ -14,6 +24,8 @@ export {
   isAccessorFnColumnDef,
   isAccessorKeyColumnDef,
   isDisplayColumnDef,
-  isGroupColumnDef
+  isDisplayColumnDefConfig,
+  isGroupColumnDef,
+  isGroupColumnDefConfig
 };
 //# sourceMappingURL=datatable-typeguards.js.map

package/esm/tables/DataTable/hooks/useTable/datatable-typeguards.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/hooks/useTable/datatable-typeguards.ts"],
-  "sourcesContent": ["import type {\n  AccessorFnColumnDef,\n  AccessorKeyColumnDef,\n  DisplayColumnDef,\n  GroupColumnDef,\n} from './types.js';\nimport type { DataTableRowData } from '../../public.api.js';\n\n/**\n * Makes sure that a columnDef is a groupColumnDef\n * @internal\n */\nexport function isGroupColumnDef<\n  TData extends DataTableRowData,\n  TValue = unknown,\n>(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  columnDef: any,\n): columnDef is GroupColumnDef<TData, TValue> {\n  return (\n    typeof columnDef === 'object' &&\n    columnDef.columns !== undefined &&\n    Array.isArray(columnDef.columns)\n  );\n}\n\n/**\n * Makes sure that a columnDef is a displayColumnDef\n * @internal\n */\nexport function isDisplayColumnDef<\n  TData extends DataTableRowData,\n  TValue = unknown,\n>(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  columnDef: any,\n): columnDef is DisplayColumnDef<TData, TValue> {\n  return (\n    typeof columnDef === 'object' &&\n    columnDef.columns === undefined &&\n    !Array.isArray(columnDef.columns)\n  );\n}\n\n/**\n * Makes sure that the columnDef is a AccessorKeyColumnDef\n * @internal\n */\nexport function isAccessorKeyColumnDef<\n  TData extends DataTableRowData,\n  TValue = unknown,\n>(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  columnDef: any,\n): columnDef is AccessorKeyColumnDef<TData, TValue> {\n  return (\n    typeof columnDef === 'object' &&\n    columnDef.accessorKey !== undefined &&\n    typeof columnDef.accessorKey === 'string'\n  );\n}\n\n/**\n * Makes sure that the columnDef is a AccessorFnColumnDef\n * @internal\n */\nexport function isAccessorFnColumnDef<\n  TData extends DataTableRowData,\n  TValue = unknown,\n>(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  columnDef: any,\n): columnDef is AccessorFnColumnDef<TData, TValue> {\n  return (\n    typeof columnDef === 'object' &&\n    columnDef.accessorFn !== undefined &&\n    typeof columnDef.accessorFn === 'function'\n  );\n}\n"],
-  "mappings": "AAYO,SAAS,iBAKd,WAC4C;AAC5C,SACE,OAAO,cAAc,YACrB,UAAU,YAAY,UACtB,MAAM,QAAQ,UAAU,OAAO;AAEnC;AAMO,SAAS,mBAKd,WAC8C;AAC9C,SACE,OAAO,cAAc,YACrB,UAAU,YAAY,UACtB,CAAC,MAAM,QAAQ,UAAU,OAAO;AAEpC;AAMO,SAAS,uBAKd,WACkD;AAClD,SACE,OAAO,cAAc,YACrB,UAAU,gBAAgB,UAC1B,OAAO,UAAU,gBAAgB;AAErC;AAMO,SAAS,sBAKd,WACiD;AACjD,SACE,OAAO,cAAc,YACrB,UAAU,eAAe,UACzB,OAAO,UAAU,eAAe;AAEpC;",
+  "sourcesContent": ["import type {\n  TableFeatures,\n  CellData,\n  RowData,\n  GroupColumnDef,\n  DisplayColumnDef,\n  AccessorKeyColumnDef,\n  AccessorFnColumnDef,\n} from '@tanstack/react-table';\n\nimport type {\n  DataTableColumnDef,\n  DataTableDisplayColumnDef,\n  DataTableGroupColumnDef,\n  DataTableRowData,\n} from '../../public.api.js';\n\n/**\n * Makes sure that a public facing column configuration is a group columnDef.\n * @internal\n */\nexport function isGroupColumnDefConfig<\n  TData extends DataTableRowData,\n  TValue = unknown,\n>(\n  columnDef: DataTableColumnDef<TData>,\n): columnDef is DataTableGroupColumnDef<TData, TValue> {\n  return (\n    typeof columnDef === 'object' &&\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (columnDef as any).columns !== undefined &&\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    Array.isArray((columnDef as any).columns)\n  );\n}\n\n/**\n * Makes sure that a public facing column configuration is a display columnDef.\n * @internal\n */\nexport function isDisplayColumnDefConfig<\n  TData extends DataTableRowData,\n  TValue = unknown,\n>(\n  columnDef: DataTableColumnDef<TData>,\n): columnDef is DataTableDisplayColumnDef<TData, TValue> {\n  return (\n    typeof columnDef === 'object' &&\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (columnDef as any).columns === undefined &&\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    !Array.isArray((columnDef as any).columns)\n  );\n}\n\n/**\n * Makes sure that a columnDef is a groupColumnDef\n * @internal\n */\nexport function isGroupColumnDef<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  columnDef: any,\n): columnDef is GroupColumnDef<TFeatures, TData, TValue> {\n  return (\n    typeof columnDef === 'object' &&\n    columnDef.columns !== undefined &&\n    Array.isArray(columnDef.columns)\n  );\n}\n\n/**\n * Makes sure that a columnDef is a displayColumnDef\n * @internal\n */\nexport function isDisplayColumnDef(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  columnDef: any,\n): columnDef is DisplayColumnDef<TableFeatures, RowData> {\n  return (\n    typeof columnDef === 'object' &&\n    columnDef.columns === undefined &&\n    !Array.isArray(columnDef.columns)\n  );\n}\n\n/**\n * Makes sure that the columnDef is a AccessorKeyColumnDef\n * @internal\n */\nexport function isAccessorKeyColumnDef<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  columnDef: any,\n): columnDef is AccessorKeyColumnDef<TFeatures, TData, TValue> {\n  return (\n    typeof columnDef === 'object' &&\n    columnDef.accessorKey !== undefined &&\n    typeof columnDef.accessorKey === 'string'\n  );\n}\n\n/**\n * Makes sure that the columnDef is a AccessorFnColumnDef\n * @internal\n */\nexport function isAccessorFnColumnDef<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  columnDef: any,\n): columnDef is AccessorFnColumnDef<TFeatures, TData, TValue> {\n  return (\n    typeof columnDef === 'object' &&\n    columnDef.accessorFn !== undefined &&\n    typeof columnDef.accessorFn === 'function'\n  );\n}\n"],
+  "mappings": "AAqBO,SAAS,uBAId,WACqD;AACrD,SACE,OAAO,cAAc;AAAA,EAEpB,UAAkB,YAAY;AAAA,EAE/B,MAAM,QAAS,UAAkB,OAAO;AAE5C;AAMO,SAAS,yBAId,WACuD;AACvD,SACE,OAAO,cAAc;AAAA,EAEpB,UAAkB,YAAY;AAAA,EAE/B,CAAC,MAAM,QAAS,UAAkB,OAAO;AAE7C;AAMO,SAAS,iBAMd,WACuD;AACvD,SACE,OAAO,cAAc,YACrB,UAAU,YAAY,UACtB,MAAM,QAAQ,UAAU,OAAO;AAEnC;AAMO,SAAS,mBAEd,WACuD;AACvD,SACE,OAAO,cAAc,YACrB,UAAU,YAAY,UACtB,CAAC,MAAM,QAAQ,UAAU,OAAO;AAEpC;AAMO,SAAS,uBAMd,WAC6D;AAC7D,SACE,OAAO,cAAc,YACrB,UAAU,gBAAgB,UAC1B,OAAO,UAAU,gBAAgB;AAErC;AAMO,SAAS,sBAMd,WAC4D;AAC5D,SACE,OAAO,cAAc,YACrB,UAAU,eAAe,UACzB,OAAO,UAAU,eAAe;AAEpC;",
   "names": []
 }

package/esm/tables/DataTable/hooks/useTableRootResize.js

@@ -1,21 +1,27 @@
 import { debounce } from "lodash-es";
-import { useCallback, useEffect, useRef } from "react";
+import {
+  useCallback,
+  useEffect,
+  useReducer,
+  useRef
+} from "react";
 import useResizeObserver from "use-resize-observer";
-function useTableRootResize(remeasureRows, setTableState) {
+function useTableRootResize(remeasureRows) {
   const rootRef = useRef(null);
   const rootContainerSize = useRef(
     Math.round(rootRef.current?.getBoundingClientRect().width ?? 0)
   );
   const debouncedResizeRef = useRef();
+  const [, forceRender] = useReducer((x, _) => x + 1, 0);
   const onContainerResize = useCallback(
     (size) => {
       if (size.width) {
         rootContainerSize.current = Math.round(size.width);
         remeasureRows(rootContainerSize.current);
-        setTableState((state) => ({ ...state }));
+        forceRender();
       }
     },
-    [remeasureRows, setTableState]
+    [remeasureRows, forceRender]
   );
   useEffect(() => {
     debouncedResizeRef.current = debounce(onContainerResize, 125);

package/esm/tables/DataTable/hooks/useTableRootResize.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/hooks/useTableRootResize.ts"],
-  "sourcesContent": ["import { debounce } from 'lodash-es';\nimport { useCallback, useEffect, useRef, type MutableRefObject } from 'react';\nimport type { ObservedSize } from 'use-resize-observer';\nimport useResizeObserver from 'use-resize-observer';\n\nimport type { TableState, Updater } from './useTable/types.js';\n\n/**\n * Handles resizing of the DataTable root container.\n * @returns root ref\n * @internal\n */\nexport function useTableRootResize(\n  /**\n   * Remeasures the rows in the table.\n   */\n  remeasureRows: (virtualizationContainerWidth?: number) => void,\n  /**\n   * Sets the table state.\n   */\n  setTableState: (updater: Updater<TableState>) => void,\n): MutableRefObject<HTMLDivElement | null> {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  // Keep track of the root container size. We are updating a reference to\n  // the container size with the actual size.\n  const rootContainerSize = useRef<number>(\n    Math.round(rootRef.current?.getBoundingClientRect().width ?? 0),\n  );\n  //  Store debounced function in ref to cancel on unmount\n  const debouncedResizeRef = useRef<ReturnType<typeof debounce>>();\n\n  const onContainerResize = useCallback(\n    (size: ObservedSize) => {\n      if (size.width) {\n        rootContainerSize.current = Math.round(size.width);\n        // The `table.remeasureRow` is a memoized function, which will only run if\n        // its parameters change.\n        remeasureRows(rootContainerSize.current);\n        // Trigger a re-render to recalculate styles that depend on container\n        // dimensions, such as overflow behavior.\n        setTableState((state) => ({ ...state }));\n      }\n    },\n    [remeasureRows, setTableState],\n  );\n\n  useEffect(() => {\n    // Debounce the resizing to avoid flickering and performance impacts\n    // during resize. The rows are measured once the DataTable width stabilizes\n    // for a given number of milliseconds.\n    debouncedResizeRef.current = debounce(onContainerResize, 125);\n    return () => debouncedResizeRef.current?.cancel();\n  }, [onContainerResize]);\n\n  // Track the resizing of the DataTable root container.\n  useResizeObserver({\n    ref: rootRef,\n    onResize: (size) => debouncedResizeRef.current?.(size),\n  });\n\n  // When the table re-renders, invoke the measureRow with the last known\n  // value for the containerSize in order to keep the memoization stable.\n  remeasureRows(rootContainerSize.current);\n\n  return rootRef;\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,aAAa,WAAW,cAAqC;AAEtE,OAAO,uBAAuB;AASvB,SAAS,mBAId,eAIA,eACyC;AACzC,QAAM,UAAU,OAA8B,IAAI;AAGlD,QAAM,oBAAoB;AAAA,IACxB,KAAK,MAAM,QAAQ,SAAS,sBAAsB,EAAE,SAAS,CAAC;AAAA,EAChE;AAEA,QAAM,qBAAqB,OAAoC;AAE/D,QAAM,oBAAoB;AAAA,IACxB,CAAC,SAAuB;AACtB,UAAI,KAAK,OAAO;AACd,0BAAkB,UAAU,KAAK,MAAM,KAAK,KAAK;AAGjD,sBAAc,kBAAkB,OAAO;AAGvC,sBAAc,CAAC,WAAW,EAAE,GAAG,MAAM,EAAE;AAAA,MACzC;AAAA,IACF;AAAA,IACA,CAAC,eAAe,aAAa;AAAA,EAC/B;AAEA,YAAU,MAAM;AAId,uBAAmB,UAAU,SAAS,mBAAmB,GAAG;AAC5D,WAAO,MAAM,mBAAmB,SAAS,OAAO;AAAA,EAClD,GAAG,CAAC,iBAAiB,CAAC;AAGtB,oBAAkB;AAAA,IAChB,KAAK;AAAA,IACL,UAAU,CAAC,SAAS,mBAAmB,UAAU,IAAI;AAAA,EACvD,CAAC;AAID,gBAAc,kBAAkB,OAAO;AAEvC,SAAO;AACT;",
+  "sourcesContent": ["import { debounce } from 'lodash-es';\nimport {\n  useCallback,\n  useEffect,\n  useReducer,\n  useRef,\n  type MutableRefObject,\n} from 'react';\nimport type { ObservedSize } from 'use-resize-observer';\nimport useResizeObserver from 'use-resize-observer';\n\n/**\n * Handles resizing of the DataTable root container.\n * @returns root ref\n * @internal\n */\nexport function useTableRootResize(\n  remeasureRows: (virtualizationContainerWidth?: number) => void,\n): MutableRefObject<HTMLDivElement | null> {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  // Keep track of the root container size. We are updating a reference to\n  // the container size with the actual size.\n  const rootContainerSize = useRef<number>(\n    Math.round(rootRef.current?.getBoundingClientRect().width ?? 0),\n  );\n  //  Store debounced function in ref to cancel on unmount\n  const debouncedResizeRef = useRef<ReturnType<typeof debounce>>();\n  // Triggers DataTable re-renders via React state rather than alien-signals atoms,\n  // avoiding \"Cannot update during rendering\" warnings from the stale inst.value\n  // window that would otherwise open between LINE A (setOptions flush) and LINE B\n  // (useSyncExternalStore snapshot update) in the subsequent re-render.\n  const [, forceRender] = useReducer((x: number, _: void): number => x + 1, 0);\n\n  const onContainerResize = useCallback(\n    (size: ObservedSize) => {\n      if (size.width) {\n        rootContainerSize.current = Math.round(size.width);\n        // The `table.remeasureRow` is a memoized function, which will only run if\n        // its parameters change.\n        remeasureRows(rootContainerSize.current);\n        // Trigger a re-render to recalculate styles that depend on container\n        // dimensions, such as overflow behavior.\n        forceRender();\n      }\n    },\n    [remeasureRows, forceRender],\n  );\n\n  useEffect(() => {\n    // Debounce the resizing to avoid flickering and performance impacts\n    // during resize. The rows are measured once the DataTable width stabilizes\n    // for a given number of milliseconds.\n    debouncedResizeRef.current = debounce(onContainerResize, 125);\n    return () => debouncedResizeRef.current?.cancel();\n  }, [onContainerResize]);\n\n  // Track the resizing of the DataTable root container.\n  useResizeObserver({\n    ref: rootRef,\n    onResize: (size) => debouncedResizeRef.current?.(size),\n  });\n\n  // When the table re-renders, invoke the measureRow with the last known\n  // value for the containerSize in order to keep the memoization stable.\n  remeasureRows(rootContainerSize.current);\n\n  return rootRef;\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,OAAO,uBAAuB;AAOvB,SAAS,mBACd,eACyC;AACzC,QAAM,UAAU,OAA8B,IAAI;AAGlD,QAAM,oBAAoB;AAAA,IACxB,KAAK,MAAM,QAAQ,SAAS,sBAAsB,EAAE,SAAS,CAAC;AAAA,EAChE;AAEA,QAAM,qBAAqB,OAAoC;AAK/D,QAAM,CAAC,EAAE,WAAW,IAAI,WAAW,CAAC,GAAW,MAAoB,IAAI,GAAG,CAAC;AAE3E,QAAM,oBAAoB;AAAA,IACxB,CAAC,SAAuB;AACtB,UAAI,KAAK,OAAO;AACd,0BAAkB,UAAU,KAAK,MAAM,KAAK,KAAK;AAGjD,sBAAc,kBAAkB,OAAO;AAGvC,oBAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,CAAC,eAAe,WAAW;AAAA,EAC7B;AAEA,YAAU,MAAM;AAId,uBAAmB,UAAU,SAAS,mBAAmB,GAAG;AAC5D,WAAO,MAAM,mBAAmB,SAAS,OAAO;AAAA,EAClD,GAAG,CAAC,iBAAiB,CAAC;AAGtB,oBAAkB;AAAA,IAChB,KAAK;AAAA,IACL,UAAU,CAAC,SAAS,mBAAmB,UAAU,IAAI;AAAA,EACvD,CAAC;AAID,gBAAc,kBAAkB,OAAO;AAEvC,SAAO;AACT;",
   "names": []
 }