@dynatrace/strato-components 3.6.0 → 3.7.1

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';\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 {\n  Column,\n  DragAndDropTransform,\n} from '../../../../hooks/useTable/types.js';\nimport type { ColumnPinningState } from '../../../../tanstack-table-core-override/src/index.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  columnsList: HTMLElement | null,\n  event: DragOverEvent,\n  localColumnOrder: string[],\n  transformValue: number,\n  activeColumn: Column<unknown, unknown> | 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<TData, TValue>(\n  column: Column<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  id: string;\n  index: number;\n  column: Column<unknown, unknown>;\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  localColumnOrder: string[],\n  localColumnPinning: ColumnPinningState,\n  draggingColumnInfo: DraggingColumnInfo | 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<unknown, unknown>;\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 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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",
   "names": []
 }

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

@@ -6,7 +6,7 @@ import { Menu } from "../../../../../navigation/menu/Menu.js";
 import { Tooltip } from "../../../../../overlays/tooltip/Tooltip.js";
 import { pinColumns } from "../../../features/ColumnPinning/column-pinning-utils.js";
 import { dataTableMessages } from "../../../messages.js";
-const ColumnPinningMenu = (props) => {
+function ColumnPinningMenu(props) {
   const {
     column,
     orderedFlatColumns,
@@ -77,7 +77,7 @@ const ColumnPinningMenu = (props) => {
       )
     ] })
   ] }) });
-};
+}
 export {
   ColumnPinningMenu
 };

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 { 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';\nimport type {\n  ColumnPinningPosition,\n  ColumnPinningState,\n} from '../../../tanstack-table-core-override/src/index.js';\n\ninterface ColumnPinningMenuProps {\n  /**\n   * The column to render the pinning menu for.\n   */\n  column: ColumnListItem;\n  /**\n   * The ordered flat columns, grouped by pinning position.\n   */\n  orderedFlatColumns: {\n    left: ColumnListItem[];\n    center: ColumnListItem[];\n    right: ColumnListItem[];\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 const ColumnPinningMenu = (\n  props: ColumnPinningMenuProps,\n): 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[] {\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": "AAqHc,cAIN,YAJM;AApHd,SAAS,kBAAkB,eAAe;AAE1C,SAAS,eAAe;AAGxB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAiC3B,MAAM,oBAAoB,CAC/B,UACgB;AAChB,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,gCAAkD;AACzD,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 } 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;",
   "names": []
 }

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

@@ -2,9 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import * as styles from "./DataTableColumnsListItem.sty.js";
 import { Checkbox } from "../../../../../forms/checkbox/Checkbox.js";
 import { getColumnLabel } from "../../../../utils/get-column-label.js";
-const ColumnVisibilityCheckbox = (props) => {
-  const { column, enableCheckbox, currentState, onVisibilityChange } = props;
-  const columnName = getColumnLabel(column);
+function ColumnVisibilityCheckbox(props) {
+  const { enableCheckbox, currentState, onVisibilityChange } = props;
+  const columnName = getColumnLabel(props.column);
   const dataDtProperties = `state:${currentState === true ? "hide" : "show"}`;
   return /* @__PURE__ */ jsx(
     Checkbox,
@@ -13,7 +13,7 @@ const ColumnVisibilityCheckbox = (props) => {
       "aria-disabled": !enableCheckbox,
       onChange: () => {
         if (enableCheckbox) {
-          onVisibilityChange(column, currentState);
+          onVisibilityChange(props.column, currentState);
         }
       },
       className: styles.columnName,
@@ -22,7 +22,7 @@ const ColumnVisibilityCheckbox = (props) => {
       children: columnName
     }
   );
-};
+}
 export {
   ColumnVisibilityCheckbox
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/ColumnVisibilityCheckbox.tsx"],
-  "sourcesContent": ["import { JSX } from 'react';\n\nimport * as styles from './DataTableColumnsListItem.sty.js';\nimport { Checkbox } from '../../../../../forms/checkbox/Checkbox.js';\nimport { getColumnLabel } from '../../../../utils/get-column-label.js';\nimport type { Column } from '../../../hooks/useTable/types.js';\n\ninterface ColumnVisibilityCheckboxProps {\n  /**\n   * The column to render the checkbox for.\n   */\n  column: Column<unknown, unknown>;\n  /**\n   * Whether visibility can be changed for this column.\n   */\n  enableCheckbox: boolean;\n  /**\n   * The current visibility state of the column.\n   */\n  currentState: boolean | 'indeterminate';\n  /**\n   * Callback when the checkbox is clicked and visibility of the column changes.\n   */\n  onVisibilityChange: (\n    column: Column<unknown, unknown>,\n    currentVisibility: boolean | 'indeterminate',\n  ) => void;\n}\n\n/**\n * Checkbox component for toggling column visibility in the DataTable column settings.\n * @internal\n */\nexport const ColumnVisibilityCheckbox = (\n  props: ColumnVisibilityCheckboxProps,\n): JSX.Element => {\n  const { column, enableCheckbox, currentState, onVisibilityChange } = props;\n\n  const columnName = getColumnLabel(column);\n  const dataDtProperties = `state:${currentState === true ? 'hide' : 'show'}`;\n\n  return (\n    <Checkbox\n      value={currentState}\n      aria-disabled={!enableCheckbox}\n      onChange={() => {\n        if (enableCheckbox) {\n          onVisibilityChange(column, currentState);\n        }\n      }}\n      className={styles.columnName}\n      data-dt-name=\"ColumnSettingsShowHideColumn\"\n      data-dt-properties={dataDtProperties}\n    >\n      {columnName}\n    </Checkbox>\n  );\n};\n"],
-  "mappings": "AA0CI;AAxCJ,YAAY,YAAY;AACxB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AA6BxB,MAAM,2BAA2B,CACtC,UACgB;AAChB,QAAM,EAAE,QAAQ,gBAAgB,cAAc,mBAAmB,IAAI;AAErE,QAAM,aAAa,eAAe,MAAM;AACxC,QAAM,mBAAmB,SAAS,iBAAiB,OAAO,SAAS,MAAM;AAEzE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,iBAAe,CAAC;AAAA,MAChB,UAAU,MAAM;AACd,YAAI,gBAAgB;AAClB,6BAAmB,QAAQ,YAAY;AAAA,QACzC;AAAA,MACF;AAAA,MACA,WAAW,OAAO;AAAA,MAClB,gBAAa;AAAA,MACb,sBAAoB;AAAA,MAEnB;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import type {\n  TableFeatures,\n  RowData,\n  Column_Internal,\n} from '@tanstack/react-table';\nimport { JSX } from 'react';\n\nimport * as styles from './DataTableColumnsListItem.sty.js';\nimport { Checkbox } from '../../../../../forms/checkbox/Checkbox.js';\nimport { getColumnLabel } from '../../../../utils/get-column-label.js';\n\ninterface ColumnVisibilityCheckboxProps<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> {\n  /**\n   * The column to render the checkbox for.\n   */\n  column: Column_Internal<TFeatures, TData>;\n  /**\n   * Whether visibility can be changed for this column.\n   */\n  enableCheckbox: boolean;\n  /**\n   * The current visibility state of the column.\n   */\n  currentState: boolean | 'indeterminate';\n  /**\n   * Callback when the checkbox 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 * Checkbox component for toggling column visibility in the DataTable column settings.\n * @internal\n */\nexport function ColumnVisibilityCheckbox<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  props: Readonly<ColumnVisibilityCheckboxProps<TFeatures, TData>>,\n): JSX.Element {\n  const { enableCheckbox, currentState, onVisibilityChange } = props;\n\n  const columnName = getColumnLabel(props.column);\n  const dataDtProperties = `state:${currentState === true ? 'hide' : 'show'}`;\n\n  return (\n    <Checkbox\n      value={currentState}\n      aria-disabled={!enableCheckbox}\n      onChange={() => {\n        if (enableCheckbox) {\n          onVisibilityChange(props.column, currentState);\n        }\n      }}\n      className={styles.columnName}\n      data-dt-name=\"ColumnSettingsShowHideColumn\"\n      data-dt-properties={dataDtProperties}\n    >\n      {columnName}\n    </Checkbox>\n  );\n}\n"],
+  "mappings": "AAoDI;AA7CJ,YAAY,YAAY;AACxB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AA+BxB,SAAS,yBAId,OACa;AACb,QAAM,EAAE,gBAAgB,cAAc,mBAAmB,IAAI;AAE7D,QAAM,aAAa,eAAe,MAAM,MAAM;AAC9C,QAAM,mBAAmB,SAAS,iBAAiB,OAAO,SAAS,MAAM;AAEzE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,iBAAe,CAAC;AAAA,MAChB,UAAU,MAAM;AACd,YAAI,gBAAgB;AAClB,6BAAmB,MAAM,QAAQ,YAAY;AAAA,QAC/C;AAAA,MACF;AAAA,MACA,WAAW,OAAO;AAAA,MAClB,gBAAa;AAAA,MACb,sBAAoB;AAAA,MAEnB;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

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

@@ -23,7 +23,7 @@ const DataTableColumnSettings = (props) => {
   const columnSettingsModal = useDataTableColumnSettings();
   const columnSettingsButton = useMemo(() => {
     const hiddenColumnCount = Object.values(
-      table.getState().columnVisibility || {}
+      table.atoms.columnVisibility?.get() || {}
     ).filter((value) => !value).length;
     const message = hiddenColumnCount === 0 ? intl.formatMessage(dataTableMessages.columnSettingsButtonDefault) : intl.formatMessage(dataTableMessages.columnSettingsButtonVisibility, {
       hiddenColumnCount
@@ -32,7 +32,7 @@ const DataTableColumnSettings = (props) => {
       text: message,
       hiddenColumnCount
     };
-  }, [table.getState().columnVisibility]);
+  }, [table.store.state.columnVisibility]);
   return /* @__PURE__ */ jsx(Tooltip, { text: intl.formatMessage(dataTableMessages.columnSettingsTooltip), children: /* @__PURE__ */ jsxs(
     Button,
     {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnSettings.tsx"],
-  "sourcesContent": ["import { type JSX, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ColumnsIcon } from '@dynatrace/strato-icons';\n\nimport type { DataTableColumnSettingsTriggerProps } from './column-settings-types.js';\nimport { Button } from '../../../../../buttons/button/Button.js';\nimport { Tooltip } from '../../../../../overlays/tooltip/Tooltip.js';\nimport {\n  useDataTable,\n  useDataTableColumnSettings,\n} from '../../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../../messages.js';\n\ninterface ColumnSettingsProps {\n  customTriggerProps?: DataTableColumnSettingsTriggerProps;\n}\n\n/**\n * DataTable column settings. Internally used component containing a trigger button\n * that opens the column settings modal which displays a list of all columns.\n * @internal\n */\nexport const DataTableColumnSettings = (\n  props: ColumnSettingsProps,\n): JSX.Element => {\n  const { customTriggerProps } = props;\n  const {\n    children: customTrigger,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = customTriggerProps ?? {};\n\n  const intl = useIntl();\n  const table = useDataTable();\n  const columnSettingsModal = useDataTableColumnSettings();\n\n  const columnSettingsButton = useMemo(() => {\n    const hiddenColumnCount = Object.values(\n      table.getState().columnVisibility || {},\n    ).filter((value) => !value).length;\n\n    const message =\n      hiddenColumnCount === 0\n        ? intl.formatMessage(dataTableMessages.columnSettingsButtonDefault)\n        : intl.formatMessage(dataTableMessages.columnSettingsButtonVisibility, {\n            hiddenColumnCount,\n          });\n\n    return {\n      text: message,\n      hiddenColumnCount,\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [table.getState().columnVisibility]);\n\n  return (\n    <Tooltip text={intl.formatMessage(dataTableMessages.columnSettingsTooltip)}>\n      <Button\n        onClick={columnSettingsModal?.openColumnSettings}\n        variant=\"default\"\n        className={consumerClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        {...remainingProps}\n      >\n        <Button.Prefix>\n          <ColumnsIcon />\n        </Button.Prefix>\n        {customTrigger\n          ? customTrigger({\n              hiddenColumnCount: columnSettingsButton.hiddenColumnCount,\n              totalColumnCount: table.getAllColumns().length,\n              defaultLabel: columnSettingsButton.text,\n            })\n          : columnSettingsButton.text}\n      </Button>\n    </Tooltip>\n  );\n};\n"],
-  "mappings": "AA4DM,SASI,KATJ;AA5DN,SAAmB,eAAe;AAClC,SAAS,eAAe;AAExB,SAAS,mBAAmB;AAG5B,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAW3B,MAAM,0BAA0B,CACrC,UACgB;AAChB,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI,sBAAsB,CAAC;AAE3B,QAAM,OAAO,QAAQ;AACrB,QAAM,QAAQ,aAAa;AAC3B,QAAM,sBAAsB,2BAA2B;AAEvD,QAAM,uBAAuB,QAAQ,MAAM;AACzC,UAAM,oBAAoB,OAAO;AAAA,MAC/B,MAAM,SAAS,EAAE,oBAAoB,CAAC;AAAA,IACxC,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,EAAE;AAE5B,UAAM,UACJ,sBAAsB,IAClB,KAAK,cAAc,kBAAkB,2BAA2B,IAChE,KAAK,cAAc,kBAAkB,gCAAgC;AAAA,MACnE;AAAA,IACF,CAAC;AAEP,WAAO;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF;AAAA,EAEF,GAAG,CAAC,MAAM,SAAS,EAAE,gBAAgB,CAAC;AAEtC,SACE,oBAAC,WAAQ,MAAM,KAAK,cAAc,kBAAkB,qBAAqB,GACvE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,qBAAqB;AAAA,MAC9B,SAAQ;AAAA,MACR,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAa;AAAA,MACZ,GAAG;AAAA,MAEJ;AAAA,4BAAC,OAAO,QAAP,EACC,8BAAC,eAAY,GACf;AAAA,QACC,gBACG,cAAc;AAAA,UACZ,mBAAmB,qBAAqB;AAAA,UACxC,kBAAkB,MAAM,cAAc,EAAE;AAAA,UACxC,cAAc,qBAAqB;AAAA,QACrC,CAAC,IACD,qBAAqB;AAAA;AAAA;AAAA,EAC3B,GACF;AAEJ;",
+  "sourcesContent": ["import { type JSX, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ColumnsIcon } from '@dynatrace/strato-icons';\n\nimport type { DataTableColumnSettingsTriggerProps } from './column-settings-types.js';\nimport { Button } from '../../../../../buttons/button/Button.js';\nimport { Tooltip } from '../../../../../overlays/tooltip/Tooltip.js';\nimport {\n  useDataTable,\n  useDataTableColumnSettings,\n} from '../../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../../messages.js';\n\ninterface ColumnSettingsProps {\n  customTriggerProps?: DataTableColumnSettingsTriggerProps;\n}\n\n/**\n * DataTable column settings. Internally used component containing a trigger button\n * that opens the column settings modal which displays a list of all columns.\n * @internal\n */\nexport const DataTableColumnSettings = (\n  props: ColumnSettingsProps,\n): JSX.Element => {\n  const { customTriggerProps } = props;\n  const {\n    children: customTrigger,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = customTriggerProps ?? {};\n\n  const intl = useIntl();\n  const table = useDataTable();\n  const columnSettingsModal = useDataTableColumnSettings();\n\n  const columnSettingsButton = useMemo(() => {\n    const hiddenColumnCount = Object.values(\n      table.atoms.columnVisibility?.get() || {},\n    ).filter((value) => !value).length;\n\n    const message =\n      hiddenColumnCount === 0\n        ? intl.formatMessage(dataTableMessages.columnSettingsButtonDefault)\n        : intl.formatMessage(dataTableMessages.columnSettingsButtonVisibility, {\n            hiddenColumnCount,\n          });\n\n    return {\n      text: message,\n      hiddenColumnCount,\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [table.store.state.columnVisibility]);\n\n  return (\n    <Tooltip text={intl.formatMessage(dataTableMessages.columnSettingsTooltip)}>\n      <Button\n        onClick={columnSettingsModal?.openColumnSettings}\n        variant=\"default\"\n        className={consumerClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        {...remainingProps}\n      >\n        <Button.Prefix>\n          <ColumnsIcon />\n        </Button.Prefix>\n        {customTrigger\n          ? customTrigger({\n              hiddenColumnCount: columnSettingsButton.hiddenColumnCount,\n              totalColumnCount: table.getAllColumns().length,\n              defaultLabel: columnSettingsButton.text,\n            })\n          : columnSettingsButton.text}\n      </Button>\n    </Tooltip>\n  );\n};\n"],
+  "mappings": "AA4DM,SASI,KATJ;AA5DN,SAAmB,eAAe;AAClC,SAAS,eAAe;AAExB,SAAS,mBAAmB;AAG5B,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAW3B,MAAM,0BAA0B,CACrC,UACgB;AAChB,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI,sBAAsB,CAAC;AAE3B,QAAM,OAAO,QAAQ;AACrB,QAAM,QAAQ,aAAa;AAC3B,QAAM,sBAAsB,2BAA2B;AAEvD,QAAM,uBAAuB,QAAQ,MAAM;AACzC,UAAM,oBAAoB,OAAO;AAAA,MAC/B,MAAM,MAAM,kBAAkB,IAAI,KAAK,CAAC;AAAA,IAC1C,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,EAAE;AAE5B,UAAM,UACJ,sBAAsB,IAClB,KAAK,cAAc,kBAAkB,2BAA2B,IAChE,KAAK,cAAc,kBAAkB,gCAAgC;AAAA,MACnE;AAAA,IACF,CAAC;AAEP,WAAO;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF;AAAA,EAEF,GAAG,CAAC,MAAM,MAAM,MAAM,gBAAgB,CAAC;AAEvC,SACE,oBAAC,WAAQ,MAAM,KAAK,cAAc,kBAAkB,qBAAqB,GACvE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,qBAAqB;AAAA,MAC9B,SAAQ;AAAA,MACR,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAa;AAAA,MACZ,GAAG;AAAA,MAEJ;AAAA,4BAAC,OAAO,QAAP,EACC,8BAAC,eAAY,GACf;AAAA,QACC,gBACG,cAAc;AAAA,UACZ,mBAAmB,qBAAqB;AAAA,UACxC,kBAAkB,MAAM,cAAc,EAAE;AAAA,UACxC,cAAc,qBAAqB;AAAA,QACrC,CAAC,IACD,qBAAqB;AAAA;AAAA;AAAA,EAC3B,GACF;AAEJ;",
   "names": []
 }

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

@@ -22,7 +22,7 @@ import { DataTableVisibilityFilterControls } from "./DataTableVisibilityFilterCo
 import { useDataTable } from "../../../contexts/DataTableContext.js";
 import { dataTableMessages } from "../../../messages.js";
 import { DataTableSettingsModal } from "../../SettingsModal/DataTableSettingsModal.js";
-const ColumnSettingsModal = (props) => {
+function ColumnSettingsModal(props) {
   const {
     visibilitySettings: toolbarVisibilitySettings,
     columnOrderSettings: toolbarColumnOrderSettings,
@@ -56,7 +56,7 @@ const ColumnSettingsModal = (props) => {
     uniqueParentIds: allLocalColumnsParentIds
   } = generateColumnOrderWithParentIds(
     table.getColumn,
-    table.getState().columnOrder
+    table.atoms.columnOrder?.get() ?? []
   );
   const [activeFilterValue, setActiveFilterValue] = useState("");
   const initialColumnVisibility = useMemo(
@@ -67,7 +67,7 @@ const ColumnSettingsModal = (props) => {
   const [localColumnOrder, setLocalColumnOrder] = useState(tableColumnOrder);
   const [localColumnPinning, setLocalColumnPinning] = useState(
     // original column pinning state
-    () => table.getState().columnPinning
+    () => table.store.state.columnPinning
   );
   const [showResetStatus, setShowResetStatus] = useState(false);
   const columnOrderToReset = getResetOverride(columnOrderOverride, "resetColumnOrder") ?? resetColumnOrder ?? table.options.originalColumnOrder;
@@ -84,7 +84,13 @@ const ColumnSettingsModal = (props) => {
     [visibilitySettingsEnabled, columnVisibilityToReset, localColumnVisibility]
   );
   const hasColumnOrderChanged = columnOrderSettingsEnabled && getHasColumnOrderChanged(columnOrderToReset, filteredLocalColumnOrder);
-  const hasColumnPinningChanged = columnPinningSettingsEnabled && getHasColumnPinningChanged(columnPinningToReset, localColumnPinning);
+  const hasColumnPinningChanged = columnPinningSettingsEnabled && getHasColumnPinningChanged(
+    {
+      left: columnPinningToReset?.left ?? [],
+      right: columnPinningToReset?.right ?? []
+    },
+    localColumnPinning
+  );
   const showHideAllState = getCombinedVisibilityCheckboxState(
     localColumnVisibility,
     leafColumnsWithoutBuiltin
@@ -147,7 +153,10 @@ const ColumnSettingsModal = (props) => {
       didReset = true;
     }
     if (columnPinningSettingsEnabled && columnPinningToReset) {
-      setLocalColumnPinning(columnPinningToReset);
+      setLocalColumnPinning({
+        left: columnPinningToReset?.left ?? [],
+        right: columnPinningToReset?.right ?? []
+      });
       didReset = true;
     }
     didReset && setShowResetStatus(true);
@@ -207,7 +216,7 @@ const ColumnSettingsModal = (props) => {
       ]
     }
   );
-};
+}
 function DataTableColumnSettingsModalFwd(props, forwardedRef) {
   const [modalOpen, setModalOpen] = useState(false);
   const [columnSettingsOverride, setColumnSettingsOverride] = useState();

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableColumnSettingsModal.tsx"],
-  "sourcesContent": ["import {\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useState,\n  type JSX,\n  type Ref,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type { DataTableColumnSettingsModalRef } from './column-settings-types.js';\nimport {\n  generateColumnOrderWithParentIds,\n  generateColumnVisibilityObject,\n  getCombinedVisibilityCheckboxState,\n  getHasColumnOrderChanged,\n  getHasColumnPinningChanged,\n  getHasVisibilityChanged,\n  getMultipleLocalColumnVisibility,\n  getResetOverride,\n  getIsSettingEnabled,\n} from './column-settings-utils.js';\nimport { DataTableColumnsList } from './DataTableColumnsList.js';\nimport { DataTableVisibilityFilterControls } from './DataTableVisibilityFilterControls.js';\nimport { useDataTable } from '../../../contexts/DataTableContext.js';\nimport type { DataTablePinnedColumnState } from '../../../features/ColumnPinning/column-pinning-types.js';\nimport type { DataTableColumnVisibilityState } from '../../../features/ColumnVisibility/column-visibility-types.js';\nimport type { Column } from '../../../hooks/useTable/types.js';\nimport { dataTableMessages } from '../../../messages.js';\nimport type { DataTableColumnSettingsConfig } from '../../../public.api.js';\nimport type { ColumnPinningState } from '../../../tanstack-table-core-override/src/index.js';\nimport { DataTableSettingsModal } from '../../SettingsModal/DataTableSettingsModal.js';\n\ninterface DataTableColumnSettingsModalProps {\n  /**\n   * Whether column visibility settings are available in the modal.\n   */\n  visibilitySettings: boolean;\n  /**\n   * Whether column order settings are available in the modal.\n   */\n  columnOrderSettings: boolean;\n  /**\n   * Whether column pinning settings are available in the modal.\n   */\n  columnPinningSettings: boolean;\n  /**\n   * Default column visibility when settings are reset.\n   */\n  resetColumnVisibility?: DataTableColumnVisibilityState;\n  /**\n   * Default column order when settings are reset.\n   */\n  resetColumnOrder?: string[];\n  /**\n   * Default column pinning state when settings are reset.\n   */\n  resetColumnPinning?: DataTablePinnedColumnState;\n}\n\n/**\n * Modal combining UI controls for column visibility and column ordering.\n * All changes that made within the modal are only applied once the user click the Confirm button.\n * When clicking Close, the changes won't be applied and discarded.\n */\nconst ColumnSettingsModal = (\n  props: DataTableColumnSettingsModalProps & {\n    onModalClose: () => void;\n    columnSettingsOverride?: DataTableColumnSettingsConfig;\n  },\n): JSX.Element => {\n  const {\n    visibilitySettings: toolbarVisibilitySettings,\n    columnOrderSettings: toolbarColumnOrderSettings,\n    columnPinningSettings: toolbarColumnPinningSettings,\n    resetColumnOrder,\n    resetColumnVisibility,\n    resetColumnPinning,\n    onModalClose,\n    columnSettingsOverride,\n  } = props;\n\n  const intl = useIntl();\n  const table = useDataTable();\n  const leafColumnsWithoutBuiltin = table.getLeafColumnsWithoutBuiltin();\n\n  const visibilityOverride = columnSettingsOverride?.columnVisibility;\n  const columnOrderOverride = columnSettingsOverride?.columnOrder;\n  const columnPinningOverride = columnSettingsOverride?.columnPinning;\n\n  const visibilitySettingsEnabled = getIsSettingEnabled(\n    visibilityOverride,\n    toolbarVisibilitySettings,\n  );\n  const columnOrderSettingsEnabled = getIsSettingEnabled(\n    columnOrderOverride,\n    toolbarColumnOrderSettings,\n  );\n  const columnPinningSettingsEnabled = getIsSettingEnabled(\n    columnPinningOverride,\n    toolbarColumnPinningSettings,\n  );\n\n  // original column order state\n  const {\n    columnOrderWithParents: tableColumnOrder,\n    uniqueParentIds: allLocalColumnsParentIds,\n  } = generateColumnOrderWithParentIds(\n    table.getColumn,\n    table.getState().columnOrder,\n  );\n\n  const [activeFilterValue, setActiveFilterValue] = useState<string>('');\n\n  // original column visibility state\n  const initialColumnVisibility = useMemo(\n    () => generateColumnVisibilityObject(leafColumnsWithoutBuiltin),\n    [leafColumnsWithoutBuiltin],\n  );\n\n  // current column visibility state while modal is open\n  const [localColumnVisibility, setLocalColumnVisibility] = useState<\n    Record<string, boolean>\n  >(initialColumnVisibility);\n\n  // current column order state while modal is open\n  const [localColumnOrder, setLocalColumnOrder] =\n    useState<string[]>(tableColumnOrder);\n\n  // current column pinning state while modal is open\n  const [localColumnPinning, setLocalColumnPinning] =\n    useState<ColumnPinningState>(\n      // original column pinning state\n      () => table.getState().columnPinning,\n    );\n\n  // flag whether the \"Reset to default\" status message for screen readers should be displayed\n  const [showResetStatus, setShowResetStatus] = useState(false);\n\n  const columnOrderToReset =\n    getResetOverride(columnOrderOverride, 'resetColumnOrder') ??\n    resetColumnOrder ??\n    table.options.originalColumnOrder;\n  const columnVisibilityToReset =\n    getResetOverride(visibilityOverride, 'resetColumnVisibility') ??\n    resetColumnVisibility ??\n    table.options.originalColumnVisibility;\n  const columnPinningToReset =\n    getResetOverride(columnPinningOverride, 'resetColumnPinning') ??\n    resetColumnPinning ??\n    table.options.originalColumnPinning;\n\n  // Memoize filtered column order for comparison\n  const filteredLocalColumnOrder = useMemo(\n    () =>\n      localColumnOrder.filter(\n        (colId) => !allLocalColumnsParentIds.includes(colId),\n      ),\n    [localColumnOrder, allLocalColumnsParentIds],\n  );\n\n  // checks if local default column visibility has changed\n  const hasVisibilityChanged = useMemo(\n    () =>\n      visibilitySettingsEnabled &&\n      getHasVisibilityChanged(columnVisibilityToReset, localColumnVisibility),\n    [visibilitySettingsEnabled, columnVisibilityToReset, localColumnVisibility],\n  );\n\n  // checks if local default column order has changed\n  const hasColumnOrderChanged =\n    columnOrderSettingsEnabled &&\n    getHasColumnOrderChanged(columnOrderToReset, filteredLocalColumnOrder);\n\n  // checks if local default column pinning state has changed\n  const hasColumnPinningChanged =\n    columnPinningSettingsEnabled &&\n    getHasColumnPinningChanged(columnPinningToReset, localColumnPinning);\n\n  // determines whether all columns are visible\n  const showHideAllState = getCombinedVisibilityCheckboxState(\n    localColumnVisibility,\n    leafColumnsWithoutBuiltin,\n  );\n\n  /**\n   * Updates the local column visibility state.\n   * @param column - the column to update.\n   * @param currentVisibilityState - the current visibility state of the column.\n   */\n  const updateLocalColumnVisibility = (\n    column: Column<unknown, unknown>,\n    currentVisibilityState: boolean | 'indeterminate',\n  ): void => {\n    const childColumns = column.columns;\n    if (childColumns.length === 0) {\n      setLocalColumnVisibility((prevState) => ({\n        ...prevState,\n        [column.id]: !currentVisibilityState,\n      }));\n    } else {\n      setLocalColumnVisibility((prevState) =>\n        getMultipleLocalColumnVisibility(\n          childColumns,\n          currentVisibilityState,\n          prevState,\n        ),\n      );\n    }\n    showResetStatus && setShowResetStatus(false);\n  };\n\n  /**\n   * Updates the local column order state.\n   * @param newColumnOrder - the new column order.\n   */\n  const updateLocalColumnOrder = (newColumnOrder: string[]): void => {\n    setLocalColumnOrder(newColumnOrder);\n    showResetStatus && setShowResetStatus(false);\n  };\n\n  /**\n   * Updates the local column pinning state.\n   * @param newState - the new column pinning state.\n   */\n  const updateLocalColumnPinning = (newState: ColumnPinningState): void => {\n    setLocalColumnPinning(newState);\n    showResetStatus && setShowResetStatus(false);\n  };\n\n  const onShowHideAllChange = () => {\n    setLocalColumnVisibility((prevState) =>\n      getMultipleLocalColumnVisibility(\n        leafColumnsWithoutBuiltin,\n        showHideAllState,\n        prevState,\n      ),\n    );\n    showResetStatus && setShowResetStatus(false);\n  };\n\n  const showVisibilityControl =\n    visibilitySettingsEnabled && activeFilterValue.length === 0;\n  const showFilterControl =\n    visibilitySettingsEnabled || columnPinningSettingsEnabled;\n\n  const onReset = () => {\n    let didReset = false;\n\n    // reset visibility, order and/or pinning state if they are enabled\n    if (visibilitySettingsEnabled && columnVisibilityToReset) {\n      setLocalColumnVisibility(\n        generateColumnVisibilityObject(\n          leafColumnsWithoutBuiltin,\n          columnVisibilityToReset,\n        ),\n      );\n      didReset = true;\n    }\n\n    if (columnOrderSettingsEnabled && columnOrderToReset) {\n      const { columnOrderWithParents } = generateColumnOrderWithParentIds(\n        table.getColumn,\n        columnOrderToReset,\n      );\n\n      setLocalColumnOrder(columnOrderWithParents);\n      didReset = true;\n    }\n\n    if (columnPinningSettingsEnabled && columnPinningToReset) {\n      setLocalColumnPinning(columnPinningToReset);\n      didReset = true;\n    }\n\n    // if settings were successfully reset,\n    // show a status message for the screen reader\n    didReset && setShowResetStatus(true);\n  };\n\n  const onApply = () => {\n    table.setColumnVisibility(localColumnVisibility);\n    table.setColumnOrder(filteredLocalColumnOrder);\n    table.setColumnPinning(localColumnPinning);\n    onModalClose();\n  };\n\n  return (\n    <DataTableSettingsModal\n      title={intl.formatMessage(dataTableMessages.columnSettingsTitle)}\n      show={true}\n      showResetStatus={showResetStatus}\n      onDismiss={onModalClose}\n      onReset={onReset}\n      onApply={onApply}\n      disableButtons={{\n        reset:\n          !hasColumnOrderChanged &&\n          !hasVisibilityChanged &&\n          !hasColumnPinningChanged,\n      }}\n      controlLabels={{\n        reset: intl.formatMessage(\n          dataTableMessages.resetColumnSettingsButtonText,\n        ),\n        cancel: intl.formatMessage(dataTableMessages.cancelButtonText),\n        apply: intl.formatMessage(dataTableMessages.applyButtonText),\n      }}\n    >\n      <DataTableVisibilityFilterControls\n        showVisibilityControl={showVisibilityControl}\n        showFilterControl={showFilterControl}\n        setActiveFilterValue={setActiveFilterValue}\n        showHideAllState={showHideAllState}\n        onShowHideAllChange={onShowHideAllChange}\n      />\n      <DataTableColumnsList\n        visibilitySettings={visibilitySettingsEnabled}\n        columnOrderSettings={columnOrderSettingsEnabled}\n        columnPinningSettings={columnPinningSettingsEnabled}\n        activeFilterValue={activeFilterValue}\n        localColumnVisibility={localColumnVisibility}\n        updateLocalColumnVisibility={updateLocalColumnVisibility}\n        localColumnOrder={localColumnOrder}\n        updateLocalColumnOrder={updateLocalColumnOrder}\n        localColumnPinning={localColumnPinning}\n        updateLocalColumnPinning={updateLocalColumnPinning}\n        hasFilterBar={showFilterControl || showVisibilityControl}\n      />\n    </DataTableSettingsModal>\n  );\n};\n\nfunction DataTableColumnSettingsModalFwd(\n  props: DataTableColumnSettingsModalProps,\n  forwardedRef: Ref<DataTableColumnSettingsModalRef>,\n): JSX.Element | null {\n  const [modalOpen, setModalOpen] = useState(false);\n  const [columnSettingsOverride, setColumnSettingsOverride] =\n    useState<DataTableColumnSettingsConfig>();\n\n  // open the modal from outside\n  useImperativeHandle(forwardedRef, () => ({\n    openColumnSettings: (columnSettings?: DataTableColumnSettingsConfig) => {\n      setColumnSettingsOverride(columnSettings);\n      setModalOpen(true);\n    },\n  }));\n\n  if (modalOpen) {\n    return (\n      <ColumnSettingsModal\n        {...props}\n        columnSettingsOverride={columnSettingsOverride}\n        onModalClose={() => setModalOpen(false)}\n      />\n    );\n  }\n  return null;\n}\n\n/**\n * @internal\n */\nexport const DataTableColumnSettingsModal = forwardRef(\n  DataTableColumnSettingsModalFwd,\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type Column,\n  type ColumnPinningState,\n  type RowData,\n} from '@tanstack/react-table';\nimport {\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useState,\n  type JSX,\n  type Ref,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type { DataTableColumnSettingsModalRef } from './column-settings-types.js';\nimport {\n  generateColumnOrderWithParentIds,\n  generateColumnVisibilityObject,\n  getCombinedVisibilityCheckboxState,\n  getHasColumnOrderChanged,\n  getHasColumnPinningChanged,\n  getHasVisibilityChanged,\n  getMultipleLocalColumnVisibility,\n  getResetOverride,\n  getIsSettingEnabled,\n} from './column-settings-utils.js';\nimport { DataTableColumnsList } from './DataTableColumnsList.js';\nimport { DataTableVisibilityFilterControls } from './DataTableVisibilityFilterControls.js';\nimport { useDataTable } from '../../../contexts/DataTableContext.js';\nimport type { DataTablePinnedColumnState } from '../../../features/ColumnPinning/column-pinning-types.js';\nimport type { DataTableColumnVisibilityState } from '../../../features/ColumnVisibility/column-visibility-types.js';\nimport type { TDataTableFeatures } from '../../../features/types/features.types.js';\nimport { dataTableMessages } from '../../../messages.js';\nimport type { DataTableColumnSettingsConfig } from '../../../public.api.js';\nimport { DataTableSettingsModal } from '../../SettingsModal/DataTableSettingsModal.js';\n\ninterface DataTableColumnSettingsModalProps {\n  /**\n   * Whether column visibility settings are available in the modal.\n   */\n  visibilitySettings: boolean;\n  /**\n   * Whether column order settings are available in the modal.\n   */\n  columnOrderSettings: boolean;\n  /**\n   * Whether column pinning settings are available in the modal.\n   */\n  columnPinningSettings: boolean;\n  /**\n   * Default column visibility when settings are reset.\n   */\n  resetColumnVisibility?: DataTableColumnVisibilityState;\n  /**\n   * Default column order when settings are reset.\n   */\n  resetColumnOrder?: string[];\n  /**\n   * Default column pinning state when settings are reset.\n   */\n  resetColumnPinning?: DataTablePinnedColumnState;\n}\n\n/**\n * Modal combining UI controls for column visibility and column ordering.\n * All changes that made within the modal are only applied once the user click the Confirm button.\n * When clicking Close, the changes won't be applied and discarded.\n */\nfunction ColumnSettingsModal<\n  TFeatures extends TDataTableFeatures,\n  TData extends RowData,\n>(\n  props: DataTableColumnSettingsModalProps & {\n    onModalClose: () => void;\n    columnSettingsOverride?: DataTableColumnSettingsConfig;\n  },\n): JSX.Element {\n  const {\n    visibilitySettings: toolbarVisibilitySettings,\n    columnOrderSettings: toolbarColumnOrderSettings,\n    columnPinningSettings: toolbarColumnPinningSettings,\n    resetColumnOrder,\n    resetColumnVisibility,\n    resetColumnPinning,\n    onModalClose,\n    columnSettingsOverride,\n  } = props;\n\n  const intl = useIntl();\n  const table = useDataTable();\n  const leafColumnsWithoutBuiltin = table.getLeafColumnsWithoutBuiltin();\n\n  const visibilityOverride = columnSettingsOverride?.columnVisibility;\n  const columnOrderOverride = columnSettingsOverride?.columnOrder;\n  const columnPinningOverride = columnSettingsOverride?.columnPinning;\n\n  const visibilitySettingsEnabled = getIsSettingEnabled(\n    visibilityOverride,\n    toolbarVisibilitySettings,\n  );\n  const columnOrderSettingsEnabled = getIsSettingEnabled(\n    columnOrderOverride,\n    toolbarColumnOrderSettings,\n  );\n  const columnPinningSettingsEnabled = getIsSettingEnabled(\n    columnPinningOverride,\n    toolbarColumnPinningSettings,\n  );\n\n  // original column order state\n  const {\n    columnOrderWithParents: tableColumnOrder,\n    uniqueParentIds: allLocalColumnsParentIds,\n  } = generateColumnOrderWithParentIds(\n    table.getColumn,\n    table.atoms.columnOrder?.get() ?? [],\n  );\n\n  const [activeFilterValue, setActiveFilterValue] = useState<string>('');\n\n  // original column visibility state\n  const initialColumnVisibility = useMemo(\n    () => generateColumnVisibilityObject(leafColumnsWithoutBuiltin),\n    [leafColumnsWithoutBuiltin],\n  );\n\n  // current column visibility state while modal is open\n  const [localColumnVisibility, setLocalColumnVisibility] = useState<\n    Record<string, boolean>\n  >(initialColumnVisibility);\n\n  // current column order state while modal is open\n  const [localColumnOrder, setLocalColumnOrder] =\n    useState<string[]>(tableColumnOrder);\n\n  // current column pinning state while modal is open\n  const [localColumnPinning, setLocalColumnPinning] =\n    useState<ColumnPinningState>(\n      // original column pinning state\n      () => table.store.state.columnPinning,\n    );\n\n  // flag whether the \"Reset to default\" status message for screen readers should be displayed\n  const [showResetStatus, setShowResetStatus] = useState(false);\n\n  const columnOrderToReset =\n    getResetOverride(columnOrderOverride, 'resetColumnOrder') ??\n    resetColumnOrder ??\n    table.options.originalColumnOrder;\n  const columnVisibilityToReset =\n    getResetOverride(visibilityOverride, 'resetColumnVisibility') ??\n    resetColumnVisibility ??\n    table.options.originalColumnVisibility;\n  const columnPinningToReset =\n    getResetOverride(columnPinningOverride, 'resetColumnPinning') ??\n    resetColumnPinning ??\n    table.options.originalColumnPinning;\n\n  // Memoize filtered column order for comparison\n  const filteredLocalColumnOrder = useMemo(\n    () =>\n      localColumnOrder.filter(\n        (colId) => !allLocalColumnsParentIds.includes(colId),\n      ),\n    [localColumnOrder, allLocalColumnsParentIds],\n  );\n\n  // checks if local default column visibility has changed\n  const hasVisibilityChanged = useMemo(\n    () =>\n      visibilitySettingsEnabled &&\n      getHasVisibilityChanged(columnVisibilityToReset, localColumnVisibility),\n    [visibilitySettingsEnabled, columnVisibilityToReset, localColumnVisibility],\n  );\n\n  // checks if local default column order has changed\n  const hasColumnOrderChanged =\n    columnOrderSettingsEnabled &&\n    getHasColumnOrderChanged(columnOrderToReset, filteredLocalColumnOrder);\n\n  // checks if local default column pinning state has changed\n  const hasColumnPinningChanged =\n    columnPinningSettingsEnabled &&\n    getHasColumnPinningChanged(\n      {\n        left: columnPinningToReset?.left ?? [],\n        right: columnPinningToReset?.right ?? [],\n      },\n      localColumnPinning,\n    );\n\n  // determines whether all columns are visible\n  const showHideAllState = getCombinedVisibilityCheckboxState(\n    localColumnVisibility,\n    leafColumnsWithoutBuiltin,\n  );\n\n  /**\n   * Updates the local column visibility state.\n   * @param column - the column to update.\n   * @param currentVisibilityState - the current visibility state of the column.\n   */\n  const updateLocalColumnVisibility = (\n    column: Column<TFeatures, TData>,\n    currentVisibilityState: boolean | 'indeterminate',\n  ): void => {\n    const childColumns = column.columns;\n    if (childColumns.length === 0) {\n      setLocalColumnVisibility((prevState) => ({\n        ...prevState,\n        [column.id]: !currentVisibilityState,\n      }));\n    } else {\n      setLocalColumnVisibility((prevState) =>\n        getMultipleLocalColumnVisibility(\n          childColumns,\n          currentVisibilityState,\n          prevState,\n        ),\n      );\n    }\n    showResetStatus && setShowResetStatus(false);\n  };\n\n  /**\n   * Updates the local column order state.\n   * @param newColumnOrder - the new column order.\n   */\n  const updateLocalColumnOrder = (newColumnOrder: string[]): void => {\n    setLocalColumnOrder(newColumnOrder);\n    showResetStatus && setShowResetStatus(false);\n  };\n\n  /**\n   * Updates the local column pinning state.\n   * @param newState - the new column pinning state.\n   */\n  const updateLocalColumnPinning = (newState: ColumnPinningState): void => {\n    setLocalColumnPinning(newState);\n    showResetStatus && setShowResetStatus(false);\n  };\n\n  const onShowHideAllChange = () => {\n    setLocalColumnVisibility((prevState) =>\n      getMultipleLocalColumnVisibility(\n        leafColumnsWithoutBuiltin,\n        showHideAllState,\n        prevState,\n      ),\n    );\n    showResetStatus && setShowResetStatus(false);\n  };\n\n  const showVisibilityControl =\n    visibilitySettingsEnabled && activeFilterValue.length === 0;\n  const showFilterControl =\n    visibilitySettingsEnabled || columnPinningSettingsEnabled;\n\n  const onReset = () => {\n    let didReset = false;\n\n    // reset visibility, order and/or pinning state if they are enabled\n    if (visibilitySettingsEnabled && columnVisibilityToReset) {\n      setLocalColumnVisibility(\n        generateColumnVisibilityObject(\n          leafColumnsWithoutBuiltin,\n          columnVisibilityToReset,\n        ),\n      );\n      didReset = true;\n    }\n\n    if (columnOrderSettingsEnabled && columnOrderToReset) {\n      const { columnOrderWithParents } = generateColumnOrderWithParentIds(\n        table.getColumn,\n        columnOrderToReset,\n      );\n\n      setLocalColumnOrder(columnOrderWithParents);\n      didReset = true;\n    }\n\n    if (columnPinningSettingsEnabled && columnPinningToReset) {\n      setLocalColumnPinning({\n        left: columnPinningToReset?.left ?? [],\n        right: columnPinningToReset?.right ?? [],\n      });\n      didReset = true;\n    }\n\n    // if settings were successfully reset,\n    // show a status message for the screen reader\n    didReset && setShowResetStatus(true);\n  };\n\n  const onApply = () => {\n    table.setColumnVisibility(localColumnVisibility);\n    table.setColumnOrder(filteredLocalColumnOrder);\n    table.setColumnPinning(localColumnPinning);\n    onModalClose();\n  };\n\n  return (\n    <DataTableSettingsModal\n      title={intl.formatMessage(dataTableMessages.columnSettingsTitle)}\n      show={true}\n      showResetStatus={showResetStatus}\n      onDismiss={onModalClose}\n      onReset={onReset}\n      onApply={onApply}\n      disableButtons={{\n        reset:\n          !hasColumnOrderChanged &&\n          !hasVisibilityChanged &&\n          !hasColumnPinningChanged,\n      }}\n      controlLabels={{\n        reset: intl.formatMessage(\n          dataTableMessages.resetColumnSettingsButtonText,\n        ),\n        cancel: intl.formatMessage(dataTableMessages.cancelButtonText),\n        apply: intl.formatMessage(dataTableMessages.applyButtonText),\n      }}\n    >\n      <DataTableVisibilityFilterControls\n        showVisibilityControl={showVisibilityControl}\n        showFilterControl={showFilterControl}\n        setActiveFilterValue={setActiveFilterValue}\n        showHideAllState={showHideAllState}\n        onShowHideAllChange={onShowHideAllChange}\n      />\n      <DataTableColumnsList\n        visibilitySettings={visibilitySettingsEnabled}\n        columnOrderSettings={columnOrderSettingsEnabled}\n        columnPinningSettings={columnPinningSettingsEnabled}\n        activeFilterValue={activeFilterValue}\n        localColumnVisibility={localColumnVisibility}\n        updateLocalColumnVisibility={updateLocalColumnVisibility}\n        localColumnOrder={localColumnOrder}\n        updateLocalColumnOrder={updateLocalColumnOrder}\n        localColumnPinning={localColumnPinning}\n        updateLocalColumnPinning={updateLocalColumnPinning}\n        hasFilterBar={showFilterControl || showVisibilityControl}\n      />\n    </DataTableSettingsModal>\n  );\n}\n\nfunction DataTableColumnSettingsModalFwd(\n  props: DataTableColumnSettingsModalProps,\n  forwardedRef: Ref<DataTableColumnSettingsModalRef>,\n): JSX.Element | null {\n  const [modalOpen, setModalOpen] = useState(false);\n  const [columnSettingsOverride, setColumnSettingsOverride] =\n    useState<DataTableColumnSettingsConfig>();\n\n  // open the modal from outside\n  useImperativeHandle(forwardedRef, () => ({\n    openColumnSettings: (columnSettings?: DataTableColumnSettingsConfig) => {\n      setColumnSettingsOverride(columnSettings);\n      setModalOpen(true);\n    },\n  }));\n\n  if (modalOpen) {\n    return (\n      <ColumnSettingsModal\n        {...props}\n        columnSettingsOverride={columnSettingsOverride}\n        onModalClose={() => setModalOpen(false)}\n      />\n    );\n  }\n  return null;\n}\n\n/**\n * @internal\n */\nexport const DataTableColumnSettingsModal = forwardRef(\n  DataTableColumnSettingsModalFwd,\n);\n"],
+  "mappings": "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",
   "names": []
 }

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

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

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

@@ -20,7 +20,7 @@ import { Text } from "../../../../../typography/text/Text.js";
 import { useDataTable } from "../../../contexts/DataTableContext.js";
 import { getCanHide } from "../../../features/ColumnVisibility/ColumnVisibility.js";
 import { dataTableMessages } from "../../../messages.js";
-const DataTableColumnsList = (props) => {
+function DataTableColumnsList(props) {
   const {
     visibilitySettings: showVisibilityCheckbox,
     columnOrderSettings,
@@ -158,12 +158,18 @@ const DataTableColumnsList = (props) => {
   if (filteredColumns.length === 0) {
     return /* @__PURE__ */ jsx(Text, { className: styles.noItemsFound, children: intl.formatMessage(dataTableMessages.noItemsFound) });
   }
-  const showColumnPinningButton = !!table.options.enableColumnPinning && columnPinningSettings;
-  const canOrder = !!table.options.enableColumnOrdering && columnOrderSettings && activeFilterValue.length === 0;
+  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 columnKey = column.key;
-    const canHide = getCanHide(table, column, isParentColumnHideable);
+    const canHide = getCanHide(
+      // Need to cast this one here in order to make sure that it allows
+      // instanciating with the same Subtype of RowData
+      table,
+      column,
+      isParentColumnHideable
+    );
     const visibilityCheckboxState = getVisibilityCheckboxState(
       localColumnVisibility,
       column
@@ -223,7 +229,7 @@ const DataTableColumnsList = (props) => {
       children: columnList
     }
   ) : columnList;
-};
+}
 export {
   DataTableColumnsList
 };