@dynatrace/strato-components 3.8.0 → 3.9.1

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsList.tsx"],
-  "sourcesContent": ["import type {\n  ReactTable,\n  ColumnPinningPosition,\n  ColumnPinningState,\n  Column,\n  RowData,\n  TableFeatures,\n} from '@tanstack/react-table';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport { type JSX, useCallback, useMemo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type { ColumnListItem } from './column-settings-types.js';\nimport {\n  generateColumnLabelsMap,\n  getVisibilityCheckboxState,\n  groupColumns,\n  isParentColumnHideable,\n  processFilterValue,\n} from './column-settings-utils.js';\nimport { DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT } from './ColumnOrderSettings/column-order-settings-dnd-utils.js';\nimport { ColumnOrderSettingsDragAndDropContext } from './ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.js';\nimport * as styles from './DataTableColumnsList.sty.js';\nimport { columnName } from './DataTableColumnsListItem.sty.js';\nimport { DataTableColumnsListItem } from './DataTableColumnsListItem.js';\nimport { Grid } from '../../../../../layouts/grid/Grid.js';\nimport { Text } from '../../../../../typography/text/Text.js';\nimport { useDataTable } from '../../../contexts/DataTableContext.js';\nimport { getCanHide } from '../../../features/ColumnVisibility/ColumnVisibility.js';\nimport type { TDataTableFeatures } from '../../../features/types/features.types.js';\nimport { dataTableMessages } from '../../../messages.js';\n\ninterface DataTableColumnsListProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> {\n  /**\n   * Whether the visibility settings (checkboxes) are enabled.\n   */\n  visibilitySettings: boolean;\n  /**\n   * Whether the column order settings (drag and drop) are enabled.\n   */\n  columnOrderSettings: boolean;\n  /**\n   * Whether the column pinning settings (pin/unpin buttons) are enabled.\n   */\n  columnPinningSettings: boolean;\n  /**\n   * Current value of the filter input in the column settings modal.\n   */\n  activeFilterValue: string;\n  /**\n   * Current local column visibility state in the column settings modal.\n   */\n  localColumnVisibility: Record<string, boolean>;\n  /**\n   * Updates the local column visibility state in the column settings modal.\n   * @param column - the column to update.\n   * @param currentVisibility - the current visibility state of the column.\n   */\n  updateLocalColumnVisibility: (\n    column: Column<TFeatures, TData>,\n    currentVisibility: boolean | 'indeterminate',\n  ) => void;\n  /**\n   * Current local column order in the column settings modal.\n   */\n  localColumnOrder: string[];\n  /**\n   * Updates the local column order in the column settings modal.\n   * @param newColumnOrder - the new column order.\n   */\n  updateLocalColumnOrder: (newColumnOrder: string[]) => void;\n  /**\n   * Current local column pinning state in the column settings modal.\n   */\n  localColumnPinning: ColumnPinningState;\n  /**\n   * Updates the local column pinning state in the column settings modal.\n   * @param newState - the new column pinning state.\n   */\n  updateLocalColumnPinning: (newState: ColumnPinningState) => void;\n  /**\n   * Whether the filter bar is present in the modal above the list.\n   */\n  hasFilterBar: boolean;\n  /**\n   * Whether a warning or error message is shown in the modal footer.\n   */\n  hasMessage: boolean;\n}\n\n/**\n * Renders the ordered, filtered list of columns for the column settings modal.\n * @internal\n */\nexport function DataTableColumnsList<\n  TFeatures extends TDataTableFeatures,\n  TData extends RowData,\n>(\n  props: Readonly<DataTableColumnsListProps<TFeatures, TData>>,\n): JSX.Element | JSX.Element[] {\n  const {\n    visibilitySettings: showVisibilityCheckbox,\n    columnOrderSettings,\n    columnPinningSettings,\n    activeFilterValue,\n    localColumnVisibility,\n    updateLocalColumnVisibility,\n    localColumnOrder,\n    updateLocalColumnOrder,\n    localColumnPinning,\n    updateLocalColumnPinning,\n    hasFilterBar,\n    hasMessage,\n  } = props;\n  const table = useDataTable();\n  const intl = useIntl();\n  const parentRef = useRef<HTMLDivElement | null>(null);\n\n  const allLeafColumnsWithoutBuiltin = table.getAllLeafColumnsWithoutBuiltin();\n  const columnsById = useMemo(\n    () => new Map(allLeafColumnsWithoutBuiltin.map((col) => [col.id, col])),\n    [allLeafColumnsWithoutBuiltin],\n  );\n\n  // Memoize column labels to avoid repeated getColumnLabel calls during filtering\n  const columnLabelsById = useMemo(\n    () => generateColumnLabelsMap(allLeafColumnsWithoutBuiltin),\n    [allLeafColumnsWithoutBuiltin],\n  );\n\n  // Pre-process filter value to lowercase words once\n  const activeFilterWords = useMemo(\n    () => processFilterValue(activeFilterValue),\n    [activeFilterValue],\n  );\n\n  // order the columns using the local column order\n  const compareColumns = useCallback(\n    (a: Column<TFeatures, TData>, b: Column<TFeatures, TData>) => {\n      const idChildColumnA = a.columns.at(0)?.id;\n      const idChildColumnB = b.columns.at(0)?.id;\n      const isBChildOfA = !!a.columns.find((childCol) => childCol.id === b.id);\n      const isAChildOfB = !!b.columns.find((childCol) => childCol.id === a.id);\n\n      if (isBChildOfA) {\n        return -1;\n      } else if (isAChildOfB) {\n        return 1;\n      }\n\n      return (\n        localColumnOrder.indexOf(idChildColumnA ?? a.id) -\n        localColumnOrder.indexOf(idChildColumnB ?? b.id)\n      );\n    },\n    [localColumnOrder],\n  );\n\n  // filter the flat columns using the active filter value specified in the search bar\n  const filterColumns = useCallback(\n    (\n      column: ColumnListItem<TFeatures, TData>,\n      _: number,\n      columnSection: ColumnListItem<TFeatures, TData>[],\n    ): boolean => {\n      // Early return if no filter\n      if (activeFilterWords.length === 0) {\n        return true;\n      }\n\n      // Helper function to check if a column matches the filter words\n      const matchesFilter = (columnId: string): boolean => {\n        const columnLabel = columnLabelsById.get(columnId) ?? '';\n        return activeFilterWords.every((word) => columnLabel.includes(word));\n      };\n\n      // a column always matches on its own label, regardless of nesting\n      if (matchesFilter(column.id)) {\n        return true;\n      }\n\n      const childColumns = column.columns;\n      if (childColumns.length === 0) {\n        // leaf column: also match its parent group label\n        // so the children stay visible when the parent group name is searched.\n        return column.parent !== undefined && matchesFilter(column.parent.id);\n      }\n\n      // parent (grouped) column: match any of its children\n      // within the current (un)pinned section.\n      return childColumns\n        .filter((child) => columnSection.find((col) => col.id === child.id))\n        .some((childColumn) => matchesFilter(childColumn.id));\n    },\n    [activeFilterWords, columnLabelsById],\n  );\n\n  const mapToListItem = (\n    col: Column<TFeatures, TData>,\n    idx: number,\n    pinnedPosition: ColumnPinningPosition,\n  ): ColumnListItem<TFeatures, TData> => ({\n    ...col,\n    key: `${col.id}_${idx}_${pinnedPosition}`, // unique React key; parent columns may appear multiple times in list\n    pinned: pinnedPosition,\n  });\n\n  const orderedLeftFlatColumns: ColumnListItem<TFeatures, TData>[] =\n    useMemo(() => {\n      // map column IDs to columns\n      const localColumnsPinned =\n        localColumnPinning.left\n          ?.map((id) => columnsById.get(id))\n          .filter((column) => !!column) ?? [];\n\n      // group nested columns\n      const groupedColumns = groupColumns(localColumnsPinned);\n\n      // add unique key\n      return groupedColumns.map((col, idx) => mapToListItem(col, idx, 'left'));\n    }, [columnsById, localColumnPinning.left]);\n\n  const orderedCenterFlatColumns: ColumnListItem<TFeatures, TData>[] =\n    useMemo(() => {\n      // find unpinned columns\n      const localColumnsUnpinned = allLeafColumnsWithoutBuiltin.filter(\n        (column) =>\n          !localColumnPinning.left?.includes(column.id) &&\n          !localColumnPinning.right?.includes(column.id),\n      );\n\n      // group nested columns\n      const groupedColumns = groupColumns(localColumnsUnpinned);\n\n      // order columns and add unique key\n      return groupedColumns\n        .toSorted(compareColumns)\n        .map((col, idx) => mapToListItem(col, idx, false));\n    }, [\n      allLeafColumnsWithoutBuiltin,\n      compareColumns,\n      localColumnPinning.left,\n      localColumnPinning.right,\n    ]);\n\n  const orderedRightFlatColumns: ColumnListItem<TFeatures, TData>[] =\n    useMemo(() => {\n      // map column IDs to columns\n      const localColumnsPinned =\n        localColumnPinning.right\n          ?.map((id) => columnsById.get(id))\n          .filter((column) => !!column) ?? [];\n\n      // group nested columns\n      const groupedColumns = groupColumns(localColumnsPinned);\n\n      // add unique key\n      return groupedColumns.map((col, idx) => mapToListItem(col, idx, 'right'));\n    }, [columnsById, localColumnPinning.right]);\n\n  const orderedFlatColumns = {\n    left: orderedLeftFlatColumns,\n    center: orderedCenterFlatColumns,\n    right: orderedRightFlatColumns,\n  };\n\n  const filteredColumns = useMemo(\n    () => [\n      ...orderedLeftFlatColumns.filter(filterColumns),\n      ...orderedCenterFlatColumns.filter(filterColumns),\n      ...orderedRightFlatColumns.filter(filterColumns),\n    ],\n    [\n      filterColumns,\n      orderedCenterFlatColumns,\n      orderedLeftFlatColumns,\n      orderedRightFlatColumns,\n    ],\n  );\n\n  const getItemKey = useCallback(\n    (index: number) => filteredColumns[index].key,\n    [filteredColumns],\n  );\n\n  const columnVirtualizer = useVirtualizer({\n    count: filteredColumns.length,\n    overscan: 5,\n    getScrollElement: () => parentRef.current,\n    getItemKey,\n    // Approximate height of a column list item\n    estimateSize: () => DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT,\n    measureElement: (element) => {\n      if (!element || !(element instanceof HTMLElement)) {\n        return DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT;\n      }\n\n      const labelElement = element.querySelector(`.${columnName}`);\n      if (!labelElement) {\n        return DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT;\n      }\n\n      const computedStyle = getComputedStyle(element);\n      const borderTop = parseFloat(computedStyle.borderTopWidth);\n      const borderBottom = parseFloat(computedStyle.borderBottomWidth);\n\n      return (\n        labelElement.getBoundingClientRect().height +\n        2 * 4 + // padding top and bottom\n        borderTop +\n        borderBottom\n      );\n    },\n  });\n\n  const virtualItems = columnVirtualizer.getVirtualItems();\n\n  // fallback message if no columns match the filter\n  if (filteredColumns.length === 0) {\n    return (\n      <Text className={styles.noItemsFound}>\n        {intl.formatMessage(dataTableMessages.noItemsFound)}\n      </Text>\n    );\n  }\n\n  const showColumnPinningButton =\n    !!table.optionsStore.state.enableColumnPinning && columnPinningSettings;\n  const canOrder =\n    !!table.optionsStore.state.enableColumnOrdering &&\n    columnOrderSettings &&\n    activeFilterValue.length === 0;\n\n  const columnListItems = virtualItems.map((virtualItem) => {\n    const column = filteredColumns[virtualItem.index];\n    const columnKey = column.key;\n    const canHide = getCanHide<TFeatures, TData>(\n      // Need to cast this one here in order to make sure that it allows\n      // instanciating with the same Subtype of RowData\n      table as unknown as ReactTable<TFeatures, TData>,\n      column,\n      isParentColumnHideable,\n    );\n    const visibilityCheckboxState = getVisibilityCheckboxState(\n      localColumnVisibility,\n      column,\n    );\n    const showColumnOrderDragHandle = canOrder && column.pinned === false;\n\n    return (\n      <DataTableColumnsListItem\n        key={columnKey}\n        column={column}\n        columnIndex={localColumnOrder.indexOf(column.id)}\n        orderedFlatColumns={orderedFlatColumns}\n        showVisibilityCheckbox={showVisibilityCheckbox}\n        enableVisibilityCheckbox={canHide}\n        currentVisibilityState={visibilityCheckboxState}\n        onVisibilityChange={updateLocalColumnVisibility}\n        showColumnOrderDragHandle={showColumnOrderDragHandle}\n        showColumnPinningMenu={showColumnPinningButton}\n        localColumnPinning={localColumnPinning}\n        updateLocalColumnPinning={updateLocalColumnPinning}\n        virtualIndex={virtualItem.index}\n        measureElement={columnVirtualizer.measureElement}\n      />\n    );\n  });\n\n  const columnList = (\n    <div\n      ref={parentRef}\n      className={clsx(\n        'strato-table-settings-virtualization-container',\n        styles.virtualizationScrollContainer({\n          hasFilter: hasFilterBar,\n          hasMessage,\n        }),\n      )}\n    >\n      <Grid\n        gridTemplateColumns=\"1fr\"\n        padding={0}\n        gap={0}\n        className={clsx(styles.virtualizationInnerContainer)}\n        gridTemplateRows={columnVirtualizer.measurementsCache\n          .map((el) => `${el.size}px`)\n          .join(' ')}\n        // add 1px to prevent unwanted scrollbar during drag and drop\n        height={columnVirtualizer.getTotalSize() + 1}\n      >\n        {columnListItems}\n      </Grid>\n    </div>\n  );\n\n  return canOrder ? (\n    <ColumnOrderSettingsDragAndDropContext\n      localColumnOrder={localColumnOrder}\n      updateLocalColumnOrder={updateLocalColumnOrder}\n      localColumnPinning={localColumnPinning}\n      itemVirtualizer={columnVirtualizer}\n    >\n      {columnList}\n    </ColumnOrderSettingsDragAndDropContext>\n  ) : (\n    columnList\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type {\n  ReactTable,\n  ColumnPinningPosition,\n  ColumnPinningState,\n  Column,\n  RowData,\n  TableFeatures,\n} from '@tanstack/react-table';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport { type JSX, useCallback, useMemo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type {\n  ColumnListItem,\n  ColumnSettingsListItem,\n} from './column-settings-types.js';\nimport {\n  generateColumnLabelsMap,\n  getVisibilityCheckboxState,\n  groupColumns,\n  isParentColumnHideable,\n  processFilterValue,\n} from './column-settings-utils.js';\nimport { DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT } from './ColumnOrderSettings/column-order-settings-dnd-utils.js';\nimport { ColumnOrderSettingsDragAndDropContext } from './ColumnOrderSettings/ColumnOrderSettingsDragAndDrop.js';\nimport * as styles from './DataTableColumnsList.sty.js';\nimport { columnName } from './DataTableColumnsListItem.sty.js';\nimport { DataTableColumnsListItem } from './DataTableColumnsListItem.js';\nimport { DataTableColumnsSectionHeader } from './DataTableColumnsSectionHeader.js';\nimport { Grid } from '../../../../../layouts/grid/Grid.js';\nimport { Text } from '../../../../../typography/text/Text.js';\nimport { useDataTable } from '../../../contexts/DataTableContext.js';\nimport { getCanHide } from '../../../features/ColumnVisibility/ColumnVisibility.js';\nimport type { TDataTableFeatures } from '../../../features/types/features.types.js';\nimport { dataTableMessages } from '../../../messages.js';\n\ninterface DataTableColumnsListProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> {\n  /**\n   * Whether the visibility settings (toggles) are enabled.\n   */\n  visibilitySettings: boolean;\n  /**\n   * Whether the column order settings (drag and drop) are enabled.\n   */\n  columnOrderSettings: boolean;\n  /**\n   * Whether the column pinning settings (pin/unpin buttons) are enabled.\n   */\n  columnPinningSettings: boolean;\n  /**\n   * Current value of the filter input in the column settings modal.\n   */\n  activeFilterValue: string;\n  /**\n   * Current local column visibility state in the column settings modal.\n   */\n  localColumnVisibility: Record<string, boolean>;\n  /**\n   * Updates the local column visibility state in the column settings modal.\n   * @param column - the column to update.\n   * @param currentVisibility - the current visibility state of the column.\n   */\n  updateLocalColumnVisibility: (\n    column: Column<TFeatures, TData>,\n    currentVisibility: boolean | 'indeterminate',\n  ) => void;\n  /**\n   * Current local column order in the column settings modal.\n   */\n  localColumnOrder: string[];\n  /**\n   * Updates the local column order in the column settings modal.\n   * @param newColumnOrder - the new column order.\n   */\n  updateLocalColumnOrder: (newColumnOrder: string[]) => void;\n  /**\n   * Current local column pinning state in the column settings modal.\n   */\n  localColumnPinning: ColumnPinningState;\n  /**\n   * Updates the local column pinning state in the column settings modal.\n   * @param newState - the new column pinning state.\n   */\n  updateLocalColumnPinning: (newState: ColumnPinningState) => void;\n  /**\n   * Whether the filter bar is present in the modal above the list.\n   */\n  hasFilterBar: boolean;\n  /**\n   * Whether a warning or error message is shown in the modal footer.\n   */\n  hasMessage: boolean;\n}\n\n/**\n * Renders the ordered, filtered list of columns for the column settings modal.\n * @internal\n */\nexport function DataTableColumnsList<\n  TFeatures extends TDataTableFeatures,\n  TData extends RowData,\n>(\n  props: Readonly<DataTableColumnsListProps<TFeatures, TData>>,\n): JSX.Element | JSX.Element[] {\n  const {\n    visibilitySettings: showVisibilityToggle,\n    columnOrderSettings,\n    columnPinningSettings,\n    activeFilterValue,\n    localColumnVisibility,\n    updateLocalColumnVisibility,\n    localColumnOrder,\n    updateLocalColumnOrder,\n    localColumnPinning,\n    updateLocalColumnPinning,\n    hasFilterBar,\n    hasMessage,\n  } = props;\n  const table = useDataTable();\n  const intl = useIntl();\n  const parentRef = useRef<HTMLDivElement | null>(null);\n\n  const allLeafColumnsWithoutBuiltin = table.getAllLeafColumnsWithoutBuiltin();\n  const columnsById = useMemo(\n    () => new Map(allLeafColumnsWithoutBuiltin.map((col) => [col.id, col])),\n    [allLeafColumnsWithoutBuiltin],\n  );\n\n  // Memoize column labels to avoid repeated getColumnLabel calls during filtering\n  const columnLabelsById = useMemo(\n    () => generateColumnLabelsMap(allLeafColumnsWithoutBuiltin),\n    [allLeafColumnsWithoutBuiltin],\n  );\n\n  // Pre-process filter value to lowercase words once\n  const activeFilterWords = useMemo(\n    () => processFilterValue(activeFilterValue),\n    [activeFilterValue],\n  );\n\n  // order the columns using the local column order\n  const compareColumns = useCallback(\n    (a: Column<TFeatures, TData>, b: Column<TFeatures, TData>) => {\n      const idChildColumnA = a.columns.at(0)?.id;\n      const idChildColumnB = b.columns.at(0)?.id;\n      const isBChildOfA = !!a.columns.find((childCol) => childCol.id === b.id);\n      const isAChildOfB = !!b.columns.find((childCol) => childCol.id === a.id);\n\n      if (isBChildOfA) {\n        return -1;\n      } else if (isAChildOfB) {\n        return 1;\n      }\n\n      return (\n        localColumnOrder.indexOf(idChildColumnA ?? a.id) -\n        localColumnOrder.indexOf(idChildColumnB ?? b.id)\n      );\n    },\n    [localColumnOrder],\n  );\n\n  // filter the flat columns using the active filter value specified in the search bar\n  const filterColumns = useCallback(\n    (\n      column: ColumnListItem<TFeatures, TData>,\n      _: number,\n      columnSection: ColumnListItem<TFeatures, TData>[],\n    ): boolean => {\n      // Early return if no filter\n      if (activeFilterWords.length === 0) {\n        return true;\n      }\n\n      // Helper function to check if a column matches the filter words\n      const matchesFilter = (columnId: string): boolean => {\n        const columnLabel = columnLabelsById.get(columnId) ?? '';\n        return activeFilterWords.every((word) => columnLabel.includes(word));\n      };\n\n      // a column always matches on its own label, regardless of nesting\n      if (matchesFilter(column.id)) {\n        return true;\n      }\n\n      const childColumns = column.columns;\n      if (childColumns.length === 0) {\n        // leaf column: also match its parent group label\n        // so the children stay visible when the parent group name is searched.\n        return column.parent !== undefined && matchesFilter(column.parent.id);\n      }\n\n      // parent (grouped) column: match any of its children\n      // within the current (un)pinned section.\n      return childColumns\n        .filter((child) => columnSection.find((col) => col.id === child.id))\n        .some((childColumn) => matchesFilter(childColumn.id));\n    },\n    [activeFilterWords, columnLabelsById],\n  );\n\n  const mapToListItem = (\n    col: Column<TFeatures, TData>,\n    idx: number,\n    pinnedPosition: ColumnPinningPosition,\n  ): ColumnListItem<TFeatures, TData> & { itemType: 'column' } => ({\n    ...col,\n    key: `${col.id}_${idx}_${pinnedPosition}`, // unique React key; parent columns may appear multiple times in list\n    pinned: pinnedPosition,\n    itemType: 'column',\n  });\n\n  const orderedLeftFlatColumns: ColumnListItem<TFeatures, TData>[] =\n    useMemo(() => {\n      // map column IDs to columns\n      const localColumnsPinned =\n        localColumnPinning.left\n          ?.map((id) => columnsById.get(id))\n          .filter((column) => !!column) ?? [];\n\n      // group nested columns\n      const groupedColumns = groupColumns(localColumnsPinned);\n\n      // add unique key\n      return groupedColumns.map((col, idx) => mapToListItem(col, idx, 'left'));\n    }, [columnsById, localColumnPinning.left]);\n\n  const orderedCenterFlatColumns: ColumnListItem<TFeatures, TData>[] =\n    useMemo(() => {\n      // find unpinned columns\n      const localColumnsUnpinned = allLeafColumnsWithoutBuiltin.filter(\n        (column) =>\n          !localColumnPinning.left?.includes(column.id) &&\n          !localColumnPinning.right?.includes(column.id),\n      );\n\n      // group nested columns\n      const groupedColumns = groupColumns(localColumnsUnpinned);\n\n      // order columns and add unique key\n      return groupedColumns\n        .toSorted(compareColumns)\n        .map((col, idx) => mapToListItem(col, idx, false));\n    }, [\n      allLeafColumnsWithoutBuiltin,\n      compareColumns,\n      localColumnPinning.left,\n      localColumnPinning.right,\n    ]);\n\n  const orderedRightFlatColumns: ColumnListItem<TFeatures, TData>[] =\n    useMemo(() => {\n      // map column IDs to columns\n      const localColumnsPinned =\n        localColumnPinning.right\n          ?.map((id) => columnsById.get(id))\n          .filter((column) => !!column) ?? [];\n\n      // group nested columns\n      const groupedColumns = groupColumns(localColumnsPinned);\n\n      // add unique key\n      return groupedColumns.map((col, idx) => mapToListItem(col, idx, 'right'));\n    }, [columnsById, localColumnPinning.right]);\n\n  const orderedFlatColumns = {\n    left: orderedLeftFlatColumns,\n    center: orderedCenterFlatColumns,\n    right: orderedRightFlatColumns,\n  };\n\n  const showColumnPinningButton =\n    !!table.optionsStore.state.enableColumnPinning && columnPinningSettings;\n\n  // Section headers are only meaningful when pinning is available and at least\n  // one column is actually pinned; otherwise the list is a single ungrouped section.\n  const showSectionHeaders =\n    showColumnPinningButton &&\n    (orderedLeftFlatColumns.length > 0 || orderedRightFlatColumns.length > 0);\n\n  // Flat, virtualized list of items: each section's columns, optionally preceded\n  // by a section header. Empty sections (e.g. filtered out) are skipped.\n  const listItems = useMemo<ColumnSettingsListItem<TFeatures, TData>[]>(() => {\n    const sections: {\n      position: ColumnPinningPosition;\n      columns: ColumnListItem<TFeatures, TData>[];\n    }[] = [\n      {\n        position: 'left',\n        columns: orderedLeftFlatColumns.filter(filterColumns),\n      },\n      {\n        position: 'right',\n        columns: orderedRightFlatColumns.filter(filterColumns),\n      },\n      {\n        position: false, // = center\n        columns: orderedCenterFlatColumns.filter(filterColumns),\n      },\n    ];\n\n    const items: ColumnSettingsListItem<TFeatures, TData>[] = [];\n    for (const section of sections) {\n      if (section.columns.length === 0) {\n        continue;\n      }\n      if (showSectionHeaders) {\n        items.push({\n          itemType: 'sectionHeader',\n          position: section.position,\n          key: `__section_header_${section.position}`,\n        });\n      }\n      items.push(\n        ...(section.columns as ColumnSettingsListItem<TFeatures, TData>[]),\n      );\n    }\n    return items;\n  }, [\n    filterColumns,\n    orderedCenterFlatColumns,\n    orderedLeftFlatColumns,\n    orderedRightFlatColumns,\n    showSectionHeaders,\n  ]);\n\n  const getItemKey = useCallback(\n    (index: number) => listItems[index].key,\n    [listItems],\n  );\n\n  const columnVirtualizer = useVirtualizer({\n    count: listItems.length,\n    overscan: 5,\n    getScrollElement: () => parentRef.current,\n    getItemKey,\n    // Approximate height of a column list item\n    estimateSize: () => DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT,\n    measureElement: (element) => {\n      if (!element || !(element instanceof HTMLElement)) {\n        return DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT;\n      }\n\n      const labelElement = element.querySelector(`.${columnName}`);\n      if (!labelElement) {\n        // section headers (and any non-column items) are measured by their own height\n        return (\n          element.getBoundingClientRect().height ||\n          DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT\n        );\n      }\n\n      const computedStyle = getComputedStyle(element);\n      const borderTop = parseFloat(computedStyle.borderTopWidth);\n      const borderBottom = parseFloat(computedStyle.borderBottomWidth);\n\n      return (\n        labelElement.getBoundingClientRect().height +\n        2 * 4 + // padding top and bottom\n        borderTop +\n        borderBottom\n      );\n    },\n  });\n\n  const virtualItems = columnVirtualizer.getVirtualItems();\n\n  // fallback message if no columns match the filter\n  if (listItems.length === 0) {\n    return (\n      <Text className={styles.noItemsFound}>\n        {intl.formatMessage(dataTableMessages.noItemsFound)}\n      </Text>\n    );\n  }\n\n  const canOrder =\n    !!table.optionsStore.state.enableColumnOrdering &&\n    columnOrderSettings &&\n    activeFilterValue.length === 0;\n\n  const columnListItems = virtualItems.map((virtualItem) => {\n    const column = listItems[virtualItem.index];\n\n    if (column.itemType === 'sectionHeader') {\n      return (\n        <DataTableColumnsSectionHeader\n          key={column.key}\n          position={column.position}\n          virtualIndex={virtualItem.index}\n          measureElement={columnVirtualizer.measureElement}\n        />\n      );\n    }\n\n    const columnKey = column.key;\n    const nextItem = listItems[virtualItem.index + 1];\n    const isLastInSection =\n      nextItem === undefined || nextItem.itemType === 'sectionHeader';\n    const canHide = getCanHide<TFeatures, TData>(\n      // Need to cast this one here in order to make sure that it allows\n      // instanciating with the same Subtype of RowData\n      table as unknown as ReactTable<TFeatures, TData>,\n      column,\n      isParentColumnHideable,\n    );\n    const visibilityCheckboxState = getVisibilityCheckboxState(\n      localColumnVisibility,\n      column,\n    );\n    const showColumnOrderDragHandle = canOrder && column.pinned === false;\n\n    return (\n      <DataTableColumnsListItem\n        key={columnKey}\n        column={column}\n        columnIndex={localColumnOrder.indexOf(column.id)}\n        orderedFlatColumns={orderedFlatColumns}\n        showVisibilityToggle={showVisibilityToggle}\n        enableVisibilityToggle={canHide}\n        currentVisibilityState={visibilityCheckboxState}\n        onVisibilityChange={updateLocalColumnVisibility}\n        showColumnOrderDragHandle={showColumnOrderDragHandle}\n        showColumnPinningMenu={showColumnPinningButton}\n        localColumnPinning={localColumnPinning}\n        updateLocalColumnPinning={updateLocalColumnPinning}\n        isLastInSection={isLastInSection}\n        virtualIndex={virtualItem.index}\n        measureElement={columnVirtualizer.measureElement}\n      />\n    );\n  });\n\n  const columnList = (\n    <div\n      ref={parentRef}\n      className={clsx(\n        'strato-table-settings-virtualization-container',\n        styles.virtualizationScrollContainer({\n          hasFilter: hasFilterBar,\n          hasMessage,\n          hasPinnedColumns: listItems[0].itemType === 'sectionHeader',\n        }),\n      )}\n    >\n      <Grid\n        gridTemplateColumns=\"1fr\"\n        padding={0}\n        gap={0}\n        className={clsx(styles.virtualizationInnerContainer)}\n        gridTemplateRows={columnVirtualizer.measurementsCache\n          .map((el) => `${el.size}px`)\n          .join(' ')}\n        // add 1px to prevent unwanted scrollbar during drag and drop\n        height={columnVirtualizer.getTotalSize() + 1}\n      >\n        {columnListItems}\n      </Grid>\n    </div>\n  );\n\n  return canOrder ? (\n    <ColumnOrderSettingsDragAndDropContext\n      localColumnOrder={localColumnOrder}\n      updateLocalColumnOrder={updateLocalColumnOrder}\n      localColumnPinning={localColumnPinning}\n      itemVirtualizer={columnVirtualizer}\n    >\n      {columnList}\n    </ColumnOrderSettingsDragAndDropContext>\n  ) : (\n    columnList\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,8 +1,8 @@
 import "./DataTableColumnsList.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var noItemsFound = "_14dz1ui0-3-8-0";
-var virtualizationInnerContainer = "_14dz1uib-3-8-0";
-var virtualizationScrollContainer = _7a468({ defaultClassName: "_14dz1ui2-3-8-0", variantClassNames: { hasFilter: { true: "_14dz1ui3-3-8-0", false: "_14dz1ui4-3-8-0" }, hasMessage: { true: "_14dz1ui5-3-8-0", false: "_14dz1ui6-3-8-0" } }, defaultVariants: { hasFilter: false, hasMessage: false }, compoundVariants: [[{ hasFilter: false, hasMessage: false }, "_14dz1ui7-3-8-0"], [{ hasFilter: true, hasMessage: false }, "_14dz1ui8-3-8-0"], [{ hasFilter: false, hasMessage: true }, "_14dz1ui9-3-8-0"], [{ hasFilter: true, hasMessage: true }, "_14dz1uia-3-8-0"]] });
+var noItemsFound = "_14dz1ui0-3-9-1";
+var virtualizationInnerContainer = "_14dz1uid-3-9-1";
+var virtualizationScrollContainer = _7a468({ defaultClassName: "_14dz1ui2-3-9-1", variantClassNames: { hasFilter: { true: "_14dz1ui3-3-9-1", false: "_14dz1ui4-3-9-1" }, hasMessage: { true: "_14dz1ui5-3-9-1", false: "_14dz1ui6-3-9-1" }, hasPinnedColumns: { true: "_14dz1ui7-3-9-1", false: "_14dz1ui8-3-9-1" } }, defaultVariants: { hasFilter: false, hasMessage: false, hasPinnedColumns: false }, compoundVariants: [[{ hasFilter: false, hasMessage: false }, "_14dz1ui9-3-9-1"], [{ hasFilter: true, hasMessage: false }, "_14dz1uia-3-9-1"], [{ hasFilter: false, hasMessage: true }, "_14dz1uib-3-9-1"], [{ hasFilter: true, hasMessage: true }, "_14dz1uic-3-9-1"]] });
 export {
   noItemsFound,
   virtualizationInnerContainer,

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

@@ -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-8-0';\nexport var virtualizationInnerContainer = '_14dz1uib-3-8-0';\nexport var virtualizationScrollContainer = _7a468({defaultClassName:'_14dz1ui2-3-8-0',variantClassNames:{hasFilter:{true:'_14dz1ui3-3-8-0',false:'_14dz1ui4-3-8-0'},hasMessage:{true:'_14dz1ui5-3-8-0',false:'_14dz1ui6-3-8-0'}},defaultVariants:{hasFilter:false,hasMessage:false},compoundVariants:[[{hasFilter:false,hasMessage:false},'_14dz1ui7-3-8-0'],[{hasFilter:true,hasMessage:false},'_14dz1ui8-3-8-0'],[{hasFilter:false,hasMessage:true},'_14dz1ui9-3-8-0'],[{hasFilter:true,hasMessage:true},'_14dz1uia-3-8-0']]});"],
-  "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,GAAE,YAAW,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,WAAU,OAAM,YAAW,MAAK,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,OAAM,YAAW,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,WAAU,MAAK,YAAW,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,WAAU,OAAM,YAAW,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,WAAU,MAAK,YAAW,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;",
+  "sourcesContent": ["import './DataTableColumnsList.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var noItemsFound = '_14dz1ui0-3-9-1';\nexport var virtualizationInnerContainer = '_14dz1uid-3-9-1';\nexport var virtualizationScrollContainer = _7a468({defaultClassName:'_14dz1ui2-3-9-1',variantClassNames:{hasFilter:{true:'_14dz1ui3-3-9-1',false:'_14dz1ui4-3-9-1'},hasMessage:{true:'_14dz1ui5-3-9-1',false:'_14dz1ui6-3-9-1'},hasPinnedColumns:{true:'_14dz1ui7-3-9-1',false:'_14dz1ui8-3-9-1'}},defaultVariants:{hasFilter:false,hasMessage:false,hasPinnedColumns:false},compoundVariants:[[{hasFilter:false,hasMessage:false},'_14dz1ui9-3-9-1'],[{hasFilter:true,hasMessage:false},'_14dz1uia-3-9-1'],[{hasFilter:false,hasMessage:true},'_14dz1uib-3-9-1'],[{hasFilter:true,hasMessage:true},'_14dz1uic-3-9-1']]});"],
+  "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,GAAE,YAAW,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,kBAAiB,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,WAAU,OAAM,YAAW,OAAM,kBAAiB,MAAK,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,OAAM,YAAW,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,WAAU,MAAK,YAAW,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,WAAU,OAAM,YAAW,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,WAAU,MAAK,YAAW,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -1,27 +1,45 @@
-._13ypmcy0-3-8-0 {
+._13ypmcy0-3-9-1 {
+  position: relative;
   flex: 0 1 auto;
   word-break: break-all;
   padding-top: var(--dt-spacings-size-4, 4px);
   padding-bottom: var(--dt-spacings-size-4, 4px);
-  padding-right: var(--dt-spacings-size-4, 4px);
-  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);
+  border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) transparent;
+}
+._13ypmcy0-3-9-1[data-parentcolumnid] {
+  padding-left: var(--dt-spacings-size-28, 28px);
 }
-._13ypmcy0-3-8-0[data-parentcolumnid] {
-  padding-left: var(--dt-spacings-size-20, 20px);
+._13ypmcy0-3-9-1[data-pinned-position]:not([data-parentcolumnid]) {
+  padding-left: var(--dt-spacings-size-8, 8px);
 }
-._13ypmcy0-3-8-0:last-child, ._13ypmcy0-3-8-0:not([data-pinned-position="right"]):has(+ [data-pinned-position="right"]) {
-  border-bottom: none;
+._13ypmcy0-3-9-1::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: calc(-1 * var(--dt-borders-width-default, 1px));
+  height: var(--dt-borders-width-default, 1px);
+  background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._13ypmcy0-3-8-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-9-1:has(+ [data-parentcolumnid])::after {
+  left: var(--dt-spacings-size-28, 28px);
 }
-._13ypmcy0-3-8-0[data-pinned-position="right"]:not([data-pinned-position="right"] + ._13ypmcy0-3-8-0, [data-pinned-position="left"] + ._13ypmcy0-3-8-0) {
-  border-top: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
+._13ypmcy1-3-9-1::after {
+  display: none;
 }
-._13ypmcy1-3-8-0 {
+._13ypmcy2-3-9-1 {
   visibility: hidden;
 }
-._13ypmcy2-3-8-0 {
+._13ypmcy3-3-9-1 {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+._13ypmcy4-3-9-1 {
   padding: var(--dt-spacings-size-2, 2px) 0;
+}
+._13ypmcy5-3-9-1 {
+  padding-left: var(--dt-spacings-size-8, 8px);
+}
+._13ypmcy6-3-9-1 {
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.js

@@ -2,29 +2,35 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useSortable } from "@dnd-kit/sortable";
 import clsx from "clsx";
 import { memo, useRef } from "react";
+import { useIntl } from "react-intl";
 import { ColumnOrderDragHandle } from "./ColumnOrderSettings/ColumnOrderDragHandle.js";
 import { ColumnPinningMenu } from "./ColumnPinningMenu.js";
-import { ColumnVisibilityCheckbox } from "./ColumnVisibilityCheckbox.js";
+import { ColumnVisibilityToggle } from "./ColumnVisibilityToggle.js";
 import * as styles from "./DataTableColumnsListItem.sty.js";
+import { Chip } from "../../../../../content/chip/Chip.js";
 import { useMergeRefs } from "../../../../../core/hooks/useMergeRefs.js";
 import { Flex } from "../../../../../layouts/flex/Flex.js";
 import { getColumnLabel } from "../../../../utils/get-column-label.js";
+import { dataTableMessages } from "../../../messages.js";
 function InternalDataTableColumnsListItem(props) {
   const {
     columnIndex,
     orderedFlatColumns,
-    showVisibilityCheckbox,
-    enableVisibilityCheckbox,
+    showVisibilityToggle,
+    enableVisibilityToggle,
     currentVisibilityState,
     onVisibilityChange,
     showColumnOrderDragHandle,
     showColumnPinningMenu,
     localColumnPinning,
     updateLocalColumnPinning,
+    isLastInSection,
     virtualIndex,
     measureElement
   } = props;
+  const intl = useIntl();
   const columnName = getColumnLabel(props.column);
+  const isHidden = currentVisibilityState === false;
   const localColumnRef = useRef(null);
   const { setNodeRef, isDragging } = useSortable({
     id: props.column.key,
@@ -47,22 +53,14 @@ function InternalDataTableColumnsListItem(props) {
       justifyContent: "space-between",
       alignItems: "center",
       className: clsx("strato-table-settings-item", styles.columnsListItem, {
-        [styles.dragging]: isDragging
+        [styles.dragging]: isDragging,
+        [styles.lastInSection]: isLastInSection
       }),
       style: {
         gridRowStart: virtualIndex + 1
       },
       children: [
-        showVisibilityCheckbox ? /* @__PURE__ */ jsx(
-          ColumnVisibilityCheckbox,
-          {
-            column: props.column,
-            enableCheckbox: enableVisibilityCheckbox,
-            currentState: currentVisibilityState,
-            onVisibilityChange
-          }
-        ) : /* @__PURE__ */ jsx("div", { className: styles.columnName, children: columnName }),
-        /* @__PURE__ */ jsxs(Flex, { gap: 4, children: [
+        /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "center", className: styles.columnNameContainer, children: [
           showColumnOrderDragHandle && /* @__PURE__ */ jsx(
             ColumnOrderDragHandle,
             {
@@ -71,6 +69,32 @@ function InternalDataTableColumnsListItem(props) {
               isDraggingActive: isDragging
             }
           ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(styles.columnName, {
+                [styles.columnNameSubdued]: (
+                  // subdue the label when the column is hidden or its visibility toggle is disabled
+                  isHidden || showVisibilityToggle && !enableVisibilityToggle
+                ),
+                [styles.columnNameIndented]: !showColumnOrderDragHandle && props.column.parent !== void 0
+              }),
+              children: columnName
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "center", children: [
+          isHidden && /* @__PURE__ */ jsx(Chip, { children: intl.formatMessage(dataTableMessages.columnHiddenChipLabel) }),
+          showVisibilityToggle && /* @__PURE__ */ jsx(
+            ColumnVisibilityToggle,
+            {
+              column: props.column,
+              columnLabel: columnName,
+              enableToggle: enableVisibilityToggle,
+              currentState: currentVisibilityState,
+              onVisibilityChange
+            }
+          ),
           showColumnPinningMenu && /* @__PURE__ */ jsx(
             ColumnPinningMenu,
             {
@@ -88,7 +112,7 @@ function InternalDataTableColumnsListItem(props) {
 const DataTableColumnsListItem = memo(
   InternalDataTableColumnsListItem,
   (prevProps, nextProps) => {
-    return prevProps.column.key === nextProps.column.key && prevProps.columnIndex === nextProps.columnIndex && prevProps.showVisibilityCheckbox === nextProps.showVisibilityCheckbox && prevProps.enableVisibilityCheckbox === nextProps.enableVisibilityCheckbox && prevProps.currentVisibilityState === nextProps.currentVisibilityState && prevProps.showColumnOrderDragHandle === nextProps.showColumnOrderDragHandle && prevProps.showColumnPinningMenu === nextProps.showColumnPinningMenu && prevProps.localColumnPinning === nextProps.localColumnPinning && prevProps.virtualIndex === nextProps.virtualIndex;
+    return prevProps.column.key === nextProps.column.key && prevProps.columnIndex === nextProps.columnIndex && prevProps.showVisibilityToggle === nextProps.showVisibilityToggle && prevProps.enableVisibilityToggle === nextProps.enableVisibilityToggle && prevProps.currentVisibilityState === nextProps.currentVisibilityState && prevProps.showColumnOrderDragHandle === nextProps.showColumnOrderDragHandle && prevProps.showColumnPinningMenu === nextProps.showColumnPinningMenu && prevProps.localColumnPinning === nextProps.localColumnPinning && prevProps.isLastInSection === nextProps.isLastInSection && prevProps.virtualIndex === nextProps.virtualIndex;
   }
 );
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsListItem.tsx"],
-  "sourcesContent": ["import { useSortable } from '@dnd-kit/sortable';\nimport type {\n  ColumnPinningState,\n  Column,\n  TableFeatures,\n  RowData,\n} from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { memo, useRef } from 'react';\n\nimport type { ColumnListItem } from './column-settings-types.js';\nimport { ColumnOrderDragHandle } from './ColumnOrderSettings/ColumnOrderDragHandle.js';\nimport { ColumnPinningMenu } from './ColumnPinningMenu.js';\nimport { ColumnVisibilityCheckbox } from './ColumnVisibilityCheckbox.js';\nimport * as styles from './DataTableColumnsListItem.sty.js';\nimport { useMergeRefs } from '../../../../../core/hooks/useMergeRefs.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { getColumnLabel } from '../../../../utils/get-column-label.js';\n\ninterface DataTableColumnsListItemProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> {\n  /**\n   * The column to render in the list.\n   */\n  column: ColumnListItem<TFeatures, TData>;\n  /**\n   * The index of the column in the list.\n   */\n  columnIndex: number;\n  /**\n   * The ordered flat columns, grouped by pinning position.\n   */\n  orderedFlatColumns: {\n    left: ColumnListItem<TFeatures, TData>[];\n    center: ColumnListItem<TFeatures, TData>[];\n    right: ColumnListItem<TFeatures, TData>[];\n  };\n  /**\n   * Whether the visibility settings are enabled and a checkbox should be shown.\n   */\n  showVisibilityCheckbox: boolean;\n  /**\n   * Whether visibility can be changed for this column.\n   */\n  enableVisibilityCheckbox: boolean;\n  /**\n   * The current visibility state of the column.\n   */\n  currentVisibilityState: boolean | 'indeterminate';\n  /**\n   * Callback when the checkbox is clicked and visibility of the column changes.\n   */\n  onVisibilityChange: (\n    column: Column<TFeatures, TData>,\n    currentVisibility: boolean | 'indeterminate',\n  ) => void;\n  /**\n   * Whether the column order settings are enabled and a drag handle should be shown.\n   */\n  showColumnOrderDragHandle: boolean;\n  /**\n   * Whether buttons to pin/unpin the column should be shown.\n   */\n  showColumnPinningMenu: boolean;\n  /**\n   * The local column pinning state.\n   */\n  localColumnPinning: ColumnPinningState;\n  /**\n   * Callback to update the local column pinning state.\n   */\n  updateLocalColumnPinning: (newState: ColumnPinningState) => void;\n  /**\n   * The virtual index for grid row positioning.\n   */\n  virtualIndex: number;\n  /**\n   * Callback to measure the element for virtualization.\n   */\n  measureElement: (element: Element | null) => void;\n}\n\n/**\n * A single column item in the column settings list.\n */\nfunction InternalDataTableColumnsListItem<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(props: Readonly<DataTableColumnsListItemProps<TFeatures, TData>>) {\n  const {\n    columnIndex,\n    orderedFlatColumns,\n    showVisibilityCheckbox,\n    enableVisibilityCheckbox,\n    currentVisibilityState,\n    onVisibilityChange,\n    showColumnOrderDragHandle,\n    showColumnPinningMenu,\n    localColumnPinning,\n    updateLocalColumnPinning,\n    virtualIndex,\n    measureElement,\n  } = props;\n\n  const columnName = getColumnLabel(props.column);\n\n  //#region ordering\n  const localColumnRef = useRef<HTMLDivElement>(null);\n  const { setNodeRef, isDragging } = useSortable({\n    id: props.column.key,\n    data: {\n      column: props.column,\n      columnId: props.column.id,\n      columnIndex,\n      localColumnRef,\n    },\n  });\n\n  const mergedRefs = useMergeRefs([localColumnRef, setNodeRef, measureElement]);\n  //#endregion\n\n  return (\n    <Flex\n      data-index={virtualIndex}\n      data-columnid={props.column.id}\n      data-parentcolumnid={props.column.parent?.id}\n      data-pinned-position={\n        props.column.pinned === false ? undefined : props.column.pinned\n      }\n      ref={mergedRefs}\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      className={clsx('strato-table-settings-item', styles.columnsListItem, {\n        [styles.dragging]: isDragging,\n      })}\n      style={{\n        gridRowStart: virtualIndex + 1,\n      }}\n    >\n      {showVisibilityCheckbox ? (\n        <ColumnVisibilityCheckbox\n          column={props.column}\n          enableCheckbox={enableVisibilityCheckbox}\n          currentState={currentVisibilityState}\n          onVisibilityChange={onVisibilityChange}\n        />\n      ) : (\n        <div className={styles.columnName}>{columnName}</div>\n      )}\n      <Flex gap={4}>\n        {showColumnOrderDragHandle && (\n          <ColumnOrderDragHandle\n            columnId={props.column.id}\n            columnKey={props.column.key}\n            isDraggingActive={isDragging}\n          />\n        )}\n        {showColumnPinningMenu && (\n          <ColumnPinningMenu\n            column={props.column}\n            orderedFlatColumns={orderedFlatColumns}\n            localColumnPinning={localColumnPinning}\n            updateLocalColumnPinning={updateLocalColumnPinning}\n          />\n        )}\n      </Flex>\n    </Flex>\n  );\n}\n\nexport const DataTableColumnsListItem = memo(\n  InternalDataTableColumnsListItem,\n  (prevProps, nextProps) => {\n    // Custom props comparison to only re-render when relevant props change.\n    // Avoids unnecessary re-renders of all items, e.g. when the orderedFlatColumns prop changes.\n    return (\n      prevProps.column.key === nextProps.column.key &&\n      prevProps.columnIndex === nextProps.columnIndex &&\n      prevProps.showVisibilityCheckbox === nextProps.showVisibilityCheckbox &&\n      prevProps.enableVisibilityCheckbox ===\n        nextProps.enableVisibilityCheckbox &&\n      prevProps.currentVisibilityState === nextProps.currentVisibilityState &&\n      prevProps.showColumnOrderDragHandle ===\n        nextProps.showColumnOrderDragHandle &&\n      prevProps.showColumnPinningMenu === nextProps.showColumnPinningMenu &&\n      prevProps.localColumnPinning === nextProps.localColumnPinning &&\n      prevProps.virtualIndex === nextProps.virtualIndex\n    );\n  },\n);\n"],
-  "mappings": "AA8IQ,cASF,YATE;AA9IR,SAAS,mBAAmB;AAO5B,OAAO,UAAU;AACjB,SAAS,MAAM,cAAc;AAG7B,SAAS,6BAA6B;AACtC,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAsE/B,SAAS,iCAGP,OAAkE;AAClE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,aAAa,eAAe,MAAM,MAAM;AAG9C,QAAM,iBAAiB,OAAuB,IAAI;AAClD,QAAM,EAAE,YAAY,WAAW,IAAI,YAAY;AAAA,IAC7C,IAAI,MAAM,OAAO;AAAA,IACjB,MAAM;AAAA,MACJ,QAAQ,MAAM;AAAA,MACd,UAAU,MAAM,OAAO;AAAA,MACvB;AAAA,MACA;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,aAAa,aAAa,CAAC,gBAAgB,YAAY,cAAc,CAAC;AAG5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,iBAAe,MAAM,OAAO;AAAA,MAC5B,uBAAqB,MAAM,OAAO,QAAQ;AAAA,MAC1C,wBACE,MAAM,OAAO,WAAW,QAAQ,SAAY,MAAM,OAAO;AAAA,MAE3D,KAAK;AAAA,MACL,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,WAAW,KAAK,8BAA8B,OAAO,iBAAiB;AAAA,QACpE,CAAC,OAAO,QAAQ,GAAG;AAAA,MACrB,CAAC;AAAA,MACD,OAAO;AAAA,QACL,cAAc,eAAe;AAAA,MAC/B;AAAA,MAEC;AAAA,iCACC;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ,MAAM;AAAA,YACd,gBAAgB;AAAA,YAChB,cAAc;AAAA,YACd;AAAA;AAAA,QACF,IAEA,oBAAC,SAAI,WAAW,OAAO,YAAa,sBAAW;AAAA,QAEjD,qBAAC,QAAK,KAAK,GACR;AAAA,uCACC;AAAA,YAAC;AAAA;AAAA,cACC,UAAU,MAAM,OAAO;AAAA,cACvB,WAAW,MAAM,OAAO;AAAA,cACxB,kBAAkB;AAAA;AAAA,UACpB;AAAA,UAED,yBACC;AAAA,YAAC;AAAA;AAAA,cACC,QAAQ,MAAM;AAAA,cACd;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,2BAA2B;AAAA,EACtC;AAAA,EACA,CAAC,WAAW,cAAc;AAGxB,WACE,UAAU,OAAO,QAAQ,UAAU,OAAO,OAC1C,UAAU,gBAAgB,UAAU,eACpC,UAAU,2BAA2B,UAAU,0BAC/C,UAAU,6BACR,UAAU,4BACZ,UAAU,2BAA2B,UAAU,0BAC/C,UAAU,8BACR,UAAU,6BACZ,UAAU,0BAA0B,UAAU,yBAC9C,UAAU,uBAAuB,UAAU,sBAC3C,UAAU,iBAAiB,UAAU;AAAA,EAEzC;AACF;",
+  "sourcesContent": ["import { useSortable } from '@dnd-kit/sortable';\nimport type {\n  ColumnPinningState,\n  Column,\n  TableFeatures,\n  RowData,\n} from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { memo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type { ColumnListItem } from './column-settings-types.js';\nimport { ColumnOrderDragHandle } from './ColumnOrderSettings/ColumnOrderDragHandle.js';\nimport { ColumnPinningMenu } from './ColumnPinningMenu.js';\nimport { ColumnVisibilityToggle } from './ColumnVisibilityToggle.js';\nimport * as styles from './DataTableColumnsListItem.sty.js';\nimport { Chip } from '../../../../../content/chip/Chip.js';\nimport { useMergeRefs } from '../../../../../core/hooks/useMergeRefs.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { getColumnLabel } from '../../../../utils/get-column-label.js';\nimport { dataTableMessages } from '../../../messages.js';\n\ninterface DataTableColumnsListItemProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> {\n  /**\n   * The column to render in the list.\n   */\n  column: ColumnListItem<TFeatures, TData>;\n  /**\n   * The index of the column in the list.\n   */\n  columnIndex: number;\n  /**\n   * The ordered flat columns, grouped by pinning position.\n   */\n  orderedFlatColumns: {\n    left: ColumnListItem<TFeatures, TData>[];\n    center: ColumnListItem<TFeatures, TData>[];\n    right: ColumnListItem<TFeatures, TData>[];\n  };\n  /**\n   * Whether the visibility settings are enabled and a visibility toggle should be shown.\n   */\n  showVisibilityToggle: boolean;\n  /**\n   * Whether visibility can be changed for this column.\n   */\n  enableVisibilityToggle: boolean;\n  /**\n   * The current visibility state of the column.\n   */\n  currentVisibilityState: boolean | 'indeterminate';\n  /**\n   * Callback when the checkbox is clicked and visibility of the column changes.\n   */\n  onVisibilityChange: (\n    column: Column<TFeatures, TData>,\n    currentVisibility: boolean | 'indeterminate',\n  ) => void;\n  /**\n   * Whether the column order settings are enabled and a drag handle should be shown.\n   */\n  showColumnOrderDragHandle: boolean;\n  /**\n   * Whether buttons to pin/unpin the column should be shown.\n   */\n  showColumnPinningMenu: boolean;\n  /**\n   * The local column pinning state.\n   */\n  localColumnPinning: ColumnPinningState;\n  /**\n   * Callback to update the local column pinning state.\n   */\n  updateLocalColumnPinning: (newState: ColumnPinningState) => void;\n  /**\n   * Whether this is the last item of its (pinned/unpinned) section. Used to\n   * omit the separator line at section boundaries.\n   */\n  isLastInSection: boolean;\n  /**\n   * The virtual index for grid row positioning.\n   */\n  virtualIndex: number;\n  /**\n   * Callback to measure the element for virtualization.\n   */\n  measureElement: (element: Element | null) => void;\n}\n\n/**\n * A single column item in the column settings list.\n */\nfunction InternalDataTableColumnsListItem<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(props: Readonly<DataTableColumnsListItemProps<TFeatures, TData>>) {\n  const {\n    columnIndex,\n    orderedFlatColumns,\n    showVisibilityToggle,\n    enableVisibilityToggle,\n    currentVisibilityState,\n    onVisibilityChange,\n    showColumnOrderDragHandle,\n    showColumnPinningMenu,\n    localColumnPinning,\n    updateLocalColumnPinning,\n    isLastInSection,\n    virtualIndex,\n    measureElement,\n  } = props;\n\n  const intl = useIntl();\n  const columnName = getColumnLabel(props.column);\n  const isHidden = currentVisibilityState === false;\n\n  //#region ordering\n  const localColumnRef = useRef<HTMLDivElement>(null);\n  const { setNodeRef, isDragging } = useSortable({\n    id: props.column.key,\n    data: {\n      column: props.column,\n      columnId: props.column.id,\n      columnIndex,\n      localColumnRef,\n    },\n  });\n\n  const mergedRefs = useMergeRefs([localColumnRef, setNodeRef, measureElement]);\n  //#endregion\n\n  return (\n    <Flex\n      data-index={virtualIndex}\n      data-columnid={props.column.id}\n      data-parentcolumnid={props.column.parent?.id}\n      data-pinned-position={\n        props.column.pinned === false ? undefined : props.column.pinned\n      }\n      ref={mergedRefs}\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      className={clsx('strato-table-settings-item', styles.columnsListItem, {\n        [styles.dragging]: isDragging,\n        [styles.lastInSection]: isLastInSection,\n      })}\n      style={{\n        gridRowStart: virtualIndex + 1,\n      }}\n    >\n      <Flex gap={4} alignItems=\"center\" className={styles.columnNameContainer}>\n        {showColumnOrderDragHandle && (\n          <ColumnOrderDragHandle\n            columnId={props.column.id}\n            columnKey={props.column.key}\n            isDraggingActive={isDragging}\n          />\n        )}\n        <div\n          className={clsx(styles.columnName, {\n            [styles.columnNameSubdued]:\n              // subdue the label when the column is hidden or its visibility toggle is disabled\n              isHidden || (showVisibilityToggle && !enableVisibilityToggle),\n            [styles.columnNameIndented]:\n              !showColumnOrderDragHandle && props.column.parent !== undefined,\n          })}\n        >\n          {columnName}\n        </div>\n      </Flex>\n      <Flex gap={4} alignItems=\"center\">\n        {isHidden && (\n          <Chip>\n            {intl.formatMessage(dataTableMessages.columnHiddenChipLabel)}\n          </Chip>\n        )}\n        {showVisibilityToggle && (\n          <ColumnVisibilityToggle\n            column={props.column}\n            columnLabel={columnName}\n            enableToggle={enableVisibilityToggle}\n            currentState={currentVisibilityState}\n            onVisibilityChange={onVisibilityChange}\n          />\n        )}\n        {showColumnPinningMenu && (\n          <ColumnPinningMenu\n            column={props.column}\n            orderedFlatColumns={orderedFlatColumns}\n            localColumnPinning={localColumnPinning}\n            updateLocalColumnPinning={updateLocalColumnPinning}\n          />\n        )}\n      </Flex>\n    </Flex>\n  );\n}\n\nexport const DataTableColumnsListItem = memo(\n  InternalDataTableColumnsListItem,\n  (prevProps, nextProps) => {\n    // Custom props comparison to only re-render when relevant props change.\n    // Avoids unnecessary re-renders of all items, e.g. when the orderedFlatColumns prop changes.\n    return (\n      prevProps.column.key === nextProps.column.key &&\n      prevProps.columnIndex === nextProps.columnIndex &&\n      prevProps.showVisibilityToggle === nextProps.showVisibilityToggle &&\n      prevProps.enableVisibilityToggle === nextProps.enableVisibilityToggle &&\n      prevProps.currentVisibilityState === nextProps.currentVisibilityState &&\n      prevProps.showColumnOrderDragHandle ===\n        nextProps.showColumnOrderDragHandle &&\n      prevProps.showColumnPinningMenu === nextProps.showColumnPinningMenu &&\n      prevProps.localColumnPinning === nextProps.localColumnPinning &&\n      prevProps.isLastInSection === nextProps.isLastInSection &&\n      prevProps.virtualIndex === nextProps.virtualIndex\n    );\n  },\n);\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,10 +1,18 @@
 import "./DataTableColumnsListItem.css";
-var columnName = "_13ypmcy2-3-8-0";
-var columnsListItem = "_13ypmcy0-3-8-0";
-var dragging = "_13ypmcy1-3-8-0";
+var columnName = "_13ypmcy4-3-9-1";
+var columnNameContainer = "_13ypmcy3-3-9-1";
+var columnNameIndented = "_13ypmcy5-3-9-1";
+var columnNameSubdued = "_13ypmcy6-3-9-1";
+var columnsListItem = "_13ypmcy0-3-9-1";
+var dragging = "_13ypmcy2-3-9-1";
+var lastInSection = "_13ypmcy1-3-9-1";
 export {
   columnName,
+  columnNameContainer,
+  columnNameIndented,
+  columnNameSubdued,
   columnsListItem,
-  dragging
+  dragging,
+  lastInSection
 };
 //# sourceMappingURL=DataTableColumnsListItem.sty.js.map

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

@@ -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-8-0';\nexport var columnsListItem = '_13ypmcy0-3-8-0';\nexport var dragging = '_13ypmcy1-3-8-0';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,kBAAkB;AACtB,IAAI,WAAW;",
+  "sourcesContent": ["import './DataTableColumnsListItem.css';\nexport var columnName = '_13ypmcy4-3-9-1';\nexport var columnNameContainer = '_13ypmcy3-3-9-1';\nexport var columnNameIndented = '_13ypmcy5-3-9-1';\nexport var columnNameSubdued = '_13ypmcy6-3-9-1';\nexport var columnsListItem = '_13ypmcy0-3-9-1';\nexport var dragging = '_13ypmcy2-3-9-1';\nexport var lastInSection = '_13ypmcy1-3-9-1';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;AACjB,IAAI,sBAAsB;AAC1B,IAAI,qBAAqB;AACzB,IAAI,oBAAoB;AACxB,IAAI,kBAAkB;AACtB,IAAI,WAAW;AACf,IAAI,gBAAgB;",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsSectionHeader.css

@@ -0,0 +1,12 @@
+._1o0bw490-3-9-1 {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding-top: var(--dt-spacings-size-12, 12px);
+  padding-bottom: var(--dt-spacings-size-4, 4px);
+  padding-left: var(--dt-spacings-size-8, 8px);
+  padding-right: var(--dt-spacings-size-4, 4px);
+}
+._1o0bw491-3-9-1 {
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
+}

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsSectionHeader.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { useIntl } from "react-intl";
+import * as styles from "./DataTableColumnsSectionHeader.sty.js";
+import { Text } from "../../../../../typography/text/Text.js";
+import { dataTableMessages } from "../../../messages.js";
+const sectionMessages = {
+  left: dataTableMessages.columnSettingsSectionPinnedLeft,
+  right: dataTableMessages.columnSettingsSectionPinnedRight,
+  false: dataTableMessages.columnSettingsSectionUnpinned
+};
+function DataTableColumnsSectionHeader(props) {
+  const { position, virtualIndex, measureElement } = props;
+  const intl = useIntl();
+  const label = sectionMessages[`${position}`];
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ref: measureElement,
+      "data-index": virtualIndex,
+      className: styles.sectionHeader,
+      style: { gridRowStart: virtualIndex + 1 },
+      children: /* @__PURE__ */ jsx(Text, { textStyle: "small-emphasized", className: styles.sectionHeaderLabel, children: intl.formatMessage(label) })
+    }
+  );
+}
+export {
+  DataTableColumnsSectionHeader
+};
+//# sourceMappingURL=DataTableColumnsSectionHeader.js.map

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsSectionHeader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsSectionHeader.tsx"],
+  "sourcesContent": ["import type { ColumnPinningPosition } from '@tanstack/react-table';\nimport { type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './DataTableColumnsSectionHeader.sty.js';\nimport { Text } from '../../../../../typography/text/Text.js';\nimport { dataTableMessages } from '../../../messages.js';\n\nconst sectionMessages = {\n  left: dataTableMessages.columnSettingsSectionPinnedLeft,\n  right: dataTableMessages.columnSettingsSectionPinnedRight,\n  false: dataTableMessages.columnSettingsSectionUnpinned,\n} as const;\n\ninterface DataTableColumnsSectionHeaderProps {\n  /**\n   * The section the header labels.\n   */\n  position: ColumnPinningPosition;\n  /**\n   * The virtual index for grid row positioning.\n   */\n  virtualIndex: number;\n  /**\n   * Callback to measure the element for virtualization.\n   */\n  measureElement: (element: Element | null) => void;\n}\n\n/**\n * Section header row in the column settings list, labeling the pinned/unpinned\n * groups of columns.\n * @internal\n */\nexport function DataTableColumnsSectionHeader(\n  props: Readonly<DataTableColumnsSectionHeaderProps>,\n): JSX.Element {\n  const { position, virtualIndex, measureElement } = props;\n  const intl = useIntl();\n  const label = sectionMessages[`${position}`];\n\n  return (\n    <h3\n      ref={measureElement}\n      data-index={virtualIndex}\n      className={styles.sectionHeader}\n      style={{ gridRowStart: virtualIndex + 1 }}\n    >\n      <Text textStyle=\"small-emphasized\" className={styles.sectionHeaderLabel}>\n        {intl.formatMessage(label)}\n      </Text>\n    </h3>\n  );\n}\n"],
+  "mappings": "AAgDM;AA9CN,SAAS,eAAe;AAExB,YAAY,YAAY;AACxB,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAElC,MAAM,kBAAkB;AAAA,EACtB,MAAM,kBAAkB;AAAA,EACxB,OAAO,kBAAkB;AAAA,EACzB,OAAO,kBAAkB;AAC3B;AAsBO,SAAS,8BACd,OACa;AACb,QAAM,EAAE,UAAU,cAAc,eAAe,IAAI;AACnD,QAAM,OAAO,QAAQ;AACrB,QAAM,QAAQ,gBAAgB,GAAG,QAAQ,EAAE;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,OAAO;AAAA,MAClB,OAAO,EAAE,cAAc,eAAe,EAAE;AAAA,MAExC,8BAAC,QAAK,WAAU,oBAAmB,WAAW,OAAO,oBAClD,eAAK,cAAc,KAAK,GAC3B;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsSectionHeader.sty.js

@@ -0,0 +1,8 @@
+import "./DataTableColumnsSectionHeader.css";
+var sectionHeader = "_1o0bw490-3-9-1";
+var sectionHeaderLabel = "_1o0bw491-3-9-1";
+export {
+  sectionHeader,
+  sectionHeaderLabel
+};
+//# sourceMappingURL=DataTableColumnsSectionHeader.sty.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnsSectionHeader.css.ts"],
+  "sourcesContent": ["import './DataTableColumnsSectionHeader.css';\nexport var sectionHeader = '_1o0bw490-3-9-1';\nexport var sectionHeaderLabel = '_1o0bw491-3-9-1';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,qBAAqB;",
+  "names": []
+}

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

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

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

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

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

@@ -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-8-0';\nexport var searchInput = '_1rh6hs01-3-8-0';\nexport var showHideAll = '_1rh6hs00-3-8-0';"],
+  "sourcesContent": ["import '../../../../../overlays/modal/Modal.css';\nimport './DataTableVisibilityFilterControls.css';\nexport var filterControls = '_1rh6hs02-3-9-1';\nexport var searchInput = '_1rh6hs01-3-9-1';\nexport var showHideAll = '_1rh6hs00-3-9-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,cAAc;AAClB,IAAI,cAAc;",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/column-settings-test-utils.js

@@ -0,0 +1,34 @@
+import { fireEvent } from "@testing-library/react";
+function getColumnRow(scope, columnId) {
+  const row = scope.querySelector(`[data-columnid="${columnId}"]`);
+  if (!row) {
+    throw new Error(`No column row found for column "${columnId}"`);
+  }
+  return row;
+}
+function getColumnVisibilityToggle(scope, columnId) {
+  const toggle = getColumnRow(scope, columnId).querySelector(
+    '[data-dt-children-name="ColumnSettingsShowHideColumn"]'
+  );
+  if (!toggle) {
+    throw new Error(`No visibility toggle found for column "${columnId}"`);
+  }
+  return toggle;
+}
+function getAllVisibilityToggles(scope) {
+  return Array.from(
+    scope.querySelectorAll(
+      '[data-dt-children-name="ColumnSettingsShowHideColumn"]'
+    )
+  );
+}
+function clickVisibilityToggle(scope, columnId) {
+  fireEvent.click(getColumnVisibilityToggle(scope, columnId));
+}
+export {
+  clickVisibilityToggle,
+  getAllVisibilityToggles,
+  getColumnRow,
+  getColumnVisibilityToggle
+};
+//# sourceMappingURL=column-settings-test-utils.js.map

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/column-settings-test-utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/column-settings-test-utils.ts"],
+  "sourcesContent": ["import { fireEvent } from '@testing-library/react';\n\n/** Returns the column row element (by column id) within the given scope. */\nexport function getColumnRow(\n  scope: HTMLElement,\n  columnId: string,\n): HTMLElement {\n  const row = scope.querySelector<HTMLElement>(`[data-columnid=\"${columnId}\"]`);\n  if (!row) {\n    throw new Error(`No column row found for column \"${columnId}\"`);\n  }\n  return row;\n}\n\n/** Returns the per-column visibility toggle button (by column id) within the scope. */\nexport function getColumnVisibilityToggle(\n  scope: HTMLElement,\n  columnId: string,\n): HTMLElement {\n  const toggle = getColumnRow(scope, columnId).querySelector<HTMLElement>(\n    '[data-dt-children-name=\"ColumnSettingsShowHideColumn\"]',\n  );\n  if (!toggle) {\n    throw new Error(`No visibility toggle found for column \"${columnId}\"`);\n  }\n  return toggle;\n}\n\n/** Returns all per-column visibility toggle buttons within the scope, in list order. */\nexport function getAllVisibilityToggles(scope: HTMLElement): HTMLElement[] {\n  return Array.from(\n    scope.querySelectorAll<HTMLElement>(\n      '[data-dt-children-name=\"ColumnSettingsShowHideColumn\"]',\n    ),\n  );\n}\n\n/** Clicks the visibility toggle of the column with the given id within `scope`. */\nexport function clickVisibilityToggle(\n  scope: HTMLElement,\n  columnId: string,\n): void {\n  fireEvent.click(getColumnVisibilityToggle(scope, columnId));\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAGnB,SAAS,aACd,OACA,UACa;AACb,QAAM,MAAM,MAAM,cAA2B,mBAAmB,QAAQ,IAAI;AAC5E,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,mCAAmC,QAAQ,GAAG;AAAA,EAChE;AACA,SAAO;AACT;AAGO,SAAS,0BACd,OACA,UACa;AACb,QAAM,SAAS,aAAa,OAAO,QAAQ,EAAE;AAAA,IAC3C;AAAA,EACF;AACA,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,0CAA0C,QAAQ,GAAG;AAAA,EACvE;AACA,SAAO;AACT;AAGO,SAAS,wBAAwB,OAAmC;AACzE,SAAO,MAAM;AAAA,IACX,MAAM;AAAA,MACJ;AAAA,IACF;AAAA,EACF;AACF;AAGO,SAAS,sBACd,OACA,UACM;AACN,YAAU,MAAM,0BAA0B,OAAO,QAAQ,CAAC;AAC5D;",
+  "names": []
+}

package/esm/tables/DataTable/components/Toolbar/DataTableToolbar.js

@@ -48,6 +48,8 @@ function getToolbarConfig(children) {
       slots.downloadData = true;
       toolbarItemProps.downloadExcludedColumns = child.props?.excludeColumns;
       toolbarItemProps.onDownloadData = child.props?.onDownloadData;
+      toolbarItemProps.formatDownloadHeader = child.props?.formatDownloadHeader;
+      toolbarItemProps.fileName = child.props?.fileName;
     } else if (isSlot(child, DataTableGlobalLineWrapAction)) {
       slots.globalLineWrap = true;
     } else if (isSlot(child, Intent)) {
@@ -100,6 +102,7 @@ const DataTableToolbar = forwardRef(
             {
               hasDownloadData: slots.downloadData,
               downloadExcludedColumns: toolbarItemProps?.downloadExcludedColumns,
+              fileName: toolbarItemProps?.fileName,
               intents: toolbarItemProps.intents
             }
           )