@dynatrace/strato-components 3.12.2 → 3.13.0

package/esm/tables/DataTable/components/SettingsModal/DataTableSettingsModal.sty.js

@@ -1,7 +1,7 @@
 import "../../../../overlays/modal/Modal.css";
 import "./DataTableSettingsModal.css";
-var footer = "_115i8c20-3-12-2";
-var footerWithMessage = "_115i8c21-3-12-2";
+var footer = "_115i8c20-3-13-0";
+var footerWithMessage = "_115i8c21-3-13-0";
 export {
   footer,
   footerWithMessage

package/esm/tables/DataTable/components/SettingsModal/DataTableSettingsModal.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/components/SettingsModal/DataTableSettingsModal.css.ts"],
-  "sourcesContent": ["import '../../../../overlays/modal/Modal.css';\nimport './DataTableSettingsModal.css';\nexport var footer = '_115i8c20-3-12-2';\nexport var footerWithMessage = '_115i8c21-3-12-2';"],
+  "sourcesContent": ["import '../../../../overlays/modal/Modal.css';\nimport './DataTableSettingsModal.css';\nexport var footer = '_115i8c20-3-13-0';\nexport var footerWithMessage = '_115i8c21-3-13-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,SAAS;AACb,IAAI,oBAAoB;",
   "names": []
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/ColumnOrderSettings/column-order-settings-dnd-utils.ts"],
-  "sourcesContent": ["import {\n  type ClientRect,\n  type Collision,\n  type CollisionDescriptor,\n  type CollisionDetection,\n  type DragOverEvent,\n  type Modifier,\n} from '@dnd-kit/core';\nimport type {\n  ColumnPinningState,\n  Column,\n  RowData,\n  TableFeatures,\n  CellData,\n} from '@tanstack/react-table';\n\nimport Animations from '@dynatrace/strato-design-tokens/animations';\n\nimport * as columnSettingsDndStyles from './ColumnOrderSettingsDragAndDrop.sty.js';\nimport { getIsColumnPinned } from '../../../../features/ColumnPinning/column-pinning-utils.js';\nimport type { DragAndDropTransform } from '../../../../features/types/dnd.types.js';\nimport * as columnListItemStyles from '../DataTableColumnsListItem.sty.js';\n\nexport const COLUMNS_LIST_ITEM_BORDER_HEIGHT = 1;\nexport const DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT =\n  32 + COLUMNS_LIST_ITEM_BORDER_HEIGHT;\n\n// all columns in the settings modal that were transformed in the last onDragOver call\nlet lastAffectedItems = new Set<string>();\n\n// child columns of a parent column that should be hidden during drag\n// when items are virtualized and scroll back into view, they need to be hidden again\nlet hiddenChildColumns = new Set<string>();\n\n// #region Transforms\n/**\n * Transforms columns in the settings modal upwards or downwards to make space for the item which is currently being dragged.\n *\n * @param columnsList - the columns list element holding the columns in the settings modal.\n * @param event - contains \"active\" (item being dragged) and \"over\" ids (item where the active item is currently dragged over).\n * @param localColumnOrder - column order before dragging.\n * @param transformValue - the value by which the columns should be transformed (positive for down or negative for up).\n * @param activeColumn - the column which is currently being dragged.\n * @internal\n */\nexport function transformColumnsOnDragOver<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  columnsList: HTMLElement | null,\n  event: DragOverEvent,\n  localColumnOrder: string[],\n  transformValue: number,\n  activeColumn: Column<TFeatures, TData> | undefined,\n): void {\n  if (!columnsList || !activeColumn) {\n    return;\n  }\n\n  const { over, collisions } = event;\n  if (!over || !collisions?.length) {\n    return;\n  }\n\n  // keep track of all items that are transformed during the current onDragOver call\n  const newAffectedColumns = new Set<string>();\n  const { fromIndex, toIndex } = getDragIndexes(\n    localColumnOrder,\n    activeColumn.id,\n    over.data.current?.columnId as string,\n  );\n  const adjustedTransformValue =\n    transformValue + COLUMNS_LIST_ITEM_BORDER_HEIGHT;\n\n  if (fromIndex < toIndex) {\n    // only when dragging downwards:\n    // when dragging a parent column, the drag overlay is moved above child columns as well,\n    // so we need to ensure that the actual parent column, including its child columns, in the columns list are not transformed\n    const adaptedFromIndex = fromIndex + activeColumn.columns.length;\n\n    transformColumns(\n      columnsList,\n      localColumnOrder.slice(adaptedFromIndex + 1, toIndex + 1),\n      -adjustedTransformValue,\n      newAffectedColumns,\n    );\n  } else if (fromIndex > toIndex) {\n    transformColumns(\n      columnsList,\n      localColumnOrder.slice(toIndex, fromIndex),\n      adjustedTransformValue,\n      newAffectedColumns,\n    );\n  }\n\n  // reset items that were transformed in the last drag operation but are not in the current one\n  transformColumns(columnsList, lastAffectedItems, 0);\n  lastAffectedItems = newAffectedColumns;\n}\n\n/**\n * Gets the rendered element of an unpinned column in the settings modal with a given column id.\n *\n * @param columnsList - the columns list element holding the columns in the settings modal.\n * @param columnId - id of the column.\n * @returns the column in the settings modal with the given id, or null if not found.\n * @internal\n */\nexport function getColumnById(\n  columnsList: HTMLElement,\n  columnId: string,\n): HTMLElement | null {\n  return columnsList.querySelector<HTMLElement>(\n    `[data-columnid=\"${CSS.escape(columnId)}\"]:not([data-pinned-position])`,\n  );\n}\n\n/**\n * Gets all column elements displayed in the column settings modal.\n *\n * @param columnsList - the columns list element holding the columns shown in the settings modal.\n * @returns all columns in the settings modal.\n * @internal\n */\nexport function getAllColumns(columnsList: HTMLElement): HTMLElement[] {\n  const allLocalColumns =\n    columnsList.querySelectorAll<HTMLElement>('[data-columnid]');\n  return Array.from(allLocalColumns);\n}\n\n/**\n * Gets all column elements in the settings modal that are pinned or don't have the same parent id.\n *\n * @param columnsList - the columns list element holding the columns in the settings modal.\n * @param activeParentId - the parent id of the currently actively dragged column.\n * @returns all columns in the settings modal that are not valid drop targets.\n */\nfunction getAllNonTargetColumns(\n  columnsList: HTMLElement,\n  activeParentId?: string,\n): HTMLElement[] {\n  const selector = activeParentId\n    ? `[data-pinned-position], [data-columnid]:not([data-parentcolumnid=\"${CSS.escape(\n        String(activeParentId),\n      )}\"])`\n    : '[data-pinned-position]';\n\n  const nonTargetColumns = columnsList.querySelectorAll<HTMLElement>(selector);\n\n  return Array.from(nonTargetColumns);\n}\n\n/**\n * Moves the column in the settings modal along the y-axis by the given number of pixels.\n *\n * @param localColumn - the column in the settings modal to translate.\n * @param value - number of pixels (positive for down or negative for up).\n * @internal\n */\nfunction translateColumnY(localColumn: HTMLElement, value: number): void {\n  const transform = `translateY(${value}px)`;\n  const transition = `transform ${Animations.SlideIn.Duration.Base} ${Animations.Move.Easing}`;\n  localColumn.style.transform = transform;\n  localColumn.style.transition = transition;\n}\n\n/**\n * Resets the transform style on all items in the columns list.\n *\n * @param localColumns - the columns in the settings modal to reset.\n */\nexport function resetAllColumnsStyles(localColumns: HTMLElement[]): void {\n  for (const column of localColumns) {\n    column.style.removeProperty('transform');\n    column.style.removeProperty('transition');\n    column.classList.remove(\n      columnSettingsDndStyles.disabledNonTargetLocalColumn,\n      columnListItemStyles.dragging,\n    );\n  }\n  lastAffectedItems.clear();\n  hiddenChildColumns.clear();\n}\n\n/**\n * Applies styles to visually indicate droppable targets for the currently active columns in the settings modal.\n * Pinned columns or columns that do not share the same parent as the dragged column will appear visually disabled.\n *\n * @param columnsList - the columns list element containing the columns to style.\n * @param activeParentId - the parent id of the currently actively dragged column.\n * @internal\n */\nexport function styleNonTargetColumns(\n  columnsList: HTMLElement,\n  activeParentId?: string,\n): void {\n  const nonTargetLocalColumns = getAllNonTargetColumns(\n    columnsList,\n    activeParentId,\n  );\n\n  for (const column of nonTargetLocalColumns) {\n    column.classList.add(columnSettingsDndStyles.disabledNonTargetLocalColumn);\n  }\n}\n\n/**\n * Applies the dragging class to the specified child columns.\n *\n * @param columnsList - the columns list element containing the columns.\n * @param childColumnIds - the ids of child columns to apply styles to.\n */\nfunction styleDraggedChildColumns(\n  columnsList: HTMLElement,\n  childColumnIds: Iterable<string>,\n): void {\n  for (const columnId of childColumnIds) {\n    const childColumn = getColumnById(columnsList, columnId);\n    if (childColumn) {\n      childColumn.classList.add(columnListItemStyles.dragging);\n    }\n  }\n}\n\n/**\n * Hides child columns during parent column drag and\n * tracks which columns should remain hidden during scrolling.\n * This is necessary to handle virtualization - when child columns scroll back into view,\n * they need to be hidden again.\n *\n * @param columnsList - the columns list element containing the columns.\n * @param childColumnIds - the ids of child columns to hide.\n * @internal\n */\nexport function hideChildColumns(\n  columnsList: HTMLElement,\n  childColumnIds: string[],\n): void {\n  // Clear previous tracking and set new ones\n  hiddenChildColumns = new Set(childColumnIds);\n  styleDraggedChildColumns(columnsList, childColumnIds);\n}\n\n/**\n * Reapplies the isDragging class to child columns that should be hidden.\n * Called when scrolling during drag to handle newly rendered virtualized items.\n *\n * @param columnsList - the columns list element containing the columns.\n * @internal\n */\nexport function hideChildColumnsOnScroll(columnsList: HTMLElement): void {\n  if (hiddenChildColumns.size === 0) {\n    return;\n  }\n  styleDraggedChildColumns(columnsList, hiddenChildColumns);\n}\n\n/**\n * Gets the source and destination indexes for a dragged column.\n *\n * @param localColumnOrder - contains the ids of the columns in order.\n * @param activeId - the id of the dragged column in the settings modal.\n * @param overId - the id of the column where the active column is currently dragged over.\n * @returns indexes from where a column is dragged and where it is dragged to.\n */\nexport function getDragIndexes(\n  localColumnOrder: string[],\n  activeId: string,\n  overId: string,\n): { fromIndex: number; toIndex: number } {\n  const fromIndex = localColumnOrder.indexOf(activeId);\n  const toIndex = localColumnOrder.indexOf(overId);\n  return { fromIndex, toIndex };\n}\n\n/**\n * Transforms columns in the settings modal upwards or downwards to make space for the item being dragged.\n *\n * @param container - the container element holding the columns in the settings modal.\n * @param columnIds - the ids of columns to transform.\n * @param amountToTransform - number of pixels to translate (positive for down or negative for up).\n * @param newAffectedItems - set to save all items that are transformed during the current onDragOver call.\n */\nfunction transformColumns(\n  container: HTMLElement,\n  columnIds: string[] | Set<string>,\n  amountToTransform: number,\n  newAffectedItems?: Set<string>,\n): void {\n  for (const columnId of columnIds) {\n    const column = getColumnById(container, columnId);\n    if (!column) {\n      continue;\n    }\n    translateColumnY(column, amountToTransform);\n    if (newAffectedItems) {\n      newAffectedItems.add(columnId);\n      lastAffectedItems.delete(columnId);\n    }\n  }\n}\n// #endregion Transforms\n\n// #region CollisionDetection\n// min local column height is 33px, to ensure the offset is in the top/bottom half: 33 / 2\nconst DATA_TABLE_COLUMNS_LIST_DND_COLLISION_OFFSET =\n  DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT / 2;\n\n/**\n * Gets a list of ordered leaf column ids for the given column based on the column order.\n *\n * @param column - the column to get the leaf columns for.\n * @param localColumnOrder - the local column order to use for filtering.\n * @returns an array of ordered leaf column ids for the given column, or an empty array if the column is already a leaf column.\n * @internal\n */\nexport function getLeafColumnsForColumn<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(\n  column: Column<TFeatures, TData, TValue>,\n  localColumnOrder: string[],\n): string[] {\n  if (column.columns.length === 0) {\n    return [];\n  }\n  return localColumnOrder.filter((columnId) =>\n    column.columns.some((col) => col.id === columnId),\n  );\n}\n\n/**\n * Custom collision detection algorithm for drag and drop in the column settings modal.\n * Determines the closest droppable target within the Y-axis based on the dragging direction.\n *\n * @param param0 - Object containing the droppable containers, the droppable rects, the collision rect and\n *                 the active element, which are needed for the collision detection.\n * @returns An array of collision descriptors, sorted by the distance to the dragged column, or an empty array if none is found.\n * @internal\n */\nfunction closestTargetWithinY({\n  droppableContainers,\n  droppableRects,\n  collisionRect,\n  active,\n}: Parameters<CollisionDetection>[0]): Collision[] {\n  const initialRect = active.rect.current.initial;\n  if (initialRect === null) {\n    return [];\n  }\n\n  const collisions: CollisionDescriptor[] = [];\n\n  // When dragging a parent column, we also need to consider the height of all its child columns,\n  // as they are moved together with the parent column.\n  // Depending on the dragging direction, we take either the top or the bottom of the drag overlay to check for collisions\n  // (minus a small offset, so the overlay and underlying list item have to overlap a bit, before they are swapped).\n  const isDraggingUp = collisionRect.top <= initialRect.top;\n  const collisionRectY = isDraggingUp\n    ? collisionRect.top + DATA_TABLE_COLUMNS_LIST_DND_COLLISION_OFFSET\n    : collisionRect.bottom - DATA_TABLE_COLUMNS_LIST_DND_COLLISION_OFFSET;\n\n  for (const droppableContainer of droppableContainers) {\n    const { id } = droppableContainer;\n    const rect = droppableRects.get(id);\n    if (rect === undefined) {\n      continue;\n    }\n\n    if (rect.top <= collisionRectY && collisionRectY <= rect.bottom) {\n      return [\n        {\n          id,\n          data: { droppableContainer },\n        },\n      ];\n    }\n\n    // in case the dragged column's collisionRectY is not directly within any of the droppable containers,\n    // we need to find the closest one. Therefore, we calculate the distance between\n    // the droppable container's top/bottom and the collisionRectY coordinate.\n    const droppableContainerY = isDraggingUp ? rect.top : rect.bottom;\n    const distance = Math.abs(collisionRectY - droppableContainerY);\n    collisions.push({ id, data: { droppableContainer, value: distance } });\n  }\n\n  return collisions.toSorted((a, b) => a.data.value - b.data.value);\n}\n\n/**\n * Information about the currently dragged column.\n * @internal\n */\nexport type DraggingColumnInfo<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n> = {\n  id: string;\n  index: number;\n  column: Column<TFeatures, TData>;\n};\n\n/**\n * Custom collision detection for column ordering in the column settings modal.\n * Filters out invalid drop targets based on the nested structure and column pinning state, and applies\n * the closestCenter collision detection on the remaining valid targets.\n *\n * @param localColumnOrder - the column order before dragging.\n * @param localColumnPinning - the column pinning state in the column settings modal before dragging.\n * @param draggingColumnInfo - information about the currently dragged column.\n * @returns dnd-kit CollisionDetection\n * @internal\n */\nexport function createColumnOrderSettingsCollisionDetection<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  localColumnOrder: string[],\n  localColumnPinning: ColumnPinningState,\n  draggingColumnInfo: DraggingColumnInfo<TFeatures, TData> | null,\n): CollisionDetection {\n  return ({ active, droppableContainers, ...rest }) => {\n    if (!draggingColumnInfo) {\n      return [];\n    }\n\n    const { column: activeColumn, index: activeIndex } = draggingColumnInfo;\n    if (activeColumn === undefined) {\n      return [];\n    }\n    const activeParentId = activeColumn.parent?.id;\n\n    const validTargets = droppableContainers.filter((target) => {\n      const currentTarget = target.data.current;\n      const targetColumn = currentTarget?.column as Column<TFeatures, TData>;\n      const targetParentColumn = targetColumn.parent;\n      const targetIndex = currentTarget?.columnIndex as number;\n\n      // skip the active column itself\n      if (activeIndex === targetIndex) {\n        return true;\n      }\n\n      const hasSameParent = targetParentColumn?.id === activeParentId;\n\n      // the active column is a child column, so only allow dropping on columns with the same parent\n      if (activeParentId !== undefined) {\n        return hasSameParent;\n      }\n\n      // the active column is either a standalone column or a parent column\n      // therefore, only allow dropping before or after the entire group of child columns\n      if (targetColumn.columns.length > 0) {\n        // the currently active column is dragged upwards, only allow dropping before the first child column\n        return activeIndex > targetIndex;\n      }\n      if (targetParentColumn?.id !== undefined) {\n        const orderedChildIds = getLeafColumnsForColumn(\n          targetParentColumn,\n          localColumnOrder,\n        );\n        const lastUnpinnedChildId = orderedChildIds.findLast(\n          (childId) => !getIsColumnPinned(childId, localColumnPinning),\n        );\n\n        if (targetColumn.id === lastUnpinnedChildId) {\n          // the currently active column is dragged downwards, only allow dropping after the last child column\n          return activeIndex < targetIndex;\n        }\n      }\n      // for all remaining columns, only allow dropping on columns with the same parent\n      return hasSameParent;\n    });\n\n    return closestTargetWithinY({\n      active,\n      droppableContainers: validTargets,\n      ...rest,\n    });\n  };\n}\n// #endregion CollisionDetection\n\n// #region Modifiers\n/**\n * Restricts the vertical movement of an element within the specified bounds.\n *\n * @param transform - Transform values of the currently dragged element\n * @param rect - The bounding rectangle of the element being transformed.\n * @param verticalBounds - The bounds within which the element should be restricted.\n * @returns The updated transform object with restricted y value.\n */\nfunction restrictToVerticalBounds(\n  transform: DragAndDropTransform,\n  rect: ClientRect,\n  verticalBounds: {\n    top: number;\n    bottom: number;\n  },\n): DragAndDropTransform {\n  const value = {\n    ...transform,\n  };\n\n  if (rect.top + transform.y <= verticalBounds.top) {\n    value.y = verticalBounds.top - rect.top;\n  } else if (rect.bottom + transform.y >= verticalBounds.bottom) {\n    value.y = verticalBounds.bottom - rect.bottom;\n  }\n\n  return value;\n}\n\n/**\n * Creates a modifier that restricts the drag overlay to the columns list area within the settings modal.\n *\n * @param modalContent - The columns list element to restrict dragging within.\n * @returns dnd-kit modifier\n * @internal\n */\nexport function createRestrictToColumnsListAreaModifier(\n  modalContent: HTMLDivElement | null,\n): Modifier {\n  return ({ transform, draggingNodeRect }) => {\n    if (!draggingNodeRect || modalContent === null) {\n      return transform;\n    }\n\n    // Restrict dragging to the vertical axis\n    transform.x = 0;\n\n    const columnsListRect = modalContent.getBoundingClientRect();\n    const verticalBounds = {\n      top: columnsListRect.top,\n      bottom: columnsListRect.bottom,\n    };\n\n    // Only unpinned columns are reorderable; clamp to section headers rather than\n    // column elements \u2014 headers don't transform during drag, preventing jitter.\n    const firstUnpinned = modalContent.querySelector(\n      '[data-columnid]:not([data-pinned-position])',\n    );\n    const unpinnedHeader = firstUnpinned?.previousElementSibling;\n    if (unpinnedHeader && !unpinnedHeader.hasAttribute('data-columnid')) {\n      verticalBounds.top = Math.max(\n        verticalBounds.top,\n        unpinnedHeader.getBoundingClientRect().bottom,\n      );\n    }\n\n    return restrictToVerticalBounds(\n      transform,\n      draggingNodeRect,\n      verticalBounds,\n    );\n  };\n}\n// #endregion Modifiers\n\n/**\n * Gets the drag handle button for a specific column in the column settings modal.\n * @param columnId - the id of the column to get the drag handle for.\n * @param columnsList - the columns list element holding the columns in the settings modal.\n * @returns the drag handle button for the specified column, or null if not found.\n */\nexport function getDragHandleForColumn(\n  columnId: string,\n  columnsList: HTMLElement | null,\n): HTMLButtonElement | null {\n  if (columnsList === null) {\n    return null;\n  }\n\n  return (\n    columnsList?.querySelector<HTMLButtonElement>(\n      `[data-columnid=\"${CSS.escape(\n        columnId,\n      )}\"]:not([data-pinned-position]) button`,\n    ) ?? null\n  );\n}\n"],
-  "mappings": "AAgBA,OAAO,gBAAgB;AAEvB,YAAY,6BAA6B;AACzC,SAAS,yBAAyB;AAElC,YAAY,0BAA0B;AAE/B,MAAM,kCAAkC;AACxC,MAAM,0CACX,KAAK;AAGP,IAAI,oBAAoB,oBAAI,IAAY;AAIxC,IAAI,qBAAqB,oBAAI,IAAY;AAalC,SAAS,2BAId,aACA,OACA,kBACA,gBACA,cACM;AACN,MAAI,CAAC,eAAe,CAAC,cAAc;AACjC;AAAA,EACF;AAEA,QAAM,EAAE,MAAM,WAAW,IAAI;AAC7B,MAAI,CAAC,QAAQ,CAAC,YAAY,QAAQ;AAChC;AAAA,EACF;AAGA,QAAM,qBAAqB,oBAAI,IAAY;AAC3C,QAAM,EAAE,WAAW,QAAQ,IAAI;AAAA,IAC7B;AAAA,IACA,aAAa;AAAA,IACb,KAAK,KAAK,SAAS;AAAA,EACrB;AACA,QAAM,yBACJ,iBAAiB;AAEnB,MAAI,YAAY,SAAS;AAIvB,UAAM,mBAAmB,YAAY,aAAa,QAAQ;AAE1D;AAAA,MACE;AAAA,MACA,iBAAiB,MAAM,mBAAmB,GAAG,UAAU,CAAC;AAAA,MACxD,CAAC;AAAA,MACD;AAAA,IACF;AAAA,EACF,WAAW,YAAY,SAAS;AAC9B;AAAA,MACE;AAAA,MACA,iBAAiB,MAAM,SAAS,SAAS;AAAA,MACzC;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAGA,mBAAiB,aAAa,mBAAmB,CAAC;AAClD,sBAAoB;AACtB;AAUO,SAAS,cACd,aACA,UACoB;AACpB,SAAO,YAAY;AAAA,IACjB,mBAAmB,IAAI,OAAO,QAAQ,CAAC;AAAA,EACzC;AACF;AASO,SAAS,cAAc,aAAyC;AACrE,QAAM,kBACJ,YAAY,iBAA8B,iBAAiB;AAC7D,SAAO,MAAM,KAAK,eAAe;AACnC;AASA,SAAS,uBACP,aACA,gBACe;AACf,QAAM,WAAW,iBACb,qEAAqE,IAAI;AAAA,IACvE,OAAO,cAAc;AAAA,EACvB,CAAC,QACD;AAEJ,QAAM,mBAAmB,YAAY,iBAA8B,QAAQ;AAE3E,SAAO,MAAM,KAAK,gBAAgB;AACpC;AASA,SAAS,iBAAiB,aAA0B,OAAqB;AACvE,QAAM,YAAY,cAAc,KAAK;AACrC,QAAM,aAAa,aAAa,WAAW,QAAQ,SAAS,IAAI,IAAI,WAAW,KAAK,MAAM;AAC1F,cAAY,MAAM,YAAY;AAC9B,cAAY,MAAM,aAAa;AACjC;AAOO,SAAS,sBAAsB,cAAmC;AACvE,aAAW,UAAU,cAAc;AACjC,WAAO,MAAM,eAAe,WAAW;AACvC,WAAO,MAAM,eAAe,YAAY;AACxC,WAAO,UAAU;AAAA,MACf,wBAAwB;AAAA,MACxB,qBAAqB;AAAA,IACvB;AAAA,EACF;AACA,oBAAkB,MAAM;AACxB,qBAAmB,MAAM;AAC3B;AAUO,SAAS,sBACd,aACA,gBACM;AACN,QAAM,wBAAwB;AAAA,IAC5B;AAAA,IACA;AAAA,EACF;AAEA,aAAW,UAAU,uBAAuB;AAC1C,WAAO,UAAU,IAAI,wBAAwB,4BAA4B;AAAA,EAC3E;AACF;AAQA,SAAS,yBACP,aACA,gBACM;AACN,aAAW,YAAY,gBAAgB;AACrC,UAAM,cAAc,cAAc,aAAa,QAAQ;AACvD,QAAI,aAAa;AACf,kBAAY,UAAU,IAAI,qBAAqB,QAAQ;AAAA,IACzD;AAAA,EACF;AACF;AAYO,SAAS,iBACd,aACA,gBACM;AAEN,uBAAqB,IAAI,IAAI,cAAc;AAC3C,2BAAyB,aAAa,cAAc;AACtD;AASO,SAAS,yBAAyB,aAAgC;AACvE,MAAI,mBAAmB,SAAS,GAAG;AACjC;AAAA,EACF;AACA,2BAAyB,aAAa,kBAAkB;AAC1D;AAUO,SAAS,eACd,kBACA,UACA,QACwC;AACxC,QAAM,YAAY,iBAAiB,QAAQ,QAAQ;AACnD,QAAM,UAAU,iBAAiB,QAAQ,MAAM;AAC/C,SAAO,EAAE,WAAW,QAAQ;AAC9B;AAUA,SAAS,iBACP,WACA,WACA,mBACA,kBACM;AACN,aAAW,YAAY,WAAW;AAChC,UAAM,SAAS,cAAc,WAAW,QAAQ;AAChD,QAAI,CAAC,QAAQ;AACX;AAAA,IACF;AACA,qBAAiB,QAAQ,iBAAiB;AAC1C,QAAI,kBAAkB;AACpB,uBAAiB,IAAI,QAAQ;AAC7B,wBAAkB,OAAO,QAAQ;AAAA,IACnC;AAAA,EACF;AACF;AAKA,MAAM,+CACJ,0CAA0C;AAUrC,SAAS,wBAKd,QACA,kBACU;AACV,MAAI,OAAO,QAAQ,WAAW,GAAG;AAC/B,WAAO,CAAC;AAAA,EACV;AACA,SAAO,iBAAiB;AAAA,IAAO,CAAC,aAC9B,OAAO,QAAQ,KAAK,CAAC,QAAQ,IAAI,OAAO,QAAQ;AAAA,EAClD;AACF;AAWA,SAAS,qBAAqB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmD;AACjD,QAAM,cAAc,OAAO,KAAK,QAAQ;AACxC,MAAI,gBAAgB,MAAM;AACxB,WAAO,CAAC;AAAA,EACV;AAEA,QAAM,aAAoC,CAAC;AAM3C,QAAM,eAAe,cAAc,OAAO,YAAY;AACtD,QAAM,iBAAiB,eACnB,cAAc,MAAM,+CACpB,cAAc,SAAS;AAE3B,aAAW,sBAAsB,qBAAqB;AACpD,UAAM,EAAE,GAAG,IAAI;AACf,UAAM,OAAO,eAAe,IAAI,EAAE;AAClC,QAAI,SAAS,QAAW;AACtB;AAAA,IACF;AAEA,QAAI,KAAK,OAAO,kBAAkB,kBAAkB,KAAK,QAAQ;AAC/D,aAAO;AAAA,QACL;AAAA,UACE;AAAA,UACA,MAAM,EAAE,mBAAmB;AAAA,QAC7B;AAAA,MACF;AAAA,IACF;AAKA,UAAM,sBAAsB,eAAe,KAAK,MAAM,KAAK;AAC3D,UAAM,WAAW,KAAK,IAAI,iBAAiB,mBAAmB;AAC9D,eAAW,KAAK,EAAE,IAAI,MAAM,EAAE,oBAAoB,OAAO,SAAS,EAAE,CAAC;AAAA,EACvE;AAEA,SAAO,WAAW,SAAS,CAAC,GAAG,MAAM,EAAE,KAAK,QAAQ,EAAE,KAAK,KAAK;AAClE;AA0BO,SAAS,4CAId,kBACA,oBACA,oBACoB;AACpB,SAAO,CAAC,EAAE,QAAQ,qBAAqB,GAAG,KAAK,MAAM;AACnD,QAAI,CAAC,oBAAoB;AACvB,aAAO,CAAC;AAAA,IACV;AAEA,UAAM,EAAE,QAAQ,cAAc,OAAO,YAAY,IAAI;AACrD,QAAI,iBAAiB,QAAW;AAC9B,aAAO,CAAC;AAAA,IACV;AACA,UAAM,iBAAiB,aAAa,QAAQ;AAE5C,UAAM,eAAe,oBAAoB,OAAO,CAAC,WAAW;AAC1D,YAAM,gBAAgB,OAAO,KAAK;AAClC,YAAM,eAAe,eAAe;AACpC,YAAM,qBAAqB,aAAa;AACxC,YAAM,cAAc,eAAe;AAGnC,UAAI,gBAAgB,aAAa;AAC/B,eAAO;AAAA,MACT;AAEA,YAAM,gBAAgB,oBAAoB,OAAO;AAGjD,UAAI,mBAAmB,QAAW;AAChC,eAAO;AAAA,MACT;AAIA,UAAI,aAAa,QAAQ,SAAS,GAAG;AAEnC,eAAO,cAAc;AAAA,MACvB;AACA,UAAI,oBAAoB,OAAO,QAAW;AACxC,cAAM,kBAAkB;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AACA,cAAM,sBAAsB,gBAAgB;AAAA,UAC1C,CAAC,YAAY,CAAC,kBAAkB,SAAS,kBAAkB;AAAA,QAC7D;AAEA,YAAI,aAAa,OAAO,qBAAqB;AAE3C,iBAAO,cAAc;AAAA,QACvB;AAAA,MACF;AAEA,aAAO;AAAA,IACT,CAAC;AAED,WAAO,qBAAqB;AAAA,MAC1B;AAAA,MACA,qBAAqB;AAAA,MACrB,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACF;AAYA,SAAS,yBACP,WACA,MACA,gBAIsB;AACtB,QAAM,QAAQ;AAAA,IACZ,GAAG;AAAA,EACL;AAEA,MAAI,KAAK,MAAM,UAAU,KAAK,eAAe,KAAK;AAChD,UAAM,IAAI,eAAe,MAAM,KAAK;AAAA,EACtC,WAAW,KAAK,SAAS,UAAU,KAAK,eAAe,QAAQ;AAC7D,UAAM,IAAI,eAAe,SAAS,KAAK;AAAA,EACzC;AAEA,SAAO;AACT;AASO,SAAS,wCACd,cACU;AACV,SAAO,CAAC,EAAE,WAAW,iBAAiB,MAAM;AAC1C,QAAI,CAAC,oBAAoB,iBAAiB,MAAM;AAC9C,aAAO;AAAA,IACT;AAGA,cAAU,IAAI;AAEd,UAAM,kBAAkB,aAAa,sBAAsB;AAC3D,UAAM,iBAAiB;AAAA,MACrB,KAAK,gBAAgB;AAAA,MACrB,QAAQ,gBAAgB;AAAA,IAC1B;AAIA,UAAM,gBAAgB,aAAa;AAAA,MACjC;AAAA,IACF;AACA,UAAM,iBAAiB,eAAe;AACtC,QAAI,kBAAkB,CAAC,eAAe,aAAa,eAAe,GAAG;AACnE,qBAAe,MAAM,KAAK;AAAA,QACxB,eAAe;AAAA,QACf,eAAe,sBAAsB,EAAE;AAAA,MACzC;AAAA,IACF;AAEA,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;AASO,SAAS,uBACd,UACA,aAC0B;AAC1B,MAAI,gBAAgB,MAAM;AACxB,WAAO;AAAA,EACT;AAEA,SACE,aAAa;AAAA,IACX,mBAAmB,IAAI;AAAA,MACrB;AAAA,IACF,CAAC;AAAA,EACH,KAAK;AAET;",
+  "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  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 type { TDataTableFeatures } from '../../../../features/types/features.types.js';\nimport * as columnListItemStyles from '../DataTableColumnsListItem.sty.js';\n\nexport const COLUMNS_LIST_ITEM_BORDER_HEIGHT = 1;\nexport const DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT =\n  32 + COLUMNS_LIST_ITEM_BORDER_HEIGHT;\n\n// all columns in the settings modal that were transformed in the last onDragOver call\nlet lastAffectedItems = new Set<string>();\n\n// child columns of a parent column that should be hidden during drag\n// when items are virtualized and scroll back into view, they need to be hidden again\nlet hiddenChildColumns = new Set<string>();\n\n// #region Transforms\n/**\n * Transforms columns in the settings modal upwards or downwards to make space for the item which is currently being dragged.\n *\n * @param columnsList - the columns list element holding the columns in the settings modal.\n * @param event - contains \"active\" (item being dragged) and \"over\" ids (item where the active item is currently dragged over).\n * @param localColumnOrder - column order before dragging.\n * @param transformValue - the value by which the columns should be transformed (positive for down or negative for up).\n * @param activeColumn - the column which is currently being dragged.\n * @internal\n */\nexport function transformColumnsOnDragOver<TData extends RowData>(\n  columnsList: HTMLElement | null,\n  event: DragOverEvent,\n  localColumnOrder: string[],\n  transformValue: number,\n  activeColumn: Column<TDataTableFeatures, TData> | undefined,\n): void {\n  if (!columnsList || !activeColumn) {\n    return;\n  }\n\n  const { over, collisions } = event;\n  if (!over || !collisions?.length) {\n    return;\n  }\n\n  // keep track of all items that are transformed during the current onDragOver call\n  const newAffectedColumns = new Set<string>();\n  const { fromIndex, toIndex } = getDragIndexes(\n    localColumnOrder,\n    activeColumn.id,\n    over.data.current?.columnId as string,\n  );\n  const adjustedTransformValue =\n    transformValue + COLUMNS_LIST_ITEM_BORDER_HEIGHT;\n\n  if (fromIndex < toIndex) {\n    // only when dragging downwards:\n    // when dragging a parent column, the drag overlay is moved above child columns as well,\n    // so we need to ensure that the actual parent column, including its child columns, in the columns list are not transformed\n    const adaptedFromIndex = fromIndex + activeColumn.columns.length;\n\n    transformColumns(\n      columnsList,\n      localColumnOrder.slice(adaptedFromIndex + 1, toIndex + 1),\n      -adjustedTransformValue,\n      newAffectedColumns,\n    );\n  } else if (fromIndex > toIndex) {\n    transformColumns(\n      columnsList,\n      localColumnOrder.slice(toIndex, fromIndex),\n      adjustedTransformValue,\n      newAffectedColumns,\n    );\n  }\n\n  // reset items that were transformed in the last drag operation but are not in the current one\n  transformColumns(columnsList, lastAffectedItems, 0);\n  lastAffectedItems = newAffectedColumns;\n}\n\n/**\n * Gets the rendered element of an unpinned column in the settings modal with a given column id.\n *\n * @param columnsList - the columns list element holding the columns in the settings modal.\n * @param columnId - id of the column.\n * @returns the column in the settings modal with the given id, or null if not found.\n * @internal\n */\nexport function getColumnById(\n  columnsList: HTMLElement,\n  columnId: string,\n): HTMLElement | null {\n  return columnsList.querySelector<HTMLElement>(\n    `[data-columnid=\"${CSS.escape(columnId)}\"]:not([data-pinned-position])`,\n  );\n}\n\n/**\n * Gets all column elements displayed in the column settings modal.\n *\n * @param columnsList - the columns list element holding the columns shown in the settings modal.\n * @returns all columns in the settings modal.\n * @internal\n */\nexport function getAllColumns(columnsList: HTMLElement): HTMLElement[] {\n  const allLocalColumns =\n    columnsList.querySelectorAll<HTMLElement>('[data-columnid]');\n  return Array.from(allLocalColumns);\n}\n\n/**\n * Gets all column elements in the settings modal that are pinned or don't have the same parent id.\n *\n * @param columnsList - the columns list element holding the columns in the settings modal.\n * @param activeParentId - the parent id of the currently actively dragged column.\n * @returns all columns in the settings modal that are not valid drop targets.\n */\nfunction getAllNonTargetColumns(\n  columnsList: HTMLElement,\n  activeParentId?: string,\n): HTMLElement[] {\n  const selector = activeParentId\n    ? `[data-pinned-position], [data-columnid]:not([data-parentcolumnid=\"${CSS.escape(\n        String(activeParentId),\n      )}\"])`\n    : '[data-pinned-position]';\n\n  const nonTargetColumns = columnsList.querySelectorAll<HTMLElement>(selector);\n\n  return Array.from(nonTargetColumns);\n}\n\n/**\n * Moves the column in the settings modal along the y-axis by the given number of pixels.\n *\n * @param localColumn - the column in the settings modal to translate.\n * @param value - number of pixels (positive for down or negative for up).\n * @internal\n */\nfunction translateColumnY(localColumn: HTMLElement, value: number): void {\n  const transform = `translateY(${value}px)`;\n  const transition = `transform ${Animations.SlideIn.Duration.Base} ${Animations.Move.Easing}`;\n  localColumn.style.transform = transform;\n  localColumn.style.transition = transition;\n}\n\n/**\n * Resets the transform style on all items in the columns list.\n *\n * @param localColumns - the columns in the settings modal to reset.\n */\nexport function resetAllColumnsStyles(localColumns: HTMLElement[]): void {\n  for (const column of localColumns) {\n    column.style.removeProperty('transform');\n    column.style.removeProperty('transition');\n    column.classList.remove(\n      columnSettingsDndStyles.disabledNonTargetLocalColumn,\n      columnListItemStyles.dragging,\n    );\n  }\n  lastAffectedItems.clear();\n  hiddenChildColumns.clear();\n}\n\n/**\n * Applies styles to visually indicate droppable targets for the currently active columns in the settings modal.\n * Pinned columns or columns that do not share the same parent as the dragged column will appear visually disabled.\n *\n * @param columnsList - the columns list element containing the columns to style.\n * @param activeParentId - the parent id of the currently actively dragged column.\n * @internal\n */\nexport function styleNonTargetColumns(\n  columnsList: HTMLElement,\n  activeParentId?: string,\n): void {\n  const nonTargetLocalColumns = getAllNonTargetColumns(\n    columnsList,\n    activeParentId,\n  );\n\n  for (const column of nonTargetLocalColumns) {\n    column.classList.add(columnSettingsDndStyles.disabledNonTargetLocalColumn);\n  }\n}\n\n/**\n * Applies the dragging class to the specified child columns.\n *\n * @param columnsList - the columns list element containing the columns.\n * @param childColumnIds - the ids of child columns to apply styles to.\n */\nfunction styleDraggedChildColumns(\n  columnsList: HTMLElement,\n  childColumnIds: Iterable<string>,\n): void {\n  for (const columnId of childColumnIds) {\n    const childColumn = getColumnById(columnsList, columnId);\n    if (childColumn) {\n      childColumn.classList.add(columnListItemStyles.dragging);\n    }\n  }\n}\n\n/**\n * Hides child columns during parent column drag and\n * tracks which columns should remain hidden during scrolling.\n * This is necessary to handle virtualization - when child columns scroll back into view,\n * they need to be hidden again.\n *\n * @param columnsList - the columns list element containing the columns.\n * @param childColumnIds - the ids of child columns to hide.\n * @internal\n */\nexport function hideChildColumns(\n  columnsList: HTMLElement,\n  childColumnIds: string[],\n): void {\n  // Clear previous tracking and set new ones\n  hiddenChildColumns = new Set(childColumnIds);\n  styleDraggedChildColumns(columnsList, childColumnIds);\n}\n\n/**\n * Reapplies the isDragging class to child columns that should be hidden.\n * Called when scrolling during drag to handle newly rendered virtualized items.\n *\n * @param columnsList - the columns list element containing the columns.\n * @internal\n */\nexport function hideChildColumnsOnScroll(columnsList: HTMLElement): void {\n  if (hiddenChildColumns.size === 0) {\n    return;\n  }\n  styleDraggedChildColumns(columnsList, hiddenChildColumns);\n}\n\n/**\n * Gets the source and destination indexes for a dragged column.\n *\n * @param localColumnOrder - contains the ids of the columns in order.\n * @param activeId - the id of the dragged column in the settings modal.\n * @param overId - the id of the column where the active column is currently dragged over.\n * @returns indexes from where a column is dragged and where it is dragged to.\n */\nexport function getDragIndexes(\n  localColumnOrder: string[],\n  activeId: string,\n  overId: string,\n): { fromIndex: number; toIndex: number } {\n  const fromIndex = localColumnOrder.indexOf(activeId);\n  const toIndex = localColumnOrder.indexOf(overId);\n  return { fromIndex, toIndex };\n}\n\n/**\n * Transforms columns in the settings modal upwards or downwards to make space for the item being dragged.\n *\n * @param container - the container element holding the columns in the settings modal.\n * @param columnIds - the ids of columns to transform.\n * @param amountToTransform - number of pixels to translate (positive for down or negative for up).\n * @param newAffectedItems - set to save all items that are transformed during the current onDragOver call.\n */\nfunction transformColumns(\n  container: HTMLElement,\n  columnIds: string[] | Set<string>,\n  amountToTransform: number,\n  newAffectedItems?: Set<string>,\n): void {\n  for (const columnId of columnIds) {\n    const column = getColumnById(container, columnId);\n    if (!column) {\n      continue;\n    }\n    translateColumnY(column, amountToTransform);\n    if (newAffectedItems) {\n      newAffectedItems.add(columnId);\n      lastAffectedItems.delete(columnId);\n    }\n  }\n}\n// #endregion Transforms\n\n// #region CollisionDetection\n// min local column height is 33px, to ensure the offset is in the top/bottom half: 33 / 2\nconst DATA_TABLE_COLUMNS_LIST_DND_COLLISION_OFFSET =\n  DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT / 2;\n\n/**\n * Gets a list of ordered leaf column ids for the given column based on the column order.\n *\n * @param column - the column to get the leaf columns for.\n * @param localColumnOrder - the local column order to use for filtering.\n * @returns an array of ordered leaf column ids for the given column, or an empty array if the column is already a leaf column.\n * @internal\n */\nexport function getLeafColumnsForColumn<\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(\n  column: Column<TDataTableFeatures, 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<TData extends RowData> = {\n  id: string;\n  index: number;\n  column: Column<TDataTableFeatures, 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  TData extends RowData,\n>(\n  localColumnOrder: string[],\n  localColumnPinning: ColumnPinningState,\n  draggingColumnInfo: DraggingColumnInfo<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<\n        TDataTableFeatures,\n        TData\n      >;\n      const targetParentColumn = targetColumn.parent;\n      const targetIndex = currentTarget?.columnIndex as number;\n\n      // skip the active column itself\n      if (activeIndex === targetIndex) {\n        return true;\n      }\n\n      const hasSameParent = targetParentColumn?.id === activeParentId;\n\n      // the active column is a child column, so only allow dropping on columns with the same parent\n      if (activeParentId !== undefined) {\n        return hasSameParent;\n      }\n\n      // the active column is either a standalone column or a parent column\n      // therefore, only allow dropping before or after the entire group of child columns\n      if (targetColumn.columns.length > 0) {\n        // the currently active column is dragged upwards, only allow dropping before the first child column\n        return activeIndex > targetIndex;\n      }\n      if (targetParentColumn?.id !== undefined) {\n        const orderedChildIds = getLeafColumnsForColumn(\n          targetParentColumn,\n          localColumnOrder,\n        );\n        const lastUnpinnedChildId = orderedChildIds.findLast(\n          (childId) => !getIsColumnPinned(childId, localColumnPinning),\n        );\n\n        if (targetColumn.id === lastUnpinnedChildId) {\n          // the currently active column is dragged downwards, only allow dropping after the last child column\n          return activeIndex < targetIndex;\n        }\n      }\n      // for all remaining columns, only allow dropping on columns with the same parent\n      return hasSameParent;\n    });\n\n    return closestTargetWithinY({\n      active,\n      droppableContainers: validTargets,\n      ...rest,\n    });\n  };\n}\n// #endregion CollisionDetection\n\n// #region Modifiers\n/**\n * Restricts the vertical movement of an element within the specified bounds.\n *\n * @param transform - Transform values of the currently dragged element\n * @param rect - The bounding rectangle of the element being transformed.\n * @param verticalBounds - The bounds within which the element should be restricted.\n * @returns The updated transform object with restricted y value.\n */\nfunction restrictToVerticalBounds(\n  transform: DragAndDropTransform,\n  rect: ClientRect,\n  verticalBounds: {\n    top: number;\n    bottom: number;\n  },\n): DragAndDropTransform {\n  const value = {\n    ...transform,\n  };\n\n  if (rect.top + transform.y <= verticalBounds.top) {\n    value.y = verticalBounds.top - rect.top;\n  } else if (rect.bottom + transform.y >= verticalBounds.bottom) {\n    value.y = verticalBounds.bottom - rect.bottom;\n  }\n\n  return value;\n}\n\n/**\n * Creates a modifier that restricts the drag overlay to the columns list area within the settings modal.\n *\n * @param modalContent - The columns list element to restrict dragging within.\n * @returns dnd-kit modifier\n * @internal\n */\nexport function createRestrictToColumnsListAreaModifier(\n  modalContent: HTMLDivElement | null,\n): Modifier {\n  return ({ transform, draggingNodeRect }) => {\n    if (!draggingNodeRect || modalContent === null) {\n      return transform;\n    }\n\n    // Restrict dragging to the vertical axis\n    transform.x = 0;\n\n    const columnsListRect = modalContent.getBoundingClientRect();\n    const verticalBounds = {\n      top: columnsListRect.top,\n      bottom: columnsListRect.bottom,\n    };\n\n    // Only unpinned columns are reorderable; clamp to section headers rather than\n    // column elements \u2014 headers don't transform during drag, preventing jitter.\n    const firstUnpinned = modalContent.querySelector(\n      '[data-columnid]:not([data-pinned-position])',\n    );\n    const unpinnedHeader = firstUnpinned?.previousElementSibling;\n    if (unpinnedHeader && !unpinnedHeader.hasAttribute('data-columnid')) {\n      verticalBounds.top = Math.max(\n        verticalBounds.top,\n        unpinnedHeader.getBoundingClientRect().bottom,\n      );\n    }\n\n    return restrictToVerticalBounds(\n      transform,\n      draggingNodeRect,\n      verticalBounds,\n    );\n  };\n}\n// #endregion Modifiers\n\n/**\n * Gets the drag handle button for a specific column in the column settings modal.\n * @param columnId - the id of the column to get the drag handle for.\n * @param columnsList - the columns list element holding the columns in the settings modal.\n * @returns the drag handle button for the specified column, or null if not found.\n */\nexport function getDragHandleForColumn(\n  columnId: string,\n  columnsList: HTMLElement | null,\n): HTMLButtonElement | null {\n  if (columnsList === null) {\n    return null;\n  }\n\n  return (\n    columnsList?.querySelector<HTMLButtonElement>(\n      `[data-columnid=\"${CSS.escape(\n        columnId,\n      )}\"]:not([data-pinned-position]) button`,\n    ) ?? null\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -4,7 +4,10 @@ import { PinIcon, UnpinIcon } from "@dynatrace/strato-icons";
 import { Button } from "../../../../../buttons/button/Button.js";
 import { Menu } from "../../../../../navigation/menu/Menu.js";
 import { Tooltip } from "../../../../../overlays/tooltip/Tooltip.js";
-import { pinColumns } from "../../../features/ColumnPinning/column-pinning-utils.js";
+import {
+  pinColumns,
+  toPhysicalPinnedPosition
+} from "../../../features/ColumnPinning/column-pinning-utils.js";
 import { dataTableMessages } from "../../../messages.js";
 function ColumnPinningMenu(props) {
   const {
@@ -20,7 +23,7 @@ function ColumnPinningMenu(props) {
     isUnpinned: pinnedPosition === false
   });
   function getColumnsInSamePinningRegion() {
-    const position = pinnedPosition === false ? "center" : pinnedPosition;
+    const position = toPhysicalPinnedPosition(pinnedPosition) || "center";
     return orderedFlatColumns[position];
   }
   function getIdsToPin() {
@@ -51,18 +54,18 @@ function ColumnPinningMenu(props) {
   return /* @__PURE__ */ jsx(Tooltip, { text: pinningLabel, placement: "right", children: /* @__PURE__ */ jsxs(Menu, { children: [
     /* @__PURE__ */ jsx(Menu.Trigger, { children: /* @__PURE__ */ jsx(Button, { size: "condensed", "aria-label": pinningLabel, children: /* @__PURE__ */ jsx(Button.Prefix, { children: pinnedPosition === false ? /* @__PURE__ */ jsx(PinIcon, {}) : /* @__PURE__ */ jsx(UnpinIcon, {}) }) }) }),
     /* @__PURE__ */ jsxs(Menu.Content, { children: [
-      pinnedPosition !== "left" && /* @__PURE__ */ jsx(
+      pinnedPosition !== "start" && /* @__PURE__ */ jsx(
         Menu.Item,
         {
-          onSelect: () => pin("left"),
+          onSelect: () => pin("start"),
           "data-dt-children-name": "ColumnSettingsPinLeft",
           children: /* @__PURE__ */ jsx(FormattedMessage, { ...dataTableMessages.pinColumnLeftLabel })
         }
       ),
-      pinnedPosition !== "right" && /* @__PURE__ */ jsx(
+      pinnedPosition !== "end" && /* @__PURE__ */ jsx(
         Menu.Item,
         {
-          onSelect: () => pin("right"),
+          onSelect: () => pin("end"),
           "data-dt-children-name": "ColumnSettingsPinRight",
           children: /* @__PURE__ */ jsx(FormattedMessage, { ...dataTableMessages.pinColumnRightLabel })
         }

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

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

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

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

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

@@ -1,3 +1,3 @@
-._srhgvd0-3-12-2 {
+._srhgvd0-3-13-0 {
   text-align: center;
 }

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

@@ -1,5 +1,5 @@
 import "./DataTableAllColumnsHiddenEmptyState.css";
-var emptyState = "_srhgvd0-3-12-2";
+var emptyState = "_srhgvd0-3-13-0";
 export {
   emptyState
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/ColumnSettings/DataTableAllColumnsHiddenEmptyState.css.ts"],
-  "sourcesContent": ["import './DataTableAllColumnsHiddenEmptyState.css';\nexport var emptyState = '_srhgvd0-3-12-2';"],
+  "sourcesContent": ["import './DataTableAllColumnsHiddenEmptyState.css';\nexport var emptyState = '_srhgvd0-3-13-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useSelector } from "@tanstack/react-store";
 import { useIntl } from "react-intl";
 import { ColumnsIcon } from "@dynatrace/strato-icons";
 import { Button } from "../../../../../buttons/button/Button.js";
@@ -21,16 +21,13 @@ const DataTableColumnSettings = (props) => {
   const intl = useIntl();
   const table = useDataTable();
   const columnSettingsModal = useDataTableColumnSettings();
-  const columnSettingsButton = useMemo(() => {
-    const hiddenColumnCount = table.getAllLeafColumnsWithoutBuiltin().filter((column) => !column.getIsVisible()).length;
-    const message = hiddenColumnCount === 0 ? intl.formatMessage(dataTableMessages.columnSettingsButtonDefault) : intl.formatMessage(dataTableMessages.columnSettingsButtonVisibility, {
-      hiddenColumnCount
-    });
-    return {
-      text: message,
-      hiddenColumnCount
-    };
-  }, [table.store.state.columnVisibility]);
+  const hiddenColumnCount = useSelector(
+    table.atoms.columnVisibility,
+    () => table.getAllLeafColumnsWithoutBuiltin().filter((column) => !column.getIsVisible()).length
+  );
+  const buttonText = hiddenColumnCount === 0 ? intl.formatMessage(dataTableMessages.columnSettingsButtonDefault) : intl.formatMessage(dataTableMessages.columnSettingsButtonVisibility, {
+    hiddenColumnCount
+  });
   return /* @__PURE__ */ jsx(Tooltip, { text: intl.formatMessage(dataTableMessages.columnSettingsTooltip), children: /* @__PURE__ */ jsxs(
     Button,
     {
@@ -43,10 +40,10 @@ const DataTableColumnSettings = (props) => {
       children: [
         /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(ColumnsIcon, {}) }),
         customTrigger ? customTrigger({
-          hiddenColumnCount: columnSettingsButton.hiddenColumnCount,
+          hiddenColumnCount,
           totalColumnCount: table.getAllColumns().length,
-          defaultLabel: columnSettingsButton.text
-        }) : columnSettingsButton.text
+          defaultLabel: buttonText
+        }) : buttonText
       ]
     }
   ) });

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 = table\n      .getAllLeafColumnsWithoutBuiltin()\n      .filter((column) => !column.getIsVisible()).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,MACvB,gCAAgC,EAChC,OAAO,CAAC,WAAW,CAAC,OAAO,aAAa,CAAC,EAAE;AAE9C,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;",
+  "sourcesContent": ["import { useSelector } from '@tanstack/react-store';\nimport { type JSX } 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  const hiddenColumnCount = useSelector(\n    table.atoms.columnVisibility,\n    () =>\n      table\n        .getAllLeafColumnsWithoutBuiltin()\n        .filter((column) => !column.getIsVisible()).length,\n  );\n\n  const buttonText =\n    hiddenColumnCount === 0\n      ? intl.formatMessage(dataTableMessages.columnSettingsButtonDefault)\n      : intl.formatMessage(dataTableMessages.columnSettingsButtonVisibility, {\n          hiddenColumnCount,\n        });\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,\n              totalColumnCount: table.getAllColumns().length,\n              defaultLabel: buttonText,\n            })\n          : buttonText}\n      </Button>\n    </Tooltip>\n  );\n};\n"],
+  "mappings": "AAwDM,SASI,KATJ;AAxDN,SAAS,mBAAmB;AAE5B,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;AACvD,QAAM,oBAAoB;AAAA,IACxB,MAAM,MAAM;AAAA,IACZ,MACE,MACG,gCAAgC,EAChC,OAAO,CAAC,WAAW,CAAC,OAAO,aAAa,CAAC,EAAE;AAAA,EAClD;AAEA,QAAM,aACJ,sBAAsB,IAClB,KAAK,cAAc,kBAAkB,2BAA2B,IAChE,KAAK,cAAc,kBAAkB,gCAAgC;AAAA,IACnE;AAAA,EACF,CAAC;AAEP,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;AAAA,UACA,kBAAkB,MAAM,cAAc,EAAE;AAAA,UACxC,cAAc;AAAA,QAChB,CAAC,IACD;AAAA;AAAA;AAAA,EACN,GACF;AAEJ;",
   "names": []
 }

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

@@ -103,7 +103,7 @@ function ColumnSettingsModal(props) {
   const [localColumnOrder, setLocalColumnOrder] = useState(tableColumnOrder);
   const [localColumnPinning, setLocalColumnPinning] = useState(
     // original column pinning state
-    () => table.store.state.columnPinning
+    () => table.atoms.columnPinning?.get() ?? { start: [], end: [] }
   );
   const [showResetStatus, setShowResetStatus] = useState(false);
   const [showMinError, setShowMinError] = useState(false);
@@ -149,8 +149,8 @@ function ColumnSettingsModal(props) {
   const hasColumnOrderChanged = columnOrderSettingsEnabled && getHasColumnOrderChanged(columnOrderToReset, filteredLocalColumnOrder);
   const hasColumnPinningChanged = columnPinningSettingsEnabled && getHasColumnPinningChanged(
     {
-      left: columnPinningToReset?.left ?? [],
-      right: columnPinningToReset?.right ?? []
+      start: columnPinningToReset?.left ?? [],
+      end: columnPinningToReset?.right ?? []
     },
     localColumnPinning
   );
@@ -250,8 +250,8 @@ function ColumnSettingsModal(props) {
     }
     if (columnPinningSettingsEnabled && columnPinningToReset) {
       setLocalColumnPinning({
-        left: columnPinningToReset?.left ?? [],
-        right: columnPinningToReset?.right ?? []
+        start: columnPinningToReset?.left ?? [],
+        end: columnPinningToReset?.right ?? []
       });
       didReset = true;
     }