@dynatrace/strato-components 3.2.0 → 3.3.0

package/esm/tables/DataTable/features/RowInteractivity/RowInteractivity.css

@@ -1,4 +1,4 @@
-._15silbj0-3-2-0 {
+._15silbj0-3-3-0 {
   box-sizing: border-box;
   appearance: none;
   outline: 0;
@@ -7,7 +7,7 @@
   position: relative;
   cursor: pointer;
 }
-._15silbj0-3-2-0::after {
+._15silbj0-3-3-0::after {
   content: "";
   position: absolute;
   top: 0;
@@ -20,44 +20,44 @@
   pointer-events: none;
   z-index: 4;
 }
-._15silbj1-3-2-0::after {
+._15silbj1-3-3-0::after {
   border-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._15silbj1-3-2-0:hover {
+._15silbj1-3-3-0:hover {
   background-color: var(--dt-colors-background-container-primary-default, #f1f2f9);
 }
-._15silbj1-3-2-0:hover::after {
+._15silbj1-3-3-0:hover::after {
   border-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._15silbj3-3-2-0 {
+._15silbj3-3-3-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._15silbj3-3-2-0::after {
+._15silbj3-3-3-0::after {
   box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-accent, #595a7d), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-width: 0;
 }
-._15silbj4-3-2-0 {
+._15silbj4-3-3-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._15silbj4-3-2-0::after {
+._15silbj4-3-3-0::after {
   border-color: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._ytdpswb-3-2-0 ._14sp6az6-3-2-0._15silbj5-3-2-0::after {
+._ytdpswb-3-3-0 ._14sp6az6-3-3-0._15silbj5-3-3-0::after {
   border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
   border-bottom-left-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._ytdpswd-3-2-0 ._14sp6az6-3-2-0._15silbj5-3-2-0::after {
+._ytdpswd-3-3-0 ._14sp6az6-3-3-0._15silbj5-3-3-0::after {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._15silbj6-3-2-0 {
+._15silbj6-3-3-0 {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
-._15silbj7-3-2-0 {
+._15silbj7-3-3-0 {
   background-color: var(--dt-colors-background-container-primary-default, #f1f2f9);
 }
-._15silbj7-3-2-0::after {
+._15silbj7-3-3-0::after {
   border-width: 0;
   box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-primary-accent, #464cce), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }

package/esm/tables/DataTable/features/RowInteractivity/RowInteractivity.sty.js

@@ -2,7 +2,7 @@ import "../../components/DataTableVirtualizationContainer.css";
 import "../../DataTable.css";
 import "./RowInteractivity.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var interactiveRow = _7a468({ defaultClassName: "_15silbj0-3-2-0", variantClassNames: { active: { true: "_15silbj1-3-2-0", false: "_15silbj2-3-2-0" }, focus: { true: "_15silbj3-3-2-0" }, hovered: { true: "_15silbj4-3-2-0" }, contained: { true: "_15silbj5-3-2-0", false: "_15silbj6-3-2-0" } }, defaultVariants: {}, compoundVariants: [[{ active: true, focus: true }, "_15silbj7-3-2-0"]] });
+var interactiveRow = _7a468({ defaultClassName: "_15silbj0-3-3-0", variantClassNames: { active: { true: "_15silbj1-3-3-0", false: "_15silbj2-3-3-0" }, focus: { true: "_15silbj3-3-3-0" }, hovered: { true: "_15silbj4-3-3-0" }, contained: { true: "_15silbj5-3-3-0", false: "_15silbj6-3-3-0" } }, defaultVariants: {}, compoundVariants: [[{ active: true, focus: true }, "_15silbj7-3-3-0"]] });
 export {
   interactiveRow
 };

package/esm/tables/DataTable/features/RowInteractivity/RowInteractivity.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/RowInteractivity/RowInteractivity.css.ts"],
-  "sourcesContent": ["import '../../components/DataTableVirtualizationContainer.css';\nimport '../../DataTable.css';\nimport './RowInteractivity.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var interactiveRow = _7a468({defaultClassName:'_15silbj0-3-2-0',variantClassNames:{active:{true:'_15silbj1-3-2-0',false:'_15silbj2-3-2-0'},focus:{true:'_15silbj3-3-2-0'},hovered:{true:'_15silbj4-3-2-0'},contained:{true:'_15silbj5-3-2-0',false:'_15silbj6-3-2-0'}},defaultVariants:{},compoundVariants:[[{active:true,focus:true},'_15silbj7-3-2-0']]});"],
+  "sourcesContent": ["import '../../components/DataTableVirtualizationContainer.css';\nimport '../../DataTable.css';\nimport './RowInteractivity.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var interactiveRow = _7a468({defaultClassName:'_15silbj0-3-3-0',variantClassNames:{active:{true:'_15silbj1-3-3-0',false:'_15silbj2-3-3-0'},focus:{true:'_15silbj3-3-3-0'},hovered:{true:'_15silbj4-3-3-0'},contained:{true:'_15silbj5-3-3-0',false:'_15silbj6-3-3-0'}},defaultVariants:{},compoundVariants:[[{active:true,focus:true},'_15silbj7-3-3-0']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,OAAM,EAAC,MAAK,kBAAiB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,GAAE,WAAU,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,QAAO,MAAK,OAAM,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/tables/DataTable/features/RowOrder/RowOrder.css

@@ -1,11 +1,11 @@
-._or8s40-3-2-0 {
+._or8s40-3-3-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;
 }
-._or8s41-3-2-0 {
+._or8s41-3-3-0 {
   vertical-align: middle;
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
   padding-left: var(--dt-spacings-size-2, 2px);
@@ -14,21 +14,21 @@
   padding-bottom: 0;
   transition: none;
 }
-._or8s41-3-2-0:active {
+._or8s41-3-3-0:active {
   background: transparent;
 }
-._or8s41-3-2-0:hover {
+._or8s41-3-3-0:hover {
   background: transparent;
 }
-._or8s40-3-2-0 ._or8s41-3-2-0 {
+._or8s40-3-3-0 ._or8s41-3-3-0 {
   cursor: grabbing;
 }
-._or8s42-3-2-0 {
+._or8s42-3-3-0 {
   cursor: not-allowed;
 }
-._or8s43-3-2-0 {
+._or8s43-3-3-0 {
   cursor: grab;
 }
-._or8s44-3-2-0 {
+._or8s44-3-3-0 {
   opacity: 0.2;
 }

package/esm/tables/DataTable/features/RowOrder/RowOrder.js

@@ -125,7 +125,7 @@ const RowDragHandleCell = ({
           when: "focus-visible"
         })
       ),
-      "data-dt-name": "RowOrderDragAndDropHandle",
+      "data-dt-name": "RowOrderDragAndDrop",
       children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(DragAllDirectionIcon, {}) })
     }
   ) });

package/esm/tables/DataTable/features/RowOrder/RowOrder.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/RowOrder/RowOrder.tsx"],
-  "sourcesContent": ["import {\n  DndContext as DragAndDropContext,\n  DragOverlay,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type Active,\n  type DragOverEvent,\n  type Over,\n} from '@dnd-kit/core';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { functionalUpdate } from '@tanstack/react-table';\nimport { type VirtualItem } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport {\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n  type JSX,\n  type MutableRefObject,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIntl } from 'react-intl';\n\nimport { DragAllDirectionIcon } from '@dynatrace/strato-icons';\n\nimport { getRowOrderRowModel } from './row-order-model.js';\nimport type { DataTableRowOrderProps } from './row-order-types.js';\nimport {\n  createRestrictToTableRowAreaModifier,\n  createRowOrderCollisionDetection,\n  getAllRowsInTableBody,\n  getDragHandleForRow,\n  getDragIndexes,\n  resetAllStylesForRows,\n  transformRowOnDragOver,\n} from './row-order-utils.js';\nimport * as styles from './RowOrder.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport { useFocusContext as _useFocusContext } from '../../../../core/hooks/useFocusContext.js';\nimport { focusRingStatic } from '../../../../core/styles/focusRingStatic.sty.js';\nimport { getProperInertValue } from '../../../../core/utils/get-inert-value.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { DataTableDefaultCell } from '../../components/DataTableDefaultCell.js';\nimport { DataTableRow } from '../../components/DataTableRow.js';\nimport {\n  DATA_TABLE_BUILTIN_COLUMN_MIN_WIDTH,\n  DATA_TABLE_ROW_DRAG_COLUMN_ID,\n  DATA_TABLE_ROW_HEIGHT_MAP,\n} from '../../constants.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport type {\n  Row,\n  Table,\n  TableOptions,\n  TableFeature,\n  ColumnDef,\n} from '../../hooks/useTable/types.js';\nimport { assignRowMethods } from '../../hooks/useTable/utils.js';\nimport { dataTableMessages } from '../../messages.js';\nimport type { DataTableRowData } from '../../public.api.js';\nimport { RowDetailsElement } from '../RowDetails/RowDetailsElement.js';\nimport type { DataTableThresholdsNormalizedRule } from '../Thresholds/threshold-types.js';\nimport * as thresholdStyles from '../Thresholds/Thresholds.sty.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_ROW_HEIGHT_MAP.default * 10;\n\n/**\n * Checks if the `rowOrdering` prop is a configuration object.\n * @param rowOrdering - The table prop that enables row ordering.\n * @returns `true` if the param is an object, `false` otherwise.\n */\nfunction isRowOrderConfigObject<TData>(\n  rowOrdering:\n    | boolean\n    | {\n        enableDragAndDrop?: boolean;\n        disableRowDragAndDrop?: (row: TData) => boolean;\n      },\n): rowOrdering is {\n  enableDragAndDrop?: boolean;\n  disableRowDragAndDrop?: (row: TData) => boolean;\n} {\n  return typeof rowOrdering === 'object';\n}\n\n/**\n * Configuration hook for the row order in the DataTable.\n * @internal\n */\nexport function useRowOrder<TData extends DataTableRowData>(\n  props: DataTableRowOrderProps<TData>,\n  options: TableOptions<TData>,\n): void {\n  const { rowOrdering } = props;\n\n  const disableRowDragAndDropFn =\n    typeof rowOrdering === 'object'\n      ? rowOrdering.disableRowDragAndDrop\n      : undefined;\n\n  const enableRowDragAndDropCallback = useCallback(\n    (row: Row<TData>) => {\n      // If no disable function is provided, enable drag and drop for all rows\n      if (!disableRowDragAndDropFn) {\n        return true;\n      }\n      return !disableRowDragAndDropFn(row.original);\n    },\n    [disableRowDragAndDropFn],\n  );\n\n  const [rowOrder, onRowOrderChange] = useControllableState<string[]>({\n    value: props.rowOrder,\n    defaultValue: props.defaultRowOrder,\n    onChange: props.onRowOrderChange,\n  });\n\n  options.enableRowOrderDragAndDrop = false;\n  if (rowOrdering === false || rowOrdering === undefined) {\n    options.enableRowOrdering = false;\n    return;\n  }\n\n  options.enableRowOrdering = true;\n  options.getRowOrderRowModel = getRowOrderRowModel();\n  options.onRowOrderChange = onRowOrderChange;\n  options.state = { ...options.state, rowOrder };\n\n  // config object is given\n  if (isRowOrderConfigObject(rowOrdering)) {\n    if (\n      rowOrdering.enableDragAndDrop === true &&\n      rowOrdering.disableRowDragAndDrop !== undefined\n    ) {\n      options.lockDisabledRows = rowOrdering.lockDisabledRows;\n      options.enableRowOrderDragAndDrop = enableRowDragAndDropCallback;\n      options.autoResetPageIndex = false;\n    } else {\n      options.enableRowOrderDragAndDrop =\n        rowOrdering.enableDragAndDrop === true;\n    }\n  }\n}\n\nconst RowDragHandleCell = ({\n  rowId,\n  disabled,\n  isDraggingActive,\n}: {\n  rowId: string;\n  disabled: boolean;\n  isDraggingActive: boolean;\n}): JSX.Element => {\n  const intl = useIntl();\n  const { modality } = _useFocusContext();\n  const { attributes, listeners } = useSortable({\n    id: rowId,\n  });\n\n  const isKeyboardDragging = isDraggingActive && modality === 'keyboard';\n  const rowDragHandleLabel = intl.formatMessage(\n    dataTableMessages.rowDragAndDropLabel,\n    { rowId },\n  );\n\n  return (\n    <DataTableDefaultCell>\n      <Button\n        size=\"condensed\"\n        variant=\"default\"\n        {...attributes}\n        {...(!disabled ? listeners : undefined)}\n        aria-disabled={disabled}\n        aria-label={rowDragHandleLabel}\n        className={clsx(\n          styles.dndHandle({\n            disabled,\n          }),\n          // also add the focus ring to the dragged row if the original drag handle is currently keyboard focused\n          isKeyboardDragging &&\n            focusRingStatic({\n              minimal: false,\n              color: 'neutral',\n              when: 'focus-visible',\n            }),\n        )}\n        data-dt-name=\"RowOrderDragAndDropHandle\"\n      >\n        <Button.Prefix>\n          <DragAllDirectionIcon />\n        </Button.Prefix>\n      </Button>\n    </DataTableDefaultCell>\n  );\n};\n\n/**\n * Column definition for the row drag column.\n * @internal\n */\nexport const ROW_DRAG_COLUMN: ColumnDef<unknown, unknown> = {\n  id: DATA_TABLE_ROW_DRAG_COLUMN_ID,\n  alignment: 'center',\n  accessorFn: () => '',\n  header: () => {\n    return '';\n  },\n  width: 'content',\n  minWidth: DATA_TABLE_BUILTIN_COLUMN_MIN_WIDTH,\n  enableSorting: false,\n  enableResizing: false,\n  enableUserActions: false,\n  enableHiding: false,\n  meta: {\n    builtin: true,\n    hasCustomCellRenderer: true,\n    hasCustomHeaderRenderer: true,\n    builtinPlacement: 'prefix',\n    cellDeps: () => {\n      // empty dependency to avoid unnecessary re-renders\n      return [];\n    },\n  },\n  cell: ({ row, table }) => (\n    <RowDragHandleCell\n      rowId={row.id}\n      disabled={!row.getCanDrag()}\n      isDraggingActive={table.getState().draggingRowInfo?.id === row.id}\n    />\n  ),\n};\n\n/**\n * Defines the row order table feature.\n */\nexport const DataTableRowOrder: TableFeature = {\n  createTable<TData>(table: Table<TData>) {\n    /**\n     * Allows access to the row model which comes before the row order.\n     */\n    table.getPreRowOrderRowModel = () => table.getExpandedRowModel();\n\n    table.setDraggingRowInfo = (draggingRowInfo?: {\n      id: string;\n      index: number;\n      row: Row<TData>;\n    }) => {\n      table.setState((state) => ({\n        ...state,\n        draggingRowInfo,\n      }));\n    };\n\n    table.getRowOrderRowModel = () => {\n      if (!table._getRowOrderRowModel && table.options.getRowOrderRowModel) {\n        table._getRowOrderRowModel = table.options.getRowOrderRowModel(table);\n      }\n\n      if (!table._getRowOrderRowModel) {\n        return table.getPreRowOrderRowModel();\n      }\n\n      return table._getRowOrderRowModel();\n    };\n\n    table.setRowOrder = (updater) => {\n      const newValue = functionalUpdate(\n        updater,\n        table.getState().rowOrder ?? [],\n      );\n\n      table._queue(() => {\n        table.options.onRowOrderChange?.(newValue);\n      });\n    };\n\n    assignRowMethods(table, {\n      getCanDrag(this: Row<TData>) {\n        const { enableRowOrdering, enableRowOrderDragAndDrop } = table.options;\n        const sortingState = table.getState().sorting;\n\n        if (\n          enableRowOrdering !== true ||\n          // always disable the drag and drop handle if the rows are sorted\n          (sortingState !== undefined && sortingState.length > 0)\n        ) {\n          return false;\n        }\n\n        // check if drag and drop is disabled for the row\n        if (\n          enableRowOrderDragAndDrop !== undefined &&\n          typeof enableRowOrderDragAndDrop === 'function'\n        ) {\n          return enableRowOrderDragAndDrop(this);\n        }\n        return true;\n      },\n\n      disabledRowDragAndDropLockPosition:\n        table.options.lockDisabledRows ?? false,\n    });\n  },\n};\n\n/**\n * @internal\n */\nexport function RowOrderingDragAndDropContext<TData extends DataTableRowData>({\n  children,\n  rows,\n  virtualColumns,\n  rowSeparation,\n}: Readonly<{\n  children: ReactNode;\n  rows: Row<TData>[];\n  virtualColumns: VirtualItem[];\n  rowSeparation: 'none' | 'horizontalDividers' | 'zebraStripes';\n}>): JSX.Element | undefined {\n  const table = useDataTable();\n  const tableHeaderHeight = table.getTotalHeaderHeight();\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {}),\n  );\n  const [draggingElement, setDraggingElement] = useState<ReactNode | undefined>(\n    undefined,\n  );\n  const containedVariant = table.getVisualVariantOptions().contained;\n  const virtualizationContainer = table.getRowVirtualizationContainer();\n  const draggingRowInfo = table.getState().draggingRowInfo;\n\n  const tableGridElement =\n    virtualizationContainer?.querySelector<HTMLElement>('[role=grid]');\n\n  const overlayContainer = useRef<HTMLDivElement>(null);\n  const scrollHandlerRef = useRef<(() => void) | null>(null);\n\n  const rowOrderCollisionDetection = useMemo(\n    () => createRowOrderCollisionDetection(draggingRowInfo),\n    [draggingRowInfo],\n  );\n\n  const restrictToTableRowArea = useMemo(\n    () =>\n      createRestrictToTableRowAreaModifier(\n        tableHeaderHeight,\n        containedVariant,\n        virtualizationContainer,\n      ),\n    [tableHeaderHeight, virtualizationContainer, containedVariant],\n  );\n\n  const rowOrderWhileDragging = useRef<string[]>([]);\n\n  if (!tableGridElement || !virtualizationContainer) {\n    return;\n  }\n\n  const overlayWidth = tableGridElement.parentElement?.clientWidth ?? 0;\n  const originalRowOrder =\n    table.getState().rowOrder ?? rows.map((row) => row.id);\n\n  const resetDragging = (): void => {\n    // Remove scroll event listener\n    if (virtualizationContainer && scrollHandlerRef.current) {\n      virtualizationContainer.removeEventListener(\n        'scroll',\n        scrollHandlerRef.current,\n      );\n      scrollHandlerRef.current = null;\n    }\n\n    table.setDraggingRowInfo(undefined);\n    setDraggingElement(undefined);\n    resetAllStylesForRows(getAllRowsInTableBody(tableGridElement));\n  };\n\n  const handleOnDragStart = ({ active }: { active: Active }): void => {\n    if (active.data.current) {\n      const element = createDraggingElement<TData>(\n        overlayContainer,\n        active,\n        rows,\n        virtualColumns,\n        {\n          width: overlayWidth,\n          gridTemplateColumns: table.getGridTemplateColumns(),\n          rowSeparation,\n          hasThresholds: table.options.hasThresholds,\n          rowThresholds: table.options.rowThresholds,\n          rowDetailsTemplate: table.options.rowDetailsTemplate,\n        },\n      );\n      setDraggingElement(element);\n\n      // Use requestAnimationFrame to delay execution until just before the next paint,\n      // ensuring the DOM is fully updated. This allows us to sync the overlay's scroll\n      // position with the table grid's scroll state.\n      requestAnimationFrame(() => {\n        if (overlayContainer.current?.parentElement) {\n          overlayContainer.current.parentElement.scrollLeft =\n            tableGridElement?.parentElement?.scrollLeft ?? 0;\n        }\n      });\n\n      table.setDraggingRowInfo({\n        id: active.id as string,\n        index: active.data.current.rowIndex,\n        row: active.data.current.row,\n      });\n\n      rowOrderWhileDragging.current = originalRowOrder\n        ? [...originalRowOrder]\n        : [];\n\n      let lastScrollOffset = virtualizationContainer?.scrollTop ?? 0;\n\n      // Attach scroll event listener to handle virtualization during drag\n      const handleScroll = (): void => {\n        if (!virtualizationContainer) {\n          return;\n        }\n\n        const currentOffset = virtualizationContainer.scrollTop;\n        const scrollDelta = Math.abs(currentOffset - lastScrollOffset);\n        if (scrollDelta >= SCROLL_JUMP_THRESHOLD) {\n          // Large sudden jump - virtualizer correction, prevent it\n          virtualizationContainer.scrollTop = lastScrollOffset;\n          return;\n        }\n        lastScrollOffset = currentOffset;\n      };\n      scrollHandlerRef.current = handleScroll;\n      virtualizationContainer?.addEventListener('scroll', handleScroll);\n    }\n  };\n\n  const handleOnDragEnd = ({\n    active,\n    over,\n  }: {\n    active: Active;\n    over: Over | null;\n  }): void => {\n    if (over === undefined || over === null) {\n      devLog('[Table] On drag end: over info is undefined or null', over);\n      resetDragging();\n      return;\n    }\n\n    if (draggingRowInfo === undefined) {\n      devLog(\n        '[Table] On drag end: dragging row info is undefined',\n        draggingRowInfo,\n      );\n      resetDragging();\n      return;\n    }\n\n    // if dragged to the starting point, row order does not change\n    if (over.id === active.id) {\n      resetDragging();\n      return;\n    }\n\n    const { fromIndex, toIndex } = getDragIndexes(\n      originalRowOrder,\n      active.id as string, // for us the IDs are always strings\n      over.id as string, // for us the IDs are always strings\n    );\n\n    const newRowOrder = [...originalRowOrder];\n    const activeRowSubRowsCount = draggingRowInfo.row.getLeafRows().length;\n    const overRowSubRowsCount = (\n      over.data.current?.row as Row<unknown>\n    ).getLeafRows().length;\n\n    const rowsToMove = newRowOrder.splice(fromIndex, 1 + activeRowSubRowsCount);\n\n    newRowOrder.splice(\n      fromIndex < toIndex\n        ? toIndex + overRowSubRowsCount - activeRowSubRowsCount\n        : toIndex,\n      0,\n      ...rowsToMove,\n    );\n    table.setRowOrder(newRowOrder);\n    resetDragging();\n\n    // In Safari, after scrolling a table while dragging, the cells are weirdly shifted in the grid\n    // We did not find why, probably a safari bug. This fixes the issue for now.\n    virtualizationContainer?.scrollBy({ top: 1, behavior: 'smooth' });\n    virtualizationContainer?.scrollBy({ top: -1, behavior: 'smooth' });\n    // set focus to new position\n    requestAnimationFrame(() =>\n      getDragHandleForRow(tableGridElement, toIndex)?.focus(),\n    );\n  };\n\n  return (\n    <DragAndDropContext\n      sensors={sensors}\n      collisionDetection={rowOrderCollisionDetection}\n      modifiers={[restrictToTableRowArea]}\n      onDragStart={handleOnDragStart}\n      onDragEnd={handleOnDragEnd}\n      onDragOver={(event: DragOverEvent) =>\n        transformRowOnDragOver(\n          tableGridElement,\n          event,\n          originalRowOrder,\n          table.getVisualVariantOptions().rowSeparation === 'none',\n          draggingRowInfo?.row,\n        )\n      }\n      onDragCancel={() => resetDragging()}\n    >\n      {children}\n      {\n        // We need to portal the drag and drop overlay to escape CSS transforms on ancestor elements.\n        // This ensures transforms on parent containers don't affect the position of the drag overlay.\n        createPortal(\n          <DragOverlay\n            dropAnimation={null}\n            className={styles.rowDndOverlay}\n            style={{ width: overlayWidth, height: 'max-content' }}\n          >\n            {draggingElement}\n          </DragOverlay>,\n          document.body,\n        )\n      }\n    </DragAndDropContext>\n  );\n}\n\n/**\n * Creates element to place in drag overlay.\n * @param overlayContainer - The container element that contains the row being dragged.\n * @param active - The row being dragged. If no corresponding row is found,\n *                 then undefined is returned from this function.\n * @param rows - all rows.\n * @param virtualColumns - virtual items for the columns\n * @param rowConfig - object containing all necessary row configurations to be able to replicate the row for the drag overlay\n * @returns element intended for overlay\n */\nfunction createDraggingElement<TData extends DataTableRowData>(\n  overlayContainer: MutableRefObject<HTMLDivElement | null>,\n  active: Active,\n  rows: Row<TData>[],\n  virtualColumns: VirtualItem[],\n  rowConfig: {\n    width: number;\n    gridTemplateColumns: string;\n    rowSeparation: 'none' | 'horizontalDividers' | 'zebraStripes';\n    hasThresholds?: boolean;\n    rowThresholds?: DataTableThresholdsNormalizedRule<unknown>[];\n    rowDetailsTemplate?: (params: { row: TData }) => ReactNode;\n  },\n): JSX.Element | undefined {\n  const activeId = active.id as string;\n  const draggingOriginalRow = active.data.current?.row as Row<TData>;\n  const draggingVirtualRow = active.data.current?.virtualRow as VirtualItem;\n\n  const {\n    gridTemplateColumns,\n    rowSeparation,\n    hasThresholds,\n    rowThresholds,\n    rowDetailsTemplate,\n  } = rowConfig;\n\n  if (draggingOriginalRow === undefined || draggingVirtualRow === undefined) {\n    devLog(\n      `[DataTable] Dragging row or virtual row with row id ${activeId} is undefined.`,\n    );\n    return;\n  }\n\n  const isRowDetailsOpen = draggingOriginalRow.getIsDetailsOpen();\n\n  const draggingVirtualDetailsRow = {\n    ...draggingVirtualRow,\n    index: draggingVirtualRow.index + 1,\n  };\n\n  return (\n    <Grid\n      ref={overlayContainer}\n      gridTemplateColumns={gridTemplateColumns}\n      padding={0}\n      minWidth=\"max-content\"\n      gap={0}\n      // TODO: React 19 update - inert is then in the IntrinsicAttributes and can be passed directly\n      {...{ inert: getProperInertValue(true) }}\n      className={clsx({\n        [thresholdStyles.hasPillThresholds]:\n          hasThresholds &&\n          rowThresholds?.some((threshold) => threshold.type === 'pill'),\n      })}\n      style={{\n        position: 'relative',\n      }}\n    >\n      <DataTableRow\n        row={draggingOriginalRow}\n        virtualRow={draggingVirtualRow}\n        virtualItemIndex={0}\n        rowCount={rows.length}\n        virtualColumns={virtualColumns}\n        isDraggedRow={false}\n        isInDragOverlay={true}\n        rowParity=\"even\"\n      />\n      {isRowDetailsOpen ? (\n        <RowDetailsElement\n          originalRow={draggingOriginalRow}\n          virtualRow={draggingVirtualDetailsRow}\n          virtualItemIndex={1}\n          rowSeparation={rowSeparation}\n          rowParity=\"even\"\n        >\n          {rowDetailsTemplate?.({\n            row: draggingOriginalRow.original,\n          })}\n        </RowDetailsElement>\n      ) : null}\n    </Grid>\n  );\n}\n"],
+  "sourcesContent": ["import {\n  DndContext as DragAndDropContext,\n  DragOverlay,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type Active,\n  type DragOverEvent,\n  type Over,\n} from '@dnd-kit/core';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { functionalUpdate } from '@tanstack/react-table';\nimport { type VirtualItem } from '@tanstack/react-virtual';\nimport clsx from 'clsx';\nimport {\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n  type JSX,\n  type MutableRefObject,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIntl } from 'react-intl';\n\nimport { DragAllDirectionIcon } from '@dynatrace/strato-icons';\n\nimport { getRowOrderRowModel } from './row-order-model.js';\nimport type { DataTableRowOrderProps } from './row-order-types.js';\nimport {\n  createRestrictToTableRowAreaModifier,\n  createRowOrderCollisionDetection,\n  getAllRowsInTableBody,\n  getDragHandleForRow,\n  getDragIndexes,\n  resetAllStylesForRows,\n  transformRowOnDragOver,\n} from './row-order-utils.js';\nimport * as styles from './RowOrder.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport { useFocusContext as _useFocusContext } from '../../../../core/hooks/useFocusContext.js';\nimport { focusRingStatic } from '../../../../core/styles/focusRingStatic.sty.js';\nimport { getProperInertValue } from '../../../../core/utils/get-inert-value.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { DataTableDefaultCell } from '../../components/DataTableDefaultCell.js';\nimport { DataTableRow } from '../../components/DataTableRow.js';\nimport {\n  DATA_TABLE_BUILTIN_COLUMN_MIN_WIDTH,\n  DATA_TABLE_ROW_DRAG_COLUMN_ID,\n  DATA_TABLE_ROW_HEIGHT_MAP,\n} from '../../constants.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport type {\n  Row,\n  Table,\n  TableOptions,\n  TableFeature,\n  ColumnDef,\n} from '../../hooks/useTable/types.js';\nimport { assignRowMethods } from '../../hooks/useTable/utils.js';\nimport { dataTableMessages } from '../../messages.js';\nimport type { DataTableRowData } from '../../public.api.js';\nimport { RowDetailsElement } from '../RowDetails/RowDetailsElement.js';\nimport type { DataTableThresholdsNormalizedRule } from '../Thresholds/threshold-types.js';\nimport * as thresholdStyles from '../Thresholds/Thresholds.sty.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_ROW_HEIGHT_MAP.default * 10;\n\n/**\n * Checks if the `rowOrdering` prop is a configuration object.\n * @param rowOrdering - The table prop that enables row ordering.\n * @returns `true` if the param is an object, `false` otherwise.\n */\nfunction isRowOrderConfigObject<TData>(\n  rowOrdering:\n    | boolean\n    | {\n        enableDragAndDrop?: boolean;\n        disableRowDragAndDrop?: (row: TData) => boolean;\n      },\n): rowOrdering is {\n  enableDragAndDrop?: boolean;\n  disableRowDragAndDrop?: (row: TData) => boolean;\n} {\n  return typeof rowOrdering === 'object';\n}\n\n/**\n * Configuration hook for the row order in the DataTable.\n * @internal\n */\nexport function useRowOrder<TData extends DataTableRowData>(\n  props: DataTableRowOrderProps<TData>,\n  options: TableOptions<TData>,\n): void {\n  const { rowOrdering } = props;\n\n  const disableRowDragAndDropFn =\n    typeof rowOrdering === 'object'\n      ? rowOrdering.disableRowDragAndDrop\n      : undefined;\n\n  const enableRowDragAndDropCallback = useCallback(\n    (row: Row<TData>) => {\n      // If no disable function is provided, enable drag and drop for all rows\n      if (!disableRowDragAndDropFn) {\n        return true;\n      }\n      return !disableRowDragAndDropFn(row.original);\n    },\n    [disableRowDragAndDropFn],\n  );\n\n  const [rowOrder, onRowOrderChange] = useControllableState<string[]>({\n    value: props.rowOrder,\n    defaultValue: props.defaultRowOrder,\n    onChange: props.onRowOrderChange,\n  });\n\n  options.enableRowOrderDragAndDrop = false;\n  if (rowOrdering === false || rowOrdering === undefined) {\n    options.enableRowOrdering = false;\n    return;\n  }\n\n  options.enableRowOrdering = true;\n  options.getRowOrderRowModel = getRowOrderRowModel();\n  options.onRowOrderChange = onRowOrderChange;\n  options.state = { ...options.state, rowOrder };\n\n  // config object is given\n  if (isRowOrderConfigObject(rowOrdering)) {\n    if (\n      rowOrdering.enableDragAndDrop === true &&\n      rowOrdering.disableRowDragAndDrop !== undefined\n    ) {\n      options.lockDisabledRows = rowOrdering.lockDisabledRows;\n      options.enableRowOrderDragAndDrop = enableRowDragAndDropCallback;\n      options.autoResetPageIndex = false;\n    } else {\n      options.enableRowOrderDragAndDrop =\n        rowOrdering.enableDragAndDrop === true;\n    }\n  }\n}\n\nconst RowDragHandleCell = ({\n  rowId,\n  disabled,\n  isDraggingActive,\n}: {\n  rowId: string;\n  disabled: boolean;\n  isDraggingActive: boolean;\n}): JSX.Element => {\n  const intl = useIntl();\n  const { modality } = _useFocusContext();\n  const { attributes, listeners } = useSortable({\n    id: rowId,\n  });\n\n  const isKeyboardDragging = isDraggingActive && modality === 'keyboard';\n  const rowDragHandleLabel = intl.formatMessage(\n    dataTableMessages.rowDragAndDropLabel,\n    { rowId },\n  );\n\n  return (\n    <DataTableDefaultCell>\n      <Button\n        size=\"condensed\"\n        variant=\"default\"\n        {...attributes}\n        {...(!disabled ? listeners : undefined)}\n        aria-disabled={disabled}\n        aria-label={rowDragHandleLabel}\n        className={clsx(\n          styles.dndHandle({\n            disabled,\n          }),\n          // also add the focus ring to the dragged row if the original drag handle is currently keyboard focused\n          isKeyboardDragging &&\n            focusRingStatic({\n              minimal: false,\n              color: 'neutral',\n              when: 'focus-visible',\n            }),\n        )}\n        data-dt-name=\"RowOrderDragAndDrop\"\n      >\n        <Button.Prefix>\n          <DragAllDirectionIcon />\n        </Button.Prefix>\n      </Button>\n    </DataTableDefaultCell>\n  );\n};\n\n/**\n * Column definition for the row drag column.\n * @internal\n */\nexport const ROW_DRAG_COLUMN: ColumnDef<unknown, unknown> = {\n  id: DATA_TABLE_ROW_DRAG_COLUMN_ID,\n  alignment: 'center',\n  accessorFn: () => '',\n  header: () => {\n    return '';\n  },\n  width: 'content',\n  minWidth: DATA_TABLE_BUILTIN_COLUMN_MIN_WIDTH,\n  enableSorting: false,\n  enableResizing: false,\n  enableUserActions: false,\n  enableHiding: false,\n  meta: {\n    builtin: true,\n    hasCustomCellRenderer: true,\n    hasCustomHeaderRenderer: true,\n    builtinPlacement: 'prefix',\n    cellDeps: () => {\n      // empty dependency to avoid unnecessary re-renders\n      return [];\n    },\n  },\n  cell: ({ row, table }) => (\n    <RowDragHandleCell\n      rowId={row.id}\n      disabled={!row.getCanDrag()}\n      isDraggingActive={table.getState().draggingRowInfo?.id === row.id}\n    />\n  ),\n};\n\n/**\n * Defines the row order table feature.\n */\nexport const DataTableRowOrder: TableFeature = {\n  createTable<TData>(table: Table<TData>) {\n    /**\n     * Allows access to the row model which comes before the row order.\n     */\n    table.getPreRowOrderRowModel = () => table.getExpandedRowModel();\n\n    table.setDraggingRowInfo = (draggingRowInfo?: {\n      id: string;\n      index: number;\n      row: Row<TData>;\n    }) => {\n      table.setState((state) => ({\n        ...state,\n        draggingRowInfo,\n      }));\n    };\n\n    table.getRowOrderRowModel = () => {\n      if (!table._getRowOrderRowModel && table.options.getRowOrderRowModel) {\n        table._getRowOrderRowModel = table.options.getRowOrderRowModel(table);\n      }\n\n      if (!table._getRowOrderRowModel) {\n        return table.getPreRowOrderRowModel();\n      }\n\n      return table._getRowOrderRowModel();\n    };\n\n    table.setRowOrder = (updater) => {\n      const newValue = functionalUpdate(\n        updater,\n        table.getState().rowOrder ?? [],\n      );\n\n      table._queue(() => {\n        table.options.onRowOrderChange?.(newValue);\n      });\n    };\n\n    assignRowMethods(table, {\n      getCanDrag(this: Row<TData>) {\n        const { enableRowOrdering, enableRowOrderDragAndDrop } = table.options;\n        const sortingState = table.getState().sorting;\n\n        if (\n          enableRowOrdering !== true ||\n          // always disable the drag and drop handle if the rows are sorted\n          (sortingState !== undefined && sortingState.length > 0)\n        ) {\n          return false;\n        }\n\n        // check if drag and drop is disabled for the row\n        if (\n          enableRowOrderDragAndDrop !== undefined &&\n          typeof enableRowOrderDragAndDrop === 'function'\n        ) {\n          return enableRowOrderDragAndDrop(this);\n        }\n        return true;\n      },\n\n      disabledRowDragAndDropLockPosition:\n        table.options.lockDisabledRows ?? false,\n    });\n  },\n};\n\n/**\n * @internal\n */\nexport function RowOrderingDragAndDropContext<TData extends DataTableRowData>({\n  children,\n  rows,\n  virtualColumns,\n  rowSeparation,\n}: Readonly<{\n  children: ReactNode;\n  rows: Row<TData>[];\n  virtualColumns: VirtualItem[];\n  rowSeparation: 'none' | 'horizontalDividers' | 'zebraStripes';\n}>): JSX.Element | undefined {\n  const table = useDataTable();\n  const tableHeaderHeight = table.getTotalHeaderHeight();\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {}),\n  );\n  const [draggingElement, setDraggingElement] = useState<ReactNode | undefined>(\n    undefined,\n  );\n  const containedVariant = table.getVisualVariantOptions().contained;\n  const virtualizationContainer = table.getRowVirtualizationContainer();\n  const draggingRowInfo = table.getState().draggingRowInfo;\n\n  const tableGridElement =\n    virtualizationContainer?.querySelector<HTMLElement>('[role=grid]');\n\n  const overlayContainer = useRef<HTMLDivElement>(null);\n  const scrollHandlerRef = useRef<(() => void) | null>(null);\n\n  const rowOrderCollisionDetection = useMemo(\n    () => createRowOrderCollisionDetection(draggingRowInfo),\n    [draggingRowInfo],\n  );\n\n  const restrictToTableRowArea = useMemo(\n    () =>\n      createRestrictToTableRowAreaModifier(\n        tableHeaderHeight,\n        containedVariant,\n        virtualizationContainer,\n      ),\n    [tableHeaderHeight, virtualizationContainer, containedVariant],\n  );\n\n  const rowOrderWhileDragging = useRef<string[]>([]);\n\n  if (!tableGridElement || !virtualizationContainer) {\n    return;\n  }\n\n  const overlayWidth = tableGridElement.parentElement?.clientWidth ?? 0;\n  const originalRowOrder =\n    table.getState().rowOrder ?? rows.map((row) => row.id);\n\n  const resetDragging = (): void => {\n    // Remove scroll event listener\n    if (virtualizationContainer && scrollHandlerRef.current) {\n      virtualizationContainer.removeEventListener(\n        'scroll',\n        scrollHandlerRef.current,\n      );\n      scrollHandlerRef.current = null;\n    }\n\n    table.setDraggingRowInfo(undefined);\n    setDraggingElement(undefined);\n    resetAllStylesForRows(getAllRowsInTableBody(tableGridElement));\n  };\n\n  const handleOnDragStart = ({ active }: { active: Active }): void => {\n    if (active.data.current) {\n      const element = createDraggingElement<TData>(\n        overlayContainer,\n        active,\n        rows,\n        virtualColumns,\n        {\n          width: overlayWidth,\n          gridTemplateColumns: table.getGridTemplateColumns(),\n          rowSeparation,\n          hasThresholds: table.options.hasThresholds,\n          rowThresholds: table.options.rowThresholds,\n          rowDetailsTemplate: table.options.rowDetailsTemplate,\n        },\n      );\n      setDraggingElement(element);\n\n      // Use requestAnimationFrame to delay execution until just before the next paint,\n      // ensuring the DOM is fully updated. This allows us to sync the overlay's scroll\n      // position with the table grid's scroll state.\n      requestAnimationFrame(() => {\n        if (overlayContainer.current?.parentElement) {\n          overlayContainer.current.parentElement.scrollLeft =\n            tableGridElement?.parentElement?.scrollLeft ?? 0;\n        }\n      });\n\n      table.setDraggingRowInfo({\n        id: active.id as string,\n        index: active.data.current.rowIndex,\n        row: active.data.current.row,\n      });\n\n      rowOrderWhileDragging.current = originalRowOrder\n        ? [...originalRowOrder]\n        : [];\n\n      let lastScrollOffset = virtualizationContainer?.scrollTop ?? 0;\n\n      // Attach scroll event listener to handle virtualization during drag\n      const handleScroll = (): void => {\n        if (!virtualizationContainer) {\n          return;\n        }\n\n        const currentOffset = virtualizationContainer.scrollTop;\n        const scrollDelta = Math.abs(currentOffset - lastScrollOffset);\n        if (scrollDelta >= SCROLL_JUMP_THRESHOLD) {\n          // Large sudden jump - virtualizer correction, prevent it\n          virtualizationContainer.scrollTop = lastScrollOffset;\n          return;\n        }\n        lastScrollOffset = currentOffset;\n      };\n      scrollHandlerRef.current = handleScroll;\n      virtualizationContainer?.addEventListener('scroll', handleScroll);\n    }\n  };\n\n  const handleOnDragEnd = ({\n    active,\n    over,\n  }: {\n    active: Active;\n    over: Over | null;\n  }): void => {\n    if (over === undefined || over === null) {\n      devLog('[Table] On drag end: over info is undefined or null', over);\n      resetDragging();\n      return;\n    }\n\n    if (draggingRowInfo === undefined) {\n      devLog(\n        '[Table] On drag end: dragging row info is undefined',\n        draggingRowInfo,\n      );\n      resetDragging();\n      return;\n    }\n\n    // if dragged to the starting point, row order does not change\n    if (over.id === active.id) {\n      resetDragging();\n      return;\n    }\n\n    const { fromIndex, toIndex } = getDragIndexes(\n      originalRowOrder,\n      active.id as string, // for us the IDs are always strings\n      over.id as string, // for us the IDs are always strings\n    );\n\n    const newRowOrder = [...originalRowOrder];\n    const activeRowSubRowsCount = draggingRowInfo.row.getLeafRows().length;\n    const overRowSubRowsCount = (\n      over.data.current?.row as Row<unknown>\n    ).getLeafRows().length;\n\n    const rowsToMove = newRowOrder.splice(fromIndex, 1 + activeRowSubRowsCount);\n\n    newRowOrder.splice(\n      fromIndex < toIndex\n        ? toIndex + overRowSubRowsCount - activeRowSubRowsCount\n        : toIndex,\n      0,\n      ...rowsToMove,\n    );\n    table.setRowOrder(newRowOrder);\n    resetDragging();\n\n    // In Safari, after scrolling a table while dragging, the cells are weirdly shifted in the grid\n    // We did not find why, probably a safari bug. This fixes the issue for now.\n    virtualizationContainer?.scrollBy({ top: 1, behavior: 'smooth' });\n    virtualizationContainer?.scrollBy({ top: -1, behavior: 'smooth' });\n    // set focus to new position\n    requestAnimationFrame(() =>\n      getDragHandleForRow(tableGridElement, toIndex)?.focus(),\n    );\n  };\n\n  return (\n    <DragAndDropContext\n      sensors={sensors}\n      collisionDetection={rowOrderCollisionDetection}\n      modifiers={[restrictToTableRowArea]}\n      onDragStart={handleOnDragStart}\n      onDragEnd={handleOnDragEnd}\n      onDragOver={(event: DragOverEvent) =>\n        transformRowOnDragOver(\n          tableGridElement,\n          event,\n          originalRowOrder,\n          table.getVisualVariantOptions().rowSeparation === 'none',\n          draggingRowInfo?.row,\n        )\n      }\n      onDragCancel={() => resetDragging()}\n    >\n      {children}\n      {\n        // We need to portal the drag and drop overlay to escape CSS transforms on ancestor elements.\n        // This ensures transforms on parent containers don't affect the position of the drag overlay.\n        createPortal(\n          <DragOverlay\n            dropAnimation={null}\n            className={styles.rowDndOverlay}\n            style={{ width: overlayWidth, height: 'max-content' }}\n          >\n            {draggingElement}\n          </DragOverlay>,\n          document.body,\n        )\n      }\n    </DragAndDropContext>\n  );\n}\n\n/**\n * Creates element to place in drag overlay.\n * @param overlayContainer - The container element that contains the row being dragged.\n * @param active - The row being dragged. If no corresponding row is found,\n *                 then undefined is returned from this function.\n * @param rows - all rows.\n * @param virtualColumns - virtual items for the columns\n * @param rowConfig - object containing all necessary row configurations to be able to replicate the row for the drag overlay\n * @returns element intended for overlay\n */\nfunction createDraggingElement<TData extends DataTableRowData>(\n  overlayContainer: MutableRefObject<HTMLDivElement | null>,\n  active: Active,\n  rows: Row<TData>[],\n  virtualColumns: VirtualItem[],\n  rowConfig: {\n    width: number;\n    gridTemplateColumns: string;\n    rowSeparation: 'none' | 'horizontalDividers' | 'zebraStripes';\n    hasThresholds?: boolean;\n    rowThresholds?: DataTableThresholdsNormalizedRule<unknown>[];\n    rowDetailsTemplate?: (params: { row: TData }) => ReactNode;\n  },\n): JSX.Element | undefined {\n  const activeId = active.id as string;\n  const draggingOriginalRow = active.data.current?.row as Row<TData>;\n  const draggingVirtualRow = active.data.current?.virtualRow as VirtualItem;\n\n  const {\n    gridTemplateColumns,\n    rowSeparation,\n    hasThresholds,\n    rowThresholds,\n    rowDetailsTemplate,\n  } = rowConfig;\n\n  if (draggingOriginalRow === undefined || draggingVirtualRow === undefined) {\n    devLog(\n      `[DataTable] Dragging row or virtual row with row id ${activeId} is undefined.`,\n    );\n    return;\n  }\n\n  const isRowDetailsOpen = draggingOriginalRow.getIsDetailsOpen();\n\n  const draggingVirtualDetailsRow = {\n    ...draggingVirtualRow,\n    index: draggingVirtualRow.index + 1,\n  };\n\n  return (\n    <Grid\n      ref={overlayContainer}\n      gridTemplateColumns={gridTemplateColumns}\n      padding={0}\n      minWidth=\"max-content\"\n      gap={0}\n      // TODO: React 19 update - inert is then in the IntrinsicAttributes and can be passed directly\n      {...{ inert: getProperInertValue(true) }}\n      className={clsx({\n        [thresholdStyles.hasPillThresholds]:\n          hasThresholds &&\n          rowThresholds?.some((threshold) => threshold.type === 'pill'),\n      })}\n      style={{\n        position: 'relative',\n      }}\n    >\n      <DataTableRow\n        row={draggingOriginalRow}\n        virtualRow={draggingVirtualRow}\n        virtualItemIndex={0}\n        rowCount={rows.length}\n        virtualColumns={virtualColumns}\n        isDraggedRow={false}\n        isInDragOverlay={true}\n        rowParity=\"even\"\n      />\n      {isRowDetailsOpen ? (\n        <RowDetailsElement\n          originalRow={draggingOriginalRow}\n          virtualRow={draggingVirtualDetailsRow}\n          virtualItemIndex={1}\n          rowSeparation={rowSeparation}\n          rowParity=\"even\"\n        >\n          {rowDetailsTemplate?.({\n            row: draggingOriginalRow.original,\n          })}\n        </RowDetailsElement>\n      ) : null}\n    </Grid>\n  );\n}\n"],
   "mappings": "AAsMU,cAyTN,YAzTM;AAtMV;AAAA,EACE,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AAEjC,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AAExB,SAAS,4BAA4B;AAErC,SAAS,2BAA2B;AAEpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,4BAA4B;AACrC,SAAS,mBAAmB,wBAAwB;AACpD,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAQ7B,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAElC,SAAS,yBAAyB;AAElC,YAAY,qBAAqB;AAIjC,MAAM,wBAAwB,0BAA0B,UAAU;AAOlE,SAAS,uBACP,aASA;AACA,SAAO,OAAO,gBAAgB;AAChC;AAMO,SAAS,YACd,OACA,SACM;AACN,QAAM,EAAE,YAAY,IAAI;AAExB,QAAM,0BACJ,OAAO,gBAAgB,WACnB,YAAY,wBACZ;AAEN,QAAM,+BAA+B;AAAA,IACnC,CAAC,QAAoB;AAEnB,UAAI,CAAC,yBAAyB;AAC5B,eAAO;AAAA,MACT;AACA,aAAO,CAAC,wBAAwB,IAAI,QAAQ;AAAA,IAC9C;AAAA,IACA,CAAC,uBAAuB;AAAA,EAC1B;AAEA,QAAM,CAAC,UAAU,gBAAgB,IAAI,qBAA+B;AAAA,IAClE,OAAO,MAAM;AAAA,IACb,cAAc,MAAM;AAAA,IACpB,UAAU,MAAM;AAAA,EAClB,CAAC;AAED,UAAQ,4BAA4B;AACpC,MAAI,gBAAgB,SAAS,gBAAgB,QAAW;AACtD,YAAQ,oBAAoB;AAC5B;AAAA,EACF;AAEA,UAAQ,oBAAoB;AAC5B,UAAQ,sBAAsB,oBAAoB;AAClD,UAAQ,mBAAmB;AAC3B,UAAQ,QAAQ,EAAE,GAAG,QAAQ,OAAO,SAAS;AAG7C,MAAI,uBAAuB,WAAW,GAAG;AACvC,QACE,YAAY,sBAAsB,QAClC,YAAY,0BAA0B,QACtC;AACA,cAAQ,mBAAmB,YAAY;AACvC,cAAQ,4BAA4B;AACpC,cAAQ,qBAAqB;AAAA,IAC/B,OAAO;AACL,cAAQ,4BACN,YAAY,sBAAsB;AAAA,IACtC;AAAA,EACF;AACF;AAEA,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,MAImB;AACjB,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,SAAS,IAAI,iBAAiB;AACtC,QAAM,EAAE,YAAY,UAAU,IAAI,YAAY;AAAA,IAC5C,IAAI;AAAA,EACN,CAAC;AAED,QAAM,qBAAqB,oBAAoB,aAAa;AAC5D,QAAM,qBAAqB,KAAK;AAAA,IAC9B,kBAAkB;AAAA,IAClB,EAAE,MAAM;AAAA,EACV;AAEA,SACE,oBAAC,wBACC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MACH,GAAI,CAAC,WAAW,YAAY;AAAA,MAC7B,iBAAe;AAAA,MACf,cAAY;AAAA,MACZ,WAAW;AAAA,QACT,OAAO,UAAU;AAAA,UACf;AAAA,QACF,CAAC;AAAA;AAAA,QAED,sBACE,gBAAgB;AAAA,UACd,SAAS;AAAA,UACT,OAAO;AAAA,UACP,MAAM;AAAA,QACR,CAAC;AAAA,MACL;AAAA,MACA,gBAAa;AAAA,MAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,wBAAqB,GACxB;AAAA;AAAA,EACF,GACF;AAEJ;AAMO,MAAM,kBAA+C;AAAA,EAC1D,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,YAAY,MAAM;AAAA,EAClB,QAAQ,MAAM;AACZ,WAAO;AAAA,EACT;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,uBAAuB;AAAA,IACvB,yBAAyB;AAAA,IACzB,kBAAkB;AAAA,IAClB,UAAU,MAAM;AAEd,aAAO,CAAC;AAAA,IACV;AAAA,EACF;AAAA,EACA,MAAM,CAAC,EAAE,KAAK,MAAM,MAClB;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,IAAI;AAAA,MACX,UAAU,CAAC,IAAI,WAAW;AAAA,MAC1B,kBAAkB,MAAM,SAAS,EAAE,iBAAiB,OAAO,IAAI;AAAA;AAAA,EACjE;AAEJ;AAKO,MAAM,oBAAkC;AAAA,EAC7C,YAAmB,OAAqB;AAItC,UAAM,yBAAyB,MAAM,MAAM,oBAAoB;AAE/D,UAAM,qBAAqB,CAAC,oBAItB;AACJ,YAAM,SAAS,CAAC,WAAW;AAAA,QACzB,GAAG;AAAA,QACH;AAAA,MACF,EAAE;AAAA,IACJ;AAEA,UAAM,sBAAsB,MAAM;AAChC,UAAI,CAAC,MAAM,wBAAwB,MAAM,QAAQ,qBAAqB;AACpE,cAAM,uBAAuB,MAAM,QAAQ,oBAAoB,KAAK;AAAA,MACtE;AAEA,UAAI,CAAC,MAAM,sBAAsB;AAC/B,eAAO,MAAM,uBAAuB;AAAA,MACtC;AAEA,aAAO,MAAM,qBAAqB;AAAA,IACpC;AAEA,UAAM,cAAc,CAAC,YAAY;AAC/B,YAAM,WAAW;AAAA,QACf;AAAA,QACA,MAAM,SAAS,EAAE,YAAY,CAAC;AAAA,MAChC;AAEA,YAAM,OAAO,MAAM;AACjB,cAAM,QAAQ,mBAAmB,QAAQ;AAAA,MAC3C,CAAC;AAAA,IACH;AAEA,qBAAiB,OAAO;AAAA,MACtB,aAA6B;AAC3B,cAAM,EAAE,mBAAmB,0BAA0B,IAAI,MAAM;AAC/D,cAAM,eAAe,MAAM,SAAS,EAAE;AAEtC,YACE,sBAAsB;AAAA,QAErB,iBAAiB,UAAa,aAAa,SAAS,GACrD;AACA,iBAAO;AAAA,QACT;AAGA,YACE,8BAA8B,UAC9B,OAAO,8BAA8B,YACrC;AACA,iBAAO,0BAA0B,IAAI;AAAA,QACvC;AACA,eAAO;AAAA,MACT;AAAA,MAEA,oCACE,MAAM,QAAQ,oBAAoB;AAAA,IACtC,CAAC;AAAA,EACH;AACF;AAKO,SAAS,8BAA8D;AAAA,EAC5E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAK6B;AAC3B,QAAM,QAAQ,aAAa;AAC3B,QAAM,oBAAoB,MAAM,qBAAqB;AACrD,QAAM,UAAU;AAAA,IACd,UAAU,aAAa,CAAC,CAAC;AAAA,IACzB,UAAU,aAAa,CAAC,CAAC;AAAA,IACzB,UAAU,gBAAgB,CAAC,CAAC;AAAA,EAC9B;AACA,QAAM,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C;AAAA,EACF;AACA,QAAM,mBAAmB,MAAM,wBAAwB,EAAE;AACzD,QAAM,0BAA0B,MAAM,8BAA8B;AACpE,QAAM,kBAAkB,MAAM,SAAS,EAAE;AAEzC,QAAM,mBACJ,yBAAyB,cAA2B,aAAa;AAEnE,QAAM,mBAAmB,OAAuB,IAAI;AACpD,QAAM,mBAAmB,OAA4B,IAAI;AAEzD,QAAM,6BAA6B;AAAA,IACjC,MAAM,iCAAiC,eAAe;AAAA,IACtD,CAAC,eAAe;AAAA,EAClB;AAEA,QAAM,yBAAyB;AAAA,IAC7B,MACE;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACF,CAAC,mBAAmB,yBAAyB,gBAAgB;AAAA,EAC/D;AAEA,QAAM,wBAAwB,OAAiB,CAAC,CAAC;AAEjD,MAAI,CAAC,oBAAoB,CAAC,yBAAyB;AACjD;AAAA,EACF;AAEA,QAAM,eAAe,iBAAiB,eAAe,eAAe;AACpE,QAAM,mBACJ,MAAM,SAAS,EAAE,YAAY,KAAK,IAAI,CAAC,QAAQ,IAAI,EAAE;AAEvD,QAAM,gBAAgB,MAAY;AAEhC,QAAI,2BAA2B,iBAAiB,SAAS;AACvD,8BAAwB;AAAA,QACtB;AAAA,QACA,iBAAiB;AAAA,MACnB;AACA,uBAAiB,UAAU;AAAA,IAC7B;AAEA,UAAM,mBAAmB,MAAS;AAClC,uBAAmB,MAAS;AAC5B,0BAAsB,sBAAsB,gBAAgB,CAAC;AAAA,EAC/D;AAEA,QAAM,oBAAoB,CAAC,EAAE,OAAO,MAAgC;AAClE,QAAI,OAAO,KAAK,SAAS;AACvB,YAAM,UAAU;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,UACE,OAAO;AAAA,UACP,qBAAqB,MAAM,uBAAuB;AAAA,UAClD;AAAA,UACA,eAAe,MAAM,QAAQ;AAAA,UAC7B,eAAe,MAAM,QAAQ;AAAA,UAC7B,oBAAoB,MAAM,QAAQ;AAAA,QACpC;AAAA,MACF;AACA,yBAAmB,OAAO;AAK1B,4BAAsB,MAAM;AAC1B,YAAI,iBAAiB,SAAS,eAAe;AAC3C,2BAAiB,QAAQ,cAAc,aACrC,kBAAkB,eAAe,cAAc;AAAA,QACnD;AAAA,MACF,CAAC;AAED,YAAM,mBAAmB;AAAA,QACvB,IAAI,OAAO;AAAA,QACX,OAAO,OAAO,KAAK,QAAQ;AAAA,QAC3B,KAAK,OAAO,KAAK,QAAQ;AAAA,MAC3B,CAAC;AAED,4BAAsB,UAAU,mBAC5B,CAAC,GAAG,gBAAgB,IACpB,CAAC;AAEL,UAAI,mBAAmB,yBAAyB,aAAa;AAG7D,YAAM,eAAe,MAAY;AAC/B,YAAI,CAAC,yBAAyB;AAC5B;AAAA,QACF;AAEA,cAAM,gBAAgB,wBAAwB;AAC9C,cAAM,cAAc,KAAK,IAAI,gBAAgB,gBAAgB;AAC7D,YAAI,eAAe,uBAAuB;AAExC,kCAAwB,YAAY;AACpC;AAAA,QACF;AACA,2BAAmB;AAAA,MACrB;AACA,uBAAiB,UAAU;AAC3B,+BAAyB,iBAAiB,UAAU,YAAY;AAAA,IAClE;AAAA,EACF;AAEA,QAAM,kBAAkB,CAAC;AAAA,IACvB;AAAA,IACA;AAAA,EACF,MAGY;AACV,QAAI,SAAS,UAAa,SAAS,MAAM;AACvC,aAAO,uDAAuD,IAAI;AAClE,oBAAc;AACd;AAAA,IACF;AAEA,QAAI,oBAAoB,QAAW;AACjC;AAAA,QACE;AAAA,QACA;AAAA,MACF;AACA,oBAAc;AACd;AAAA,IACF;AAGA,QAAI,KAAK,OAAO,OAAO,IAAI;AACzB,oBAAc;AACd;AAAA,IACF;AAEA,UAAM,EAAE,WAAW,QAAQ,IAAI;AAAA,MAC7B;AAAA,MACA,OAAO;AAAA;AAAA,MACP,KAAK;AAAA;AAAA,IACP;AAEA,UAAM,cAAc,CAAC,GAAG,gBAAgB;AACxC,UAAM,wBAAwB,gBAAgB,IAAI,YAAY,EAAE;AAChE,UAAM,uBACJ,KAAK,KAAK,SAAS,KACnB,YAAY,EAAE;AAEhB,UAAM,aAAa,YAAY,OAAO,WAAW,IAAI,qBAAqB;AAE1E,gBAAY;AAAA,MACV,YAAY,UACR,UAAU,sBAAsB,wBAChC;AAAA,MACJ;AAAA,MACA,GAAG;AAAA,IACL;AACA,UAAM,YAAY,WAAW;AAC7B,kBAAc;AAId,6BAAyB,SAAS,EAAE,KAAK,GAAG,UAAU,SAAS,CAAC;AAChE,6BAAyB,SAAS,EAAE,KAAK,IAAI,UAAU,SAAS,CAAC;AAEjE;AAAA,MAAsB,MACpB,oBAAoB,kBAAkB,OAAO,GAAG,MAAM;AAAA,IACxD;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,oBAAoB;AAAA,MACpB,WAAW,CAAC,sBAAsB;AAAA,MAClC,aAAa;AAAA,MACb,WAAW;AAAA,MACX,YAAY,CAAC,UACX;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,wBAAwB,EAAE,kBAAkB;AAAA,QAClD,iBAAiB;AAAA,MACnB;AAAA,MAEF,cAAc,MAAM,cAAc;AAAA,MAEjC;AAAA;AAAA;AAAA;AAAA,QAIC;AAAA,UACE;AAAA,YAAC;AAAA;AAAA,cACC,eAAe;AAAA,cACf,WAAW,OAAO;AAAA,cAClB,OAAO,EAAE,OAAO,cAAc,QAAQ,cAAc;AAAA,cAEnD;AAAA;AAAA,UACH;AAAA,UACA,SAAS;AAAA,QACX;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAYA,SAAS,sBACP,kBACA,QACA,MACA,gBACA,WAQyB;AACzB,QAAM,WAAW,OAAO;AACxB,QAAM,sBAAsB,OAAO,KAAK,SAAS;AACjD,QAAM,qBAAqB,OAAO,KAAK,SAAS;AAEhD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,MAAI,wBAAwB,UAAa,uBAAuB,QAAW;AACzE;AAAA,MACE,uDAAuD,QAAQ;AAAA,IACjE;AACA;AAAA,EACF;AAEA,QAAM,mBAAmB,oBAAoB,iBAAiB;AAE9D,QAAM,4BAA4B;AAAA,IAChC,GAAG;AAAA,IACH,OAAO,mBAAmB,QAAQ;AAAA,EACpC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,SAAS;AAAA,MACT,UAAS;AAAA,MACT,KAAK;AAAA,MAEJ,GAAG,EAAE,OAAO,oBAAoB,IAAI,EAAE;AAAA,MACvC,WAAW,KAAK;AAAA,QACd,CAAC,gBAAgB,iBAAiB,GAChC,iBACA,eAAe,KAAK,CAAC,cAAc,UAAU,SAAS,MAAM;AAAA,MAChE,CAAC;AAAA,MACD,OAAO;AAAA,QACL,UAAU;AAAA,MACZ;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,YAAY;AAAA,YACZ,kBAAkB;AAAA,YAClB,UAAU,KAAK;AAAA,YACf;AAAA,YACA,cAAc;AAAA,YACd,iBAAiB;AAAA,YACjB,WAAU;AAAA;AAAA,QACZ;AAAA,QACC,mBACC;AAAA,UAAC;AAAA;AAAA,YACC,aAAa;AAAA,YACb,YAAY;AAAA,YACZ,kBAAkB;AAAA,YAClB;AAAA,YACA,WAAU;AAAA,YAET,+BAAqB;AAAA,cACpB,KAAK,oBAAoB;AAAA,YAC3B,CAAC;AAAA;AAAA,QACH,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
   "names": []
 }

package/esm/tables/DataTable/features/RowOrder/RowOrder.sty.js

@@ -1,8 +1,8 @@
 import "./RowOrder.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var disabledNonTargetRow = "_or8s44-3-2-0";
-var dndHandle = _7a468({ defaultClassName: "_or8s41-3-2-0", variantClassNames: { disabled: { true: "_or8s42-3-2-0", false: "_or8s43-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
-var rowDndOverlay = "_or8s40-3-2-0";
+var disabledNonTargetRow = "_or8s44-3-3-0";
+var dndHandle = _7a468({ defaultClassName: "_or8s41-3-3-0", variantClassNames: { disabled: { true: "_or8s42-3-3-0", false: "_or8s43-3-3-0" } }, defaultVariants: {}, compoundVariants: [] });
+var rowDndOverlay = "_or8s40-3-3-0";
 export {
   disabledNonTargetRow,
   dndHandle,

package/esm/tables/DataTable/features/RowOrder/RowOrder.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/RowOrder/RowOrder.css.ts"],
-  "sourcesContent": ["import './RowOrder.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabledNonTargetRow = '_or8s44-3-2-0';\nexport var dndHandle = _7a468({defaultClassName:'_or8s41-3-2-0',variantClassNames:{disabled:{true:'_or8s42-3-2-0',false:'_or8s43-3-2-0'}},defaultVariants:{},compoundVariants:[]});\nexport var rowDndOverlay = '_or8s40-3-2-0';"],
+  "sourcesContent": ["import './RowOrder.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabledNonTargetRow = '_or8s44-3-3-0';\nexport var dndHandle = _7a468({defaultClassName:'_or8s41-3-3-0',variantClassNames:{disabled:{true:'_or8s42-3-3-0',false:'_or8s43-3-3-0'}},defaultVariants:{},compoundVariants:[]});\nexport var rowDndOverlay = '_or8s40-3-3-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB;AAC3B,IAAI,YAAY,OAAO,EAAC,kBAAiB,iBAAgB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,OAAM,gBAAe,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1K,IAAI,gBAAgB;",
   "names": []
 }

package/esm/tables/DataTable/features/RowSelection/RowSelectionCells.js

@@ -45,7 +45,7 @@ function RowSelectionHeader(props) {
       }
     }
   }
-  const selectAllDtName = value === true ? "RowDeselectAll" : "RowSelectAll";
+  const selectAllDtProperties = `state:${value === true ? "deselect" : "select"}`;
   const checkbox = /* @__PURE__ */ jsx(
     Checkbox,
     {
@@ -53,7 +53,8 @@ function RowSelectionHeader(props) {
       "aria-disabled": isDisabled,
       "aria-label": checkboxMessage,
       onChange: (_, event) => toggleSelectAll(event),
-      "data-dt-name": selectAllDtName
+      "data-dt-name": "RowSelectDeselectAll",
+      "data-dt-properties": selectAllDtProperties
     }
   );
   return /* @__PURE__ */ jsx(DataTableDefaultCell, { children: isDisabled ? checkbox : /* @__PURE__ */ jsx(Tooltip, { text: checkboxMessage, children: checkbox }) });
@@ -108,7 +109,7 @@ function RowSelectionCell(props) {
   const { row } = props;
   const intl = useIntl();
   const isDisabled = row.getShouldDisableRowSelection();
-  const rowDtName = resolveCheckboxValue(row) === true ? "RowDeselect" : "RowSelect";
+  const rowDtProperties = `state:${resolveCheckboxValue(row) === true ? "deselect" : "select"}`;
   return /* @__PURE__ */ jsx(
     DataTableDefaultCell,
     {
@@ -132,7 +133,8 @@ function RowSelectionCell(props) {
             row.batchSelect(value, (event?.nativeEvent).shiftKey);
           },
           "data-row-selection-checkbox": true,
-          "data-dt-name": rowDtName
+          "data-dt-name": "RowSelectDeselect",
+          "data-dt-properties": rowDtProperties
         }
       )
     }

package/esm/tables/DataTable/features/RowSelection/RowSelectionCells.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/RowSelection/RowSelectionCells.tsx"],
-  "sourcesContent": ["import {\n  type ChangeEvent,\n  type MouseEvent as ReactMouseEvent,\n  type JSX,\n  useEffect,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Checkbox } from '../../../../forms/checkbox/Checkbox.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { DataTableDefaultCell } from '../../components/DataTableDefaultCell.js';\nimport { type Row, Table } from '../../hooks/useTable/types.js';\nimport { dataTableMessages } from '../../messages.js';\n\n/**\n * DataTable row selection header.\n * @internal\n */\nexport function RowSelectionHeader(\n  props: Readonly<{\n    table: Table<unknown>;\n  }>,\n) {\n  const { table } = props;\n  const resetBatchSelection = table.resetBatchSelection;\n  const value = getCheckboxValue(table);\n  const isDisabled = isSelectAllDisabled(table);\n\n  const intl = useIntl();\n  const checkboxMessage = intl.formatMessage(\n    dataTableMessages.selectAllTooltip,\n    {\n      nextSelection:\n        value === false || value === 'indeterminate' ? 'select' : 'deselect',\n      scope: table.options.rowSelectionSelectAllMode,\n    },\n  );\n\n  useEffect(() => {\n    document.addEventListener('click', resetBatchSelection);\n    return () => {\n      document.removeEventListener('click', resetBatchSelection);\n    };\n  }, [resetBatchSelection]);\n\n  function toggleSelectAll(\n    event: ChangeEvent<HTMLInputElement> | undefined,\n  ): void {\n    if (isDisabled) {\n      event?.preventDefault();\n      return;\n    }\n    if (table.options.rowSelectionSelectAllMode === 'page') {\n      if (table.options.rowSelectionLimit !== undefined) {\n        table.getToggleAllLimitedPageRowsSelectedHandler()(event);\n      } else {\n        table.getToggleAllPageRowsSelectedHandler()(event);\n      }\n    } else if (table.options.rowSelectionSelectAllMode === 'all') {\n      if (table.options.rowSelectionLimit !== undefined) {\n        table.getToggleAllLimitedRowsSelectedHandler()(event);\n      } else {\n        table.getToggleAllRowsSelectedHandler()(event);\n      }\n    }\n  }\n\n  const selectAllDtName = value === true ? 'RowDeselectAll' : 'RowSelectAll';\n\n  const checkbox = (\n    <Checkbox\n      value={isDisabled ? false : value}\n      aria-disabled={isDisabled}\n      aria-label={checkboxMessage}\n      onChange={(_, event) => toggleSelectAll(event)}\n      data-dt-name={selectAllDtName}\n    />\n  );\n\n  return (\n    <DataTableDefaultCell>\n      {isDisabled ? (\n        checkbox\n      ) : (\n        <Tooltip text={checkboxMessage}>{checkbox}</Tooltip>\n      )}\n    </DataTableDefaultCell>\n  );\n}\n\n/**\n * @returns true, if the 'select all' checkbox shall be disabled, false otherwise.\n */\nfunction isSelectAllDisabled(table: Table<unknown>): boolean {\n  const isTableEmpty = table.getRowCount() === 0;\n  if (isTableEmpty) {\n    return true;\n  }\n  let isAllRowsSelectionDisabled = false;\n  if (table.options.rowSelectionSelectAllMode === 'page') {\n    isAllRowsSelectionDisabled = table.getIsAllPageRowsSelectionDisabled();\n  } else if (table.options.rowSelectionSelectAllMode === 'all') {\n    isAllRowsSelectionDisabled = table.getIsAllRowsSelectionDisabled();\n  }\n  return isAllRowsSelectionDisabled;\n}\n\n/**\n * @returns the current state of the 'select all' checkbox\n */\nfunction getCheckboxValue(table: Table<unknown>): boolean | 'indeterminate' {\n  if (table.options.rowSelectionSelectAllMode === 'page') {\n    if (table.getIsAllPageRowsSelected()) {\n      return true;\n    }\n    if (table.getIsSomePageRowsSelected()) {\n      return 'indeterminate';\n    }\n    return false;\n  }\n  if (table.options.rowSelectionSelectAllMode === 'all') {\n    if (table.getIsAllRowsSelected()) {\n      return true;\n    }\n    if (table.getIsSomeRowsSelected()) {\n      return 'indeterminate';\n    }\n    return false;\n  }\n  return false;\n}\n\nconst resolveCheckboxValue = (row: Row<unknown>): boolean | 'indeterminate' => {\n  if (row.subRows.length === 0) {\n    return row.getIsSelected();\n  }\n\n  if (row.getIsAllSubRowsSelected()) {\n    return true;\n  }\n\n  if (row.getIsSomeSelected()) {\n    return 'indeterminate';\n  }\n\n  return false;\n};\n\n/**\n * DataTable row selection cell.\n * @internal\n */\nexport function RowSelectionCell(\n  props: Readonly<{\n    row: Row<unknown>;\n  }>,\n): JSX.Element {\n  const { row } = props;\n  const intl = useIntl();\n\n  const isDisabled = row.getShouldDisableRowSelection();\n  const rowDtName =\n    resolveCheckboxValue(row) === true ? 'RowDeselect' : 'RowSelect';\n  return (\n    <DataTableDefaultCell\n      onMouseDown={(event: ReactMouseEvent) => {\n        document.getSelection()?.removeAllRanges();\n        event.preventDefault();\n      }}\n    >\n      <Checkbox\n        aria-label={intl.formatMessage(dataTableMessages.selectRowCheckbox, {\n          id: row.id,\n        })}\n        value={resolveCheckboxValue(row)}\n        aria-disabled={isDisabled}\n        onChange={(value, event) => {\n          if (isDisabled) {\n            event?.preventDefault();\n            return;\n          }\n          row.batchSelect(value, (event?.nativeEvent as MouseEvent).shiftKey);\n        }}\n        data-row-selection-checkbox\n        data-dt-name={rowDtName}\n      />\n    </DataTableDefaultCell>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type ChangeEvent,\n  type MouseEvent as ReactMouseEvent,\n  type JSX,\n  useEffect,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Checkbox } from '../../../../forms/checkbox/Checkbox.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { DataTableDefaultCell } from '../../components/DataTableDefaultCell.js';\nimport { type Row, Table } from '../../hooks/useTable/types.js';\nimport { dataTableMessages } from '../../messages.js';\n\n/**\n * DataTable row selection header.\n * @internal\n */\nexport function RowSelectionHeader(\n  props: Readonly<{\n    table: Table<unknown>;\n  }>,\n) {\n  const { table } = props;\n  const resetBatchSelection = table.resetBatchSelection;\n  const value = getCheckboxValue(table);\n  const isDisabled = isSelectAllDisabled(table);\n\n  const intl = useIntl();\n  const checkboxMessage = intl.formatMessage(\n    dataTableMessages.selectAllTooltip,\n    {\n      nextSelection:\n        value === false || value === 'indeterminate' ? 'select' : 'deselect',\n      scope: table.options.rowSelectionSelectAllMode,\n    },\n  );\n\n  useEffect(() => {\n    document.addEventListener('click', resetBatchSelection);\n    return () => {\n      document.removeEventListener('click', resetBatchSelection);\n    };\n  }, [resetBatchSelection]);\n\n  function toggleSelectAll(\n    event: ChangeEvent<HTMLInputElement> | undefined,\n  ): void {\n    if (isDisabled) {\n      event?.preventDefault();\n      return;\n    }\n    if (table.options.rowSelectionSelectAllMode === 'page') {\n      if (table.options.rowSelectionLimit !== undefined) {\n        table.getToggleAllLimitedPageRowsSelectedHandler()(event);\n      } else {\n        table.getToggleAllPageRowsSelectedHandler()(event);\n      }\n    } else if (table.options.rowSelectionSelectAllMode === 'all') {\n      if (table.options.rowSelectionLimit !== undefined) {\n        table.getToggleAllLimitedRowsSelectedHandler()(event);\n      } else {\n        table.getToggleAllRowsSelectedHandler()(event);\n      }\n    }\n  }\n\n  const selectAllDtProperties = `state:${\n    value === true ? 'deselect' : 'select'\n  }`;\n\n  const checkbox = (\n    <Checkbox\n      value={isDisabled ? false : value}\n      aria-disabled={isDisabled}\n      aria-label={checkboxMessage}\n      onChange={(_, event) => toggleSelectAll(event)}\n      data-dt-name=\"RowSelectDeselectAll\"\n      data-dt-properties={selectAllDtProperties}\n    />\n  );\n\n  return (\n    <DataTableDefaultCell>\n      {isDisabled ? (\n        checkbox\n      ) : (\n        <Tooltip text={checkboxMessage}>{checkbox}</Tooltip>\n      )}\n    </DataTableDefaultCell>\n  );\n}\n\n/**\n * @returns true, if the 'select all' checkbox shall be disabled, false otherwise.\n */\nfunction isSelectAllDisabled(table: Table<unknown>): boolean {\n  const isTableEmpty = table.getRowCount() === 0;\n  if (isTableEmpty) {\n    return true;\n  }\n  let isAllRowsSelectionDisabled = false;\n  if (table.options.rowSelectionSelectAllMode === 'page') {\n    isAllRowsSelectionDisabled = table.getIsAllPageRowsSelectionDisabled();\n  } else if (table.options.rowSelectionSelectAllMode === 'all') {\n    isAllRowsSelectionDisabled = table.getIsAllRowsSelectionDisabled();\n  }\n  return isAllRowsSelectionDisabled;\n}\n\n/**\n * @returns the current state of the 'select all' checkbox\n */\nfunction getCheckboxValue(table: Table<unknown>): boolean | 'indeterminate' {\n  if (table.options.rowSelectionSelectAllMode === 'page') {\n    if (table.getIsAllPageRowsSelected()) {\n      return true;\n    }\n    if (table.getIsSomePageRowsSelected()) {\n      return 'indeterminate';\n    }\n    return false;\n  }\n  if (table.options.rowSelectionSelectAllMode === 'all') {\n    if (table.getIsAllRowsSelected()) {\n      return true;\n    }\n    if (table.getIsSomeRowsSelected()) {\n      return 'indeterminate';\n    }\n    return false;\n  }\n  return false;\n}\n\nconst resolveCheckboxValue = (row: Row<unknown>): boolean | 'indeterminate' => {\n  if (row.subRows.length === 0) {\n    return row.getIsSelected();\n  }\n\n  if (row.getIsAllSubRowsSelected()) {\n    return true;\n  }\n\n  if (row.getIsSomeSelected()) {\n    return 'indeterminate';\n  }\n\n  return false;\n};\n\n/**\n * DataTable row selection cell.\n * @internal\n */\nexport function RowSelectionCell(\n  props: Readonly<{\n    row: Row<unknown>;\n  }>,\n): JSX.Element {\n  const { row } = props;\n  const intl = useIntl();\n\n  const isDisabled = row.getShouldDisableRowSelection();\n  const rowDtProperties = `state:${\n    resolveCheckboxValue(row) === true ? 'deselect' : 'select'\n  }`;\n\n  return (\n    <DataTableDefaultCell\n      onMouseDown={(event: ReactMouseEvent) => {\n        document.getSelection()?.removeAllRanges();\n        event.preventDefault();\n      }}\n    >\n      <Checkbox\n        aria-label={intl.formatMessage(dataTableMessages.selectRowCheckbox, {\n          id: row.id,\n        })}\n        value={resolveCheckboxValue(row)}\n        aria-disabled={isDisabled}\n        onChange={(value, event) => {\n          if (isDisabled) {\n            event?.preventDefault();\n            return;\n          }\n          row.batchSelect(value, (event?.nativeEvent as MouseEvent).shiftKey);\n        }}\n        data-row-selection-checkbox\n        data-dt-name=\"RowSelectDeselect\"\n        data-dt-properties={rowDtProperties}\n      />\n    </DataTableDefaultCell>\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/tables/DataTable/features/Sorting/Sorting.css

@@ -1,55 +1,129 @@
-._cu1al70-3-2-0 {
+._cu1al70-3-3-0 {
+  display: inline-flex;
+  align-items: center;
+  flex-direction: row;
+  flex-grow: 0;
+  min-width: var(--dt-spacings-size-28, 28px);
+  height: var(--dt-spacings-size-16, 16px);
+  background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
+  overflow: hidden;
+  transform: translateY(2px);
+}
+._yj6voi4-3-3-0 ._cu1al70-3-3-0 {
+  transform: translateY(0);
+}
+._yj6voi5-3-3-0 ._cu1al70-3-3-0 {
+  transform: translateY(-2px);
+}
+._yj6voi1-3-3-0 ._cu1al70-3-3-0, ._yj6voi2-3-3-0 ._cu1al70-3-3-0 {
+  margin-left: var(--dt-spacings-size-2, 2px);
+}
+._yj6voi0-3-3-0 ._cu1al70-3-3-0 {
+  order: -1;
+  flex-direction: row-reverse;
+  margin-right: var(--dt-spacings-size-2, 2px);
+}
+._11pvd3za-3-3-0 ._14k72810-3-3-0 ~ ._cu1al70-3-3-0 {
+  margin-top: var(--dt-spacings-size-8, 8px);
+  margin-bottom: var(--dt-spacings-size-8, 8px);
+}
+._11pvd3za-3-3-0:not(._yj6voi0-3-3-0, ._11pvd3z4-3-3-0:has([data-trigger="useraction"])) ._cu1al70-3-3-0 {
+  margin-right: var(--dt-spacings-size-12, 12px);
+}
+._11pvd3za-3-3-0:where(._yj6voi0-3-3-0):not(._11pvd3z4-3-3-0:has([data-trigger="useraction"])) ._cu1al70-3-3-0 {
+  margin-left: var(--dt-spacings-size-12, 12px);
+}
+._11pvd3zb-3-3-0 ._14k72810-3-3-0 ~ ._cu1al70-3-3-0 {
+  margin-top: var(--dt-spacings-size-2, 2px);
+  margin-bottom: var(--dt-spacings-size-2, 2px);
+}
+._11pvd3zb-3-3-0:not(._yj6voi0-3-3-0, ._11pvd3z4-3-3-0:has([data-trigger="useraction"])) ._cu1al70-3-3-0 {
+  margin-right: var(--dt-spacings-size-6, 6px);
+}
+._11pvd3zb-3-3-0:where(._yj6voi0-3-3-0):not(._11pvd3z4-3-3-0:has([data-trigger="useraction"])) ._cu1al70-3-3-0 {
+  margin-left: var(--dt-spacings-size-6, 6px);
+}
+._11pvd3zc-3-3-0 ._14k72810-3-3-0 ~ ._cu1al70-3-3-0 {
+  margin-top: var(--dt-spacings-size-12, 12px);
+  margin-bottom: var(--dt-spacings-size-12, 12px);
+}
+._11pvd3zc-3-3-0:not(._yj6voi0-3-3-0, ._11pvd3z4-3-3-0:has([data-trigger="useraction"])) ._cu1al70-3-3-0 {
+  margin-right: var(--dt-spacings-size-16, 16px);
+}
+._11pvd3zc-3-3-0:where(._yj6voi0-3-3-0):not(._11pvd3z4-3-3-0:has([data-trigger="useraction"])) ._cu1al70-3-3-0 {
+  margin-left: var(--dt-spacings-size-16, 16px);
+}
+._11pvd3z9-3-3-0._yj6voi0-3-3-0:not(._11pvd3zx-3-3-0) ._cu1al70-3-3-0 {
+  order: 1;
+}
+._cu1al71-3-3-0 {
+  transform: translateX(-4px);
+}
+._yj6voi0-3-3-0 ._cu1al71-3-3-0 {
+  transform: translateX(4px);
+}
+._cu1al72-3-3-0 {
   fill: currentColor;
   transition: transform 250ms ease-out;
   transform-origin: center;
   flex-shrink: 0;
   display: none;
 }
-._11pvd3z4-3-2-0 ._cu1al70-3-2-0 {
+._11pvd3z4-3-3-0 ._cu1al72-3-3-0 {
   display: inline;
 }
-._yj6voi0-3-2-0 ._cu1al70-3-2-0 {
+:where(._yj6voi1-3-3-0,._yj6voi2-3-3-0) > ._cu1al72-3-3-0 {
+  margin-left: var(--dt-spacings-size-2, 2px);
+}
+._yj6voi0-3-3-0 ._cu1al72-3-3-0 {
   order: -1;
 }
-._11pvd3z8-3-2-0._yj6voi0-3-2-0:not(._11pvd3zn-3-2-0) ._cu1al70-3-2-0 {
+._yj6voi0-3-3-0 > ._cu1al72-3-3-0 {
+  margin-right: var(--dt-spacings-size-2, 2px);
+}
+._11pvd3z9-3-3-0._yj6voi0-3-3-0:not(._11pvd3zx-3-3-0) ._cu1al72-3-3-0 {
   order: 1;
 }
-._cu1al71-3-2-0 {
+._11pvd3z9-3-3-0._yj6voi0-3-3-0:not(._11pvd3zx-3-3-0) ._cu1al70-3-3-0 ._cu1al72-3-3-0 {
+  order: -1;
+}
+._cu1al73-3-3-0 {
   transform: rotate(-180deg);
 }
-._11pvd3zn-3-2-0 ._14k72810-3-2-0 ~ ._cu1al72-3-2-0 {
+._11pvd3zx-3-3-0 ._14k72810-3-3-0 ~ ._cu1al74-3-3-0 {
   padding-top: var(--dt-spacings-size-8, 8px);
   padding-bottom: var(--dt-spacings-size-8, 8px);
 }
-._11pvd3zn-3-2-0:not(._yj6voi0-3-2-0) ._cu1al72-3-2-0:last-child {
+._11pvd3zx-3-3-0:where(._yj6voi1-3-3-0, ._yj6voi2-3-3-0):not(._11pvd3z4-3-3-0:has([data-trigger="useraction"])) > ._cu1al74-3-3-0 {
   padding-right: var(--dt-spacings-size-12, 12px);
   transform-origin: calc(50% - 6px) center;
 }
-._11pvd3zn-3-2-0:where(._yj6voi0-3-2-0) ._cu1al72-3-2-0:last-child {
+._11pvd3zx-3-3-0:where(._yj6voi0-3-3-0):not(._11pvd3z4-3-3-0:has([data-trigger="useraction"])) > ._cu1al74-3-3-0 {
   padding-left: var(--dt-spacings-size-12, 12px);
   transform-origin: calc(50% + 6px) center;
 }
-._11pvd3zn-3-2-0 ._14k72810-3-2-0 ~ ._cu1al73-3-2-0 {
+._11pvd3zx-3-3-0 ._14k72810-3-3-0 ~ ._cu1al75-3-3-0 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
 }
-._11pvd3zn-3-2-0:not(._yj6voi0-3-2-0) ._cu1al73-3-2-0:last-child {
+._11pvd3zx-3-3-0:where(._yj6voi1-3-3-0, ._yj6voi2-3-3-0):not(._11pvd3z4-3-3-0:has([data-trigger="useraction"])) > ._cu1al75-3-3-0 {
   padding-right: var(--dt-spacings-size-6, 6px);
   transform-origin: calc(50% - 3px) center;
 }
-._11pvd3zn-3-2-0:where(._yj6voi0-3-2-0) ._cu1al73-3-2-0:last-child {
+._11pvd3zx-3-3-0:where(._yj6voi0-3-3-0):not(._11pvd3z4-3-3-0:has([data-trigger="useraction"])) > ._cu1al75-3-3-0 {
   padding-left: var(--dt-spacings-size-6, 6px);
   transform-origin: calc(50% + 3px) center;
 }
-._11pvd3zn-3-2-0 ._14k72810-3-2-0 ~ ._cu1al74-3-2-0 {
+._11pvd3zx-3-3-0 ._14k72810-3-3-0 ~ ._cu1al76-3-3-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._11pvd3zn-3-2-0:not(._yj6voi0-3-2-0) ._cu1al74-3-2-0:last-child {
+._11pvd3zx-3-3-0:where(._yj6voi1-3-3-0, ._yj6voi2-3-3-0):not(._11pvd3z4-3-3-0:has([data-trigger="useraction"])) > ._cu1al76-3-3-0 {
   padding-right: var(--dt-spacings-size-16, 16px);
   transform-origin: calc(50% - 8px) center;
 }
-._11pvd3zn-3-2-0:where(._yj6voi0-3-2-0) ._cu1al74-3-2-0:last-child {
+._11pvd3zx-3-3-0:where(._yj6voi0-3-3-0):not(._11pvd3z4-3-3-0:has([data-trigger="useraction"])) > ._cu1al76-3-3-0 {
   padding-left: var(--dt-spacings-size-16, 16px);
   transform-origin: calc(50% + 8px) center;
 }

package/esm/tables/DataTable/features/Sorting/Sorting.js

@@ -6,7 +6,6 @@ import {
   stringlikeCompareCaseSensitive
 } from "./compare-functions.js";
 import { useControllableState } from "../../../../core/hooks/useControllableState.js";
-import { devLog } from "../../../../core/utils/logging.js";
 import { useDataTableConfigElement } from "../../../hooks/useDataTableConfig.js";
 import { isGroupColumnDef } from "../../hooks/useTable/datatable-typeguards.js";
 import { assignRowMethods } from "../../hooks/useTable/utils.js";
@@ -20,11 +19,6 @@ function useSorting(props, options) {
     defaultValue: props.defaultSortBy,
     onChange: props.onSortByChange
   });
-  if (sorting !== void 0 && sorting.length > 1) {
-    devLog(
-      "As for now, DataTable does not offer support for sorting columns by more than one criterion."
-    );
-  }
   const { sortable: sortableProp } = props;
   let sortable = false;
   if (sortableProp !== void 0) {
@@ -87,6 +81,22 @@ const Sorting = {
       }
       return (column.columnDef.enableSorting ?? true) && (table.options.enableSorting ?? false) && !!column.accessorFn;
     };
+    const originalToggleSorting = column.toggleSorting;
+    column.toggleSorting = (desc, isMulti) => {
+      if (!isMulti) {
+        const oldSorting = table.getState().sorting;
+        if (oldSorting && oldSorting.length > 1) {
+          const existingIndex = oldSorting.findIndex((s) => s.id === column.id);
+          if (existingIndex === oldSorting.length - 1) {
+            const nextSortingOrder = column.getNextSortingOrder();
+            const nextDesc = desc ?? nextSortingOrder === "desc";
+            table.setSorting([{ id: column.id, desc: nextDesc }]);
+            return;
+          }
+        }
+      }
+      originalToggleSorting(desc, isMulti);
+    };
   },
   createTable(table) {
     assignRowMethods(table, {