npm - @dynatrace/strato-components - Versions diffs - 3.3.3 → 3.5.0 - Mend

@dynatrace/strato-components 3.3.3 → 3.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6376) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableVirtualizationContainer.tsx"],
-  "sourcesContent": ["import { useVirtualizer, type Range } 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 {\n  DATA_TABLE_BORDER_WIDTH,\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 + DATA_TABLE_BORDER_WIDTH;\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 * DATA_TABLE_BORDER_WIDTH;\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 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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",
   "names": []
 }

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

@@ -1,6 +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-3-3", variantClassNames: { hasVisibleColumns: { true: "_ytdpsw1-3-3-3", false: "_ytdpsw2-3-3-3" }, loading: { true: "_ytdpsw3-3-3-3" }, contained: { true: "_ytdpsw4-3-3-3", false: "_ytdpsw5-3-3-3" }, rowSeparation: { horizontalDividers: "_ytdpsw6-3-3-3", zebraStripes: "_ytdpsw7-3-3-3", none: "_ytdpsw8-3-3-3" }, headers: { hidden: "_ytdpsw9-3-3-3", "default": "_ytdpswa-3-3-3" }, scrollDirection: { false: "_ytdpswb-3-3-3", x: "_ytdpswc-3-3-3", y: "_ytdpswd-3-3-3", xy: "_ytdpswe-3-3-3" } }, defaultVariants: { contained: true, rowSeparation: "horizontalDividers", headers: "default" }, compoundVariants: [[{ contained: true, scrollDirection: "xy" }, "_ytdpswf-3-3-3"]] });
+var virtualizationContainer = _7a468({ defaultClassName: "_ytdpsw0-3-5-0", variantClassNames: { hasVisibleColumns: { true: "_ytdpsw1-3-5-0", false: "_ytdpsw2-3-5-0" }, loading: { true: "_ytdpsw3-3-5-0" }, contained: { true: "_ytdpsw4-3-5-0", false: "_ytdpsw5-3-5-0" }, rowSeparation: { horizontalDividers: "_ytdpsw6-3-5-0", zebraStripes: "_ytdpsw7-3-5-0", none: "_ytdpsw8-3-5-0" }, headers: { hidden: "_ytdpsw9-3-5-0", "default": "_ytdpswa-3-5-0" }, scrollDirection: { false: "_ytdpswb-3-5-0", x: "_ytdpswc-3-5-0", y: "_ytdpswd-3-5-0", xy: "_ytdpswe-3-5-0" } }, defaultVariants: { contained: true, rowSeparation: "horizontalDividers", headers: "default" }, compoundVariants: [[{ contained: true, scrollDirection: "xy" }, "_ytdpswf-3-5-0"]] });
 export {
   virtualizationContainer
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/components/DataTableVirtualizationContainer.css.ts"],
-  "sourcesContent": ["import './DataTableVirtualizationContainer.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var virtualizationContainer = _7a468({defaultClassName:'_ytdpsw0-3-3-3',variantClassNames:{hasVisibleColumns:{true:'_ytdpsw1-3-3-3',false:'_ytdpsw2-3-3-3'},loading:{true:'_ytdpsw3-3-3-3'},contained:{true:'_ytdpsw4-3-3-3',false:'_ytdpsw5-3-3-3'},rowSeparation:{horizontalDividers:'_ytdpsw6-3-3-3',zebraStripes:'_ytdpsw7-3-3-3',none:'_ytdpsw8-3-3-3'},headers:{hidden:'_ytdpsw9-3-3-3','default':'_ytdpswa-3-3-3'},scrollDirection:{false:'_ytdpswb-3-3-3',x:'_ytdpswc-3-3-3',y:'_ytdpswd-3-3-3',xy:'_ytdpswe-3-3-3'}},defaultVariants:{contained:true,rowSeparation:'horizontalDividers',headers:'default'},compoundVariants:[[{contained:true,scrollDirection:'xy'},'_ytdpswf-3-3-3']]});"],
-  "mappings": "AAAA,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-5-0',variantClassNames:{hasVisibleColumns:{true:'_ytdpsw1-3-5-0',false:'_ytdpsw2-3-5-0'},loading:{true:'_ytdpsw3-3-5-0'},contained:{true:'_ytdpsw4-3-5-0',false:'_ytdpsw5-3-5-0'},rowSeparation:{horizontalDividers:'_ytdpsw6-3-5-0',zebraStripes:'_ytdpsw7-3-5-0',none:'_ytdpsw8-3-5-0'},headers:{hidden:'_ytdpsw9-3-5-0','default':'_ytdpswa-3-5-0'},scrollDirection:{false:'_ytdpswb-3-5-0',x:'_ytdpswc-3-5-0',y:'_ytdpswd-3-5-0',xy:'_ytdpswe-3-5-0'}},defaultVariants:{contained:true,rowSeparation:'horizontalDividers',headers:'default'},compoundVariants:[[{contained:true,scrollDirection:'xy'},'_ytdpswf-3-5-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;",
   "names": []
 }

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

@@ -1,22 +1,24 @@
-._1rlvxpp0-3-3-3 {
-  padding: 0 var(--dt-spacings-size-8, 8px);
+._1rlvxpp0-3-5-0 {
   align-items: flex-end;
   justify-content: flex-end;
 }
-._1rlvxpp1-3-3-3 {
+._1rlvxpp1-3-5-0 {
   padding: 0 var(--dt-spacings-size-2, 2px);
 }
-._1rlvxpp3-3-3-3 {
-  margin-left: var(--dt-spacings-size-6, 6px);
+._1rlvxpp2-3-5-0 {
+  padding: 0 var(--dt-spacings-size-8, 8px);
+}
+._1rlvxpp3-3-5-0 {
+  padding: 0 var(--dt-spacings-size-12, 12px);
 }
-._1rlvxpp4-3-3-3 {
+._1rlvxpp4-3-5-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);
   justify-content: center;
   align-items: center;
   background: var(--dt-colors-background-field-primary-accent, #474fcf);
-  color: var(--dt-colors-background-base-default, #f9f9fa);
+  color: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
   border-radius: var(--dt-spacings-size-4, 4px);
   font-size: var(--dt-typography-text-base-default-size, 14px);
 }

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

@@ -6,7 +6,7 @@ import * as styles from "./DataTableSelectionChip.sty.js";
 import { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from "../../../../core/utils/can-receive-default-text-format.js";
 import { Flex } from "../../../../layouts/flex/Flex.js";
 import { Text } from "../../../../typography/text/Text.js";
-import { DATA_TABLE_BORDER_WIDTH } from "../../constants.js";
+import { getDataTableBorderWidth } from "../../../utils/data-table-border-width.js";
 import { useDataTable } from "../../contexts/DataTableContext.js";
 import { dataTableMessages } from "../../messages.js";
 const DataTableSelectionChip = forwardRef(
@@ -26,7 +26,7 @@ const DataTableSelectionChip = forwardRef(
       {
         ref: forwardedRef,
         className: styles.selectionChipWrapper[rowDensity],
-        marginLeft: contained ? DATA_TABLE_BORDER_WIDTH : 0,
+        style: { marginLeft: contained ? getDataTableBorderWidth() : 0 },
         children: [
           /* @__PURE__ */ jsx(
             Flex,

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

@@ -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 { DATA_TABLE_BORDER_WIDTH } from '../../constants.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        marginLeft={contained ? DATA_TABLE_BORDER_WIDTH : 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,YAAY,YAAY,0BAA0B;AAAA,QAElD;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 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;",
   "names": []
 }

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

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

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

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

@@ -5,8 +5,8 @@ import { useIntl } from "react-intl";
 import { DragAllDirectionIcon } from "@dynatrace/strato-icons";
 import * as styles from "./ColumnOrderSettingsDragAndDrop.sty.js";
 import { Button } from "../../../../../../buttons/button/Button.js";
-import { useFocusContext as _useFocusContext } from "../../../../../../core/hooks/useFocusContext.js";
-import { focusRingCSS } from "../../../../../../core/styles/focusRing.sty.js";
+import { useModality } from "../../../../../../core/hooks/useModality.js";
+import { focusRing } from "../../../../../../core/styles/focusRing.sty.js";
 import { dataTableMessages } from "../../../../messages.js";
 const ColumnOrderDragHandle = ({
   columnKey,
@@ -14,7 +14,7 @@ const ColumnOrderDragHandle = ({
   isDraggingActive
 }) => {
   const intl = useIntl();
-  const { modality } = _useFocusContext();
+  const modality = useModality();
   const { attributes, listeners } = useSortable({ id: columnKey });
   const isKeyboardDragging = isDraggingActive && modality === "keyboard";
   const localColumnDragHandleLabel = intl.formatMessage(
@@ -31,7 +31,7 @@ const ColumnOrderDragHandle = ({
       "aria-label": localColumnDragHandleLabel,
       className: clsx(
         styles.columnDndHandle,
-        isKeyboardDragging && focusRingCSS({ minimal: false, color: "neutral" })
+        isKeyboardDragging && focusRing({ minimal: false, color: "neutral" })
       ),
       "data-dt-name": "ColumnSettingsDragAndDrop",
       children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(DragAllDirectionIcon, {}) })

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderDragHandle.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/ColumnOrderDragHandle.tsx"],
-  "sourcesContent": ["import { useSortable } from '@dnd-kit/sortable';\nimport clsx from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { DragAllDirectionIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './ColumnOrderSettingsDragAndDrop.sty.js';\nimport { Button } from '../../../../../../buttons/button/Button.js';\nimport { useFocusContext as _useFocusContext } from '../../../../../../core/hooks/useFocusContext.js';\nimport { focusRingCSS } from '../../../../../../core/styles/focusRing.sty.js';\nimport { dataTableMessages } from '../../../../messages.js';\n\n/**\n * A drag handle for columns in the column settings.\n * @internal\n */\nexport const ColumnOrderDragHandle = ({\n  columnKey,\n  columnId,\n  isDraggingActive,\n}: {\n  /**\n   * The unique key of the column.\n   */\n  columnKey: string;\n  /**\n   * The id of the column.\n   */\n  columnId: string;\n  /**\n   * Whether dragging is currently active.\n   */\n  isDraggingActive: boolean;\n}) => {\n  const intl = useIntl();\n  const { modality } = _useFocusContext();\n  const { attributes, listeners } = useSortable({ id: columnKey });\n\n  const isKeyboardDragging = isDraggingActive && modality === 'keyboard';\n  const localColumnDragHandleLabel = intl.formatMessage(\n    dataTableMessages.columnSettingsDragAndDropLabel,\n    { columnId: columnId },\n  );\n\n  return (\n    <Button\n      size=\"condensed\"\n      variant=\"default\"\n      {...attributes}\n      {...listeners}\n      aria-label={localColumnDragHandleLabel}\n      className={clsx(\n        styles.columnDndHandle,\n        isKeyboardDragging &&\n          focusRingCSS({ minimal: false, color: 'neutral' }),\n      )}\n      data-dt-name=\"ColumnSettingsDragAndDrop\"\n    >\n      <Button.Prefix>\n        <DragAllDirectionIcon />\n      </Button.Prefix>\n    </Button>\n  );\n};\n"],
-  "mappings": "AA2DQ;AA3DR,SAAS,mBAAmB;AAC5B,OAAO,UAAU;AACjB,SAAS,eAAe;AAExB,SAAS,4BAA4B;AAErC,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,mBAAmB,wBAAwB;AACpD,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAM3B,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACF,MAaM;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,SAAS,IAAI,iBAAiB;AACtC,QAAM,EAAE,YAAY,UAAU,IAAI,YAAY,EAAE,IAAI,UAAU,CAAC;AAE/D,QAAM,qBAAqB,oBAAoB,aAAa;AAC5D,QAAM,6BAA6B,KAAK;AAAA,IACtC,kBAAkB;AAAA,IAClB,EAAE,SAAmB;AAAA,EACvB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,cAAY;AAAA,MACZ,WAAW;AAAA,QACT,OAAO;AAAA,QACP,sBACE,aAAa,EAAE,SAAS,OAAO,OAAO,UAAU,CAAC;AAAA,MACrD;AAAA,MACA,gBAAa;AAAA,MAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,wBAAqB,GACxB;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { useSortable } from '@dnd-kit/sortable';\nimport clsx from 'clsx';\nimport { useIntl } from 'react-intl';\n\nimport { DragAllDirectionIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './ColumnOrderSettingsDragAndDrop.sty.js';\nimport { Button } from '../../../../../../buttons/button/Button.js';\nimport { useModality } from '../../../../../../core/hooks/useModality.js';\nimport { focusRing } from '../../../../../../core/styles/focusRing.sty.js';\nimport { dataTableMessages } from '../../../../messages.js';\n\n/**\n * A drag handle for columns in the column settings.\n * @internal\n */\nexport const ColumnOrderDragHandle = ({\n  columnKey,\n  columnId,\n  isDraggingActive,\n}: {\n  /**\n   * The unique key of the column.\n   */\n  columnKey: string;\n  /**\n   * The id of the column.\n   */\n  columnId: string;\n  /**\n   * Whether dragging is currently active.\n   */\n  isDraggingActive: boolean;\n}) => {\n  const intl = useIntl();\n  const modality = useModality();\n  const { attributes, listeners } = useSortable({ id: columnKey });\n\n  const isKeyboardDragging = isDraggingActive && modality === 'keyboard';\n  const localColumnDragHandleLabel = intl.formatMessage(\n    dataTableMessages.columnSettingsDragAndDropLabel,\n    { columnId: columnId },\n  );\n\n  return (\n    <Button\n      size=\"condensed\"\n      variant=\"default\"\n      {...attributes}\n      {...listeners}\n      aria-label={localColumnDragHandleLabel}\n      className={clsx(\n        styles.columnDndHandle,\n        isKeyboardDragging && focusRing({ minimal: false, color: 'neutral' }),\n      )}\n      data-dt-name=\"ColumnSettingsDragAndDrop\"\n    >\n      <Button.Prefix>\n        <DragAllDirectionIcon />\n      </Button.Prefix>\n    </Button>\n  );\n};\n"],
+  "mappings": "AA0DQ;AA1DR,SAAS,mBAAmB;AAC5B,OAAO,UAAU;AACjB,SAAS,eAAe;AAExB,SAAS,4BAA4B;AAErC,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAM3B,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACF,MAaM;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,YAAY,UAAU,IAAI,YAAY,EAAE,IAAI,UAAU,CAAC;AAE/D,QAAM,qBAAqB,oBAAoB,aAAa;AAC5D,QAAM,6BAA6B,KAAK;AAAA,IACtC,kBAAkB;AAAA,IAClB,EAAE,SAAmB;AAAA,EACvB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,cAAY;AAAA,MACZ,WAAW;AAAA,QACT,OAAO;AAAA,QACP,sBAAsB,UAAU,EAAE,SAAS,OAAO,OAAO,UAAU,CAAC;AAAA,MACtE;AAAA,MACA,gBAAa;AAAA,MAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,wBAAqB,GACxB;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -1,29 +1,29 @@
-._11d1m5j0-3-3-3 {
+._11d1m5j0-3-5-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-3-3:last-child {
+._11d1m5j0-3-5-0:last-child {
   border-bottom: 0px;
 }
-._11d1m5j1-3-3-3 {
+._11d1m5j1-3-5-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-3-3:active {
+._11d1m5j1-3-5-0:active {
   background: transparent;
 }
-._11d1m5j1-3-3-3:hover {
+._11d1m5j1-3-5-0:hover {
   background: transparent;
   cursor: grab;
 }
-._11d1m5j0-3-3-3 ._11d1m5j1-3-3-3 {
+._11d1m5j0-3-5-0 ._11d1m5j1-3-5-0 {
   cursor: grabbing;
 }
-._11d1m5j2-3-3-3 {
+._11d1m5j2-3-5-0 {
   opacity: 0.2;
 }

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

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

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

@@ -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-3-3';\nexport var columnDndOverlay = '_11d1m5j0-3-3-3';\nexport var disabledNonTargetLocalColumn = '_11d1m5j2-3-3-3';"],
+  "sourcesContent": ["import './ColumnOrderSettingsDragAndDrop.css';\nexport var columnDndHandle = '_11d1m5j1-3-5-0';\nexport var columnDndOverlay = '_11d1m5j0-3-5-0';\nexport var disabledNonTargetLocalColumn = '_11d1m5j2-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,mBAAmB;AACvB,IAAI,+BAA+B;",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.css CHANGED Viewed

@@ -1,19 +1,19 @@
-._14dz1ui0-3-3-3 {
+._14dz1ui0-3-5-0 {
   padding: var(--dt-spacings-size-4, 4px) 0;
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14dz1ui1-3-3-3 {
+._14dz1ui1-3-5-0 {
   overflow: auto;
   position: relative;
   margin-top: var(--dt-spacings-size-12, 12px);
 }
-._14dz1ui2-3-3-3 {
+._14dz1ui2-3-5-0 {
   max-height: calc(96vh - 200px - 56px);
 }
-._14dz1ui3-3-3-3 {
+._14dz1ui3-3-5-0 {
   max-height: calc(96vh - 200px);
 }
-._14dz1ui4-3-3-3 {
+._14dz1ui4-3-5-0 {
   width: 100%;
   position: relative;
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.sty.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import "./DataTableColumnsList.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var noItemsFound = "_14dz1ui0-3-3-3";
-var virtualizationInnerContainer = "_14dz1ui4-3-3-3";
-var virtualizationScrollContainer = _7a468({ defaultClassName: "_14dz1ui1-3-3-3", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-3-3", false: "_14dz1ui3-3-3-3" } }, defaultVariants: { hasFilter: false }, compoundVariants: [] });
+var noItemsFound = "_14dz1ui0-3-5-0";
+var virtualizationInnerContainer = "_14dz1ui4-3-5-0";
+var virtualizationScrollContainer = _7a468({ defaultClassName: "_14dz1ui1-3-5-0", variantClassNames: { hasFilter: { true: "_14dz1ui2-3-5-0", false: "_14dz1ui3-3-5-0" } }, defaultVariants: { hasFilter: false }, compoundVariants: [] });
 export {
   noItemsFound,
   virtualizationInnerContainer,

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.css.ts"],
-  "sourcesContent": ["import './DataTableColumnsList.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var noItemsFound = '_14dz1ui0-3-3-3';\nexport var virtualizationInnerContainer = '_14dz1ui4-3-3-3';\nexport var virtualizationScrollContainer = _7a468({defaultClassName:'_14dz1ui1-3-3-3',variantClassNames:{hasFilter:{true:'_14dz1ui2-3-3-3',false:'_14dz1ui3-3-3-3'}},defaultVariants:{hasFilter:false},compoundVariants:[]});"],
+  "sourcesContent": ["import './DataTableColumnsList.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var noItemsFound = '_14dz1ui0-3-5-0';\nexport var virtualizationInnerContainer = '_14dz1ui4-3-5-0';\nexport var virtualizationScrollContainer = _7a468({defaultClassName:'_14dz1ui1-3-5-0',variantClassNames:{hasFilter:{true:'_14dz1ui2-3-5-0',false:'_14dz1ui3-3-5-0'}},defaultVariants:{hasFilter:false},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe;AACnB,IAAI,+BAA+B;AACnC,IAAI,gCAAgC,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._13ypmcy0-3-3-3 {
+._13ypmcy0-3-5-0 {
   flex: 0 1 auto;
   word-break: break-all;
   padding-top: var(--dt-spacings-size-4, 4px);
@@ -7,21 +7,21 @@
   padding-left: var(--dt-spacings-size-8, 8px);
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy0-3-3-3[data-parentcolumnid] {
+._13ypmcy0-3-5-0[data-parentcolumnid] {
   padding-left: var(--dt-spacings-size-20, 20px);
 }
-._13ypmcy0-3-3-3:last-child, ._13ypmcy0-3-3-3:not([data-pinned-position="right"]):has(+ [data-pinned-position="right"]) {
+._13ypmcy0-3-5-0:last-child, ._13ypmcy0-3-5-0:not([data-pinned-position="right"]):has(+ [data-pinned-position="right"]) {
   border-bottom: none;
 }
-._13ypmcy0-3-3-3[data-pinned-position="left"]:not(:has(+ [data-pinned-position="left"])) {
+._13ypmcy0-3-5-0[data-pinned-position="left"]:not(:has(+ [data-pinned-position="left"])) {
   border-bottom: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy0-3-3-3[data-pinned-position="right"]:not([data-pinned-position="right"] + ._13ypmcy0-3-3-3, [data-pinned-position="left"] + ._13ypmcy0-3-3-3) {
+._13ypmcy0-3-5-0[data-pinned-position="right"]:not([data-pinned-position="right"] + ._13ypmcy0-3-5-0, [data-pinned-position="left"] + ._13ypmcy0-3-5-0) {
   border-top: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy1-3-3-3 {
+._13ypmcy1-3-5-0 {
   visibility: hidden;
 }
-._13ypmcy2-3-3-3 {
+._13ypmcy2-3-5-0 {
   padding: var(--dt-spacings-size-2, 2px) 0;
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.sty.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import "./DataTableColumnsListItem.css";
-var columnName = "_13ypmcy2-3-3-3";
-var columnsListItem = "_13ypmcy0-3-3-3";
-var dragging = "_13ypmcy1-3-3-3";
+var columnName = "_13ypmcy2-3-5-0";
+var columnsListItem = "_13ypmcy0-3-5-0";
+var dragging = "_13ypmcy1-3-5-0";
 export {
   columnName,
   columnsListItem,

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.css.ts"],
-  "sourcesContent": ["import './DataTableColumnsListItem.css';\nexport var columnName = '_13ypmcy2-3-3-3';\nexport var columnsListItem = '_13ypmcy0-3-3-3';\nexport var dragging = '_13ypmcy1-3-3-3';"],
+  "sourcesContent": ["import './DataTableColumnsListItem.css';\nexport var columnName = '_13ypmcy2-3-5-0';\nexport var columnsListItem = '_13ypmcy0-3-5-0';\nexport var dragging = '_13ypmcy1-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,kBAAkB;AACtB,IAAI,WAAW;",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableVisibilityFilterControls.css CHANGED Viewed

@@ -1,18 +1,18 @@
-._1rh6hs00-3-3-3 {
+._1rh6hs00-3-5-0 {
   flex: 0 1 auto;
   padding-left: var(--dt-spacings-size-8, 8px);
 }
-._1rh6hs01-3-3-3 {
+._1rh6hs01-3-5-0 {
   flex: 0 1 calc(50% - var(--dt-spacings-size-4, 4px));
   margin-left: auto;
 }
-._1rh6hs01-3-3-3._1rh6hs01-3-3-3 {
+._1rh6hs01-3-5-0._1rh6hs01-3-5-0 {
   min-width: unset;
 }
-._1rh6hs02-3-3-3 {
+._1rh6hs02-3-5-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._dmotjm0-3-3-3 div:has(> ._1rh6hs02-3-3-3) {
+._dmotjm0-3-5-0 div:has(> ._1rh6hs02-3-5-0) {
   padding-top: var(--dt-spacings-size-0, 0);
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableVisibilityFilterControls.sty.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import "../../../../../overlays/modal/Modal.css";
 import "./DataTableVisibilityFilterControls.css";
-var filterControls = "_1rh6hs02-3-3-3";
-var searchInput = "_1rh6hs01-3-3-3";
-var showHideAll = "_1rh6hs00-3-3-3";
+var filterControls = "_1rh6hs02-3-5-0";
+var searchInput = "_1rh6hs01-3-5-0";
+var showHideAll = "_1rh6hs00-3-5-0";
 export {
   filterControls,
   searchInput,

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableVisibilityFilterControls.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableVisibilityFilterControls.css.ts"],
-  "sourcesContent": ["import '../../../../../overlays/modal/Modal.css';\nimport './DataTableVisibilityFilterControls.css';\nexport var filterControls = '_1rh6hs02-3-3-3';\nexport var searchInput = '_1rh6hs01-3-3-3';\nexport var showHideAll = '_1rh6hs00-3-3-3';"],
+  "sourcesContent": ["import '../../../../../overlays/modal/Modal.css';\nimport './DataTableVisibilityFilterControls.css';\nexport var filterControls = '_1rh6hs02-3-5-0';\nexport var searchInput = '_1rh6hs01-3-5-0';\nexport var showHideAll = '_1rh6hs00-3-5-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,cAAc;AAClB,IAAI,cAAc;",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/DataTableToolbarMenu.js CHANGED Viewed

@@ -10,13 +10,18 @@ import { dataTableMessages } from "../../messages.js";
 const DataTableToolbarMenu = (props) => {
   const { hasDownloadData, downloadExcludedColumns, intents } = props;
   const [menuOpen, setMenuOpen] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
   const hasIntents = intents.length > 0;
   const triggerIcon = hasIntents ? /* @__PURE__ */ jsx(DotMenuIcon, {}) : /* @__PURE__ */ jsx(DownloadIcon, {});
   const Group = hasIntents ? Menu.Group : Fragment;
   const intl = useIntl();
-  const toolbarMenuLabel = intl.formatMessage(
-    hasIntents ? dataTableMessages.toolbarButtonLabel : dataTableMessages.downloadButtonLabel
-  );
+  let toolbarMenuMessage = dataTableMessages.downloadButtonLabel;
+  if (isDownloading) {
+    toolbarMenuMessage = dataTableMessages.downloadingButtonLabel;
+  } else if (hasIntents) {
+    toolbarMenuMessage = dataTableMessages.toolbarButtonLabel;
+  }
+  const toolbarMenuLabel = intl.formatMessage(toolbarMenuMessage);
   const simpleButtonRef = useRef(null);
   if (!hasDownloadData && !hasIntents) {
     return;
@@ -29,6 +34,7 @@ const DataTableToolbarMenu = (props) => {
         variant: "default",
         "aria-label": toolbarMenuLabel,
         onClick: () => setMenuOpen(true),
+        loading: isDownloading,
         children: /* @__PURE__ */ jsx(Button.Prefix, { children: triggerIcon })
       }
     ) });
@@ -37,12 +43,12 @@ const DataTableToolbarMenu = (props) => {
     intentsWithAppOrIntentId: intentsWithAppId,
     intentsWithoutAppOrIntentId: intentsWithoutAppId
   } = intents.reduce(
-    (acc, intentProps) => {
+    (acc, intentProps, idx) => {
       const hasAppOrIntentId = intentProps.options.recommendedAppId !== void 0 || intentProps.options.recommendedIntentId !== void 0;
       const intent = /* @__PURE__ */ jsxs(Menu.Intent, { ...intentProps, children: [
         intentProps.icon && /* @__PURE__ */ jsx(Menu.Prefix, { children: intentProps.icon }),
         intentProps.children
-      ] });
+      ] }, `intent-${idx}`);
       hasAppOrIntentId ? acc.intentsWithAppOrIntentId.push(intent) : acc.intentsWithoutAppOrIntentId.push(intent);
       return acc;
     },
@@ -60,10 +66,20 @@ const DataTableToolbarMenu = (props) => {
         }
         setMenuOpen(open);
       },
+      modal: false,
       children: [
         /* @__PURE__ */ jsx(Tooltip, { text: toolbarMenuLabel, children: /* @__PURE__ */ jsx(Menu.Trigger, { children: /* @__PURE__ */ jsx(Button, { variant: "default", "aria-label": toolbarMenuLabel, children: /* @__PURE__ */ jsx(Button.Prefix, { children: triggerIcon }) }) }) }),
         /* @__PURE__ */ jsxs(Menu.Content, { alignment: "end", children: [
-          hasDownloadData && /* @__PURE__ */ jsx(Group, { children: /* @__PURE__ */ jsx(DataTableDownloadData, { excludeColumns: downloadExcludedColumns }) }),
+          hasDownloadData && /* @__PURE__ */ jsx(Group, { children: /* @__PURE__ */ jsx(
+            DataTableDownloadData,
+            {
+              excludeColumns: downloadExcludedColumns,
+              hasIntents,
+              isDownloading,
+              onDownloadStart: () => setIsDownloading(true),
+              onDownloadEnd: () => setIsDownloading(false)
+            }
+          ) }),
           intentsWithAppId.length > 0 && /* @__PURE__ */ jsx(Group, { children: intentsWithAppId }),
           intentsWithoutAppId.length > 0 && /* @__PURE__ */ jsx(Group, { children: intentsWithoutAppId })
         ] })