@dynatrace/strato-components 3.8.0 → 3.9.0

package/esm/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/column-order-settings-dnd-utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/column-order-settings-dnd-utils.ts"],
-  "sourcesContent": ["import {\n  type ClientRect,\n  type Collision,\n  type CollisionDescriptor,\n  type CollisionDetection,\n  type DragOverEvent,\n  type Modifier,\n} from '@dnd-kit/core';\nimport type {\n  ColumnPinningState,\n  Column,\n  RowData,\n  TableFeatures,\n  CellData,\n} from '@tanstack/react-table';\n\nimport Animations from '@dynatrace/strato-design-tokens/animations';\n\nimport * as columnSettingsDndStyles from './ColumnOrderSettingsDragAndDrop.sty.js';\nimport { getIsColumnPinned } from '../../../../features/ColumnPinning/column-pinning-utils.js';\nimport type { DragAndDropTransform } from '../../../../features/types/dnd.types.js';\nimport * as columnListItemStyles from '../DataTableColumnsListItem.sty.js';\n\nexport const DATA_TABLE_COLUMNS_LIST_ITEM_BOTTOM_BORDER = 1;\nexport const DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT =\n  32 + DATA_TABLE_COLUMNS_LIST_ITEM_BOTTOM_BORDER;\n\n// all columns in the settings modal that were transformed in the last onDragOver call\nlet lastAffectedItems = new Set<string>();\n\n// child columns of a parent column that should be hidden during drag\n// when items are virtualized and scroll back into view, they need to be hidden again\nlet hiddenChildColumns = new Set<string>();\n\n// #region Transforms\n/**\n * Transforms columns in the settings modal upwards or downwards to make space for the item which is currently being dragged.\n *\n * @param columnsList - the columns list element holding the columns in the settings modal.\n * @param event - contains \"active\" (item being dragged) and \"over\" ids (item where the active item is currently dragged over).\n * @param localColumnOrder - column order before dragging.\n * @param transformValue - the value by which the columns should be transformed (positive for down or negative for up).\n * @param activeColumn - the column which is currently being dragged.\n * @internal\n */\nexport function transformColumnsOnDragOver<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  columnsList: HTMLElement | null,\n  event: DragOverEvent,\n  localColumnOrder: string[],\n  transformValue: number,\n  activeColumn: Column<TFeatures, TData> | undefined,\n): void {\n  if (!columnsList || !activeColumn) {\n    return;\n  }\n\n  const { over, collisions } = event;\n  if (!over || !collisions?.length) {\n    return;\n  }\n\n  // keep track of all items that are transformed during the current onDragOver call\n  const newAffectedColumns = new Set<string>();\n  const { fromIndex, toIndex } = getDragIndexes(\n    localColumnOrder,\n    activeColumn.id,\n    over.data.current?.columnId as string,\n  );\n  const adjustedTransformValue =\n    transformValue + DATA_TABLE_COLUMNS_LIST_ITEM_BOTTOM_BORDER;\n\n  if (fromIndex < toIndex) {\n    // only when dragging downwards:\n    // when dragging a parent column, the drag overlay is moved above child columns as well,\n    // so we need to ensure that the actual parent column, including its child columns, in the columns list are not transformed\n    const adaptedFromIndex = fromIndex + activeColumn.columns.length;\n\n    transformColumns(\n      columnsList,\n      localColumnOrder.slice(adaptedFromIndex + 1, toIndex + 1),\n      -adjustedTransformValue,\n      newAffectedColumns,\n    );\n  } else if (fromIndex > toIndex) {\n    transformColumns(\n      columnsList,\n      localColumnOrder.slice(toIndex, fromIndex),\n      adjustedTransformValue,\n      newAffectedColumns,\n    );\n  }\n\n  // reset items that were transformed in the last drag operation but are not in the current one\n  transformColumns(columnsList, lastAffectedItems, 0);\n  lastAffectedItems = newAffectedColumns;\n}\n\n/**\n * Gets the rendered element of an unpinned column in the settings modal with a given column id.\n *\n * @param columnsList - the columns list element holding the columns in the settings modal.\n * @param columnId - id of the column.\n * @returns the column in the settings modal with the given id, or null if not found.\n * @internal\n */\nexport function getColumnById(\n  columnsList: HTMLElement,\n  columnId: string,\n): HTMLElement | null {\n  return columnsList.querySelector<HTMLElement>(\n    `[data-columnid=\"${CSS.escape(columnId)}\"]:not([data-pinned-position])`,\n  );\n}\n\n/**\n * Gets all column elements displayed in the column settings modal.\n *\n * @param columnsList - the columns list element holding the columns shown in the settings modal.\n * @returns all columns in the settings modal.\n * @internal\n */\nexport function getAllColumns(columnsList: HTMLElement): HTMLElement[] {\n  const allLocalColumns =\n    columnsList.querySelectorAll<HTMLElement>('[data-columnid]');\n  return Array.from(allLocalColumns);\n}\n\n/**\n * Gets all column elements in the settings modal that are pinned or don't have the same parent id.\n *\n * @param columnsList - the columns list element holding the columns in the settings modal.\n * @param activeParentId - the parent id of the currently actively dragged column.\n * @returns all columns in the settings modal that are not valid drop targets.\n */\nfunction getAllNonTargetColumns(\n  columnsList: HTMLElement,\n  activeParentId?: string,\n): HTMLElement[] {\n  const selector = activeParentId\n    ? `[data-pinned-position], [data-columnid]:not([data-parentcolumnid=\"${CSS.escape(\n        String(activeParentId),\n      )}\"])`\n    : '[data-pinned-position]';\n\n  const nonTargetColumns = columnsList.querySelectorAll<HTMLElement>(selector);\n\n  return Array.from(nonTargetColumns);\n}\n\n/**\n * Moves the column in the settings modal along the y-axis by the given number of pixels.\n *\n * @param localColumn - the column in the settings modal to translate.\n * @param value - number of pixels (positive for down or negative for up).\n * @internal\n */\nfunction translateColumnY(localColumn: HTMLElement, value: number): void {\n  const transform = `translateY(${value}px)`;\n  const transition = `transform ${Animations.SlideIn.Duration.Base} ${Animations.Move.Easing}`;\n  localColumn.style.transform = transform;\n  localColumn.style.transition = transition;\n}\n\n/**\n * Resets the transform style on all items in the columns list.\n *\n * @param localColumns - the columns in the settings modal to reset.\n */\nexport function resetAllColumnsStyles(localColumns: HTMLElement[]): void {\n  for (const column of localColumns) {\n    column.style.removeProperty('transform');\n    column.style.removeProperty('transition');\n    column.classList.remove(\n      columnSettingsDndStyles.disabledNonTargetLocalColumn,\n      columnListItemStyles.dragging,\n    );\n  }\n  lastAffectedItems.clear();\n  hiddenChildColumns.clear();\n}\n\n/**\n * Applies styles to visually indicate droppable targets for the currently active columns in the settings modal.\n * Pinned columns or columns that do not share the same parent as the dragged column will appear visually disabled.\n *\n * @param columnsList - the columns list element containing the columns to style.\n * @param activeParentId - the parent id of the currently actively dragged column.\n * @internal\n */\nexport function styleNonTargetColumns(\n  columnsList: HTMLElement,\n  activeParentId?: string,\n): void {\n  const nonTargetLocalColumns = getAllNonTargetColumns(\n    columnsList,\n    activeParentId,\n  );\n\n  for (const column of nonTargetLocalColumns) {\n    column.classList.add(columnSettingsDndStyles.disabledNonTargetLocalColumn);\n  }\n}\n\n/**\n * Applies the dragging class to the specified child columns.\n *\n * @param columnsList - the columns list element containing the columns.\n * @param childColumnIds - the ids of child columns to apply styles to.\n */\nfunction styleDraggedChildColumns(\n  columnsList: HTMLElement,\n  childColumnIds: Iterable<string>,\n): void {\n  for (const columnId of childColumnIds) {\n    const childColumn = getColumnById(columnsList, columnId);\n    if (childColumn) {\n      childColumn.classList.add(columnListItemStyles.dragging);\n    }\n  }\n}\n\n/**\n * Hides child columns during parent column drag and\n * tracks which columns should remain hidden during scrolling.\n * This is necessary to handle virtualization - when child columns scroll back into view,\n * they need to be hidden again.\n *\n * @param columnsList - the columns list element containing the columns.\n * @param childColumnIds - the ids of child columns to hide.\n * @internal\n */\nexport function hideChildColumns(\n  columnsList: HTMLElement,\n  childColumnIds: string[],\n): void {\n  // Clear previous tracking and set new ones\n  hiddenChildColumns = new Set(childColumnIds);\n  styleDraggedChildColumns(columnsList, childColumnIds);\n}\n\n/**\n * Reapplies the isDragging class to child columns that should be hidden.\n * Called when scrolling during drag to handle newly rendered virtualized items.\n *\n * @param columnsList - the columns list element containing the columns.\n * @internal\n */\nexport function hideChildColumnsOnScroll(columnsList: HTMLElement): void {\n  if (hiddenChildColumns.size === 0) {\n    return;\n  }\n  styleDraggedChildColumns(columnsList, hiddenChildColumns);\n}\n\n/**\n * Gets the source and destination indexes for a dragged column.\n *\n * @param localColumnOrder - contains the ids of the columns in order.\n * @param activeId - the id of the dragged column in the settings modal.\n * @param overId - the id of the column where the active column is currently dragged over.\n * @returns indexes from where a column is dragged and where it is dragged to.\n */\nexport function getDragIndexes(\n  localColumnOrder: string[],\n  activeId: string,\n  overId: string,\n): { fromIndex: number; toIndex: number } {\n  const fromIndex = localColumnOrder.indexOf(activeId);\n  const toIndex = localColumnOrder.indexOf(overId);\n  return { fromIndex, toIndex };\n}\n\n/**\n * Transforms columns in the settings modal upwards or downwards to make space for the item being dragged.\n *\n * @param container - the container element holding the columns in the settings modal.\n * @param columnIds - the ids of columns to transform.\n * @param amountToTransform - number of pixels to translate (positive for down or negative for up).\n * @param newAffectedItems - set to save all items that are transformed during the current onDragOver call.\n */\nfunction transformColumns(\n  container: HTMLElement,\n  columnIds: string[] | Set<string>,\n  amountToTransform: number,\n  newAffectedItems?: Set<string>,\n): void {\n  for (const columnId of columnIds) {\n    const column = getColumnById(container, columnId);\n    if (!column) {\n      continue;\n    }\n    translateColumnY(column, amountToTransform);\n    if (newAffectedItems) {\n      newAffectedItems.add(columnId);\n      lastAffectedItems.delete(columnId);\n    }\n  }\n}\n// #endregion Transforms\n\n// #region CollisionDetection\n// min local column height is 33px, to ensure the offset is in the top/bottom half: 33 / 2\nconst DATA_TABLE_COLUMNS_LIST_DND_COLLISION_OFFSET =\n  DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT / 2;\n\n/**\n * Gets a list of ordered leaf column ids for the given column based on the column order.\n *\n * @param column - the column to get the leaf columns for.\n * @param localColumnOrder - the local column order to use for filtering.\n * @returns an array of ordered leaf column ids for the given column, or an empty array if the column is already a leaf column.\n * @internal\n */\nexport function getLeafColumnsForColumn<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(\n  column: Column<TFeatures, TData, TValue>,\n  localColumnOrder: string[],\n): string[] {\n  if (column.columns.length === 0) {\n    return [];\n  }\n  return localColumnOrder.filter((columnId) =>\n    column.columns.some((col) => col.id === columnId),\n  );\n}\n\n/**\n * Custom collision detection algorithm for drag and drop in the column settings modal.\n * Determines the closest droppable target within the Y-axis based on the dragging direction.\n *\n * @param param0 - Object containing the droppable containers, the droppable rects, the collision rect and\n *                 the active element, which are needed for the collision detection.\n * @returns An array of collision descriptors, sorted by the distance to the dragged column, or an empty array if none is found.\n * @internal\n */\nfunction closestTargetWithinY({\n  droppableContainers,\n  droppableRects,\n  collisionRect,\n  active,\n}: Parameters<CollisionDetection>[0]): Collision[] {\n  const initialRect = active.rect.current.initial;\n  if (initialRect === null) {\n    return [];\n  }\n\n  const collisions: CollisionDescriptor[] = [];\n\n  // When dragging a parent column, we also need to consider the height of all its child columns,\n  // as they are moved together with the parent column.\n  // Depending on the dragging direction, we take either the top or the bottom of the drag overlay to check for collisions\n  // (minus a small offset, so the overlay and underlying list item have to overlap a bit, before they are swapped).\n  const isDraggingUp = collisionRect.top <= initialRect.top;\n  const collisionRectY = isDraggingUp\n    ? collisionRect.top + DATA_TABLE_COLUMNS_LIST_DND_COLLISION_OFFSET\n    : collisionRect.bottom - DATA_TABLE_COLUMNS_LIST_DND_COLLISION_OFFSET;\n\n  for (const droppableContainer of droppableContainers) {\n    const { id } = droppableContainer;\n    const rect = droppableRects.get(id);\n    if (rect === undefined) {\n      continue;\n    }\n\n    if (rect.top <= collisionRectY && collisionRectY <= rect.bottom) {\n      return [\n        {\n          id,\n          data: { droppableContainer },\n        },\n      ];\n    }\n\n    // in case the dragged column's collisionRectY is not directly within any of the droppable containers,\n    // we need to find the closest one. Therefore, we calculate the distance between\n    // the droppable container's top/bottom and the collisionRectY coordinate.\n    const droppableContainerY = isDraggingUp ? rect.top : rect.bottom;\n    const distance = Math.abs(collisionRectY - droppableContainerY);\n    collisions.push({ id, data: { droppableContainer, value: distance } });\n  }\n\n  return collisions.toSorted((a, b) => a.data.value - b.data.value);\n}\n\n/**\n * Information about the currently dragged column.\n * @internal\n */\nexport type DraggingColumnInfo<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = {\n  id: string;\n  index: number;\n  column: Column<TFeatures, TData>;\n};\n\n/**\n * Custom collision detection for column ordering in the column settings modal.\n * Filters out invalid drop targets based on the nested structure and column pinning state, and applies\n * the closestCenter collision detection on the remaining valid targets.\n *\n * @param localColumnOrder - the column order before dragging.\n * @param localColumnPinning - the column pinning state in the column settings modal before dragging.\n * @param draggingColumnInfo - information about the currently dragged column.\n * @returns dnd-kit CollisionDetection\n * @internal\n */\nexport function createColumnOrderSettingsCollisionDetection<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  localColumnOrder: string[],\n  localColumnPinning: ColumnPinningState,\n  draggingColumnInfo: DraggingColumnInfo<TFeatures, TData> | null,\n): CollisionDetection {\n  return ({ active, droppableContainers, ...rest }) => {\n    if (!draggingColumnInfo) {\n      return [];\n    }\n\n    const { column: activeColumn, index: activeIndex } = draggingColumnInfo;\n    if (activeColumn === undefined) {\n      return [];\n    }\n    const activeParentId = activeColumn.parent?.id;\n\n    const validTargets = droppableContainers.filter((target) => {\n      const currentTarget = target.data.current;\n      const targetColumn = currentTarget?.column as Column<TFeatures, TData>;\n      const targetParentColumn = targetColumn.parent;\n      const targetIndex = currentTarget?.columnIndex as number;\n\n      // skip the active column itself\n      if (activeIndex === targetIndex) {\n        return true;\n      }\n\n      const hasSameParent = targetParentColumn?.id === activeParentId;\n\n      // the active column is a child column, so only allow dropping on columns with the same parent\n      if (activeParentId !== undefined) {\n        return hasSameParent;\n      }\n\n      // the active column is either a standalone column or a parent column\n      // therefore, only allow dropping before or after the entire group of child columns\n      if (targetColumn.columns.length > 0) {\n        // the currently active column is dragged upwards, only allow dropping before the first child column\n        return activeIndex > targetIndex;\n      }\n      if (targetParentColumn?.id !== undefined) {\n        const orderedChildIds = getLeafColumnsForColumn(\n          targetParentColumn,\n          localColumnOrder,\n        );\n        const lastUnpinnedChildId = orderedChildIds.findLast(\n          (childId) => !getIsColumnPinned(childId, localColumnPinning),\n        );\n\n        if (targetColumn.id === lastUnpinnedChildId) {\n          // the currently active column is dragged downwards, only allow dropping after the last child column\n          return activeIndex < targetIndex;\n        }\n      }\n      // for all remaining columns, only allow dropping on columns with the same parent\n      return hasSameParent;\n    });\n\n    return closestTargetWithinY({\n      active,\n      droppableContainers: validTargets,\n      ...rest,\n    });\n  };\n}\n// #endregion CollisionDetection\n\n// #region Modifiers\n/**\n * Restricts the vertical movement of an element within the specified bounds.\n *\n * @param transform - Transform values of the currently dragged element\n * @param rect - The bounding rectangle of the element being transformed.\n * @param verticalBounds - The bounds within which the element should be restricted.\n * @returns The updated transform object with restricted y value.\n */\nfunction restrictToVerticalBounds(\n  transform: DragAndDropTransform,\n  rect: ClientRect,\n  verticalBounds: {\n    top: number;\n    bottom: number;\n  },\n): DragAndDropTransform {\n  const value = {\n    ...transform,\n  };\n\n  if (rect.top + transform.y <= verticalBounds.top) {\n    value.y = verticalBounds.top - rect.top;\n  } else if (rect.bottom + transform.y >= verticalBounds.bottom) {\n    value.y = verticalBounds.bottom - rect.bottom;\n  }\n\n  return value;\n}\n\n/**\n * Creates a modifier that restricts the drag overlay to the columns list area within the settings modal.\n *\n * @param modalContent - The columns list element to restrict dragging within.\n * @returns dnd-kit modifier\n * @internal\n */\nexport function createRestrictToColumnsListAreaModifier(\n  modalContent: HTMLDivElement | null,\n): Modifier {\n  return ({ transform, draggingNodeRect }) => {\n    if (!draggingNodeRect || modalContent === null) {\n      return transform;\n    }\n\n    // Restrict dragging to the vertical axis\n    transform.x = 0;\n\n    const columnsListRect = modalContent.getBoundingClientRect();\n    const verticalBounds = {\n      top: columnsListRect.top,\n      bottom: columnsListRect.bottom,\n    };\n\n    const lastLeftPinned =\n      Array.from(\n        modalContent.querySelectorAll('[data-pinned-position=\"left\"]'),\n      ).at(-1) ?? null;\n    const firstRightPinned = modalContent.querySelector(\n      '[data-pinned-position=\"right\"]',\n    );\n\n    // adjust top bounds to restrict dragging to the list area\n    // the draggable area starts below the top of the dnd container,\n    // or the last left-pinned column if present.\n    let adjustedTopBound = verticalBounds.top;\n    // restrict dragging below the last left-pinned column if present\n    if (lastLeftPinned) {\n      const pinnedBottom = lastLeftPinned.getBoundingClientRect().bottom;\n      adjustedTopBound = Math.max(adjustedTopBound, pinnedBottom);\n    }\n\n    verticalBounds.top = adjustedTopBound;\n    // adjust bottom bounds\n    if (firstRightPinned) {\n      verticalBounds.bottom = Math.min(\n        verticalBounds.bottom,\n        firstRightPinned.getBoundingClientRect().top -\n          // account for the bottom border of the last item\n          DATA_TABLE_COLUMNS_LIST_ITEM_BOTTOM_BORDER,\n      );\n    }\n\n    return restrictToVerticalBounds(\n      transform,\n      draggingNodeRect,\n      verticalBounds,\n    );\n  };\n}\n// #endregion Modifiers\n\n/**\n * Gets the drag handle button for a specific column in the column settings modal.\n * @param columnId - the id of the column to get the drag handle for.\n * @param columnsList - the columns list element holding the columns in the settings modal.\n * @returns the drag handle button for the specified column, or null if not found.\n */\nexport function getDragHandleForColumn(\n  columnId: string,\n  columnsList: HTMLElement | null,\n): HTMLButtonElement | null {\n  if (columnsList === null) {\n    return null;\n  }\n\n  return (\n    columnsList?.querySelector<HTMLButtonElement>(\n      `[data-columnid=\"${CSS.escape(\n        columnId,\n      )}\"]:not([data-pinned-position]) button`,\n    ) ?? null\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type ClientRect,\n  type Collision,\n  type CollisionDescriptor,\n  type CollisionDetection,\n  type DragOverEvent,\n  type Modifier,\n} from '@dnd-kit/core';\nimport type {\n  ColumnPinningState,\n  Column,\n  RowData,\n  TableFeatures,\n  CellData,\n} from '@tanstack/react-table';\n\nimport Animations from '@dynatrace/strato-design-tokens/animations';\n\nimport * as columnSettingsDndStyles from './ColumnOrderSettingsDragAndDrop.sty.js';\nimport { getIsColumnPinned } from '../../../../features/ColumnPinning/column-pinning-utils.js';\nimport type { DragAndDropTransform } from '../../../../features/types/dnd.types.js';\nimport * as columnListItemStyles from '../DataTableColumnsListItem.sty.js';\n\nexport const COLUMNS_LIST_ITEM_BORDER_HEIGHT = 1;\nexport const DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT =\n  32 + COLUMNS_LIST_ITEM_BORDER_HEIGHT;\n\n// all columns in the settings modal that were transformed in the last onDragOver call\nlet lastAffectedItems = new Set<string>();\n\n// child columns of a parent column that should be hidden during drag\n// when items are virtualized and scroll back into view, they need to be hidden again\nlet hiddenChildColumns = new Set<string>();\n\n// #region Transforms\n/**\n * Transforms columns in the settings modal upwards or downwards to make space for the item which is currently being dragged.\n *\n * @param columnsList - the columns list element holding the columns in the settings modal.\n * @param event - contains \"active\" (item being dragged) and \"over\" ids (item where the active item is currently dragged over).\n * @param localColumnOrder - column order before dragging.\n * @param transformValue - the value by which the columns should be transformed (positive for down or negative for up).\n * @param activeColumn - the column which is currently being dragged.\n * @internal\n */\nexport function transformColumnsOnDragOver<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  columnsList: HTMLElement | null,\n  event: DragOverEvent,\n  localColumnOrder: string[],\n  transformValue: number,\n  activeColumn: Column<TFeatures, TData> | undefined,\n): void {\n  if (!columnsList || !activeColumn) {\n    return;\n  }\n\n  const { over, collisions } = event;\n  if (!over || !collisions?.length) {\n    return;\n  }\n\n  // keep track of all items that are transformed during the current onDragOver call\n  const newAffectedColumns = new Set<string>();\n  const { fromIndex, toIndex } = getDragIndexes(\n    localColumnOrder,\n    activeColumn.id,\n    over.data.current?.columnId as string,\n  );\n  const adjustedTransformValue =\n    transformValue + COLUMNS_LIST_ITEM_BORDER_HEIGHT;\n\n  if (fromIndex < toIndex) {\n    // only when dragging downwards:\n    // when dragging a parent column, the drag overlay is moved above child columns as well,\n    // so we need to ensure that the actual parent column, including its child columns, in the columns list are not transformed\n    const adaptedFromIndex = fromIndex + activeColumn.columns.length;\n\n    transformColumns(\n      columnsList,\n      localColumnOrder.slice(adaptedFromIndex + 1, toIndex + 1),\n      -adjustedTransformValue,\n      newAffectedColumns,\n    );\n  } else if (fromIndex > toIndex) {\n    transformColumns(\n      columnsList,\n      localColumnOrder.slice(toIndex, fromIndex),\n      adjustedTransformValue,\n      newAffectedColumns,\n    );\n  }\n\n  // reset items that were transformed in the last drag operation but are not in the current one\n  transformColumns(columnsList, lastAffectedItems, 0);\n  lastAffectedItems = newAffectedColumns;\n}\n\n/**\n * Gets the rendered element of an unpinned column in the settings modal with a given column id.\n *\n * @param columnsList - the columns list element holding the columns in the settings modal.\n * @param columnId - id of the column.\n * @returns the column in the settings modal with the given id, or null if not found.\n * @internal\n */\nexport function getColumnById(\n  columnsList: HTMLElement,\n  columnId: string,\n): HTMLElement | null {\n  return columnsList.querySelector<HTMLElement>(\n    `[data-columnid=\"${CSS.escape(columnId)}\"]:not([data-pinned-position])`,\n  );\n}\n\n/**\n * Gets all column elements displayed in the column settings modal.\n *\n * @param columnsList - the columns list element holding the columns shown in the settings modal.\n * @returns all columns in the settings modal.\n * @internal\n */\nexport function getAllColumns(columnsList: HTMLElement): HTMLElement[] {\n  const allLocalColumns =\n    columnsList.querySelectorAll<HTMLElement>('[data-columnid]');\n  return Array.from(allLocalColumns);\n}\n\n/**\n * Gets all column elements in the settings modal that are pinned or don't have the same parent id.\n *\n * @param columnsList - the columns list element holding the columns in the settings modal.\n * @param activeParentId - the parent id of the currently actively dragged column.\n * @returns all columns in the settings modal that are not valid drop targets.\n */\nfunction getAllNonTargetColumns(\n  columnsList: HTMLElement,\n  activeParentId?: string,\n): HTMLElement[] {\n  const selector = activeParentId\n    ? `[data-pinned-position], [data-columnid]:not([data-parentcolumnid=\"${CSS.escape(\n        String(activeParentId),\n      )}\"])`\n    : '[data-pinned-position]';\n\n  const nonTargetColumns = columnsList.querySelectorAll<HTMLElement>(selector);\n\n  return Array.from(nonTargetColumns);\n}\n\n/**\n * Moves the column in the settings modal along the y-axis by the given number of pixels.\n *\n * @param localColumn - the column in the settings modal to translate.\n * @param value - number of pixels (positive for down or negative for up).\n * @internal\n */\nfunction translateColumnY(localColumn: HTMLElement, value: number): void {\n  const transform = `translateY(${value}px)`;\n  const transition = `transform ${Animations.SlideIn.Duration.Base} ${Animations.Move.Easing}`;\n  localColumn.style.transform = transform;\n  localColumn.style.transition = transition;\n}\n\n/**\n * Resets the transform style on all items in the columns list.\n *\n * @param localColumns - the columns in the settings modal to reset.\n */\nexport function resetAllColumnsStyles(localColumns: HTMLElement[]): void {\n  for (const column of localColumns) {\n    column.style.removeProperty('transform');\n    column.style.removeProperty('transition');\n    column.classList.remove(\n      columnSettingsDndStyles.disabledNonTargetLocalColumn,\n      columnListItemStyles.dragging,\n    );\n  }\n  lastAffectedItems.clear();\n  hiddenChildColumns.clear();\n}\n\n/**\n * Applies styles to visually indicate droppable targets for the currently active columns in the settings modal.\n * Pinned columns or columns that do not share the same parent as the dragged column will appear visually disabled.\n *\n * @param columnsList - the columns list element containing the columns to style.\n * @param activeParentId - the parent id of the currently actively dragged column.\n * @internal\n */\nexport function styleNonTargetColumns(\n  columnsList: HTMLElement,\n  activeParentId?: string,\n): void {\n  const nonTargetLocalColumns = getAllNonTargetColumns(\n    columnsList,\n    activeParentId,\n  );\n\n  for (const column of nonTargetLocalColumns) {\n    column.classList.add(columnSettingsDndStyles.disabledNonTargetLocalColumn);\n  }\n}\n\n/**\n * Applies the dragging class to the specified child columns.\n *\n * @param columnsList - the columns list element containing the columns.\n * @param childColumnIds - the ids of child columns to apply styles to.\n */\nfunction styleDraggedChildColumns(\n  columnsList: HTMLElement,\n  childColumnIds: Iterable<string>,\n): void {\n  for (const columnId of childColumnIds) {\n    const childColumn = getColumnById(columnsList, columnId);\n    if (childColumn) {\n      childColumn.classList.add(columnListItemStyles.dragging);\n    }\n  }\n}\n\n/**\n * Hides child columns during parent column drag and\n * tracks which columns should remain hidden during scrolling.\n * This is necessary to handle virtualization - when child columns scroll back into view,\n * they need to be hidden again.\n *\n * @param columnsList - the columns list element containing the columns.\n * @param childColumnIds - the ids of child columns to hide.\n * @internal\n */\nexport function hideChildColumns(\n  columnsList: HTMLElement,\n  childColumnIds: string[],\n): void {\n  // Clear previous tracking and set new ones\n  hiddenChildColumns = new Set(childColumnIds);\n  styleDraggedChildColumns(columnsList, childColumnIds);\n}\n\n/**\n * Reapplies the isDragging class to child columns that should be hidden.\n * Called when scrolling during drag to handle newly rendered virtualized items.\n *\n * @param columnsList - the columns list element containing the columns.\n * @internal\n */\nexport function hideChildColumnsOnScroll(columnsList: HTMLElement): void {\n  if (hiddenChildColumns.size === 0) {\n    return;\n  }\n  styleDraggedChildColumns(columnsList, hiddenChildColumns);\n}\n\n/**\n * Gets the source and destination indexes for a dragged column.\n *\n * @param localColumnOrder - contains the ids of the columns in order.\n * @param activeId - the id of the dragged column in the settings modal.\n * @param overId - the id of the column where the active column is currently dragged over.\n * @returns indexes from where a column is dragged and where it is dragged to.\n */\nexport function getDragIndexes(\n  localColumnOrder: string[],\n  activeId: string,\n  overId: string,\n): { fromIndex: number; toIndex: number } {\n  const fromIndex = localColumnOrder.indexOf(activeId);\n  const toIndex = localColumnOrder.indexOf(overId);\n  return { fromIndex, toIndex };\n}\n\n/**\n * Transforms columns in the settings modal upwards or downwards to make space for the item being dragged.\n *\n * @param container - the container element holding the columns in the settings modal.\n * @param columnIds - the ids of columns to transform.\n * @param amountToTransform - number of pixels to translate (positive for down or negative for up).\n * @param newAffectedItems - set to save all items that are transformed during the current onDragOver call.\n */\nfunction transformColumns(\n  container: HTMLElement,\n  columnIds: string[] | Set<string>,\n  amountToTransform: number,\n  newAffectedItems?: Set<string>,\n): void {\n  for (const columnId of columnIds) {\n    const column = getColumnById(container, columnId);\n    if (!column) {\n      continue;\n    }\n    translateColumnY(column, amountToTransform);\n    if (newAffectedItems) {\n      newAffectedItems.add(columnId);\n      lastAffectedItems.delete(columnId);\n    }\n  }\n}\n// #endregion Transforms\n\n// #region CollisionDetection\n// min local column height is 33px, to ensure the offset is in the top/bottom half: 33 / 2\nconst DATA_TABLE_COLUMNS_LIST_DND_COLLISION_OFFSET =\n  DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT / 2;\n\n/**\n * Gets a list of ordered leaf column ids for the given column based on the column order.\n *\n * @param column - the column to get the leaf columns for.\n * @param localColumnOrder - the local column order to use for filtering.\n * @returns an array of ordered leaf column ids for the given column, or an empty array if the column is already a leaf column.\n * @internal\n */\nexport function getLeafColumnsForColumn<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(\n  column: Column<TFeatures, TData, TValue>,\n  localColumnOrder: string[],\n): string[] {\n  if (column.columns.length === 0) {\n    return [];\n  }\n  return localColumnOrder.filter((columnId) =>\n    column.columns.some((col) => col.id === columnId),\n  );\n}\n\n/**\n * Custom collision detection algorithm for drag and drop in the column settings modal.\n * Determines the closest droppable target within the Y-axis based on the dragging direction.\n *\n * @param param0 - Object containing the droppable containers, the droppable rects, the collision rect and\n *                 the active element, which are needed for the collision detection.\n * @returns An array of collision descriptors, sorted by the distance to the dragged column, or an empty array if none is found.\n * @internal\n */\nfunction closestTargetWithinY({\n  droppableContainers,\n  droppableRects,\n  collisionRect,\n  active,\n}: Parameters<CollisionDetection>[0]): Collision[] {\n  const initialRect = active.rect.current.initial;\n  if (initialRect === null) {\n    return [];\n  }\n\n  const collisions: CollisionDescriptor[] = [];\n\n  // When dragging a parent column, we also need to consider the height of all its child columns,\n  // as they are moved together with the parent column.\n  // Depending on the dragging direction, we take either the top or the bottom of the drag overlay to check for collisions\n  // (minus a small offset, so the overlay and underlying list item have to overlap a bit, before they are swapped).\n  const isDraggingUp = collisionRect.top <= initialRect.top;\n  const collisionRectY = isDraggingUp\n    ? collisionRect.top + DATA_TABLE_COLUMNS_LIST_DND_COLLISION_OFFSET\n    : collisionRect.bottom - DATA_TABLE_COLUMNS_LIST_DND_COLLISION_OFFSET;\n\n  for (const droppableContainer of droppableContainers) {\n    const { id } = droppableContainer;\n    const rect = droppableRects.get(id);\n    if (rect === undefined) {\n      continue;\n    }\n\n    if (rect.top <= collisionRectY && collisionRectY <= rect.bottom) {\n      return [\n        {\n          id,\n          data: { droppableContainer },\n        },\n      ];\n    }\n\n    // in case the dragged column's collisionRectY is not directly within any of the droppable containers,\n    // we need to find the closest one. Therefore, we calculate the distance between\n    // the droppable container's top/bottom and the collisionRectY coordinate.\n    const droppableContainerY = isDraggingUp ? rect.top : rect.bottom;\n    const distance = Math.abs(collisionRectY - droppableContainerY);\n    collisions.push({ id, data: { droppableContainer, value: distance } });\n  }\n\n  return collisions.toSorted((a, b) => a.data.value - b.data.value);\n}\n\n/**\n * Information about the currently dragged column.\n * @internal\n */\nexport type DraggingColumnInfo<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = {\n  id: string;\n  index: number;\n  column: Column<TFeatures, TData>;\n};\n\n/**\n * Custom collision detection for column ordering in the column settings modal.\n * Filters out invalid drop targets based on the nested structure and column pinning state, and applies\n * the closestCenter collision detection on the remaining valid targets.\n *\n * @param localColumnOrder - the column order before dragging.\n * @param localColumnPinning - the column pinning state in the column settings modal before dragging.\n * @param draggingColumnInfo - information about the currently dragged column.\n * @returns dnd-kit CollisionDetection\n * @internal\n */\nexport function createColumnOrderSettingsCollisionDetection<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  localColumnOrder: string[],\n  localColumnPinning: ColumnPinningState,\n  draggingColumnInfo: DraggingColumnInfo<TFeatures, TData> | null,\n): CollisionDetection {\n  return ({ active, droppableContainers, ...rest }) => {\n    if (!draggingColumnInfo) {\n      return [];\n    }\n\n    const { column: activeColumn, index: activeIndex } = draggingColumnInfo;\n    if (activeColumn === undefined) {\n      return [];\n    }\n    const activeParentId = activeColumn.parent?.id;\n\n    const validTargets = droppableContainers.filter((target) => {\n      const currentTarget = target.data.current;\n      const targetColumn = currentTarget?.column as Column<TFeatures, TData>;\n      const targetParentColumn = targetColumn.parent;\n      const targetIndex = currentTarget?.columnIndex as number;\n\n      // skip the active column itself\n      if (activeIndex === targetIndex) {\n        return true;\n      }\n\n      const hasSameParent = targetParentColumn?.id === activeParentId;\n\n      // the active column is a child column, so only allow dropping on columns with the same parent\n      if (activeParentId !== undefined) {\n        return hasSameParent;\n      }\n\n      // the active column is either a standalone column or a parent column\n      // therefore, only allow dropping before or after the entire group of child columns\n      if (targetColumn.columns.length > 0) {\n        // the currently active column is dragged upwards, only allow dropping before the first child column\n        return activeIndex > targetIndex;\n      }\n      if (targetParentColumn?.id !== undefined) {\n        const orderedChildIds = getLeafColumnsForColumn(\n          targetParentColumn,\n          localColumnOrder,\n        );\n        const lastUnpinnedChildId = orderedChildIds.findLast(\n          (childId) => !getIsColumnPinned(childId, localColumnPinning),\n        );\n\n        if (targetColumn.id === lastUnpinnedChildId) {\n          // the currently active column is dragged downwards, only allow dropping after the last child column\n          return activeIndex < targetIndex;\n        }\n      }\n      // for all remaining columns, only allow dropping on columns with the same parent\n      return hasSameParent;\n    });\n\n    return closestTargetWithinY({\n      active,\n      droppableContainers: validTargets,\n      ...rest,\n    });\n  };\n}\n// #endregion CollisionDetection\n\n// #region Modifiers\n/**\n * Restricts the vertical movement of an element within the specified bounds.\n *\n * @param transform - Transform values of the currently dragged element\n * @param rect - The bounding rectangle of the element being transformed.\n * @param verticalBounds - The bounds within which the element should be restricted.\n * @returns The updated transform object with restricted y value.\n */\nfunction restrictToVerticalBounds(\n  transform: DragAndDropTransform,\n  rect: ClientRect,\n  verticalBounds: {\n    top: number;\n    bottom: number;\n  },\n): DragAndDropTransform {\n  const value = {\n    ...transform,\n  };\n\n  if (rect.top + transform.y <= verticalBounds.top) {\n    value.y = verticalBounds.top - rect.top;\n  } else if (rect.bottom + transform.y >= verticalBounds.bottom) {\n    value.y = verticalBounds.bottom - rect.bottom;\n  }\n\n  return value;\n}\n\n/**\n * Creates a modifier that restricts the drag overlay to the columns list area within the settings modal.\n *\n * @param modalContent - The columns list element to restrict dragging within.\n * @returns dnd-kit modifier\n * @internal\n */\nexport function createRestrictToColumnsListAreaModifier(\n  modalContent: HTMLDivElement | null,\n): Modifier {\n  return ({ transform, draggingNodeRect }) => {\n    if (!draggingNodeRect || modalContent === null) {\n      return transform;\n    }\n\n    // Restrict dragging to the vertical axis\n    transform.x = 0;\n\n    const columnsListRect = modalContent.getBoundingClientRect();\n    const verticalBounds = {\n      top: columnsListRect.top,\n      bottom: columnsListRect.bottom,\n    };\n\n    // Only unpinned columns are reorderable; clamp to section headers rather than\n    // column elements \u2014 headers don't transform during drag, preventing jitter.\n    const firstUnpinned = modalContent.querySelector(\n      '[data-columnid]:not([data-pinned-position])',\n    );\n    const unpinnedHeader = firstUnpinned?.previousElementSibling;\n    if (unpinnedHeader && !unpinnedHeader.hasAttribute('data-columnid')) {\n      verticalBounds.top = Math.max(\n        verticalBounds.top,\n        unpinnedHeader.getBoundingClientRect().bottom,\n      );\n    }\n\n    return restrictToVerticalBounds(\n      transform,\n      draggingNodeRect,\n      verticalBounds,\n    );\n  };\n}\n// #endregion Modifiers\n\n/**\n * Gets the drag handle button for a specific column in the column settings modal.\n * @param columnId - the id of the column to get the drag handle for.\n * @param columnsList - the columns list element holding the columns in the settings modal.\n * @returns the drag handle button for the specified column, or null if not found.\n */\nexport function getDragHandleForColumn(\n  columnId: string,\n  columnsList: HTMLElement | null,\n): HTMLButtonElement | null {\n  if (columnsList === null) {\n    return null;\n  }\n\n  return (\n    columnsList?.querySelector<HTMLButtonElement>(\n      `[data-columnid=\"${CSS.escape(\n        columnId,\n      )}\"]:not([data-pinned-position]) button`,\n    ) ?? null\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { FormattedMessage, useIntl } from "react-intl";
-import { PinIcon } from "@dynatrace/strato-icons";
+import { PinIcon, UnpinIcon } from "@dynatrace/strato-icons";
 import { Button } from "../../../../../buttons/button/Button.js";
 import { Menu } from "../../../../../navigation/menu/Menu.js";
 import { Tooltip } from "../../../../../overlays/tooltip/Tooltip.js";
@@ -49,7 +49,7 @@ function ColumnPinningMenu(props) {
     updateLocalColumnPinning(newState);
   };
   return /* @__PURE__ */ jsx(Tooltip, { text: pinningLabel, placement: "right", children: /* @__PURE__ */ jsxs(Menu, { children: [
-    /* @__PURE__ */ jsx(Menu.Trigger, { children: /* @__PURE__ */ jsx(Button, { size: "condensed", "aria-label": pinningLabel, children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(PinIcon, {}) }) }) }),
+    /* @__PURE__ */ jsx(Menu.Trigger, { children: /* @__PURE__ */ jsx(Button, { size: "condensed", "aria-label": pinningLabel, children: /* @__PURE__ */ jsx(Button.Prefix, { children: pinnedPosition === false ? /* @__PURE__ */ jsx(PinIcon, {}) : /* @__PURE__ */ jsx(UnpinIcon, {}) }) }) }),
     /* @__PURE__ */ jsxs(Menu.Content, { children: [
       pinnedPosition !== "left" && /* @__PURE__ */ jsx(
         Menu.Item,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/ColumnPinningMenu.tsx"],
-  "sourcesContent": ["import type {\n  ColumnPinningPosition,\n  ColumnPinningState,\n  RowData,\n  TableFeatures,\n} from '@tanstack/react-table';\nimport { JSX } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { PinIcon } from '@dynatrace/strato-icons';\n\nimport type { ColumnListItem } from './column-settings-types.js';\nimport { Button } from '../../../../../buttons/button/Button.js';\nimport { Menu } from '../../../../../navigation/menu/Menu.js';\nimport { Tooltip } from '../../../../../overlays/tooltip/Tooltip.js';\nimport { pinColumns } from '../../../features/ColumnPinning/column-pinning-utils.js';\nimport { dataTableMessages } from '../../../messages.js';\n\ninterface ColumnPinningMenuProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> {\n  /**\n   * The column to render the pinning menu for.\n   */\n  column: ColumnListItem<TFeatures, TData>;\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   * The column pinning state in the settings modal.\n   */\n  localColumnPinning: ColumnPinningState;\n  /**\n   * Callback to update the pinning state in the settings modal.\n   */\n  updateLocalColumnPinning: (newState: ColumnPinningState) => void;\n}\n\n/**\n * Menu component for pinning/unpinning columns in the DataTable column settings.\n * @internal\n */\nexport function ColumnPinningMenu<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(props: Readonly<ColumnPinningMenuProps<TFeatures, TData>>): JSX.Element {\n  const {\n    column,\n    orderedFlatColumns,\n    localColumnPinning,\n    updateLocalColumnPinning,\n  } = props;\n\n  const intl = useIntl();\n  const columnId = column.id;\n  const pinnedPosition = column.pinned;\n  const pinningLabel = intl.formatMessage(dataTableMessages.pinColumnLabel, {\n    isUnpinned: pinnedPosition === false,\n  });\n\n  /**\n   * Returns all columns that belong to the same pinning region as the current column.\n   * If the current column is not pinned, the function returns the unpinned (\"center\") columns.\n   *\n   * @returns An array of columns from the same pinning region (left, right, or unpinned).\n   */\n  function getColumnsInSamePinningRegion(): ColumnListItem<TFeatures, TData>[] {\n    const position = pinnedPosition === false ? 'center' : pinnedPosition;\n    return orderedFlatColumns[position];\n  }\n\n  /**\n   * Returns the ID of the current column or, if it has nested columns,\n   * the IDs of its nested child columns in the same pinning region (left, right, or unpinned).\n   *\n   * @returns An array of column IDs that should be pinned or unpinned together.\n   */\n  function getIdsToPin(): string[] {\n    const hasNestedColumns = column.columns.length;\n    if (!hasNestedColumns) {\n      return [columnId];\n    }\n\n    const idsToPin: string[] = [];\n    const columns = getColumnsInSamePinningRegion();\n\n    // find parent column\n    // use key instead of ID, as the same parent (with same ID) can appear multiple times,\n    // even within the same pinned area\n    const startIndex = columns.findIndex((col) => col.key === column.key);\n    if (startIndex < 0) {\n      return [];\n    }\n    // get first nested child\n    let index = startIndex + 1;\n    let current = columns.at(index);\n    // collect all adjacent children\n    while (current?.parent?.id === columnId) {\n      idsToPin.push(current.id);\n      index++;\n      current = columns.at(index);\n    }\n    return idsToPin;\n  }\n\n  const pin = (position: ColumnPinningPosition): void => {\n    const idsToPin = getIdsToPin();\n    const newState = pinColumns(idsToPin, localColumnPinning, position);\n    updateLocalColumnPinning(newState);\n  };\n\n  return (\n    <Tooltip text={pinningLabel} placement=\"right\">\n      <Menu>\n        <Menu.Trigger>\n          <Button size=\"condensed\" aria-label={pinningLabel}>\n            <Button.Prefix>\n              <PinIcon />\n            </Button.Prefix>\n          </Button>\n        </Menu.Trigger>\n        <Menu.Content>\n          {pinnedPosition !== 'left' && (\n            <Menu.Item\n              onSelect={() => pin('left')}\n              data-dt-name=\"ColumnSettingsPinLeft\"\n            >\n              <FormattedMessage {...dataTableMessages.pinColumnLeftLabel} />\n            </Menu.Item>\n          )}\n          {pinnedPosition !== 'right' && (\n            <Menu.Item\n              onSelect={() => pin('right')}\n              data-dt-name=\"ColumnSettingsPinRight\"\n            >\n              <FormattedMessage {...dataTableMessages.pinColumnRightLabel} />\n            </Menu.Item>\n          )}\n          {pinnedPosition !== false && (\n            <Menu.Item\n              onSelect={() => pin(false)}\n              data-dt-name=\"ColumnSettingsUnpin\"\n            >\n              <FormattedMessage {...dataTableMessages.unpinColumnLabel} />\n            </Menu.Item>\n          )}\n        </Menu.Content>\n      </Menu>\n    </Tooltip>\n  );\n}\n"],
-  "mappings": "AA2Hc,cAIN,YAJM;AApHd,SAAS,kBAAkB,eAAe;AAE1C,SAAS,eAAe;AAGxB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAgC3B,SAAS,kBAGd,OAAwE;AACxE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,OAAO;AACxB,QAAM,iBAAiB,OAAO;AAC9B,QAAM,eAAe,KAAK,cAAc,kBAAkB,gBAAgB;AAAA,IACxE,YAAY,mBAAmB;AAAA,EACjC,CAAC;AAQD,WAAS,gCAAoE;AAC3E,UAAM,WAAW,mBAAmB,QAAQ,WAAW;AACvD,WAAO,mBAAmB,QAAQ;AAAA,EACpC;AAQA,WAAS,cAAwB;AAC/B,UAAM,mBAAmB,OAAO,QAAQ;AACxC,QAAI,CAAC,kBAAkB;AACrB,aAAO,CAAC,QAAQ;AAAA,IAClB;AAEA,UAAM,WAAqB,CAAC;AAC5B,UAAM,UAAU,8BAA8B;AAK9C,UAAM,aAAa,QAAQ,UAAU,CAAC,QAAQ,IAAI,QAAQ,OAAO,GAAG;AACpE,QAAI,aAAa,GAAG;AAClB,aAAO,CAAC;AAAA,IACV;AAEA,QAAI,QAAQ,aAAa;AACzB,QAAI,UAAU,QAAQ,GAAG,KAAK;AAE9B,WAAO,SAAS,QAAQ,OAAO,UAAU;AACvC,eAAS,KAAK,QAAQ,EAAE;AACxB;AACA,gBAAU,QAAQ,GAAG,KAAK;AAAA,IAC5B;AACA,WAAO;AAAA,EACT;AAEA,QAAM,MAAM,CAAC,aAA0C;AACrD,UAAM,WAAW,YAAY;AAC7B,UAAM,WAAW,WAAW,UAAU,oBAAoB,QAAQ;AAClE,6BAAyB,QAAQ;AAAA,EACnC;AAEA,SACE,oBAAC,WAAQ,MAAM,cAAc,WAAU,SACrC,+BAAC,QACC;AAAA,wBAAC,KAAK,SAAL,EACC,8BAAC,UAAO,MAAK,aAAY,cAAY,cACnC,8BAAC,OAAO,QAAP,EACC,8BAAC,WAAQ,GACX,GACF,GACF;AAAA,IACA,qBAAC,KAAK,SAAL,EACE;AAAA,yBAAmB,UAClB;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,UAAU,MAAM,IAAI,MAAM;AAAA,UAC1B,gBAAa;AAAA,UAEb,8BAAC,oBAAkB,GAAG,kBAAkB,oBAAoB;AAAA;AAAA,MAC9D;AAAA,MAED,mBAAmB,WAClB;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,UAAU,MAAM,IAAI,OAAO;AAAA,UAC3B,gBAAa;AAAA,UAEb,8BAAC,oBAAkB,GAAG,kBAAkB,qBAAqB;AAAA;AAAA,MAC/D;AAAA,MAED,mBAAmB,SAClB;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,UAAU,MAAM,IAAI,KAAK;AAAA,UACzB,gBAAa;AAAA,UAEb,8BAAC,oBAAkB,GAAG,kBAAkB,kBAAkB;AAAA;AAAA,MAC5D;AAAA,OAEJ;AAAA,KACF,GACF;AAEJ;",
+  "sourcesContent": ["import type {\n  ColumnPinningPosition,\n  ColumnPinningState,\n  RowData,\n  TableFeatures,\n} from '@tanstack/react-table';\nimport { JSX } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport { PinIcon, UnpinIcon } from '@dynatrace/strato-icons';\n\nimport type { ColumnListItem } from './column-settings-types.js';\nimport { Button } from '../../../../../buttons/button/Button.js';\nimport { Menu } from '../../../../../navigation/menu/Menu.js';\nimport { Tooltip } from '../../../../../overlays/tooltip/Tooltip.js';\nimport { pinColumns } from '../../../features/ColumnPinning/column-pinning-utils.js';\nimport { dataTableMessages } from '../../../messages.js';\n\ninterface ColumnPinningMenuProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> {\n  /**\n   * The column to render the pinning menu for.\n   */\n  column: ColumnListItem<TFeatures, TData>;\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   * The column pinning state in the settings modal.\n   */\n  localColumnPinning: ColumnPinningState;\n  /**\n   * Callback to update the pinning state in the settings modal.\n   */\n  updateLocalColumnPinning: (newState: ColumnPinningState) => void;\n}\n\n/**\n * Menu component for pinning/unpinning columns in the DataTable column settings.\n * @internal\n */\nexport function ColumnPinningMenu<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(props: Readonly<ColumnPinningMenuProps<TFeatures, TData>>): JSX.Element {\n  const {\n    column,\n    orderedFlatColumns,\n    localColumnPinning,\n    updateLocalColumnPinning,\n  } = props;\n\n  const intl = useIntl();\n  const columnId = column.id;\n  const pinnedPosition = column.pinned;\n  const pinningLabel = intl.formatMessage(dataTableMessages.pinColumnLabel, {\n    isUnpinned: pinnedPosition === false,\n  });\n\n  /**\n   * Returns all columns that belong to the same pinning region as the current column.\n   * If the current column is not pinned, the function returns the unpinned (\"center\") columns.\n   *\n   * @returns An array of columns from the same pinning region (left, right, or unpinned).\n   */\n  function getColumnsInSamePinningRegion(): ColumnListItem<TFeatures, TData>[] {\n    const position = pinnedPosition === false ? 'center' : pinnedPosition;\n    return orderedFlatColumns[position];\n  }\n\n  /**\n   * Returns the ID of the current column or, if it has nested columns,\n   * the IDs of its nested child columns in the same pinning region (left, right, or unpinned).\n   *\n   * @returns An array of column IDs that should be pinned or unpinned together.\n   */\n  function getIdsToPin(): string[] {\n    const hasNestedColumns = column.columns.length;\n    if (!hasNestedColumns) {\n      return [columnId];\n    }\n\n    const idsToPin: string[] = [];\n    const columns = getColumnsInSamePinningRegion();\n\n    // find parent column\n    // use key instead of ID, as the same parent (with same ID) can appear multiple times,\n    // even within the same pinned area\n    const startIndex = columns.findIndex((col) => col.key === column.key);\n    if (startIndex < 0) {\n      return [];\n    }\n    // get first nested child\n    let index = startIndex + 1;\n    let current = columns.at(index);\n    // collect all adjacent children\n    while (current?.parent?.id === columnId) {\n      idsToPin.push(current.id);\n      index++;\n      current = columns.at(index);\n    }\n    return idsToPin;\n  }\n\n  const pin = (position: ColumnPinningPosition): void => {\n    const idsToPin = getIdsToPin();\n    const newState = pinColumns(idsToPin, localColumnPinning, position);\n    updateLocalColumnPinning(newState);\n  };\n\n  return (\n    <Tooltip text={pinningLabel} placement=\"right\">\n      <Menu>\n        <Menu.Trigger>\n          <Button size=\"condensed\" aria-label={pinningLabel}>\n            <Button.Prefix>\n              {pinnedPosition === false ? <PinIcon /> : <UnpinIcon />}\n            </Button.Prefix>\n          </Button>\n        </Menu.Trigger>\n        <Menu.Content>\n          {pinnedPosition !== 'left' && (\n            <Menu.Item\n              onSelect={() => pin('left')}\n              data-dt-name=\"ColumnSettingsPinLeft\"\n            >\n              <FormattedMessage {...dataTableMessages.pinColumnLeftLabel} />\n            </Menu.Item>\n          )}\n          {pinnedPosition !== 'right' && (\n            <Menu.Item\n              onSelect={() => pin('right')}\n              data-dt-name=\"ColumnSettingsPinRight\"\n            >\n              <FormattedMessage {...dataTableMessages.pinColumnRightLabel} />\n            </Menu.Item>\n          )}\n          {pinnedPosition !== false && (\n            <Menu.Item\n              onSelect={() => pin(false)}\n              data-dt-name=\"ColumnSettingsUnpin\"\n            >\n              <FormattedMessage {...dataTableMessages.unpinColumnLabel} />\n            </Menu.Item>\n          )}\n        </Menu.Content>\n      </Menu>\n    </Tooltip>\n  );\n}\n"],
+  "mappings": "AA2H0C,cAIlC,YAJkC;AApH1C,SAAS,kBAAkB,eAAe;AAE1C,SAAS,SAAS,iBAAiB;AAGnC,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAgC3B,SAAS,kBAGd,OAAwE;AACxE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,OAAO;AACxB,QAAM,iBAAiB,OAAO;AAC9B,QAAM,eAAe,KAAK,cAAc,kBAAkB,gBAAgB;AAAA,IACxE,YAAY,mBAAmB;AAAA,EACjC,CAAC;AAQD,WAAS,gCAAoE;AAC3E,UAAM,WAAW,mBAAmB,QAAQ,WAAW;AACvD,WAAO,mBAAmB,QAAQ;AAAA,EACpC;AAQA,WAAS,cAAwB;AAC/B,UAAM,mBAAmB,OAAO,QAAQ;AACxC,QAAI,CAAC,kBAAkB;AACrB,aAAO,CAAC,QAAQ;AAAA,IAClB;AAEA,UAAM,WAAqB,CAAC;AAC5B,UAAM,UAAU,8BAA8B;AAK9C,UAAM,aAAa,QAAQ,UAAU,CAAC,QAAQ,IAAI,QAAQ,OAAO,GAAG;AACpE,QAAI,aAAa,GAAG;AAClB,aAAO,CAAC;AAAA,IACV;AAEA,QAAI,QAAQ,aAAa;AACzB,QAAI,UAAU,QAAQ,GAAG,KAAK;AAE9B,WAAO,SAAS,QAAQ,OAAO,UAAU;AACvC,eAAS,KAAK,QAAQ,EAAE;AACxB;AACA,gBAAU,QAAQ,GAAG,KAAK;AAAA,IAC5B;AACA,WAAO;AAAA,EACT;AAEA,QAAM,MAAM,CAAC,aAA0C;AACrD,UAAM,WAAW,YAAY;AAC7B,UAAM,WAAW,WAAW,UAAU,oBAAoB,QAAQ;AAClE,6BAAyB,QAAQ;AAAA,EACnC;AAEA,SACE,oBAAC,WAAQ,MAAM,cAAc,WAAU,SACrC,+BAAC,QACC;AAAA,wBAAC,KAAK,SAAL,EACC,8BAAC,UAAO,MAAK,aAAY,cAAY,cACnC,8BAAC,OAAO,QAAP,EACE,6BAAmB,QAAQ,oBAAC,WAAQ,IAAK,oBAAC,aAAU,GACvD,GACF,GACF;AAAA,IACA,qBAAC,KAAK,SAAL,EACE;AAAA,yBAAmB,UAClB;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,UAAU,MAAM,IAAI,MAAM;AAAA,UAC1B,gBAAa;AAAA,UAEb,8BAAC,oBAAkB,GAAG,kBAAkB,oBAAoB;AAAA;AAAA,MAC9D;AAAA,MAED,mBAAmB,WAClB;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,UAAU,MAAM,IAAI,OAAO;AAAA,UAC3B,gBAAa;AAAA,UAEb,8BAAC,oBAAkB,GAAG,kBAAkB,qBAAqB;AAAA;AAAA,MAC/D;AAAA,MAED,mBAAmB,SAClB;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,UAAU,MAAM,IAAI,KAAK;AAAA,UACzB,gBAAa;AAAA,UAEb,8BAAC,oBAAkB,GAAG,kBAAkB,kBAAkB;AAAA;AAAA,MAC5D;AAAA,OAEJ;AAAA,KACF,GACF;AAEJ;",
   "names": []
 }

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

@@ -0,0 +1,52 @@
+import { jsx } from "react/jsx-runtime";
+import { useIntl } from "react-intl";
+import { HideIcon, ViewIcon } from "@dynatrace/strato-icons";
+import { Button } from "../../../../../buttons/button/Button.js";
+import { Tooltip } from "../../../../../overlays/tooltip/Tooltip.js";
+import { dataTableMessages } from "../../../messages.js";
+function ColumnVisibilityToggle(props) {
+  const {
+    column,
+    columnLabel,
+    enableToggle,
+    currentState,
+    onVisibilityChange
+  } = props;
+  const intl = useIntl();
+  const isFullyHidden = currentState === false;
+  const willShowOnClick = currentState !== true;
+  const tooltipText = enableToggle ? intl.formatMessage(dataTableMessages.toggleColumnVisibilityLabel, {
+    isHidden: willShowOnClick
+  }) : intl.formatMessage(dataTableMessages.columnVisibilityDisabledLabel, {
+    isHidden: isFullyHidden
+  });
+  const ariaLabel = enableToggle ? intl.formatMessage(dataTableMessages.toggleColumnVisibilityAriaLabel, {
+    isHidden: willShowOnClick,
+    columnName: columnLabel
+  }) : intl.formatMessage(dataTableMessages.columnVisibilityDisabledAriaLabel, {
+    isHidden: isFullyHidden,
+    columnName: columnLabel
+  });
+  const dataDtProperties = `state:${willShowOnClick ? "show" : "hide"}`;
+  return /* @__PURE__ */ jsx(Tooltip, { text: tooltipText, placement: "right", children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "condensed",
+      variant: "default",
+      "aria-label": ariaLabel,
+      "aria-disabled": !enableToggle,
+      onClick: () => {
+        if (enableToggle) {
+          onVisibilityChange(column, currentState);
+        }
+      },
+      "data-dt-children-name": "ColumnSettingsShowHideColumn",
+      "data-dt-properties": dataDtProperties,
+      children: /* @__PURE__ */ jsx(Button.Prefix, { children: isFullyHidden ? /* @__PURE__ */ jsx(HideIcon, {}) : /* @__PURE__ */ jsx(ViewIcon, {}) })
+    }
+  ) });
+}
+export {
+  ColumnVisibilityToggle
+};
+//# sourceMappingURL=ColumnVisibilityToggle.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/ColumnVisibilityToggle.tsx"],
+  "sourcesContent": ["import type {\n  TableFeatures,\n  RowData,\n  Column_Internal,\n} from '@tanstack/react-table';\nimport { JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { HideIcon, ViewIcon } from '@dynatrace/strato-icons';\n\nimport { Button } from '../../../../../buttons/button/Button.js';\nimport { Tooltip } from '../../../../../overlays/tooltip/Tooltip.js';\nimport { dataTableMessages } from '../../../messages.js';\n\ninterface ColumnVisibilityToggleProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> {\n  /**\n   * The column to render the visibility toggle for.\n   */\n  column: Column_Internal<TFeatures, TData>;\n  /**\n   * The display label of the column, included in the aria-label for screen readers.\n   */\n  columnLabel: string;\n  /**\n   * Whether visibility can be changed for this column.\n   */\n  enableToggle: boolean;\n  /**\n   * The current visibility state of the column.\n   */\n  currentState: boolean | 'indeterminate';\n  /**\n   * Callback when the toggle is clicked and visibility of the column changes.\n   */\n  onVisibilityChange: (\n    column: Column_Internal<TFeatures, TData>,\n    currentVisibility: boolean | 'indeterminate',\n  ) => void;\n}\n\n/**\n * Icon toggle for showing/hiding a column in the DataTable column settings.\n * @internal\n */\nexport function ColumnVisibilityToggle<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(props: Readonly<ColumnVisibilityToggleProps<TFeatures, TData>>): JSX.Element {\n  const {\n    column,\n    columnLabel,\n    enableToggle,\n    currentState,\n    onVisibilityChange,\n  } = props;\n  const intl = useIntl();\n\n  // Fully hidden = the column (or every hideable child of a parent) is hidden,\n  // not the 'indeterminate' mixed state. Only then is the eye icon closed.\n  const isFullyHidden = currentState === false;\n  // Clicking shows the column unless it is fully visible; an indeterminate\n  // parent reveals its hidden children, so that also counts as \"show\".\n  const willShowOnClick = currentState !== true;\n\n  const tooltipText = enableToggle\n    ? intl.formatMessage(dataTableMessages.toggleColumnVisibilityLabel, {\n        isHidden: willShowOnClick,\n      })\n    : intl.formatMessage(dataTableMessages.columnVisibilityDisabledLabel, {\n        isHidden: isFullyHidden,\n      });\n  const ariaLabel = enableToggle\n    ? intl.formatMessage(dataTableMessages.toggleColumnVisibilityAriaLabel, {\n        isHidden: willShowOnClick,\n        columnName: columnLabel,\n      })\n    : intl.formatMessage(dataTableMessages.columnVisibilityDisabledAriaLabel, {\n        isHidden: isFullyHidden,\n        columnName: columnLabel,\n      });\n\n  const dataDtProperties = `state:${willShowOnClick ? 'show' : 'hide'}`;\n\n  return (\n    <Tooltip text={tooltipText} placement=\"right\">\n      <Button\n        size=\"condensed\"\n        variant=\"default\"\n        aria-label={ariaLabel}\n        aria-disabled={!enableToggle}\n        onClick={() => {\n          if (enableToggle) {\n            onVisibilityChange(column, currentState);\n          }\n        }}\n        data-dt-children-name=\"ColumnSettingsShowHideColumn\"\n        data-dt-properties={dataDtProperties}\n      >\n        <Button.Prefix>\n          {isFullyHidden ? <HideIcon /> : <ViewIcon />}\n        </Button.Prefix>\n      </Button>\n    </Tooltip>\n  );\n}\n"],
+  "mappings": "AAsG2B;AAhG3B,SAAS,eAAe;AAExB,SAAS,UAAU,gBAAgB;AAEnC,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAmC3B,SAAS,uBAGd,OAA6E;AAC7E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,OAAO,QAAQ;AAIrB,QAAM,gBAAgB,iBAAiB;AAGvC,QAAM,kBAAkB,iBAAiB;AAEzC,QAAM,cAAc,eAChB,KAAK,cAAc,kBAAkB,6BAA6B;AAAA,IAChE,UAAU;AAAA,EACZ,CAAC,IACD,KAAK,cAAc,kBAAkB,+BAA+B;AAAA,IAClE,UAAU;AAAA,EACZ,CAAC;AACL,QAAM,YAAY,eACd,KAAK,cAAc,kBAAkB,iCAAiC;AAAA,IACpE,UAAU;AAAA,IACV,YAAY;AAAA,EACd,CAAC,IACD,KAAK,cAAc,kBAAkB,mCAAmC;AAAA,IACtE,UAAU;AAAA,IACV,YAAY;AAAA,EACd,CAAC;AAEL,QAAM,mBAAmB,SAAS,kBAAkB,SAAS,MAAM;AAEnE,SACE,oBAAC,WAAQ,MAAM,aAAa,WAAU,SACpC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,cAAY;AAAA,MACZ,iBAAe,CAAC;AAAA,MAChB,SAAS,MAAM;AACb,YAAI,cAAc;AAChB,6BAAmB,QAAQ,YAAY;AAAA,QACzC;AAAA,MACF;AAAA,MACA,yBAAsB;AAAA,MACtB,sBAAoB;AAAA,MAEpB,8BAAC,OAAO,QAAP,EACE,0BAAgB,oBAAC,YAAS,IAAK,oBAAC,YAAS,GAC5C;AAAA;AAAA,EACF,GACF;AAEJ;",
+  "names": []
+}

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

@@ -1,31 +1,36 @@
-._14dz1ui0-3-8-0 {
+._14dz1ui0-3-9-0 {
   padding: var(--dt-spacings-size-4, 4px) 0;
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14dz1ui2-3-8-0 {
-  --_14dz1ui1-3-8-0: 96dvh;
+._14dz1ui2-3-9-0 {
+  --_14dz1ui1-3-9-0: 96dvh;
   overflow: auto;
   position: relative;
-  margin-top: var(--dt-spacings-size-12, 12px);
 }
-._14dz1ui7-3-8-0 {
-  max-height: calc(var(--_14dz1ui1-3-8-0) - 200px);
+._14dz1ui7-3-9-0 {
+  margin-top: 0;
 }
-._14dz1ui8-3-8-0 {
-  max-height: calc(var(--_14dz1ui1-3-8-0) - 200px - 56px);
+._14dz1ui8-3-9-0 {
+  margin-top: var(--dt-spacings-size-8, 8px);
 }
-._14dz1ui9-3-8-0 {
-  max-height: calc(var(--_14dz1ui1-3-8-0) - 200px - 34px);
+._14dz1ui9-3-9-0 {
+  max-height: calc(var(--_14dz1ui1-3-9-0) - 200px);
 }
-._14dz1uia-3-8-0 {
-  max-height: calc(var(--_14dz1ui1-3-8-0) - 200px - 56px - 34px);
+._14dz1uia-3-9-0 {
+  max-height: calc(var(--_14dz1ui1-3-9-0) - 200px - 56px);
 }
-._14dz1uib-3-8-0 {
+._14dz1uib-3-9-0 {
+  max-height: calc(var(--_14dz1ui1-3-9-0) - 200px - 34px);
+}
+._14dz1uic-3-9-0 {
+  max-height: calc(var(--_14dz1ui1-3-9-0) - 200px - 56px - 34px);
+}
+._14dz1uid-3-9-0 {
   width: 100%;
   position: relative;
 }
 @supports not (height: 1dvh) {
-  ._14dz1ui2-3-8-0 {
-    --_14dz1ui1-3-8-0: 96vh;
+  ._14dz1ui2-3-9-0 {
+    --_14dz1ui1-3-9-0: 96vh;
   }
 }

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

@@ -15,6 +15,7 @@ import { ColumnOrderSettingsDragAndDropContext } from "./ColumnOrderSettings/Col
 import * as styles from "./DataTableColumnsList.sty.js";
 import { columnName } from "./DataTableColumnsListItem.sty.js";
 import { DataTableColumnsListItem } from "./DataTableColumnsListItem.js";
+import { DataTableColumnsSectionHeader } from "./DataTableColumnsSectionHeader.js";
 import { Grid } from "../../../../../layouts/grid/Grid.js";
 import { Text } from "../../../../../typography/text/Text.js";
 import { useDataTable } from "../../../contexts/DataTableContext.js";
@@ -22,7 +23,7 @@ import { getCanHide } from "../../../features/ColumnVisibility/ColumnVisibility.
 import { dataTableMessages } from "../../../messages.js";
 function DataTableColumnsList(props) {
   const {
-    visibilitySettings: showVisibilityCheckbox,
+    visibilitySettings: showVisibilityToggle,
     columnOrderSettings,
     columnPinningSettings,
     activeFilterValue,
@@ -90,7 +91,8 @@ function DataTableColumnsList(props) {
     ...col,
     key: `${col.id}_${idx}_${pinnedPosition}`,
     // unique React key; parent columns may appear multiple times in list
-    pinned: pinnedPosition
+    pinned: pinnedPosition,
+    itemType: "column"
   });
   const orderedLeftFlatColumns = useMemo(() => {
     const localColumnsPinned = localColumnPinning.left?.map((id) => columnsById.get(id)).filter((column) => !!column) ?? [];
@@ -119,25 +121,54 @@ function DataTableColumnsList(props) {
     center: orderedCenterFlatColumns,
     right: orderedRightFlatColumns
   };
-  const filteredColumns = useMemo(
-    () => [
-      ...orderedLeftFlatColumns.filter(filterColumns),
-      ...orderedCenterFlatColumns.filter(filterColumns),
-      ...orderedRightFlatColumns.filter(filterColumns)
-    ],
-    [
-      filterColumns,
-      orderedCenterFlatColumns,
-      orderedLeftFlatColumns,
-      orderedRightFlatColumns
-    ]
-  );
+  const showColumnPinningButton = !!table.optionsStore.state.enableColumnPinning && columnPinningSettings;
+  const showSectionHeaders = showColumnPinningButton && (orderedLeftFlatColumns.length > 0 || orderedRightFlatColumns.length > 0);
+  const listItems = useMemo(() => {
+    const sections = [
+      {
+        position: "left",
+        columns: orderedLeftFlatColumns.filter(filterColumns)
+      },
+      {
+        position: "right",
+        columns: orderedRightFlatColumns.filter(filterColumns)
+      },
+      {
+        position: false,
+        // = center
+        columns: orderedCenterFlatColumns.filter(filterColumns)
+      }
+    ];
+    const items = [];
+    for (const section of sections) {
+      if (section.columns.length === 0) {
+        continue;
+      }
+      if (showSectionHeaders) {
+        items.push({
+          itemType: "sectionHeader",
+          position: section.position,
+          key: `__section_header_${section.position}`
+        });
+      }
+      items.push(
+        ...section.columns
+      );
+    }
+    return items;
+  }, [
+    filterColumns,
+    orderedCenterFlatColumns,
+    orderedLeftFlatColumns,
+    orderedRightFlatColumns,
+    showSectionHeaders
+  ]);
   const getItemKey = useCallback(
-    (index) => filteredColumns[index].key,
-    [filteredColumns]
+    (index) => listItems[index].key,
+    [listItems]
   );
   const columnVirtualizer = useVirtualizer({
-    count: filteredColumns.length,
+    count: listItems.length,
     overscan: 5,
     getScrollElement: () => parentRef.current,
     getItemKey,
@@ -149,7 +180,7 @@ function DataTableColumnsList(props) {
       }
       const labelElement = element.querySelector(`.${columnName}`);
       if (!labelElement) {
-        return DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT;
+        return element.getBoundingClientRect().height || DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT;
       }
       const computedStyle = getComputedStyle(element);
       const borderTop = parseFloat(computedStyle.borderTopWidth);
@@ -159,14 +190,26 @@ function DataTableColumnsList(props) {
     }
   });
   const virtualItems = columnVirtualizer.getVirtualItems();
-  if (filteredColumns.length === 0) {
+  if (listItems.length === 0) {
     return /* @__PURE__ */ jsx(Text, { className: styles.noItemsFound, children: intl.formatMessage(dataTableMessages.noItemsFound) });
   }
-  const showColumnPinningButton = !!table.optionsStore.state.enableColumnPinning && columnPinningSettings;
   const canOrder = !!table.optionsStore.state.enableColumnOrdering && columnOrderSettings && activeFilterValue.length === 0;
   const columnListItems = virtualItems.map((virtualItem) => {
-    const column = filteredColumns[virtualItem.index];
+    const column = listItems[virtualItem.index];
+    if (column.itemType === "sectionHeader") {
+      return /* @__PURE__ */ jsx(
+        DataTableColumnsSectionHeader,
+        {
+          position: column.position,
+          virtualIndex: virtualItem.index,
+          measureElement: columnVirtualizer.measureElement
+        },
+        column.key
+      );
+    }
     const columnKey = column.key;
+    const nextItem = listItems[virtualItem.index + 1];
+    const isLastInSection = nextItem === void 0 || nextItem.itemType === "sectionHeader";
     const canHide = getCanHide(
       // Need to cast this one here in order to make sure that it allows
       // instanciating with the same Subtype of RowData
@@ -185,14 +228,15 @@ function DataTableColumnsList(props) {
         column,
         columnIndex: localColumnOrder.indexOf(column.id),
         orderedFlatColumns,
-        showVisibilityCheckbox,
-        enableVisibilityCheckbox: canHide,
+        showVisibilityToggle,
+        enableVisibilityToggle: canHide,
         currentVisibilityState: visibilityCheckboxState,
         onVisibilityChange: updateLocalColumnVisibility,
         showColumnOrderDragHandle,
         showColumnPinningMenu: showColumnPinningButton,
         localColumnPinning,
         updateLocalColumnPinning,
+        isLastInSection,
         virtualIndex: virtualItem.index,
         measureElement: columnVirtualizer.measureElement
       },
@@ -207,7 +251,8 @@ function DataTableColumnsList(props) {
         "strato-table-settings-virtualization-container",
         styles.virtualizationScrollContainer({
           hasFilter: hasFilterBar,
-          hasMessage
+          hasMessage,
+          hasPinnedColumns: listItems[0].itemType === "sectionHeader"
         })
       ),
       children: /* @__PURE__ */ jsx(

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": "AAsXM;AA9WN,SAAS,sBAAsB;AAC/B,OAAO,UAAU;AACjB,SAAmB,aAAa,SAAS,cAAc;AACvD,SAAS,eAAe;AAMxB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,+CAA+C;AACxD,SAAS,6CAA6C;AACtD,YAAY,YAAY;AACxB,SAAS,kBAAkB;AAC3B,SAAS,gCAAgC;AACzC,SAAS,qCAAqC;AAC9C,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAE3B,SAAS,yBAAyB;AAmE3B,SAAS,qBAId,OAC6B;AAC7B,QAAM;AAAA,IACJ,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,QAAQ,aAAa;AAC3B,QAAM,OAAO,QAAQ;AACrB,QAAM,YAAY,OAA8B,IAAI;AAEpD,QAAM,+BAA+B,MAAM,gCAAgC;AAC3E,QAAM,cAAc;AAAA,IAClB,MAAM,IAAI,IAAI,6BAA6B,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,GAAG,CAAC,CAAC;AAAA,IACtE,CAAC,4BAA4B;AAAA,EAC/B;AAGA,QAAM,mBAAmB;AAAA,IACvB,MAAM,wBAAwB,4BAA4B;AAAA,IAC1D,CAAC,4BAA4B;AAAA,EAC/B;AAGA,QAAM,oBAAoB;AAAA,IACxB,MAAM,mBAAmB,iBAAiB;AAAA,IAC1C,CAAC,iBAAiB;AAAA,EACpB;AAGA,QAAM,iBAAiB;AAAA,IACrB,CAAC,GAA6B,MAAgC;AAC5D,YAAM,iBAAiB,EAAE,QAAQ,GAAG,CAAC,GAAG;AACxC,YAAM,iBAAiB,EAAE,QAAQ,GAAG,CAAC,GAAG;AACxC,YAAM,cAAc,CAAC,CAAC,EAAE,QAAQ,KAAK,CAAC,aAAa,SAAS,OAAO,EAAE,EAAE;AACvE,YAAM,cAAc,CAAC,CAAC,EAAE,QAAQ,KAAK,CAAC,aAAa,SAAS,OAAO,EAAE,EAAE;AAEvE,UAAI,aAAa;AACf,eAAO;AAAA,MACT,WAAW,aAAa;AACtB,eAAO;AAAA,MACT;AAEA,aACE,iBAAiB,QAAQ,kBAAkB,EAAE,EAAE,IAC/C,iBAAiB,QAAQ,kBAAkB,EAAE,EAAE;AAAA,IAEnD;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AAGA,QAAM,gBAAgB;AAAA,IACpB,CACE,QACA,GACA,kBACY;AAEZ,UAAI,kBAAkB,WAAW,GAAG;AAClC,eAAO;AAAA,MACT;AAGA,YAAM,gBAAgB,CAAC,aAA8B;AACnD,cAAM,cAAc,iBAAiB,IAAI,QAAQ,KAAK;AACtD,eAAO,kBAAkB,MAAM,CAAC,SAAS,YAAY,SAAS,IAAI,CAAC;AAAA,MACrE;AAGA,UAAI,cAAc,OAAO,EAAE,GAAG;AAC5B,eAAO;AAAA,MACT;AAEA,YAAM,eAAe,OAAO;AAC5B,UAAI,aAAa,WAAW,GAAG;AAG7B,eAAO,OAAO,WAAW,UAAa,cAAc,OAAO,OAAO,EAAE;AAAA,MACtE;AAIA,aAAO,aACJ,OAAO,CAAC,UAAU,cAAc,KAAK,CAAC,QAAQ,IAAI,OAAO,MAAM,EAAE,CAAC,EAClE,KAAK,CAAC,gBAAgB,cAAc,YAAY,EAAE,CAAC;AAAA,IACxD;AAAA,IACA,CAAC,mBAAmB,gBAAgB;AAAA,EACtC;AAEA,QAAM,gBAAgB,CACpB,KACA,KACA,oBAC+D;AAAA,IAC/D,GAAG;AAAA,IACH,KAAK,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,cAAc;AAAA;AAAA,IACvC,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AAEA,QAAM,yBACJ,QAAQ,MAAM;AAEZ,UAAM,qBACJ,mBAAmB,MACf,IAAI,CAAC,OAAO,YAAY,IAAI,EAAE,CAAC,EAChC,OAAO,CAAC,WAAW,CAAC,CAAC,MAAM,KAAK,CAAC;AAGtC,UAAM,iBAAiB,aAAa,kBAAkB;AAGtD,WAAO,eAAe,IAAI,CAAC,KAAK,QAAQ,cAAc,KAAK,KAAK,MAAM,CAAC;AAAA,EACzE,GAAG,CAAC,aAAa,mBAAmB,IAAI,CAAC;AAE3C,QAAM,2BACJ,QAAQ,MAAM;AAEZ,UAAM,uBAAuB,6BAA6B;AAAA,MACxD,CAAC,WACC,CAAC,mBAAmB,MAAM,SAAS,OAAO,EAAE,KAC5C,CAAC,mBAAmB,OAAO,SAAS,OAAO,EAAE;AAAA,IACjD;AAGA,UAAM,iBAAiB,aAAa,oBAAoB;AAGxD,WAAO,eACJ,SAAS,cAAc,EACvB,IAAI,CAAC,KAAK,QAAQ,cAAc,KAAK,KAAK,KAAK,CAAC;AAAA,EACrD,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,EACrB,CAAC;AAEH,QAAM,0BACJ,QAAQ,MAAM;AAEZ,UAAM,qBACJ,mBAAmB,OACf,IAAI,CAAC,OAAO,YAAY,IAAI,EAAE,CAAC,EAChC,OAAO,CAAC,WAAW,CAAC,CAAC,MAAM,KAAK,CAAC;AAGtC,UAAM,iBAAiB,aAAa,kBAAkB;AAGtD,WAAO,eAAe,IAAI,CAAC,KAAK,QAAQ,cAAc,KAAK,KAAK,OAAO,CAAC;AAAA,EAC1E,GAAG,CAAC,aAAa,mBAAmB,KAAK,CAAC;AAE5C,QAAM,qBAAqB;AAAA,IACzB,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAEA,QAAM,0BACJ,CAAC,CAAC,MAAM,aAAa,MAAM,uBAAuB;AAIpD,QAAM,qBACJ,4BACC,uBAAuB,SAAS,KAAK,wBAAwB,SAAS;AAIzE,QAAM,YAAY,QAAoD,MAAM;AAC1E,UAAM,WAGA;AAAA,MACJ;AAAA,QACE,UAAU;AAAA,QACV,SAAS,uBAAuB,OAAO,aAAa;AAAA,MACtD;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,SAAS,wBAAwB,OAAO,aAAa;AAAA,MACvD;AAAA,MACA;AAAA,QACE,UAAU;AAAA;AAAA,QACV,SAAS,yBAAyB,OAAO,aAAa;AAAA,MACxD;AAAA,IACF;AAEA,UAAM,QAAoD,CAAC;AAC3D,eAAW,WAAW,UAAU;AAC9B,UAAI,QAAQ,QAAQ,WAAW,GAAG;AAChC;AAAA,MACF;AACA,UAAI,oBAAoB;AACtB,cAAM,KAAK;AAAA,UACT,UAAU;AAAA,UACV,UAAU,QAAQ;AAAA,UAClB,KAAK,oBAAoB,QAAQ,QAAQ;AAAA,QAC3C,CAAC;AAAA,MACH;AACA,YAAM;AAAA,QACJ,GAAI,QAAQ;AAAA,MACd;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa;AAAA,IACjB,CAAC,UAAkB,UAAU,KAAK,EAAE;AAAA,IACpC,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM,oBAAoB,eAAe;AAAA,IACvC,OAAO,UAAU;AAAA,IACjB,UAAU;AAAA,IACV,kBAAkB,MAAM,UAAU;AAAA,IAClC;AAAA;AAAA,IAEA,cAAc,MAAM;AAAA,IACpB,gBAAgB,CAAC,YAAY;AAC3B,UAAI,CAAC,WAAW,EAAE,mBAAmB,cAAc;AACjD,eAAO;AAAA,MACT;AAEA,YAAM,eAAe,QAAQ,cAAc,IAAI,UAAU,EAAE;AAC3D,UAAI,CAAC,cAAc;AAEjB,eACE,QAAQ,sBAAsB,EAAE,UAChC;AAAA,MAEJ;AAEA,YAAM,gBAAgB,iBAAiB,OAAO;AAC9C,YAAM,YAAY,WAAW,cAAc,cAAc;AACzD,YAAM,eAAe,WAAW,cAAc,iBAAiB;AAE/D,aACE,aAAa,sBAAsB,EAAE,SACrC,IAAI;AAAA,MACJ,YACA;AAAA,IAEJ;AAAA,EACF,CAAC;AAED,QAAM,eAAe,kBAAkB,gBAAgB;AAGvD,MAAI,UAAU,WAAW,GAAG;AAC1B,WACE,oBAAC,QAAK,WAAW,OAAO,cACrB,eAAK,cAAc,kBAAkB,YAAY,GACpD;AAAA,EAEJ;AAEA,QAAM,WACJ,CAAC,CAAC,MAAM,aAAa,MAAM,wBAC3B,uBACA,kBAAkB,WAAW;AAE/B,QAAM,kBAAkB,aAAa,IAAI,CAAC,gBAAgB;AACxD,UAAM,SAAS,UAAU,YAAY,KAAK;AAE1C,QAAI,OAAO,aAAa,iBAAiB;AACvC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,UAAU,OAAO;AAAA,UACjB,cAAc,YAAY;AAAA,UAC1B,gBAAgB,kBAAkB;AAAA;AAAA,QAH7B,OAAO;AAAA,MAId;AAAA,IAEJ;AAEA,UAAM,YAAY,OAAO;AACzB,UAAM,WAAW,UAAU,YAAY,QAAQ,CAAC;AAChD,UAAM,kBACJ,aAAa,UAAa,SAAS,aAAa;AAClD,UAAM,UAAU;AAAA;AAAA;AAAA,MAGd;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,UAAM,0BAA0B;AAAA,MAC9B;AAAA,MACA;AAAA,IACF;AACA,UAAM,4BAA4B,YAAY,OAAO,WAAW;AAEhE,WACE;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,aAAa,iBAAiB,QAAQ,OAAO,EAAE;AAAA,QAC/C;AAAA,QACA;AAAA,QACA,wBAAwB;AAAA,QACxB,wBAAwB;AAAA,QACxB,oBAAoB;AAAA,QACpB;AAAA,QACA,uBAAuB;AAAA,QACvB;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,YAAY;AAAA,QAC1B,gBAAgB,kBAAkB;AAAA;AAAA,MAd7B;AAAA,IAeP;AAAA,EAEJ,CAAC;AAED,QAAM,aACJ;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,OAAO,8BAA8B;AAAA,UACnC,WAAW;AAAA,UACX;AAAA,UACA,kBAAkB,UAAU,CAAC,EAAE,aAAa;AAAA,QAC9C,CAAC;AAAA,MACH;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,qBAAoB;AAAA,UACpB,SAAS;AAAA,UACT,KAAK;AAAA,UACL,WAAW,KAAK,OAAO,4BAA4B;AAAA,UACnD,kBAAkB,kBAAkB,kBACjC,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,IAAI,EAC1B,KAAK,GAAG;AAAA,UAEX,QAAQ,kBAAkB,aAAa,IAAI;AAAA,UAE1C;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAGF,SAAO,WACL;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MAEhB;AAAA;AAAA,EACH,IAEA;AAEJ;",
   "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-0";
+var virtualizationInnerContainer = "_14dz1uid-3-9-0";
+var virtualizationScrollContainer = _7a468({ defaultClassName: "_14dz1ui2-3-9-0", variantClassNames: { hasFilter: { true: "_14dz1ui3-3-9-0", false: "_14dz1ui4-3-9-0" }, hasMessage: { true: "_14dz1ui5-3-9-0", false: "_14dz1ui6-3-9-0" }, hasPinnedColumns: { true: "_14dz1ui7-3-9-0", false: "_14dz1ui8-3-9-0" } }, defaultVariants: { hasFilter: false, hasMessage: false, hasPinnedColumns: false }, compoundVariants: [[{ hasFilter: false, hasMessage: false }, "_14dz1ui9-3-9-0"], [{ hasFilter: true, hasMessage: false }, "_14dz1uia-3-9-0"], [{ hasFilter: false, hasMessage: true }, "_14dz1uib-3-9-0"], [{ hasFilter: true, hasMessage: true }, "_14dz1uic-3-9-0"]] });
 export {
   noItemsFound,
   virtualizationInnerContainer,