@dynatrace/strato-components 3.7.1 → 3.9.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/components/SettingsModal/DataTableSettingsModal.tsx"],
-  "sourcesContent": ["import { forwardRef, type ReactElement } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Modal, type ModalProps } from '../../../../overlays/modal/Modal.js';\nimport { screenReaderOnly } from '../../../../styles/screen-reader-only.sty.js';\nimport { dataTableMessages } from '../../messages.js';\n\n/**\n * @internal\n */\nexport interface DataTableSettingsModalProps\n  extends Omit<ModalProps, 'footer' | 'size'> {\n  /** The callback that is called for resetting changes. */\n  onReset?: () => void;\n  /** The callback that is called for applying changes  */\n  onApply?: () => void;\n  /** The title of the modal. */\n  title: string | ReactElement;\n  /** Labels for the reset, cancel and apply buttons. */\n  controlLabels: {\n    reset?: string;\n    cancel?: string;\n    apply?: string;\n  };\n  /** Determines whether the reset and/or the apply buttons are disabled. */\n  disableButtons?: { reset?: boolean; apply?: boolean };\n  /** Whether a status message for the screen reader should be displayed on successful reset. */\n  showResetStatus?: boolean;\n}\n\n/**\n * Modal that allows to apply, reset or cancel changes on the given settings.\n * @internal\n */\nexport const DataTableSettingsModal = forwardRef<\n  HTMLDivElement,\n  DataTableSettingsModalProps\n>((props, forwardedRef): ReactElement | null => {\n  const {\n    title,\n    dismissible = true,\n    show,\n    showResetStatus = false,\n    children,\n    onDismiss,\n    onReset,\n    onApply,\n    controlLabels,\n    disableButtons,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className: consumerClassName,\n    style: consumerStyle,\n  } = props;\n\n  const intl = useIntl();\n  const statusId = useId();\n\n  const showFooter = onDismiss || onReset || onApply;\n\n  return (\n    <Modal\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={forwardedRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      title={title}\n      size=\"small\"\n      show={show}\n      dismissible={dismissible}\n      onDismiss={onDismiss}\n      footer={\n        showFooter && (\n          <Flex justifyContent=\"space-between\" width=\"100%\">\n            {onReset && (\n              <>\n                <Button\n                  onClick={onReset}\n                  variant=\"emphasized\"\n                  disabled={disableButtons?.reset === true}\n                >\n                  {controlLabels?.reset}\n                </Button>\n                <div\n                  id={statusId}\n                  role=\"status\"\n                  aria-live=\"polite\"\n                  aria-relevant=\"all\"\n                  className={screenReaderOnly}\n                >\n                  {showResetStatus &&\n                    intl.formatMessage(dataTableMessages.resetSuccessful)}\n                </div>\n              </>\n            )}\n\n            <Flex justifyContent=\"flex-end\" gap={8}>\n              {onDismiss && (\n                <Button onClick={onDismiss} variant=\"default\">\n                  {controlLabels?.cancel}\n                </Button>\n              )}\n              {onApply && (\n                <Button\n                  onClick={onApply}\n                  variant=\"accent\"\n                  color=\"primary\"\n                  disabled={disableButtons?.apply === true}\n                >\n                  {controlLabels?.apply}\n                </Button>\n              )}\n            </Flex>\n          </Flex>\n        )\n      }\n    >\n      {children}\n    </Modal>\n  );\n});\n"],
-  "mappings": "AAiFc,mBACE,KADF;AAjFd,SAAS,kBAAqC;AAC9C,SAAS,eAAe;AAExB,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,aAA8B;AACvC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AA6B3B,MAAM,yBAAyB,WAGpC,CAAC,OAAO,iBAAsC;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,MAAM;AAEvB,QAAM,aAAa,aAAa,WAAW;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,KAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO;AAAA,MACP;AAAA,MACA,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,QACE,cACE,qBAAC,QAAK,gBAAe,iBAAgB,OAAM,QACxC;AAAA,mBACC,iCACE;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,SAAQ;AAAA,cACR,UAAU,gBAAgB,UAAU;AAAA,cAEnC,yBAAe;AAAA;AAAA,UAClB;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,MAAK;AAAA,cACL,aAAU;AAAA,cACV,iBAAc;AAAA,cACd,WAAW;AAAA,cAEV,6BACC,KAAK,cAAc,kBAAkB,eAAe;AAAA;AAAA,UACxD;AAAA,WACF;AAAA,QAGF,qBAAC,QAAK,gBAAe,YAAW,KAAK,GAClC;AAAA,uBACC,oBAAC,UAAO,SAAS,WAAW,SAAQ,WACjC,yBAAe,QAClB;AAAA,UAED,WACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,UAAU,gBAAgB,UAAU;AAAA,cAEnC,yBAAe;AAAA;AAAA,UAClB;AAAA,WAEJ;AAAA,SACF;AAAA,MAIH;AAAA;AAAA,EACH;AAEJ,CAAC;",
+  "sourcesContent": ["import { forwardRef, type ReactElement, type ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './DataTableSettingsModal.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Modal, type ModalProps } from '../../../../overlays/modal/Modal.js';\nimport { screenReaderOnly } from '../../../../styles/screen-reader-only.sty.js';\nimport { dataTableMessages } from '../../messages.js';\n\n/**\n * @internal\n */\nexport interface DataTableSettingsModalProps\n  extends Omit<ModalProps, 'footer' | 'size'> {\n  /** The callback that is called for resetting changes. */\n  onReset?: () => void;\n  /** The callback that is called for applying changes  */\n  onApply?: () => void;\n  /** The title of the modal. */\n  title: string | ReactElement;\n  /** Labels for the reset, cancel and apply buttons. */\n  controlLabels: {\n    reset?: string;\n    cancel?: string;\n    apply?: string;\n  };\n  /** Determines whether the reset and/or the apply buttons are disabled. */\n  disableButtons?: { reset?: boolean; apply?: boolean };\n  /** Whether a status message for the screen reader should be displayed on successful reset. */\n  showResetStatus?: boolean;\n  /** Optional footerMessage rendered above the footer action buttons (e.g. a warning or error). */\n  footerMessage?: ReactNode;\n}\n\n/**\n * Modal that allows to apply, reset or cancel changes on the given settings.\n * @internal\n */\nexport const DataTableSettingsModal = forwardRef<\n  HTMLDivElement,\n  DataTableSettingsModalProps\n>((props, forwardedRef): ReactElement | null => {\n  const {\n    title,\n    dismissible = true,\n    show,\n    showResetStatus = false,\n    children,\n    onDismiss,\n    onReset,\n    onApply,\n    controlLabels,\n    disableButtons,\n    footerMessage,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className: consumerClassName,\n    style: consumerStyle,\n  } = props;\n\n  const intl = useIntl();\n  const statusId = useId();\n\n  const showFooter = onDismiss || onReset || onApply;\n\n  return (\n    <Modal\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={forwardedRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      title={title}\n      size=\"small\"\n      show={show}\n      dismissible={dismissible}\n      onDismiss={onDismiss}\n      footer={\n        showFooter && (\n          <Flex\n            flexDirection=\"column\"\n            gap={12}\n            width=\"100%\"\n            className={styles.footer[footerMessage ? 'withMessage' : 'default']}\n          >\n            {footerMessage}\n            <Flex justifyContent=\"space-between\" width=\"100%\">\n              {onReset && (\n                <>\n                  <Button\n                    onClick={onReset}\n                    variant=\"emphasized\"\n                    disabled={disableButtons?.reset === true}\n                  >\n                    {controlLabels?.reset}\n                  </Button>\n                  <div\n                    id={statusId}\n                    role=\"status\"\n                    aria-live=\"polite\"\n                    aria-relevant=\"all\"\n                    className={screenReaderOnly}\n                  >\n                    {showResetStatus &&\n                      intl.formatMessage(dataTableMessages.resetSuccessful)}\n                  </div>\n                </>\n              )}\n\n              <Flex justifyContent=\"flex-end\" gap={8}>\n                {onDismiss && (\n                  <Button onClick={onDismiss} variant=\"default\">\n                    {controlLabels?.cancel}\n                  </Button>\n                )}\n                {onApply && (\n                  <Button\n                    onClick={onApply}\n                    variant=\"accent\"\n                    color=\"primary\"\n                    disabled={disableButtons?.apply === true}\n                  >\n                    {controlLabels?.apply}\n                  </Button>\n                )}\n              </Flex>\n            </Flex>\n          </Flex>\n        )\n      }\n    >\n      {children}\n    </Modal>\n  );\n});\n"],
+  "mappings": "AA4FgB,mBACE,KADF;AA5FhB,SAAS,kBAAqD;AAC9D,SAAS,eAAe;AAExB,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,aAA8B;AACvC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AA+B3B,MAAM,yBAAyB,WAGpC,CAAC,OAAO,iBAAsC;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,EACT,IAAI;AAEJ,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,MAAM;AAEvB,QAAM,aAAa,aAAa,WAAW;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,KAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAO;AAAA,MACP;AAAA,MACA,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,QACE,cACE;AAAA,QAAC;AAAA;AAAA,UACC,eAAc;AAAA,UACd,KAAK;AAAA,UACL,OAAM;AAAA,UACN,WAAW,OAAO,OAAO,gBAAgB,gBAAgB,SAAS;AAAA,UAEjE;AAAA;AAAA,YACD,qBAAC,QAAK,gBAAe,iBAAgB,OAAM,QACxC;AAAA,yBACC,iCACE;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,SAAS;AAAA,oBACT,SAAQ;AAAA,oBACR,UAAU,gBAAgB,UAAU;AAAA,oBAEnC,yBAAe;AAAA;AAAA,gBAClB;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,MAAK;AAAA,oBACL,aAAU;AAAA,oBACV,iBAAc;AAAA,oBACd,WAAW;AAAA,oBAEV,6BACC,KAAK,cAAc,kBAAkB,eAAe;AAAA;AAAA,gBACxD;AAAA,iBACF;AAAA,cAGF,qBAAC,QAAK,gBAAe,YAAW,KAAK,GAClC;AAAA,6BACC,oBAAC,UAAO,SAAS,WAAW,SAAQ,WACjC,yBAAe,QAClB;AAAA,gBAED,WACC;AAAA,kBAAC;AAAA;AAAA,oBACC,SAAS;AAAA,oBACT,SAAQ;AAAA,oBACR,OAAM;AAAA,oBACN,UAAU,gBAAgB,UAAU;AAAA,oBAEnC,yBAAe;AAAA;AAAA,gBAClB;AAAA,iBAEJ;AAAA,eACF;AAAA;AAAA;AAAA,MACF;AAAA,MAIH;AAAA;AAAA,EACH;AAEJ,CAAC;",
   "names": []
 }

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

@@ -0,0 +1,7 @@
+import "../../../../overlays/modal/Modal.css";
+import "./DataTableSettingsModal.css";
+var footer = { "default": "_115i8c20-3-9-0", withMessage: "_115i8c21-3-9-0" };
+export {
+  footer
+};
+//# sourceMappingURL=DataTableSettingsModal.sty.js.map

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

@@ -0,0 +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 = {'default':'_115i8c20-3-9-0',withMessage:'_115i8c21-3-9-0'};"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,SAAS,EAAC,WAAU,mBAAkB,aAAY,kBAAiB;",
+  "names": []
+}

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

@@ -1,17 +1,17 @@
-._1rlvxpp0-3-7-1 {
+._1rlvxpp0-3-9-0 {
   align-items: flex-end;
   justify-content: flex-end;
 }
-._1rlvxpp1-3-7-1 {
+._1rlvxpp1-3-9-0 {
   padding: 0 var(--dt-spacings-size-2, 2px);
 }
-._1rlvxpp2-3-7-1 {
+._1rlvxpp2-3-9-0 {
   padding: 0 var(--dt-spacings-size-8, 8px);
 }
-._1rlvxpp3-3-7-1 {
+._1rlvxpp3-3-9-0 {
   padding: 0 var(--dt-spacings-size-12, 12px);
 }
-._1rlvxpp4-3-7-1 {
+._1rlvxpp4-3-9-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-7-1";
-var selectionChipWrapper = { condensed: "_1rlvxpp1-3-7-1 _1rlvxpp0-3-7-1", "default": "_1rlvxpp2-3-7-1 _1rlvxpp0-3-7-1", comfortable: "_1rlvxpp3-3-7-1 _1rlvxpp0-3-7-1" };
+var selectionChip = "_1rlvxpp4-3-9-0";
+var selectionChipWrapper = { condensed: "_1rlvxpp1-3-9-0 _1rlvxpp0-3-9-0", "default": "_1rlvxpp2-3-9-0 _1rlvxpp0-3-9-0", comfortable: "_1rlvxpp3-3-9-0 _1rlvxpp0-3-9-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-7-1';\nexport var selectionChipWrapper = {condensed:'_1rlvxpp1-3-7-1 _1rlvxpp0-3-7-1','default':'_1rlvxpp2-3-7-1 _1rlvxpp0-3-7-1',comfortable:'_1rlvxpp3-3-7-1 _1rlvxpp0-3-7-1'};"],
+  "sourcesContent": ["import './DataTableSelectionChip.css';\nexport var selectionChip = '_1rlvxpp4-3-9-0';\nexport var selectionChipWrapper = {condensed:'_1rlvxpp1-3-9-0 _1rlvxpp0-3-9-0','default':'_1rlvxpp2-3-9-0 _1rlvxpp0-3-9-0',comfortable:'_1rlvxpp3-3-9-0 _1rlvxpp0-3-9-0'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,uBAAuB,EAAC,WAAU,mCAAkC,WAAU,mCAAkC,aAAY,kCAAiC;",
   "names": []
 }

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

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

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

@@ -13,8 +13,8 @@ import { useCallback, useMemo, useRef, useState } from "react";
 import {
   createColumnOrderSettingsCollisionDetection,
   createRestrictToColumnsListAreaModifier,
-  DATA_TABLE_COLUMNS_LIST_ITEM_BOTTOM_BORDER,
   DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT,
+  COLUMNS_LIST_ITEM_BORDER_HEIGHT,
   getAllColumns,
   getColumnById,
   getDragHandleForColumn,
@@ -151,7 +151,7 @@ function ColumnOrderSettingsDragAndDropContext({
         if (childColumn) {
           const clonedChild = childColumn.cloneNode(true);
           wrapper.appendChild(clonedChild);
-          dragOverlaySize2.height += childColumn.clientHeight + DATA_TABLE_COLUMNS_LIST_ITEM_BOTTOM_BORDER;
+          dragOverlaySize2.height += childColumn.clientHeight + COLUMNS_LIST_ITEM_BORDER_HEIGHT;
         }
       }
       hideChildColumns(modalContentRef.current, childColumnIds);

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_BOTTOM_BORDER,\n  DATA_TABLE_COLUMNS_LIST_ITEM_MIN_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 +\n            DATA_TABLE_COLUMNS_LIST_ITEM_BOTTOM_BORDER;\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  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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",
   "names": ["dragOverlaySize"]
 }

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

@@ -1,7 +1,7 @@
 import "./ColumnOrderSettingsDragAndDrop.css";
-var columnDndHandle = "_11d1m5j1-3-7-1";
-var columnDndOverlay = "_11d1m5j0-3-7-1";
-var disabledNonTargetLocalColumn = "_11d1m5j2-3-7-1";
+var columnDndHandle = "_11d1m5j1-3-9-0";
+var columnDndOverlay = "_11d1m5j0-3-9-0";
+var disabledNonTargetLocalColumn = "_11d1m5j2-3-9-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-7-1';\nexport var columnDndOverlay = '_11d1m5j0-3-7-1';\nexport var disabledNonTargetLocalColumn = '_11d1m5j2-3-7-1';"],
+  "sourcesContent": ["import './ColumnOrderSettingsDragAndDrop.css';\nexport var columnDndHandle = '_11d1m5j1-3-9-0';\nexport var columnDndOverlay = '_11d1m5j0-3-9-0';\nexport var disabledNonTargetLocalColumn = '_11d1m5j2-3-9-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

@@ -2,8 +2,8 @@ import Animations from "@dynatrace/strato-design-tokens/animations";
 import * as columnSettingsDndStyles from "./ColumnOrderSettingsDragAndDrop.sty.js";
 import { getIsColumnPinned } from "../../../../features/ColumnPinning/column-pinning-utils.js";
 import * as columnListItemStyles from "../DataTableColumnsListItem.sty.js";
-const DATA_TABLE_COLUMNS_LIST_ITEM_BOTTOM_BORDER = 1;
-const DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT = 32 + DATA_TABLE_COLUMNS_LIST_ITEM_BOTTOM_BORDER;
+const COLUMNS_LIST_ITEM_BORDER_HEIGHT = 1;
+const DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT = 32 + COLUMNS_LIST_ITEM_BORDER_HEIGHT;
 let lastAffectedItems = /* @__PURE__ */ new Set();
 let hiddenChildColumns = /* @__PURE__ */ new Set();
 function transformColumnsOnDragOver(columnsList, event, localColumnOrder, transformValue, activeColumn) {
@@ -20,7 +20,7 @@ function transformColumnsOnDragOver(columnsList, event, localColumnOrder, transf
     activeColumn.id,
     over.data.current?.columnId
   );
-  const adjustedTransformValue = transformValue + DATA_TABLE_COLUMNS_LIST_ITEM_BOTTOM_BORDER;
+  const adjustedTransformValue = transformValue + COLUMNS_LIST_ITEM_BORDER_HEIGHT;
   if (fromIndex < toIndex) {
     const adaptedFromIndex = fromIndex + activeColumn.columns.length;
     transformColumns(
@@ -229,23 +229,14 @@ function createRestrictToColumnsListAreaModifier(modalContent) {
       top: columnsListRect.top,
       bottom: columnsListRect.bottom
     };
-    const lastLeftPinned = Array.from(
-      modalContent.querySelectorAll('[data-pinned-position="left"]')
-    ).at(-1) ?? null;
-    const firstRightPinned = modalContent.querySelector(
-      '[data-pinned-position="right"]'
+    const firstUnpinned = modalContent.querySelector(
+      "[data-columnid]:not([data-pinned-position])"
     );
-    let adjustedTopBound = verticalBounds.top;
-    if (lastLeftPinned) {
-      const pinnedBottom = lastLeftPinned.getBoundingClientRect().bottom;
-      adjustedTopBound = Math.max(adjustedTopBound, pinnedBottom);
-    }
-    verticalBounds.top = adjustedTopBound;
-    if (firstRightPinned) {
-      verticalBounds.bottom = Math.min(
-        verticalBounds.bottom,
-        firstRightPinned.getBoundingClientRect().top - // account for the bottom border of the last item
-        DATA_TABLE_COLUMNS_LIST_ITEM_BOTTOM_BORDER
+    const unpinnedHeader = firstUnpinned?.previousElementSibling;
+    if (unpinnedHeader && !unpinnedHeader.hasAttribute("data-columnid")) {
+      verticalBounds.top = Math.max(
+        verticalBounds.top,
+        unpinnedHeader.getBoundingClientRect().bottom
       );
     }
     return restrictToVerticalBounds(
@@ -266,7 +257,7 @@ function getDragHandleForColumn(columnId, columnsList) {
   ) ?? null;
 }
 export {
-  DATA_TABLE_COLUMNS_LIST_ITEM_BOTTOM_BORDER,
+  COLUMNS_LIST_ITEM_BORDER_HEIGHT,
   DATA_TABLE_COLUMNS_LIST_ITEM_MIN_HEIGHT,
   createColumnOrderSettingsCollisionDetection,
   createRestrictToColumnsListAreaModifier,

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

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

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

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

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

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

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

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

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

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