@dynatrace/strato-components 3.6.0 → 3.7.0

package/esm/tables/DataTable/components/DataTableVirtualizationContainer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableVirtualizationContainer.tsx"],
-  "sourcesContent": ["import { type Range, useVirtualizer } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport { debounce } from 'lodash-es';\nimport {\n  type CSSProperties,\n  type JSX,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { DataTableContent } from './DataTableContent.js';\nimport { DataTableEmptyState } from './DataTableEmptyState.js';\nimport { DataTableStatePlaceholder } from './DataTableStatePlaceholder.js';\nimport * as styles from './DataTableVirtualizationContainer.sty.js';\nimport { useFontsUpdated } from '../../../core/hooks/useFontsUpdated.js';\nimport { devLog } from '../../../core/utils/logging.js';\nimport { getDataTableBorderWidth } from '../../utils/data-table-border-width.js';\nimport {\n  DATA_TABLE_DEFAULT_COLUMN_WIDTH,\n  DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH,\n  DATA_TABLE_VIRTUALIZER_COLUMN_OVERSCAN,\n  DATA_TABLE_VIRTUALIZER_ROW_OVERSCAN,\n} from '../constants.js';\nimport { addPinnedColumnsToVisibleRange } from '../features/ColumnPinning/column-pinning-utils.js';\nimport { isWidthExtendedConfig } from '../features/Layout/width-utils.js';\nimport { type Table } from '../hooks/useTable/types.js';\n\ntype WidthConfigsById = Record<\n  string,\n  {\n    minWidth: number;\n    maxWidth: number | undefined;\n    isContentOrAutoWidth: boolean;\n  }\n>;\n\nexport function DataTableVirtualizationContainer<T>(\n  props: Readonly<{\n    table: Table<T>;\n    emptyState: ReturnType<typeof DataTableEmptyState>;\n    fullHeight: boolean;\n  }>,\n): JSX.Element {\n  const { table, emptyState, fullHeight } = props;\n\n  const parentRef = useRef<HTMLDivElement | null>(null);\n\n  const { draggingRowInfo, draggedHeaderColumn, loading } = table.getState();\n  const rows = table.getRowModel().rows;\n  const visibleLeafColumns = table.getVisibleLeafColumns();\n  const totalHeaderHeight = table.getTotalHeaderHeight();\n\n  const visibleLeafColumnsWithoutBuiltin =\n    table.getVisibleLeafColumnsWithoutBuiltin();\n\n  const getUniqueRowKey = useCallback(\n    (index: number) => {\n      if (index >= rows.length) {\n        devLog(`[Table] Invalid row index ${index} (>= ${rows.length})`);\n        // should not happen, but to avoid crashing an app, do this\n        return -1;\n      }\n      return rows[index].id;\n    },\n    [rows],\n  );\n\n  const rowVirtualizer = useVirtualizer({\n    count: rows?.length ?? 0,\n    getScrollElement: () => parentRef.current,\n    // Overscan of 5 was very ambitious. A single mouse scroll tick is usually\n    // more than 5 condensed rows, so this is increased. In the future there could\n    // be a possibility to make this dependent on the row density.\n    overscan: DATA_TABLE_VIRTUALIZER_ROW_OVERSCAN,\n    indexAttribute: 'data-row',\n    // reserves space for the sticky header in the scrollable area, so the first rows are not hidden behind the header when scrolled to the top\n    paddingStart: totalHeaderHeight,\n    // ensures that scrollToIndex scrolls the item to the correct position, taking into account the reserved space for the header\n    scrollPaddingStart: totalHeaderHeight,\n    estimateSize: (index) => table.estimateRowHeight({ index }),\n    measureElement: (element) => element.getBoundingClientRect().height,\n    // Default wait until the scrollEnd is triggered and it starts updating.\n    // https://tanstack.com/virtual/latest/docs/api/virtualizer#isscrollingresetdelay\n    // Reducing it from the default 150ms seems to improve perceived scroll performance\n    isScrollingResetDelay: 20,\n    getItemKey: getUniqueRowKey,\n    // reset scrollElement observers when the data in the table is changed\n    // fixes the issue with Firefox browser not resetting the scrollTop position of the virtualizer when the table is scrolled and the data is changed\n    // APPDEV-15467\n    enabled: rows.length > 0,\n  });\n\n  const pinnedLeftColumns = table.getLeftVisibleLeafColumns();\n  const pinnedRightColumns = table.getRightVisibleLeafColumns();\n\n  // create left array indexes\n  const pinnedLeftIndexes = useMemo(\n    () => Array.from({ length: pinnedLeftColumns.length }, (_, i) => i),\n    [pinnedLeftColumns.length],\n  );\n\n  // create right array indexes\n  const pinnedRightIndexes = useMemo(() => {\n    const pinnedRightStartIndex =\n      visibleLeafColumns.length - pinnedRightColumns.length;\n\n    return Array.from(\n      { length: pinnedRightColumns.length },\n      (_, i) => pinnedRightStartIndex + i,\n    );\n  }, [visibleLeafColumns.length, pinnedRightColumns.length]); // Only recreate when counts change\n\n  const columnRangeExtractor = useCallback(\n    (range: Range) =>\n      addPinnedColumnsToVisibleRange(\n        range,\n        pinnedLeftIndexes,\n        pinnedRightIndexes,\n      ),\n    [pinnedLeftIndexes, pinnedRightIndexes],\n  );\n\n  const orderedVisibleLeafColumns = table.getOrderedVisibleLeafColumns();\n  const getUniqueColumnKey = useCallback(\n    (index: number) => orderedVisibleLeafColumns[index].id,\n    [orderedVisibleLeafColumns],\n  );\n\n  const widthConfigsById = useMemo<WidthConfigsById>(() => {\n    return visibleLeafColumnsWithoutBuiltin.reduce<WidthConfigsById>(\n      (acc, column) => {\n        const { id, columnDef } = column;\n        const {\n          width,\n          minWidth = DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH,\n          maxWidth,\n        } = columnDef;\n\n        const isExtendedConfig = isWidthExtendedConfig(width);\n        const isContentOrAutoWidth =\n          isExtendedConfig || width === 'content' || width === 'auto';\n        const maxAutoWidth = isExtendedConfig ? width.maxWidth : undefined;\n\n        // Take the smallest of the maxWidths if both are defined\n        // if columnSize is defined (the user resized a column), it takes precedence over maxWidth and maxAutoWidth\n        const finalMaxWidth =\n          maxWidth !== undefined && maxAutoWidth !== undefined\n            ? Math.min(maxWidth, maxAutoWidth)\n            : maxWidth ?? maxAutoWidth;\n\n        acc[id] = {\n          minWidth,\n          maxWidth: finalMaxWidth,\n          isContentOrAutoWidth,\n        };\n        return acc;\n      },\n      {},\n    );\n  }, [visibleLeafColumnsWithoutBuiltin]);\n\n  const columnMeasure = useCallback(\n    (element: Element) => {\n      const measuredWidth = element.getBoundingClientRect().width;\n\n      const columnId =\n        element instanceof HTMLElement ? element.dataset.columnid : undefined;\n\n      const previousWidth = columnId\n        ? table.getMeasuredColumnWidth(columnId)\n        : undefined;\n      // Return the previous width if the element is hidden\n      if (measuredWidth === 0 || !columnId) {\n        return previousWidth ?? 0;\n      }\n\n      const widthConfiguration = widthConfigsById[columnId];\n\n      // If no width configuration is found, the column is currently resized,\n      // or an explicit column size is defined, return the measured width directly.\n      // Column sizing already considers min/max widths correctly.\n      if (\n        table.getState().columnSizing[columnId] !== undefined ||\n        table.getState().columnSizingInfo.isResizingColumn === columnId ||\n        !widthConfiguration\n      ) {\n        table.setMeasuredColumnWidth(columnId, measuredWidth);\n        return measuredWidth;\n      }\n\n      const { minWidth, maxWidth, isContentOrAutoWidth } = widthConfiguration;\n\n      // For content/auto width columns we need to round up slightly,\n      // to avoid an unnecessary ellipsis showing due to subpixel rendering issues.\n      const roundedWidth = isContentOrAutoWidth\n        ? Math.ceil(measuredWidth * 10) / 10\n        : measuredWidth;\n\n      const clampedWidth = Math.max(\n        minWidth ?? 0,\n        Math.min(maxWidth ?? Infinity, roundedWidth),\n      );\n\n      // Only update the measured width if it has changed beyond a small threshold (> 0.1px)\n      // to prevent infinite loops (ever-growing columns) caused by subpixel rendering differences\n      // at specific browser zoom and display scale combinations (e.g. 150% zoom + 125% scale).\n      if (\n        previousWidth !== undefined &&\n        Math.abs(clampedWidth - previousWidth) <= 0.1\n      ) {\n        // Return the previous width to prevent the virtualizer from detecting\n        // insignificant changes that would trigger re-renders.\n        return previousWidth;\n      }\n\n      table.setMeasuredColumnWidth(columnId, clampedWidth);\n      return clampedWidth;\n    },\n    [table, widthConfigsById],\n  );\n\n  const columnVirtualizer = useVirtualizer({\n    count: visibleLeafColumns.length,\n    getScrollElement: () => parentRef.current,\n    indexAttribute: 'data-column',\n    estimateSize: () => DATA_TABLE_DEFAULT_COLUMN_WIDTH,\n    rangeExtractor: columnRangeExtractor,\n    overscan: DATA_TABLE_VIRTUALIZER_COLUMN_OVERSCAN,\n    horizontal: true,\n    getItemKey: getUniqueColumnKey,\n    measureElement: columnMeasure,\n  });\n\n  const hasVisibleColumns = visibleLeafColumnsWithoutBuiltin.length > 0;\n  const { headers, contained, rowSeparation } = table.getVisualVariantOptions();\n  const estimatedRowHeight = table.estimateRowHeight();\n\n  const containerStyle = useMemo(() => {\n    let minHeight: CSSProperties['minHeight'] = undefined;\n\n    if (totalHeaderHeight === 0) {\n      // if headers are hidden, be at least one row tall, otherwise be at least two rows tall\n      // to account for the border between header and first row we need to add 2px border\n      minHeight =\n        headers === 'hidden'\n          ? estimatedRowHeight\n          : estimatedRowHeight * 2 + getDataTableBorderWidth();\n    } else {\n      // or header size + 1 additional row\n      minHeight = totalHeaderHeight + estimatedRowHeight;\n    }\n\n    if (contained) {\n      // Add a borderTop and border bottom for the borders around the containment.\n      minHeight += 2 * getDataTableBorderWidth();\n    }\n    const baseStyle: CSSProperties = {\n      minHeight,\n    };\n\n    if (fullHeight) {\n      baseStyle.height = '100%';\n    }\n    return baseStyle;\n  }, [totalHeaderHeight, contained, headers, estimatedRowHeight, fullHeight]);\n\n  const scrollRect = rowVirtualizer.scrollRect;\n  const scrollElement = rowVirtualizer.scrollElement;\n  const scrollWidth = scrollElement?.scrollWidth;\n  const scrollHeight = scrollElement?.scrollHeight;\n\n  const scrollDirection = useMemo(() => {\n    if (\n      scrollRect?.width &&\n      scrollRect?.height &&\n      scrollWidth !== undefined &&\n      scrollHeight !== undefined\n    ) {\n      // Determine whether the scrollbars are visible to apply the according styles for the scrollbars\n      const hasScrollbarX = scrollRect.width < scrollWidth;\n      const hasScrollbarY = scrollRect.height < scrollHeight;\n\n      if (hasScrollbarX && hasScrollbarY) {\n        return 'xy';\n      } else if (hasScrollbarX) {\n        return 'x';\n      } else if (hasScrollbarY) {\n        return 'y';\n      }\n    }\n    return false;\n  }, [scrollRect?.width, scrollRect?.height, scrollWidth, scrollHeight]);\n\n  const fontUpdateQueued = useRef(false);\n  useFontsUpdated(() => {\n    if (fontUpdateQueued.current) {\n      return;\n    }\n    fontUpdateQueued.current = true;\n    const controller = new AbortController();\n    Promise.race([\n      // If the animations have not stopped after a timeout period,\n      // we can remeasure nevertheless.\n      new Promise<void>((resolve) =>\n        setTimeout(() => {\n          resolve();\n        }, 1_000),\n      ),\n      // If the animations subside within a reasonable interval, we\n      // can also remeasure.\n      new Promise<void>((resolve) => {\n        document.addEventListener(\n          'animationend',\n          debounce(() => {\n            resolve();\n          }, 200),\n          { signal: controller.signal },\n        );\n      }),\n    ]).then(() => {\n      table.remeasureAllColumns();\n      controller.abort();\n      fontUpdateQueued.current = false;\n    });\n  });\n\n  // If the column definition changes, make sure that the measurements set is cleared\n  // of columns that no longer exist. This keeps the `measuredColumnWidths` cache in\n  // sync with the virtualizer's `itemSizeCache`.\n  useEffect(() => {\n    const currentColumnIds = new Set(\n      table.getAllLeafColumns().map((col) => col.id),\n    );\n\n    const removedIds: string[] = [];\n    for (const id of table.getMeasuredColumnWidths().keys()) {\n      // We compare the columns by their ids, since the virtualizer internally relies\n      // on the ids (as defined by our getItemKey).\n      if (!currentColumnIds.has(id)) {\n        removedIds.push(id);\n      }\n    }\n    if (removedIds.length > 0) {\n      table.resetMeasuredColumnWidths(removedIds);\n    }\n  }, [table, table.options.columns]);\n\n  useEffect(() => {\n    // In a scrollable table, when ordering columns via drag and drop, dragging automatically scrolls the content.\n    // This effect ensures that vertical scrolling is prevented while a column is being dragged.\n    const parent = parentRef.current;\n    const currentOffset = rowVirtualizer.scrollOffset;\n    const abort = new AbortController();\n    if (draggedHeaderColumn) {\n      // Add an event listener to the parent element to maintain the current scroll position\n      parent?.addEventListener(\n        'scroll',\n        () => rowVirtualizer.scrollToOffset(currentOffset ?? 0),\n        { signal: abort.signal },\n      );\n    }\n    return () => {\n      abort.abort();\n    };\n  }, [draggedHeaderColumn, rowVirtualizer]);\n\n  useEffect(() => {\n    // In a scrollable table, when ordering rows via drag and drop, dragging automatically scrolls the content horizontally.\n    // This effect ensures that horizontal scrolling is prevented while a row is being dragged.\n    const parent = parentRef.current;\n    const currentOffset = columnVirtualizer.scrollOffset;\n    const abort = new AbortController();\n    if (draggingRowInfo) {\n      // Add an event listener to the parent element to maintain the current scroll position\n      parent?.addEventListener(\n        'scroll',\n        () => columnVirtualizer.scrollToOffset(currentOffset ?? 0),\n        { signal: abort.signal },\n      );\n    }\n    return () => {\n      abort.abort();\n    };\n  }, [columnVirtualizer, draggingRowInfo]);\n\n  table.registerVirtualizers(rowVirtualizer, columnVirtualizer);\n\n  return (\n    <div\n      ref={parentRef}\n      className={clsx(\n        'strato-table-virtualization-container',\n        styles.virtualizationContainer({\n          contained,\n          rowSeparation,\n          headers,\n          loading,\n          hasVisibleColumns,\n          scrollDirection,\n        }),\n      )}\n      style={containerStyle}\n    >\n      <DataTableContent\n        rowVirtualizer={rowVirtualizer}\n        columnVirtualizer={columnVirtualizer}\n      />\n      <DataTableStatePlaceholder\n        isColumnsEmpty={columnVirtualizer.options.count === 0}\n        isDataEmpty={rowVirtualizer.options.count === 0}\n        allColumnsHidden={!hasVisibleColumns}\n        emptyStateSlot={emptyState}\n      />\n    </div>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { ReactTable, RowData } from '@tanstack/react-table';\nimport { type Range, useVirtualizer } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport { debounce } from 'lodash-es';\nimport {\n  type CSSProperties,\n  type JSX,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { DataTableContent } from './DataTableContent.js';\nimport { DataTableEmptyState } from './DataTableEmptyState.js';\nimport { DataTableStatePlaceholder } from './DataTableStatePlaceholder.js';\nimport * as styles from './DataTableVirtualizationContainer.sty.js';\nimport { useFontsUpdated } from '../../../core/hooks/useFontsUpdated.js';\nimport { devLog } from '../../../core/utils/logging.js';\nimport { getDataTableBorderWidth } from '../../utils/data-table-border-width.js';\nimport {\n  DATA_TABLE_DEFAULT_COLUMN_WIDTH,\n  DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH,\n  DATA_TABLE_VIRTUALIZER_COLUMN_OVERSCAN,\n  DATA_TABLE_VIRTUALIZER_ROW_OVERSCAN,\n} from '../constants.js';\nimport { addPinnedColumnsToVisibleRange } from '../features/ColumnPinning/column-pinning-utils.js';\nimport { isWidthExtendedConfig } from '../features/Layout/width-utils.js';\nimport type { TDataTableFeatures } from '../features/types/features.types.js';\n\ntype WidthConfigsById = Record<\n  string,\n  {\n    minWidth: number;\n    maxWidth: number | undefined;\n    isContentOrAutoWidth: boolean;\n  }\n>;\n\nexport function DataTableVirtualizationContainer(\n  props: Readonly<{\n    table: ReactTable<TDataTableFeatures, RowData>;\n    emptyState: ReturnType<typeof DataTableEmptyState>;\n    fullHeight: boolean;\n  }>,\n): JSX.Element {\n  const { table, emptyState, fullHeight } = props;\n\n  const parentRef = useRef<HTMLDivElement | null>(null);\n\n  const isLoading = table.atoms.loading?.get() ?? false;\n  const [loadingScrollOffset, setLoadingScrollOffset] = useState(0);\n  useLayoutEffect(() => {\n    if (isLoading) {\n      setLoadingScrollOffset(parentRef.current?.scrollTop ?? 0);\n    }\n  }, [isLoading]);\n\n  const rows = table.getRowModel().rows;\n  const draggingRowInfo = table.atoms.draggingRowInfo?.get();\n  const visibleLeafColumns = table.getVisibleLeafColumns();\n  const totalHeaderHeight = table.getTotalHeaderHeight();\n\n  const visibleLeafColumnsWithoutBuiltin =\n    table.getVisibleLeafColumnsWithoutBuiltin();\n\n  const getUniqueRowKey = useCallback(\n    (index: number) => {\n      if (index >= rows.length) {\n        devLog(`[Table] Invalid row index ${index} (>= ${rows.length})`);\n        // should not happen, but to avoid crashing an app, do this\n        return -1;\n      }\n      return rows[index].id;\n    },\n    [rows],\n  );\n\n  const rowVirtualizer = useVirtualizer({\n    count: rows?.length ?? 0,\n    getScrollElement: () => parentRef.current,\n    // Overscan of 5 was very ambitious. A single mouse scroll tick is usually\n    // more than 5 condensed rows, so this is increased. In the future there could\n    // be a possibility to make this dependent on the row density.\n    overscan: DATA_TABLE_VIRTUALIZER_ROW_OVERSCAN,\n    indexAttribute: 'data-row',\n    // reserves space for the sticky header in the scrollable area, so the first rows are not hidden behind the header when scrolled to the top\n    paddingStart: totalHeaderHeight,\n    // ensures that scrollToIndex scrolls the item to the correct position, taking into account the reserved space for the header\n    scrollPaddingStart: totalHeaderHeight,\n    estimateSize: (index) => table.estimateRowHeight({ index }),\n    measureElement: (element) => element.getBoundingClientRect().height,\n    // Default wait until the scrollEnd is triggered and it starts updating.\n    // https://tanstack.com/virtual/latest/docs/api/virtualizer#isscrollingresetdelay\n    // Reducing it from the default 150ms seems to improve perceived scroll performance\n    isScrollingResetDelay: 20,\n    getItemKey: getUniqueRowKey,\n    // reset scrollElement observers when the data in the table is changed\n    // fixes the issue with Firefox browser not resetting the scrollTop position of the virtualizer when the table is scrolled and the data is changed\n    // APPDEV-15467\n    enabled: rows.length > 0,\n  });\n\n  const pinnedLeftColumns = table.getLeftVisibleLeafColumns();\n  const pinnedRightColumns = table.getRightVisibleLeafColumns();\n\n  // create left array indexes\n  const pinnedLeftIndexes = useMemo(\n    () => Array.from({ length: pinnedLeftColumns.length }, (_, i) => i),\n    [pinnedLeftColumns.length],\n  );\n\n  // create right array indexes\n  const pinnedRightIndexes = useMemo(() => {\n    const pinnedRightStartIndex =\n      visibleLeafColumns.length - pinnedRightColumns.length;\n\n    return Array.from(\n      { length: pinnedRightColumns.length },\n      (_, i) => pinnedRightStartIndex + i,\n    );\n  }, [visibleLeafColumns.length, pinnedRightColumns.length]); // Only recreate when counts change\n\n  const columnRangeExtractor = useCallback(\n    (range: Range) =>\n      addPinnedColumnsToVisibleRange(\n        range,\n        pinnedLeftIndexes,\n        pinnedRightIndexes,\n      ),\n    [pinnedLeftIndexes, pinnedRightIndexes],\n  );\n\n  const orderedVisibleLeafColumns = table.getOrderedVisibleLeafColumns();\n  const getUniqueColumnKey = useCallback(\n    (index: number) => orderedVisibleLeafColumns[index].id,\n    [orderedVisibleLeafColumns],\n  );\n\n  const widthConfigsById = useMemo<WidthConfigsById>(() => {\n    return visibleLeafColumnsWithoutBuiltin.reduce<WidthConfigsById>(\n      (acc, column) => {\n        const { id, columnDef } = column;\n        const {\n          width,\n          minWidth = DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH,\n          maxWidth,\n        } = columnDef;\n\n        const isExtendedConfig = isWidthExtendedConfig(width);\n        const isContentOrAutoWidth =\n          isExtendedConfig || width === 'content' || width === 'auto';\n        const maxAutoWidth = isExtendedConfig ? width.maxWidth : undefined;\n\n        // Take the smallest of the maxWidths if both are defined\n        // if columnSize is defined (the user resized a column), it takes precedence over maxWidth and maxAutoWidth\n        const finalMaxWidth =\n          maxWidth !== undefined && maxAutoWidth !== undefined\n            ? Math.min(maxWidth, maxAutoWidth)\n            : maxWidth ?? maxAutoWidth;\n\n        acc[id] = {\n          minWidth,\n          maxWidth: finalMaxWidth,\n          isContentOrAutoWidth,\n        };\n        return acc;\n      },\n      {},\n    );\n  }, [visibleLeafColumnsWithoutBuiltin]);\n\n  const columnMeasure = useCallback(\n    (element: Element) => {\n      const measuredWidth = element.getBoundingClientRect().width;\n\n      const columnId =\n        element instanceof HTMLElement ? element.dataset.columnid : undefined;\n\n      const previousWidth = columnId\n        ? table.getMeasuredColumnWidth(columnId)\n        : undefined;\n      // Return the previous width if the element is hidden\n      if (measuredWidth === 0 || !columnId) {\n        return previousWidth ?? 0;\n      }\n\n      const widthConfiguration = widthConfigsById[columnId];\n\n      // If no width configuration is found, the column is currently resized,\n      // or an explicit column size is defined, return the measured width directly.\n      // Column sizing already considers min/max widths correctly.\n      if (\n        table.atoms.columnSizing?.get()[columnId] !== undefined ||\n        table.atoms.columnResizing?.get().isResizingColumn === columnId ||\n        !widthConfiguration\n      ) {\n        table.setMeasuredColumnWidth(columnId, measuredWidth);\n        return measuredWidth;\n      }\n\n      const { minWidth, maxWidth, isContentOrAutoWidth } = widthConfiguration;\n\n      // For content/auto width columns we need to round up slightly,\n      // to avoid an unnecessary ellipsis showing due to subpixel rendering issues.\n      const roundedWidth = isContentOrAutoWidth\n        ? Math.ceil(measuredWidth * 10) / 10\n        : measuredWidth;\n\n      const clampedWidth = Math.max(\n        minWidth ?? 0,\n        Math.min(maxWidth ?? Infinity, roundedWidth),\n      );\n\n      // Only update the measured width if it has changed beyond a small threshold (> 0.1px)\n      // to prevent infinite loops (ever-growing columns) caused by subpixel rendering differences\n      // at specific browser zoom and display scale combinations (e.g. 150% zoom + 125% scale).\n      if (\n        previousWidth !== undefined &&\n        Math.abs(clampedWidth - previousWidth) <= 0.1\n      ) {\n        // Return the previous width to prevent the virtualizer from detecting\n        // insignificant changes that would trigger re-renders.\n        return previousWidth;\n      }\n\n      table.setMeasuredColumnWidth(columnId, clampedWidth);\n      return clampedWidth;\n    },\n    [table, widthConfigsById],\n  );\n\n  const columnVirtualizer = useVirtualizer({\n    count: visibleLeafColumns.length,\n    getScrollElement: () => parentRef.current,\n    indexAttribute: 'data-column',\n    estimateSize: () => DATA_TABLE_DEFAULT_COLUMN_WIDTH,\n    rangeExtractor: columnRangeExtractor,\n    overscan: DATA_TABLE_VIRTUALIZER_COLUMN_OVERSCAN,\n    horizontal: true,\n    getItemKey: getUniqueColumnKey,\n    measureElement: columnMeasure,\n  });\n\n  const hasVisibleColumns = visibleLeafColumnsWithoutBuiltin.length > 0;\n  const estimatedRowHeight = table.estimateRowHeight();\n\n  const visualVariantConfig = table.atoms.visualVariantConfig?.get();\n  const containerStyle = useMemo(() => {\n    let minHeight: CSSProperties['minHeight'] = undefined;\n\n    if (totalHeaderHeight === 0) {\n      // if headers are hidden, be at least one row tall, otherwise be at least two rows tall\n      // to account for the border between header and first row we need to add 2px border\n      minHeight =\n        visualVariantConfig?.headers === 'hidden'\n          ? estimatedRowHeight\n          : estimatedRowHeight * 2 + getDataTableBorderWidth();\n    } else {\n      // or header size + 1 additional row\n      minHeight = totalHeaderHeight + estimatedRowHeight;\n    }\n\n    if (visualVariantConfig?.contained) {\n      // Add a borderTop and border bottom for the borders around the containment.\n      minHeight += 2 * getDataTableBorderWidth();\n    }\n    const baseStyle: CSSProperties = {\n      minHeight,\n    };\n\n    if (fullHeight) {\n      baseStyle.height = '100%';\n    }\n    return baseStyle;\n  }, [\n    totalHeaderHeight,\n    visualVariantConfig?.contained,\n    visualVariantConfig?.headers,\n    estimatedRowHeight,\n    fullHeight,\n  ]);\n\n  const scrollRect = rowVirtualizer.scrollRect;\n  const scrollElement = rowVirtualizer.scrollElement;\n  const scrollWidth = scrollElement?.scrollWidth;\n  const scrollHeight = scrollElement?.scrollHeight;\n\n  const scrollDirection = useMemo(() => {\n    if (\n      scrollRect?.width &&\n      scrollRect?.height &&\n      scrollWidth !== undefined &&\n      scrollHeight !== undefined\n    ) {\n      // Determine whether the scrollbars are visible to apply the according styles for the scrollbars\n      const hasScrollbarX = scrollRect.width < scrollWidth;\n      const hasScrollbarY = scrollRect.height < scrollHeight;\n\n      if (hasScrollbarX && hasScrollbarY) {\n        return 'xy';\n      } else if (hasScrollbarX) {\n        return 'x';\n      } else if (hasScrollbarY) {\n        return 'y';\n      }\n    }\n    return false;\n  }, [scrollRect?.width, scrollRect?.height, scrollWidth, scrollHeight]);\n\n  const fontUpdateQueued = useRef(false);\n  useFontsUpdated(() => {\n    if (fontUpdateQueued.current) {\n      return;\n    }\n    fontUpdateQueued.current = true;\n    const controller = new AbortController();\n    void Promise.race([\n      // If the animations have not stopped after a timeout period,\n      // we can remeasure nevertheless.\n      new Promise<void>((resolve) =>\n        setTimeout(() => {\n          resolve();\n        }, 1_000),\n      ),\n      // If the animations subside within a reasonable interval, we\n      // can also remeasure.\n      new Promise<void>((resolve) => {\n        document.addEventListener(\n          'animationend',\n          debounce(() => {\n            resolve();\n          }, 200),\n          { signal: controller.signal },\n        );\n      }),\n    ]).then(() => {\n      table.remeasureAllColumns();\n      controller.abort();\n      fontUpdateQueued.current = false;\n    });\n  });\n\n  // If the column definition changes, make sure that the measurements set is cleared\n  // of columns that no longer exist. This keeps the `measuredColumnWidths` cache in\n  // sync with the virtualizer's `itemSizeCache`.\n  const getAllLeafColumns = table.getAllLeafColumns;\n  const getMeasuredColumnWidths = table.getMeasuredColumnWidths;\n  const resetMeasuredColumnWidths = table.resetMeasuredColumnWidths;\n  const tableColumns = table.options.columns;\n  useEffect(() => {\n    const currentColumnIds = new Set(getAllLeafColumns().map((col) => col.id));\n\n    const removedIds: string[] = [];\n    for (const id of getMeasuredColumnWidths().keys()) {\n      // We compare the columns by their ids, since the virtualizer internally relies\n      // on the ids (as defined by our getItemKey).\n      if (!currentColumnIds.has(id)) {\n        removedIds.push(id);\n      }\n    }\n    if (removedIds.length > 0) {\n      resetMeasuredColumnWidths(removedIds);\n    }\n  }, [\n    getAllLeafColumns,\n    getMeasuredColumnWidths,\n    resetMeasuredColumnWidths,\n    tableColumns,\n  ]);\n\n  const draggedHeaderColumn = table.atoms.draggedHeaderColumn?.get();\n  useEffect(() => {\n    // In a scrollable table, when ordering columns via drag and drop, dragging automatically scrolls the content.\n    // This effect ensures that vertical scrolling is prevented while a column is being dragged.\n    const parent = parentRef.current;\n    const currentOffset = rowVirtualizer.scrollOffset;\n    const abort = new AbortController();\n    if (draggedHeaderColumn) {\n      // Add an event listener to the parent element to maintain the current scroll position\n      parent?.addEventListener(\n        'scroll',\n        () => rowVirtualizer.scrollToOffset(currentOffset ?? 0),\n        { signal: abort.signal },\n      );\n    }\n    return () => {\n      abort.abort();\n    };\n  }, [draggedHeaderColumn, rowVirtualizer]);\n\n  useEffect(() => {\n    // In a scrollable table, when ordering rows via drag and drop, dragging automatically scrolls the content horizontally.\n    // This effect ensures that horizontal scrolling is prevented while a row is being dragged.\n    const parent = parentRef.current;\n    const currentOffset = columnVirtualizer.scrollOffset;\n    const abort = new AbortController();\n    if (draggingRowInfo) {\n      // Add an event listener to the parent element to maintain the current scroll position\n      parent?.addEventListener(\n        'scroll',\n        () => columnVirtualizer.scrollToOffset(currentOffset ?? 0),\n        { signal: abort.signal },\n      );\n    }\n    return () => {\n      abort.abort();\n    };\n  }, [columnVirtualizer, draggingRowInfo]);\n\n  table.registerVirtualizers(rowVirtualizer, columnVirtualizer);\n\n  return (\n    <div\n      ref={parentRef}\n      className={clsx(\n        'strato-table-virtualization-container',\n        styles.virtualizationContainer({\n          contained: visualVariantConfig?.contained,\n          rowSeparation: visualVariantConfig?.rowSeparation,\n          headers: visualVariantConfig?.headers,\n          loading: table.atoms.loading?.get(),\n          hasVisibleColumns,\n          scrollDirection,\n          isDataEmpty: rows.length === 0,\n        }),\n      )}\n      style={containerStyle}\n    >\n      <DataTableContent\n        rowVirtualizer={rowVirtualizer}\n        columnVirtualizer={columnVirtualizer}\n      />\n      <DataTableStatePlaceholder\n        isColumnsEmpty={columnVirtualizer.options.count === 0}\n        isDataEmpty={rowVirtualizer.options.count === 0}\n        allColumnsHidden={!hasVisibleColumns}\n        emptyStateSlot={emptyState}\n        scrollOffset={loadingScrollOffset}\n      />\n    </div>\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/tables/DataTable/components/DataTableVirtualizationContainer.sty.js

@@ -1,7 +1,7 @@
 import "../../../core/components/app-root/AppRoot.css";
 import "./DataTableVirtualizationContainer.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var virtualizationContainer = _7a468({ defaultClassName: "_ytdpsw0-3-6-0", variantClassNames: { hasVisibleColumns: { true: "_ytdpsw1-3-6-0", false: "_ytdpsw2-3-6-0" }, loading: { true: "_ytdpsw3-3-6-0" }, contained: { true: "_ytdpsw4-3-6-0", false: "_ytdpsw5-3-6-0" }, rowSeparation: { horizontalDividers: "_ytdpsw6-3-6-0", zebraStripes: "_ytdpsw7-3-6-0", none: "_ytdpsw8-3-6-0" }, headers: { hidden: "_ytdpsw9-3-6-0", "default": "_ytdpswa-3-6-0" }, scrollDirection: { false: "_ytdpswb-3-6-0", x: "_ytdpswc-3-6-0", y: "_ytdpswd-3-6-0", xy: "_ytdpswe-3-6-0" } }, defaultVariants: { contained: true, rowSeparation: "horizontalDividers", headers: "default" }, compoundVariants: [[{ contained: true, scrollDirection: "xy" }, "_ytdpswf-3-6-0"]] });
+var virtualizationContainer = _7a468({ defaultClassName: "_ytdpsw0-3-7-0", variantClassNames: { hasVisibleColumns: { true: "_ytdpsw1-3-7-0", false: "_ytdpsw2-3-7-0" }, loading: { true: "_ytdpsw3-3-7-0" }, contained: { true: "_ytdpsw4-3-7-0", false: "_ytdpsw5-3-7-0" }, rowSeparation: { horizontalDividers: "_ytdpsw6-3-7-0", zebraStripes: "_ytdpsw7-3-7-0", none: "_ytdpsw8-3-7-0" }, headers: { hidden: "_ytdpsw9-3-7-0", "default": "_ytdpswa-3-7-0" }, scrollDirection: { false: "_ytdpswb-3-7-0", x: "_ytdpswc-3-7-0", y: "_ytdpswd-3-7-0", xy: "_ytdpswe-3-7-0" }, isDataEmpty: { true: "_ytdpswf-3-7-0", false: "_ytdpswg-3-7-0" } }, defaultVariants: { contained: true, rowSeparation: "horizontalDividers", headers: "default" }, compoundVariants: [[{ hasVisibleColumns: true, isDataEmpty: true }, "_ytdpswh-3-7-0"], [{ contained: true, scrollDirection: "xy" }, "_ytdpswi-3-7-0"]] });
 export {
   virtualizationContainer
 };

package/esm/tables/DataTable/components/DataTableVirtualizationContainer.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableVirtualizationContainer.css.ts"],
-  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './DataTableVirtualizationContainer.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var virtualizationContainer = _7a468({defaultClassName:'_ytdpsw0-3-6-0',variantClassNames:{hasVisibleColumns:{true:'_ytdpsw1-3-6-0',false:'_ytdpsw2-3-6-0'},loading:{true:'_ytdpsw3-3-6-0'},contained:{true:'_ytdpsw4-3-6-0',false:'_ytdpsw5-3-6-0'},rowSeparation:{horizontalDividers:'_ytdpsw6-3-6-0',zebraStripes:'_ytdpsw7-3-6-0',none:'_ytdpsw8-3-6-0'},headers:{hidden:'_ytdpsw9-3-6-0','default':'_ytdpswa-3-6-0'},scrollDirection:{false:'_ytdpswb-3-6-0',x:'_ytdpswc-3-6-0',y:'_ytdpswd-3-6-0',xy:'_ytdpswe-3-6-0'}},defaultVariants:{contained:true,rowSeparation:'horizontalDividers',headers:'default'},compoundVariants:[[{contained:true,scrollDirection:'xy'},'_ytdpswf-3-6-0']]});"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,mBAAkB,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,SAAQ,EAAC,MAAK,iBAAgB,GAAE,WAAU,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,eAAc,EAAC,oBAAmB,kBAAiB,cAAa,kBAAiB,MAAK,iBAAgB,GAAE,SAAQ,EAAC,QAAO,kBAAiB,WAAU,iBAAgB,GAAE,iBAAgB,EAAC,OAAM,kBAAiB,GAAE,kBAAiB,GAAE,kBAAiB,IAAG,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,eAAc,sBAAqB,SAAQ,UAAS,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,MAAK,iBAAgB,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;",
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport './DataTableVirtualizationContainer.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var virtualizationContainer = _7a468({defaultClassName:'_ytdpsw0-3-7-0',variantClassNames:{hasVisibleColumns:{true:'_ytdpsw1-3-7-0',false:'_ytdpsw2-3-7-0'},loading:{true:'_ytdpsw3-3-7-0'},contained:{true:'_ytdpsw4-3-7-0',false:'_ytdpsw5-3-7-0'},rowSeparation:{horizontalDividers:'_ytdpsw6-3-7-0',zebraStripes:'_ytdpsw7-3-7-0',none:'_ytdpsw8-3-7-0'},headers:{hidden:'_ytdpsw9-3-7-0','default':'_ytdpswa-3-7-0'},scrollDirection:{false:'_ytdpswb-3-7-0',x:'_ytdpswc-3-7-0',y:'_ytdpswd-3-7-0',xy:'_ytdpswe-3-7-0'},isDataEmpty:{true:'_ytdpswf-3-7-0',false:'_ytdpswg-3-7-0'}},defaultVariants:{contained:true,rowSeparation:'horizontalDividers',headers:'default'},compoundVariants:[[{hasVisibleColumns:true,isDataEmpty:true},'_ytdpswh-3-7-0'],[{contained:true,scrollDirection:'xy'},'_ytdpswi-3-7-0']]});"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,mBAAkB,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,SAAQ,EAAC,MAAK,iBAAgB,GAAE,WAAU,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,eAAc,EAAC,oBAAmB,kBAAiB,cAAa,kBAAiB,MAAK,iBAAgB,GAAE,SAAQ,EAAC,QAAO,kBAAiB,WAAU,iBAAgB,GAAE,iBAAgB,EAAC,OAAM,kBAAiB,GAAE,kBAAiB,GAAE,kBAAiB,IAAG,iBAAgB,GAAE,aAAY,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,eAAc,sBAAqB,SAAQ,UAAS,GAAE,kBAAiB,CAAC,CAAC,EAAC,mBAAkB,MAAK,aAAY,KAAI,GAAE,gBAAgB,GAAE,CAAC,EAAC,WAAU,MAAK,iBAAgB,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/tables/DataTable/components/TableActions/DataTableSelectedRowsActions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/components/TableActions/DataTableSelectedRowsActions.tsx"],
-  "sourcesContent": ["import { type ReactNode, type ReactElement, forwardRef, type Ref } from 'react';\n\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport type { DataTableRowData } from '../../public.api.js';\n\n/**\n * @public\n */\nexport interface DataTableSelectedRowsActionsProps<\n  TData extends DataTableRowData,\n> extends StylingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  children: (\n    rows: {\n      rowId: string;\n      originalRow: TData;\n    }[],\n  ) => ReactNode;\n}\n\n// A helper function to check whether the child component is the SelectedRowsActions component\n/**\n * @internal\n */\nexport function _isDataTableSelectedRowsActions<TData extends DataTableRowData>(\n  child: ReactElement | null,\n): child is ReactElement<DataTableSelectedRowsActionsProps<TData>> {\n  return child?.type === DataTableSelectedRowsActions;\n}\n\n/**\n * Selected rows actions component used for configuring actions\n * that can be applied on one or multiple rows in the DataTable simultaneously.\n * Also, it gets called by DataTable as rows get selected/unselected.\n *\n * @param props - contains children or self\n *\n * @returns DataTableSelectedRowsActions containing children.\n * @public\n */\nexport const DataTableSelectedRowsActions = forwardRef(\n  <TData extends DataTableRowData>(\n    props: DataTableSelectedRowsActionsProps<TData>,\n    forwardedRef: Ref<HTMLDivElement>,\n  ): ReactElement | null => {\n    const table = useDataTable();\n\n    const {\n      children,\n      'data-testid': dataTestId,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    if (typeof children !== 'function') {\n      devLog('The SelectedRowsActions sub-component child must be a function!');\n      return null;\n    }\n\n    const currentSelectableRows = table\n      .getSelectedRowModel()\n      .flatRows.map((row) => ({\n        rowId: row.id,\n        originalRow: row.original as TData,\n      }));\n\n    return (\n      <Flex\n        ref={forwardedRef}\n        justifyContent=\"flex-start\"\n        alignItems=\"flex-end\"\n        flexWrap=\"wrap\"\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...behavioralTrackingProps}\n        {...restProps}\n      >\n        <Flex alignItems=\"center\" flexWrap=\"wrap\" gap={4}>\n          {children(currentSelectableRows)}\n        </Flex>\n      </Flex>\n    );\n  },\n);\n\n(\n  DataTableSelectedRowsActions as typeof DataTableSelectedRowsActions & {\n    displayName: string;\n  }\n).displayName = 'DataTable.SelectedRowsActions';\n"],
-  "mappings": "AAyFQ;AAzFR,SAA4C,kBAA4B;AAExE,SAAS,kCAAkC;AAI3C,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAuBtB,SAAS,gCACd,OACiE;AACjE,SAAO,OAAO,SAAS;AACzB;AAYO,MAAM,+BAA+B;AAAA,EAC1C,CACE,OACA,iBACwB;AACxB,UAAM,QAAQ,aAAa;AAE3B,UAAM;AAAA,MACJ;AAAA,MACA,eAAe;AAAA,MACf,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,QAAI,OAAO,aAAa,YAAY;AAClC,aAAO,iEAAiE;AACxE,aAAO;AAAA,IACT;AAEA,UAAM,wBAAwB,MAC3B,oBAAoB,EACpB,SAAS,IAAI,CAAC,SAAS;AAAA,MACtB,OAAO,IAAI;AAAA,MACX,aAAa,IAAI;AAAA,IACnB,EAAE;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,gBAAe;AAAA,QACf,YAAW;AAAA,QACX,UAAS;AAAA,QACT,eAAa;AAAA,QACb,WAAW;AAAA,QACX,OAAO;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QAEJ,8BAAC,QAAK,YAAW,UAAS,UAAS,QAAO,KAAK,GAC5C,mBAAS,qBAAqB,GACjC;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAGE,6BAGA,cAAc;",
+  "sourcesContent": ["import { forwardRef, type ReactElement, type ReactNode, type Ref } from 'react';\n\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport type { DataTableRowData } from '../../public.api.js';\n\n/**\n * @public\n */\nexport interface DataTableSelectedRowsActionsProps<\n  TData extends DataTableRowData,\n> extends StylingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  children: (\n    rows: {\n      rowId: string;\n      originalRow: TData;\n    }[],\n  ) => ReactNode;\n}\n\n// A helper function to check whether the child component is the SelectedRowsActions component\n/**\n * @internal\n */\nexport function _isDataTableSelectedRowsActions<TData extends DataTableRowData>(\n  child: ReactElement | null,\n): child is ReactElement<DataTableSelectedRowsActionsProps<TData>> {\n  return child?.type === DataTableSelectedRowsActions;\n}\n\n/**\n * Selected rows actions component used for configuring actions\n * that can be applied on one or multiple rows in the DataTable simultaneously.\n * Also, it gets called by DataTable as rows get selected/unselected.\n *\n * @param props - contains children or self\n *\n * @returns DataTableSelectedRowsActions containing children.\n * @public\n */\nexport const DataTableSelectedRowsActions = forwardRef(\n  <TData extends DataTableRowData>(\n    props: DataTableSelectedRowsActionsProps<TData>,\n    forwardedRef: Ref<HTMLDivElement>,\n  ): ReactElement | null => {\n    const table = useDataTable();\n\n    const {\n      children,\n      'data-testid': dataTestId,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    if (typeof children !== 'function') {\n      devLog('The SelectedRowsActions sub-component child must be a function!');\n      return null;\n    }\n\n    const currentSelectableRows = table\n      .getSelectedRowModel()\n      .flatRows.map((row) => ({\n        rowId: row.id,\n        originalRow: row.original as TData,\n      }));\n\n    return (\n      <Flex\n        ref={forwardedRef}\n        justifyContent=\"flex-start\"\n        alignItems=\"flex-end\"\n        flexWrap=\"wrap\"\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...behavioralTrackingProps}\n        {...restProps}\n      >\n        <Flex alignItems=\"center\" flexWrap=\"wrap\" gap={4}>\n          {children(currentSelectableRows)}\n        </Flex>\n      </Flex>\n    );\n  },\n);\n\n(\n  DataTableSelectedRowsActions as typeof DataTableSelectedRowsActions & {\n    displayName: string;\n  }\n).displayName = 'DataTable.SelectedRowsActions';\n"],
+  "mappings": "AAyFQ;AAzFR,SAAS,kBAA+D;AAExE,SAAS,kCAAkC;AAI3C,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAuBtB,SAAS,gCACd,OACiE;AACjE,SAAO,OAAO,SAAS;AACzB;AAYO,MAAM,+BAA+B;AAAA,EAC1C,CACE,OACA,iBACwB;AACxB,UAAM,QAAQ,aAAa;AAE3B,UAAM;AAAA,MACJ;AAAA,MACA,eAAe;AAAA,MACf,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,QAAI,OAAO,aAAa,YAAY;AAClC,aAAO,iEAAiE;AACxE,aAAO;AAAA,IACT;AAEA,UAAM,wBAAwB,MAC3B,oBAAoB,EACpB,SAAS,IAAI,CAAC,SAAS;AAAA,MACtB,OAAO,IAAI;AAAA,MACX,aAAa,IAAI;AAAA,IACnB,EAAE;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,gBAAe;AAAA,QACf,YAAW;AAAA,QACX,UAAS;AAAA,QACT,eAAa;AAAA,QACb,WAAW;AAAA,QACX,OAAO;AAAA,QACN,GAAG;AAAA,QACH,GAAG;AAAA,QAEJ,8BAAC,QAAK,YAAW,UAAS,UAAS,QAAO,KAAK,GAC5C,mBAAS,qBAAqB,GACjC;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAGE,6BAGA,cAAc;",
   "names": []
 }

package/esm/tables/DataTable/components/TableActions/DataTableSelectionChip.css

@@ -1,17 +1,17 @@
-._1rlvxpp0-3-6-0 {
+._1rlvxpp0-3-7-0 {
   align-items: flex-end;
   justify-content: flex-end;
 }
-._1rlvxpp1-3-6-0 {
+._1rlvxpp1-3-7-0 {
   padding: 0 var(--dt-spacings-size-2, 2px);
 }
-._1rlvxpp2-3-6-0 {
+._1rlvxpp2-3-7-0 {
   padding: 0 var(--dt-spacings-size-8, 8px);
 }
-._1rlvxpp3-3-6-0 {
+._1rlvxpp3-3-7-0 {
   padding: 0 var(--dt-spacings-size-12, 12px);
 }
-._1rlvxpp4-3-6-0 {
+._1rlvxpp4-3-7-0 {
   height: var(--dt-spacings-size-20, 20px);
   min-width: var(--dt-spacings-size-12, 12px);
   padding: var(--dt-spacings-size-0, 0) var(--dt-spacings-size-4, 4px);

package/esm/tables/DataTable/components/TableActions/DataTableSelectionChip.js

@@ -9,40 +9,42 @@ import { Text } from "../../../../typography/text/Text.js";
 import { getDataTableBorderWidth } from "../../../utils/data-table-border-width.js";
 import { useDataTable } from "../../contexts/DataTableContext.js";
 import { dataTableMessages } from "../../messages.js";
+function DataTableSelectionChipInternal(props, forwardedRef) {
+  const {
+    children,
+    "data-testid": dataTestId,
+    className: consumerClassName,
+    style: consumerStyle,
+    ...remainingProps
+  } = props;
+  const table = useDataTable();
+  const rowsCount = table.getSelectionCount();
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      ref: forwardedRef,
+      className: styles.selectionChipWrapper[table.atoms.visualVariantConfig?.get()?.rowDensity],
+      style: {
+        marginLeft: table.atoms.visualVariantConfig?.get()?.contained ? getDataTableBorderWidth() : 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Flex,
+          {
+            "data-testid": dataTestId,
+            className: clsx([styles.selectionChip, consumerClassName]),
+            style: consumerStyle,
+            ...remainingProps,
+            children: rowsCount
+          }
+        ),
+        !_canReceiveDefaultTextFormat(children) ? children : /* @__PURE__ */ jsx(Text, { as: "p", textStyle: "base", children: children ?? /* @__PURE__ */ jsx(FormattedMessage, { ...dataTableMessages.selectedTotalRows }) })
+      ]
+    }
+  );
+}
 const DataTableSelectionChip = forwardRef(
-  (props, forwardedRef) => {
-    const {
-      children,
-      "data-testid": dataTestId,
-      className: consumerClassName,
-      style: consumerStyle,
-      ...remainingProps
-    } = props;
-    const table = useDataTable();
-    const rowsCount = table.getSelectionCount();
-    const { rowDensity, contained } = table.getVisualVariantOptions();
-    return /* @__PURE__ */ jsxs(
-      Flex,
-      {
-        ref: forwardedRef,
-        className: styles.selectionChipWrapper[rowDensity],
-        style: { marginLeft: contained ? getDataTableBorderWidth() : 0 },
-        children: [
-          /* @__PURE__ */ jsx(
-            Flex,
-            {
-              "data-testid": dataTestId,
-              className: clsx([styles.selectionChip, consumerClassName]),
-              style: consumerStyle,
-              ...remainingProps,
-              children: rowsCount
-            }
-          ),
-          !_canReceiveDefaultTextFormat(children) ? children : /* @__PURE__ */ jsx(Text, { as: "p", textStyle: "base", children: children ?? /* @__PURE__ */ jsx(FormattedMessage, { ...dataTableMessages.selectedTotalRows }) })
-        ]
-      }
-    );
-  }
+  DataTableSelectionChipInternal
 );
 DataTableSelectionChip.displayName = "DataTable.SelectionChip";
 export {

package/esm/tables/DataTable/components/TableActions/DataTableSelectionChip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/components/TableActions/DataTableSelectionChip.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, type ReactElement, type Ref } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport * as styles from './DataTableSelectionChip.sty.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../../../core/utils/can-receive-default-text-format.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { getDataTableBorderWidth } from '../../../utils/data-table-border-width.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../messages.js';\n\n/**\n * @public\n */\nexport type DataTableSelectionChipProps = WithChildren &\n  StylingProps &\n  DataTestId;\n\n/**\n *\n * @public\n */\nexport const DataTableSelectionChip = forwardRef(\n  (\n    props: DataTableSelectionChipProps,\n    forwardedRef: Ref<HTMLDivElement>,\n  ): ReactElement | null => {\n    const {\n      children,\n      'data-testid': dataTestId,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n\n    const table = useDataTable();\n    const rowsCount = table.getSelectionCount();\n    const { rowDensity, contained } = table.getVisualVariantOptions();\n\n    return (\n      <Flex\n        ref={forwardedRef}\n        className={styles.selectionChipWrapper[rowDensity]}\n        style={{ marginLeft: contained ? getDataTableBorderWidth() : 0 }}\n      >\n        <Flex\n          data-testid={dataTestId}\n          className={clsx([styles.selectionChip, consumerClassName])}\n          style={consumerStyle}\n          {...remainingProps}\n        >\n          {rowsCount}\n        </Flex>\n        {!_canReceiveDefaultTextFormat(children) ? (\n          children\n        ) : (\n          <Text as=\"p\" textStyle=\"base\">\n            {children ?? (\n              <FormattedMessage {...dataTableMessages.selectedTotalRows} />\n            )}\n          </Text>\n        )}\n      </Flex>\n    );\n  },\n);\n\n(\n  DataTableSelectionChip as typeof DataTableSelectionChip & {\n    displayName: string;\n  }\n).displayName = 'DataTable.SelectionChip';\n"],
-  "mappings": "AA4CM,SAKE,KALF;AA5CN,OAAO,UAAU;AACjB,SAAS,kBAA+C;AACxD,SAAS,wBAAwB;AAEjC,YAAY,YAAY;AAIxB,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,+BAA+B;AACxC,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAa3B,MAAM,yBAAyB;AAAA,EACpC,CACE,OACA,iBACwB;AACxB,UAAM;AAAA,MACJ;AAAA,MACA,eAAe;AAAA,MACf,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,QAAQ,aAAa;AAC3B,UAAM,YAAY,MAAM,kBAAkB;AAC1C,UAAM,EAAE,YAAY,UAAU,IAAI,MAAM,wBAAwB;AAEhE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,OAAO,qBAAqB,UAAU;AAAA,QACjD,OAAO,EAAE,YAAY,YAAY,wBAAwB,IAAI,EAAE;AAAA,QAE/D;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,eAAa;AAAA,cACb,WAAW,KAAK,CAAC,OAAO,eAAe,iBAAiB,CAAC;AAAA,cACzD,OAAO;AAAA,cACN,GAAG;AAAA,cAEH;AAAA;AAAA,UACH;AAAA,UACC,CAAC,6BAA6B,QAAQ,IACrC,WAEA,oBAAC,QAAK,IAAG,KAAI,WAAU,QACpB,sBACC,oBAAC,oBAAkB,GAAG,kBAAkB,mBAAmB,GAE/D;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAGE,uBAGA,cAAc;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, type Ref } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport * as styles from './DataTableSelectionChip.sty.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from '../../../../core/utils/can-receive-default-text-format.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { getDataTableBorderWidth } from '../../../utils/data-table-border-width.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../messages.js';\n\n/**\n * Props for the `DataTableSelectionChip` component.\n * @public\n */\nexport type DataTableSelectionChipProps = WithChildren &\n  StylingProps &\n  DataTestId;\n\nfunction DataTableSelectionChipInternal(\n  props: DataTableSelectionChipProps,\n  forwardedRef: Ref<HTMLDivElement>,\n) {\n  const {\n    children,\n    'data-testid': dataTestId,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props;\n\n  const table = useDataTable();\n  const rowsCount = table.getSelectionCount();\n\n  return (\n    <Flex\n      ref={forwardedRef}\n      className={\n        styles.selectionChipWrapper[\n          table.atoms.visualVariantConfig?.get()?.rowDensity\n        ]\n      }\n      style={{\n        marginLeft: table.atoms.visualVariantConfig?.get()?.contained\n          ? getDataTableBorderWidth()\n          : 0,\n      }}\n    >\n      <Flex\n        data-testid={dataTestId}\n        className={clsx([styles.selectionChip, consumerClassName])}\n        style={consumerStyle}\n        {...remainingProps}\n      >\n        {rowsCount}\n      </Flex>\n      {!_canReceiveDefaultTextFormat(children) ? (\n        children\n      ) : (\n        <Text as=\"p\" textStyle=\"base\">\n          {children ?? (\n            <FormattedMessage {...dataTableMessages.selectedTotalRows} />\n          )}\n        </Text>\n      )}\n    </Flex>\n  );\n}\n\n/**\n * A component that displays the number of selected rows in a chip.\n * It can be used in the `DataTable.SelectedRowsActions` component to show how many rows are currently selected.\n * @public\n */\nexport const DataTableSelectionChip = forwardRef(\n  DataTableSelectionChipInternal,\n);\n\n(\n  DataTableSelectionChip as typeof DataTableSelectionChip & {\n    displayName: string;\n  }\n).displayName = 'DataTable.SelectionChip';\n"],
+  "mappings": "AAuCI,SAaE,KAbF;AAvCJ,OAAO,UAAU;AACjB,SAAS,kBAA4B;AACrC,SAAS,wBAAwB;AAEjC,YAAY,YAAY;AAIxB,SAAS,+BAA+B,oCAAoC;AAC5E,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,+BAA+B;AACxC,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAUlC,SAAS,+BACP,OACA,cACA;AACA,QAAM;AAAA,IACJ;AAAA,IACA,eAAe;AAAA,IACf,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,QAAQ,aAAa;AAC3B,QAAM,YAAY,MAAM,kBAAkB;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WACE,OAAO,qBACL,MAAM,MAAM,qBAAqB,IAAI,GAAG,UAC1C;AAAA,MAEF,OAAO;AAAA,QACL,YAAY,MAAM,MAAM,qBAAqB,IAAI,GAAG,YAChD,wBAAwB,IACxB;AAAA,MACN;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAa;AAAA,YACb,WAAW,KAAK,CAAC,OAAO,eAAe,iBAAiB,CAAC;AAAA,YACzD,OAAO;AAAA,YACN,GAAG;AAAA,YAEH;AAAA;AAAA,QACH;AAAA,QACC,CAAC,6BAA6B,QAAQ,IACrC,WAEA,oBAAC,QAAK,IAAG,KAAI,WAAU,QACpB,sBACC,oBAAC,oBAAkB,GAAG,kBAAkB,mBAAmB,GAE/D;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAOO,MAAM,yBAAyB;AAAA,EACpC;AACF;AAGE,uBAGA,cAAc;",
   "names": []
 }

package/esm/tables/DataTable/components/TableActions/DataTableSelectionChip.sty.js

@@ -1,6 +1,6 @@
 import "./DataTableSelectionChip.css";
-var selectionChip = "_1rlvxpp4-3-6-0";
-var selectionChipWrapper = { condensed: "_1rlvxpp1-3-6-0 _1rlvxpp0-3-6-0", "default": "_1rlvxpp2-3-6-0 _1rlvxpp0-3-6-0", comfortable: "_1rlvxpp3-3-6-0 _1rlvxpp0-3-6-0" };
+var selectionChip = "_1rlvxpp4-3-7-0";
+var selectionChipWrapper = { condensed: "_1rlvxpp1-3-7-0 _1rlvxpp0-3-7-0", "default": "_1rlvxpp2-3-7-0 _1rlvxpp0-3-7-0", comfortable: "_1rlvxpp3-3-7-0 _1rlvxpp0-3-7-0" };
 export {
   selectionChip,
   selectionChipWrapper

package/esm/tables/DataTable/components/TableActions/DataTableSelectionChip.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/components/TableActions/DataTableSelectionChip.css.ts"],
-  "sourcesContent": ["import './DataTableSelectionChip.css';\nexport var selectionChip = '_1rlvxpp4-3-6-0';\nexport var selectionChipWrapper = {condensed:'_1rlvxpp1-3-6-0 _1rlvxpp0-3-6-0','default':'_1rlvxpp2-3-6-0 _1rlvxpp0-3-6-0',comfortable:'_1rlvxpp3-3-6-0 _1rlvxpp0-3-6-0'};"],
+  "sourcesContent": ["import './DataTableSelectionChip.css';\nexport var selectionChip = '_1rlvxpp4-3-7-0';\nexport var selectionChipWrapper = {condensed:'_1rlvxpp1-3-7-0 _1rlvxpp0-3-7-0','default':'_1rlvxpp2-3-7-0 _1rlvxpp0-3-7-0',comfortable:'_1rlvxpp3-3-7-0 _1rlvxpp0-3-7-0'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,uBAAuB,EAAC,WAAU,mCAAkC,WAAU,mCAAkC,aAAY,kCAAiC;",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.css

@@ -1,29 +1,29 @@
-._11d1m5j0-3-6-0 {
+._11d1m5j0-3-7-0 {
   cursor: grabbing;
   box-shadow: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
   background-color: var(--dt-colors-background-surface-default, #fff);
   z-index: 4;
   overflow: hidden;
 }
-._11d1m5j0-3-6-0:last-child {
+._11d1m5j0-3-7-0:last-child {
   border-bottom: 0px;
 }
-._11d1m5j1-3-6-0 {
+._11d1m5j1-3-7-0 {
   align-self: center;
   border-radius: var(--dt-borders-radius-field-default, 6px);
   padding: var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-4, 4px);
   transition: none;
 }
-._11d1m5j1-3-6-0:active {
+._11d1m5j1-3-7-0:active {
   background: transparent;
 }
-._11d1m5j1-3-6-0:hover {
+._11d1m5j1-3-7-0:hover {
   background: transparent;
   cursor: grab;
 }
-._11d1m5j0-3-6-0 ._11d1m5j1-3-6-0 {
+._11d1m5j0-3-7-0 ._11d1m5j1-3-7-0 {
   cursor: grabbing;
 }
-._11d1m5j2-3-6-0 {
+._11d1m5j2-3-7-0 {
   opacity: 0.2;
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.tsx"],
-  "sourcesContent": ["import {\n  type CollisionDetection,\n  DndContext as DragAndDropContext,\n  type DragEndEvent,\n  type DragOverEvent,\n  DragOverlay,\n  type DragStartEvent,\n  KeyboardSensor,\n  Modifier,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport { type Virtualizer } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport { type ReactNode, useCallback, useMemo, useRef, useState } from 'react';\n\nimport {\n  createColumnOrderSettingsCollisionDetection,\n  createRestrictToColumnsListAreaModifier,\n  DATA_TABLE_COLUMNS_LIST_ITEM_BOTTOM_BORDER,\n  DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT,\n  type DraggingColumnInfo,\n  getAllColumns,\n  getColumnById,\n  getDragHandleForColumn,\n  getDragIndexes,\n  getLeafColumnsForColumn,\n  hideChildColumns,\n  hideChildColumnsOnScroll,\n  resetAllColumnsStyles,\n  styleNonTargetColumns,\n  transformColumnsOnDragOver,\n} from './column-order-settings-dnd-utils.js';\nimport * as styles from './ColumnOrderSettingsDragAndDrop.sty.js';\nimport { devLog } from '../../../../../../core/utils/logging.js';\nimport type { Column } from '../../../../hooks/useTable/types.js';\nimport type { ColumnPinningState } from '../../../../tanstack-table-core-override/src/index.js';\n\n// Threshold for detecting sudden jumps caused by virtualizer scroll corrections\n// vs. gradual user/auto-scroll during drag.\nconst SCROLL_JUMP_THRESHOLD = DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT * 10;\n\n/**\n * Drag and drop context for ordering in the column settings modal.\n * @internal\n */\nexport function ColumnOrderSettingsDragAndDropContext({\n  children,\n  localColumnOrder,\n  updateLocalColumnOrder,\n  localColumnPinning,\n  itemVirtualizer,\n}: Readonly<{\n  children: ReactNode;\n  localColumnOrder: string[];\n  updateLocalColumnOrder: (newColumnOrder: string[]) => void;\n  localColumnPinning: ColumnPinningState;\n  itemVirtualizer: Virtualizer<HTMLDivElement, Element>;\n}>) {\n  const [dragOverlayContent, setDragOverlayContent] =\n    useState<HTMLElement | null>(null);\n  const [dragOverlaySize, setDragOverlaySize] = useState<{\n    width: number;\n    height: number;\n  }>({ width: 0, height: 0 });\n  const [draggingColumnInfo, setDraggingColumnInfo] =\n    useState<DraggingColumnInfo | null>(null);\n\n  const modalContentRef = useRef<HTMLDivElement | null>(null);\n  const scrollHandlerRef = useRef<(() => void) | null>(null);\n\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {}),\n  );\n\n  const columnsListCollisionDetection = useMemo<CollisionDetection>(\n    () =>\n      createColumnOrderSettingsCollisionDetection(\n        localColumnOrder,\n        localColumnPinning,\n        draggingColumnInfo,\n      ),\n    [draggingColumnInfo, localColumnOrder, localColumnPinning],\n  );\n\n  const restrictToColumnsListAreaModifier = useCallback<Modifier>(\n    (args) => {\n      return createRestrictToColumnsListAreaModifier(\n        itemVirtualizer.scrollElement as HTMLDivElement | null,\n      )(args);\n    },\n    [itemVirtualizer],\n  );\n\n  const resetDragging = (): void => {\n    // Remove scroll event listener\n    const scrollElement = itemVirtualizer.scrollElement;\n    if (scrollElement && scrollHandlerRef.current) {\n      scrollElement.removeEventListener('scroll', scrollHandlerRef.current);\n      scrollHandlerRef.current = null;\n    }\n\n    // Reset all transforms\n    if (modalContentRef.current) {\n      const allColumns = getAllColumns(modalContentRef.current);\n      resetAllColumnsStyles(allColumns);\n    }\n\n    modalContentRef.current = null;\n    setDraggingColumnInfo(null);\n    setDragOverlayContent(null);\n    setDragOverlaySize({ width: 0, height: 0 });\n  };\n\n  const resetDraggingAndFocusLastActive = (activeId: string): void => {\n    requestAnimationFrame(() => {\n      // wait for the next frame to ensure the columns list finished updating\n      getDragHandleForColumn(activeId, modalContentRef.current)?.focus();\n      resetDragging();\n    });\n  };\n\n  const handleOnDragStart = ({ active }: DragStartEvent): void => {\n    const activeLocalColumn = active.data.current?.column as Column<\n      unknown,\n      unknown\n    >;\n\n    if (!activeLocalColumn) {\n      return;\n    }\n\n    const scrollElement = itemVirtualizer.scrollElement as HTMLDivElement;\n    modalContentRef.current =\n      (scrollElement?.firstElementChild as HTMLDivElement) || scrollElement;\n\n    const localColumn = getColumnById(\n      modalContentRef.current,\n      activeLocalColumn.id,\n    );\n\n    if (!localColumn) {\n      devLog(\n        '[DataTable] Could not find column element in DOM',\n        activeLocalColumn.id,\n      );\n      return;\n    }\n\n    // Keep track of the dragged column\n    // This is necessary because the active column may get virtualized out of the DOM during drag\n    const columnInfo: DraggingColumnInfo = {\n      id: active.id as string,\n      index: active.data.current?.columnIndex,\n      column: activeLocalColumn,\n    };\n    setDraggingColumnInfo(columnInfo);\n\n    let lastScrollOffset =\n      itemVirtualizer.scrollOffset ?? scrollElement?.scrollTop ?? 0;\n\n    // Attach scroll event listener to handle virtualization during drag\n    const handleScroll = (): void => {\n      const innerContainer = modalContentRef.current;\n      if (!innerContainer || !columnInfo.column) {\n        return;\n      }\n\n      // Reapply disabled styles to non-target columns (including newly rendered ones)\n      styleNonTargetColumns(innerContainer, columnInfo.column.parent?.id);\n      // Reapply hidden styles to child columns of the dragged parent column\n      hideChildColumnsOnScroll(innerContainer);\n\n      const currentOffset = scrollElement.scrollTop;\n      const scrollDelta = Math.abs(currentOffset - lastScrollOffset);\n      if (scrollDelta >= SCROLL_JUMP_THRESHOLD) {\n        // Large sudden jump - virtualizer correction, prevent it\n        scrollElement.scrollTop = lastScrollOffset;\n        return;\n      }\n      lastScrollOffset = currentOffset;\n    };\n    scrollHandlerRef.current = handleScroll;\n    scrollElement?.addEventListener('scroll', handleScroll);\n\n    // Apply styling to non-target columns once at drag start\n    styleNonTargetColumns(\n      modalContentRef.current,\n      activeLocalColumn.parent?.id,\n    );\n\n    const dragOverlaySize = {\n      width: localColumn.clientWidth,\n      height: localColumn.clientHeight,\n    };\n\n    // Clone local column for drag overlay\n    const clonedElement = localColumn.cloneNode(true) as HTMLElement;\n    if (activeLocalColumn.columns.length === 0) {\n      setDragOverlayContent(clonedElement);\n    } else {\n      // for nested columns, create a container and append the cloned parent and child columns\n      // and use that container as the drag overlay content\n      const wrapper = document.createElement('div');\n      wrapper.appendChild(clonedElement);\n\n      const childColumnIds = getLeafColumnsForColumn(\n        activeLocalColumn,\n        localColumnOrder,\n      );\n\n      // Clone each child column FIRST (before hiding them)\n      for (const childColumnId of childColumnIds) {\n        const childColumn = getColumnById(\n          modalContentRef.current,\n          childColumnId,\n        );\n\n        if (childColumn) {\n          const clonedChild = childColumn.cloneNode(true) as HTMLElement;\n          wrapper.appendChild(clonedChild);\n\n          dragOverlaySize.height +=\n            childColumn.clientHeight +\n            DATA_TABLE_COLUMNS_LIST_ITEM_BOTTOM_BORDER;\n        }\n      }\n\n      // Now hide child columns in the list and track them for virtualization\n      // This must happen AFTER cloning so the clones don't have the isDragging class\n      hideChildColumns(modalContentRef.current, childColumnIds);\n\n      setDragOverlayContent(wrapper);\n    }\n    setDragOverlaySize(dragOverlaySize);\n  };\n\n  const handleOnDragOver = (event: DragOverEvent): void => {\n    transformColumnsOnDragOver(\n      modalContentRef.current,\n      event,\n      localColumnOrder,\n      dragOverlaySize.height,\n      draggingColumnInfo?.column,\n    );\n  };\n\n  const handleOnDragEnd = ({ over }: DragEndEvent): void => {\n    if (!draggingColumnInfo) {\n      devLog('[Table] On drag end: dragging column info is undefined');\n      resetDragging();\n      return;\n    }\n\n    const activeColumn = draggingColumnInfo.column;\n    const activeId = activeColumn.id;\n    if (over === undefined || over === null) {\n      devLog('[Table] On drag end: over info is undefined or null', over);\n      resetDraggingAndFocusLastActive(activeId);\n      return;\n    }\n\n    const overId = over.data.current?.columnId as string;\n    // column order did not change\n    if (overId === activeId) {\n      resetDraggingAndFocusLastActive(activeId);\n      return;\n    }\n\n    // Update the column order if dropped on a valid target\n    const { fromIndex, toIndex } = getDragIndexes(\n      localColumnOrder,\n      activeId,\n      overId,\n    );\n\n    const columnsToMove: string[] = [activeId];\n    if (activeColumn.columns.length > 0) {\n      // move all child columns if a parent column is moved\n      const childColumnIds = getLeafColumnsForColumn(\n        activeColumn,\n        localColumnOrder,\n      );\n      columnsToMove.push(...childColumnIds);\n    }\n\n    const directionOffset = fromIndex < toIndex ? 1 : -1;\n    const adjustedTargetIndex =\n      fromIndex < toIndex\n        ? Math.max(0, toIndex - columnsToMove.length + directionOffset)\n        : toIndex;\n\n    const newColumnOrder = [...localColumnOrder];\n    newColumnOrder.splice(fromIndex, columnsToMove.length);\n    newColumnOrder.splice(adjustedTargetIndex, 0, ...columnsToMove);\n    updateLocalColumnOrder(newColumnOrder);\n    resetDraggingAndFocusLastActive(activeId);\n  };\n\n  const onDragCancel = (): void => {\n    const activeId = draggingColumnInfo?.id;\n    if (activeId) {\n      resetDraggingAndFocusLastActive(activeId);\n    }\n  };\n\n  return (\n    <DragAndDropContext\n      // when the column order is updated, the DOM elements are re-rendered and the focus is lost\n      // therefore, we need to manually restore the focus to the last active drag handle\n      accessibility={{ restoreFocus: false }}\n      sensors={sensors}\n      collisionDetection={columnsListCollisionDetection}\n      modifiers={[restrictToColumnsListAreaModifier]}\n      onDragStart={handleOnDragStart}\n      onDragOver={handleOnDragOver}\n      onDragEnd={handleOnDragEnd}\n      onDragCancel={onDragCancel}\n    >\n      {children}\n      <DragOverlay\n        dropAnimation={null}\n        className={clsx(styles.columnDndOverlay)}\n        style={{\n          height: dragOverlaySize.height,\n          width: dragOverlaySize.width,\n        }}\n      >\n        <div\n          ref={(node) =>\n            dragOverlayContent && node?.appendChild(dragOverlayContent)\n          }\n        />\n      </DragOverlay>\n    </DragAndDropContext>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type CollisionDetection,\n  DndContext as DragAndDropContext,\n  type DragEndEvent,\n  type DragOverEvent,\n  DragOverlay,\n  type DragStartEvent,\n  KeyboardSensor,\n  Modifier,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport type {\n  ColumnPinningState,\n  Column,\n  RowData,\n  TableFeatures,\n} from '@tanstack/react-table';\nimport { type Virtualizer } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport { type ReactNode, useCallback, useMemo, useRef, useState } from 'react';\n\nimport {\n  createColumnOrderSettingsCollisionDetection,\n  createRestrictToColumnsListAreaModifier,\n  DATA_TABLE_COLUMNS_LIST_ITEM_BOTTOM_BORDER,\n  DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT,\n  type DraggingColumnInfo,\n  getAllColumns,\n  getColumnById,\n  getDragHandleForColumn,\n  getDragIndexes,\n  getLeafColumnsForColumn,\n  hideChildColumns,\n  hideChildColumnsOnScroll,\n  resetAllColumnsStyles,\n  styleNonTargetColumns,\n  transformColumnsOnDragOver,\n} from './column-order-settings-dnd-utils.js';\nimport * as styles from './ColumnOrderSettingsDragAndDrop.sty.js';\nimport { devLog } from '../../../../../../core/utils/logging.js';\n\n// Threshold for detecting sudden jumps caused by virtualizer scroll corrections\n// vs. gradual user/auto-scroll during drag.\nconst SCROLL_JUMP_THRESHOLD = DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT * 10;\n\n/**\n * Drag and drop context for ordering in the column settings modal.\n * @internal\n */\nexport function ColumnOrderSettingsDragAndDropContext<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>({\n  children,\n  localColumnOrder,\n  updateLocalColumnOrder,\n  localColumnPinning,\n  itemVirtualizer,\n}: Readonly<{\n  children: ReactNode;\n  localColumnOrder: string[];\n  updateLocalColumnOrder: (newColumnOrder: string[]) => void;\n  localColumnPinning: ColumnPinningState;\n  itemVirtualizer: Virtualizer<HTMLDivElement, Element>;\n}>) {\n  const [dragOverlayContent, setDragOverlayContent] =\n    useState<HTMLElement | null>(null);\n  const [dragOverlaySize, setDragOverlaySize] = useState<{\n    width: number;\n    height: number;\n  }>({ width: 0, height: 0 });\n  const [draggingColumnInfo, setDraggingColumnInfo] =\n    useState<DraggingColumnInfo<TFeatures, TData> | null>(null);\n\n  const modalContentRef = useRef<HTMLDivElement | null>(null);\n  const scrollHandlerRef = useRef<(() => void) | null>(null);\n\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {}),\n  );\n\n  const columnsListCollisionDetection = useMemo<CollisionDetection>(\n    () =>\n      createColumnOrderSettingsCollisionDetection(\n        localColumnOrder,\n        localColumnPinning,\n        draggingColumnInfo,\n      ),\n    [draggingColumnInfo, localColumnOrder, localColumnPinning],\n  );\n\n  const restrictToColumnsListAreaModifier = useCallback<Modifier>(\n    (args) => {\n      return createRestrictToColumnsListAreaModifier(\n        itemVirtualizer.scrollElement as HTMLDivElement | null,\n      )(args);\n    },\n    [itemVirtualizer],\n  );\n\n  const resetDragging = (): void => {\n    // Remove scroll event listener\n    const scrollElement = itemVirtualizer.scrollElement;\n    if (scrollElement && scrollHandlerRef.current) {\n      scrollElement.removeEventListener('scroll', scrollHandlerRef.current);\n      scrollHandlerRef.current = null;\n    }\n\n    // Reset all transforms\n    if (modalContentRef.current) {\n      const allColumns = getAllColumns(modalContentRef.current);\n      resetAllColumnsStyles(allColumns);\n    }\n\n    modalContentRef.current = null;\n    setDraggingColumnInfo(null);\n    setDragOverlayContent(null);\n    setDragOverlaySize({ width: 0, height: 0 });\n  };\n\n  const resetDraggingAndFocusLastActive = (activeId: string): void => {\n    requestAnimationFrame(() => {\n      // wait for the next frame to ensure the columns list finished updating\n      getDragHandleForColumn(activeId, modalContentRef.current)?.focus();\n      resetDragging();\n    });\n  };\n\n  const handleOnDragStart = ({ active }: DragStartEvent): void => {\n    const activeLocalColumn = active.data.current?.column as Column<\n      TFeatures,\n      TData\n    >;\n\n    if (!activeLocalColumn) {\n      return;\n    }\n\n    const scrollElement = itemVirtualizer.scrollElement as HTMLDivElement;\n    modalContentRef.current =\n      (scrollElement?.firstElementChild as HTMLDivElement) || scrollElement;\n\n    const localColumn = getColumnById(\n      modalContentRef.current,\n      activeLocalColumn.id,\n    );\n\n    if (!localColumn) {\n      devLog(\n        '[DataTable] Could not find column element in DOM',\n        activeLocalColumn.id,\n      );\n      return;\n    }\n\n    // Keep track of the dragged column\n    // This is necessary because the active column may get virtualized out of the DOM during drag\n    const columnInfo: DraggingColumnInfo<TFeatures, TData> = {\n      id: active.id as string,\n      index: active.data.current?.columnIndex,\n      column: activeLocalColumn,\n    };\n    setDraggingColumnInfo(columnInfo);\n\n    let lastScrollOffset =\n      itemVirtualizer.scrollOffset ?? scrollElement?.scrollTop ?? 0;\n\n    // Attach scroll event listener to handle virtualization during drag\n    const handleScroll = (): void => {\n      const innerContainer = modalContentRef.current;\n      if (!innerContainer || !columnInfo.column) {\n        return;\n      }\n\n      // Reapply disabled styles to non-target columns (including newly rendered ones)\n      styleNonTargetColumns(innerContainer, columnInfo.column.parent?.id);\n      // Reapply hidden styles to child columns of the dragged parent column\n      hideChildColumnsOnScroll(innerContainer);\n\n      const currentOffset = scrollElement.scrollTop;\n      const scrollDelta = Math.abs(currentOffset - lastScrollOffset);\n      if (scrollDelta >= SCROLL_JUMP_THRESHOLD) {\n        // Large sudden jump - virtualizer correction, prevent it\n        scrollElement.scrollTop = lastScrollOffset;\n        return;\n      }\n      lastScrollOffset = currentOffset;\n    };\n    scrollHandlerRef.current = handleScroll;\n    scrollElement?.addEventListener('scroll', handleScroll);\n\n    // Apply styling to non-target columns once at drag start\n    styleNonTargetColumns(\n      modalContentRef.current,\n      activeLocalColumn.parent?.id,\n    );\n\n    const dragOverlaySize = {\n      width: localColumn.clientWidth,\n      height: localColumn.clientHeight,\n    };\n\n    // Clone local column for drag overlay\n    const clonedElement = localColumn.cloneNode(true) as HTMLElement;\n    if (activeLocalColumn.columns.length === 0) {\n      setDragOverlayContent(clonedElement);\n    } else {\n      // for nested columns, create a container and append the cloned parent and child columns\n      // and use that container as the drag overlay content\n      const wrapper = document.createElement('div');\n      wrapper.appendChild(clonedElement);\n\n      const childColumnIds = getLeafColumnsForColumn(\n        activeLocalColumn,\n        localColumnOrder,\n      );\n\n      // Clone each child column FIRST (before hiding them)\n      for (const childColumnId of childColumnIds) {\n        const childColumn = getColumnById(\n          modalContentRef.current,\n          childColumnId,\n        );\n\n        if (childColumn) {\n          const clonedChild = childColumn.cloneNode(true) as HTMLElement;\n          wrapper.appendChild(clonedChild);\n\n          dragOverlaySize.height +=\n            childColumn.clientHeight +\n            DATA_TABLE_COLUMNS_LIST_ITEM_BOTTOM_BORDER;\n        }\n      }\n\n      // Now hide child columns in the list and track them for virtualization\n      // This must happen AFTER cloning so the clones don't have the isDragging class\n      hideChildColumns(modalContentRef.current, childColumnIds);\n\n      setDragOverlayContent(wrapper);\n    }\n    setDragOverlaySize(dragOverlaySize);\n  };\n\n  const handleOnDragOver = (event: DragOverEvent): void => {\n    transformColumnsOnDragOver(\n      modalContentRef.current,\n      event,\n      localColumnOrder,\n      dragOverlaySize.height,\n      draggingColumnInfo?.column,\n    );\n  };\n\n  const handleOnDragEnd = ({ over }: DragEndEvent): void => {\n    if (!draggingColumnInfo) {\n      devLog('[Table] On drag end: dragging column info is undefined');\n      resetDragging();\n      return;\n    }\n\n    const activeColumn = draggingColumnInfo.column;\n    const activeId = activeColumn.id;\n    if (over === undefined || over === null) {\n      devLog('[Table] On drag end: over info is undefined or null', over);\n      resetDraggingAndFocusLastActive(activeId);\n      return;\n    }\n\n    const overId = over.data.current?.columnId as string;\n    // column order did not change\n    if (overId === activeId) {\n      resetDraggingAndFocusLastActive(activeId);\n      return;\n    }\n\n    // Update the column order if dropped on a valid target\n    const { fromIndex, toIndex } = getDragIndexes(\n      localColumnOrder,\n      activeId,\n      overId,\n    );\n\n    const columnsToMove: string[] = [activeId];\n    if (activeColumn.columns.length > 0) {\n      // move all child columns if a parent column is moved\n      const childColumnIds = getLeafColumnsForColumn(\n        activeColumn,\n        localColumnOrder,\n      );\n      columnsToMove.push(...childColumnIds);\n    }\n\n    const directionOffset = fromIndex < toIndex ? 1 : -1;\n    const adjustedTargetIndex =\n      fromIndex < toIndex\n        ? Math.max(0, toIndex - columnsToMove.length + directionOffset)\n        : toIndex;\n\n    const newColumnOrder = [...localColumnOrder];\n    newColumnOrder.splice(fromIndex, columnsToMove.length);\n    newColumnOrder.splice(adjustedTargetIndex, 0, ...columnsToMove);\n    updateLocalColumnOrder(newColumnOrder);\n    resetDraggingAndFocusLastActive(activeId);\n  };\n\n  const onDragCancel = (): void => {\n    const activeId = draggingColumnInfo?.id;\n    if (activeId) {\n      resetDraggingAndFocusLastActive(activeId);\n    }\n  };\n\n  return (\n    <DragAndDropContext\n      // when the column order is updated, the DOM elements are re-rendered and the focus is lost\n      // therefore, we need to manually restore the focus to the last active drag handle\n      accessibility={{ restoreFocus: false }}\n      sensors={sensors}\n      collisionDetection={columnsListCollisionDetection}\n      modifiers={[restrictToColumnsListAreaModifier]}\n      onDragStart={handleOnDragStart}\n      onDragOver={handleOnDragOver}\n      onDragEnd={handleOnDragEnd}\n      onDragCancel={onDragCancel}\n    >\n      {children}\n      <DragOverlay\n        dropAnimation={null}\n        className={clsx(styles.columnDndOverlay)}\n        style={{\n          height: dragOverlaySize.height,\n          width: dragOverlaySize.width,\n        }}\n      >\n        <div\n          ref={(node) =>\n            dragOverlayContent && node?.appendChild(dragOverlayContent)\n          }\n        />\n      </DragOverlay>\n    </DragAndDropContext>\n  );\n}\n"],
+  "mappings": "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",
   "names": ["dragOverlaySize"]
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.sty.js

@@ -1,7 +1,7 @@
 import "./ColumnOrderSettingsDragAndDrop.css";
-var columnDndHandle = "_11d1m5j1-3-6-0";
-var columnDndOverlay = "_11d1m5j0-3-6-0";
-var disabledNonTargetLocalColumn = "_11d1m5j2-3-6-0";
+var columnDndHandle = "_11d1m5j1-3-7-0";
+var columnDndOverlay = "_11d1m5j0-3-7-0";
+var disabledNonTargetLocalColumn = "_11d1m5j2-3-7-0";
 export {
   columnDndHandle,
   columnDndOverlay,

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.css.ts"],
-  "sourcesContent": ["import './ColumnOrderSettingsDragAndDrop.css';\nexport var columnDndHandle = '_11d1m5j1-3-6-0';\nexport var columnDndOverlay = '_11d1m5j0-3-6-0';\nexport var disabledNonTargetLocalColumn = '_11d1m5j2-3-6-0';"],
+  "sourcesContent": ["import './ColumnOrderSettingsDragAndDrop.css';\nexport var columnDndHandle = '_11d1m5j1-3-7-0';\nexport var columnDndOverlay = '_11d1m5j0-3-7-0';\nexport var disabledNonTargetLocalColumn = '_11d1m5j2-3-7-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,mBAAmB;AACvB,IAAI,+BAA+B;",
   "names": []
 }