@dynatrace/strato-components 3.6.0 → 3.7.0

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

@@ -0,0 +1,94 @@
+import { jsx } from "react/jsx-runtime";
+import { useSortable } from "@dnd-kit/sortable";
+import {
+  createColumnHelper
+} from "@tanstack/react-table";
+import { clsx } from "clsx";
+import { useIntl } from "react-intl";
+import { DragAllDirectionIcon } from "@dynatrace/strato-icons";
+import * as styles from "./RowOrder.sty.js";
+import { Button } from "../../../../buttons/button/Button.js";
+import { useModality } from "../../../../core/hooks/useModality.js";
+import { focusRingStatic } from "../../../../core/styles/focusRingStatic.sty.js";
+import { DataTableDefaultCell } from "../../components/DataTableDefaultCell.js";
+import {
+  DATA_TABLE_BUILTIN_COLUMN_MIN_WIDTH,
+  DATA_TABLE_ROW_DRAG_COLUMN_ID
+} from "../../constants.js";
+import { dataTableMessages } from "../../messages.js";
+const rowOrderColumnHelper = createColumnHelper();
+const RowDragHandleCell = ({
+  rowId,
+  disabled,
+  isDraggingActive
+}) => {
+  const intl = useIntl();
+  const modality = useModality();
+  const { attributes, listeners } = useSortable({
+    id: rowId
+  });
+  const isKeyboardDragging = isDraggingActive && modality === "keyboard";
+  const rowDragHandleLabel = intl.formatMessage(
+    dataTableMessages.rowDragAndDropLabel,
+    { rowId }
+  );
+  return /* @__PURE__ */ jsx(DataTableDefaultCell, { children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "condensed",
+      variant: "default",
+      ...attributes,
+      ...disabled ? void 0 : listeners,
+      "aria-disabled": disabled,
+      "aria-label": rowDragHandleLabel,
+      className: clsx(
+        styles.dndHandle({
+          disabled
+        }),
+        // Apply the focus ring unconditionally (when: 'always')
+        // to the dragged row's handle during keyboard dragging.
+        isKeyboardDragging && focusRingStatic({
+          minimal: false,
+          color: "neutral",
+          when: "always"
+        })
+      ),
+      "data-dt-name": "RowOrderDragAndDrop",
+      children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(DragAllDirectionIcon, {}) })
+    }
+  ) });
+};
+const ROW_DRAG_COLUMN = rowOrderColumnHelper.accessor(() => "", {
+  id: DATA_TABLE_ROW_DRAG_COLUMN_ID,
+  alignment: "center",
+  header: () => {
+    return "";
+  },
+  width: "content",
+  minWidth: DATA_TABLE_BUILTIN_COLUMN_MIN_WIDTH,
+  enableSorting: false,
+  enableResizing: false,
+  enableUserActions: false,
+  enableHiding: false,
+  meta: {
+    builtin: true,
+    hasCustomCellRenderer: true,
+    hasCustomHeaderRenderer: true,
+    builtinPlacement: "prefix",
+    cellDeps: (cell) => {
+      return [cell.row.getCanDrag()];
+    }
+  },
+  cell: ({ row, table }) => /* @__PURE__ */ jsx(
+    RowDragHandleCell,
+    {
+      rowId: row.id,
+      disabled: !row.getCanDrag(),
+      isDraggingActive: table.atoms.draggingRowInfo?.get()?.id === row.id
+    }
+  )
+});
+export {
+  ROW_DRAG_COLUMN
+};
+//# sourceMappingURL=RowOrderColumnDef.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/tables/DataTable/features/RowOrder/RowOrderColumnDef.tsx"],
+  "sourcesContent": ["import { useSortable } from '@dnd-kit/sortable';\nimport {\n  createColumnHelper,\n  type AccessorFnColumnDef,\n  type RowData,\n} from '@tanstack/react-table';\nimport { clsx } from 'clsx';\nimport { type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DragAllDirectionIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './RowOrder.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useModality } from '../../../../core/hooks/useModality.js';\nimport { focusRingStatic } from '../../../../core/styles/focusRingStatic.sty.js';\nimport { DataTableDefaultCell } from '../../components/DataTableDefaultCell.js';\nimport {\n  DATA_TABLE_BUILTIN_COLUMN_MIN_WIDTH,\n  DATA_TABLE_ROW_DRAG_COLUMN_ID,\n} from '../../constants.js';\nimport { dataTableMessages } from '../../messages.js';\nimport type { TDataTableFeatures } from '../types/features.types.js';\n\nconst rowOrderColumnHelper = createColumnHelper<TDataTableFeatures, RowData>();\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 = useModality();\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 ? undefined : listeners)}\n        aria-disabled={disabled}\n        aria-label={rowDragHandleLabel}\n        className={clsx(\n          styles.dndHandle({\n            disabled,\n          }),\n          // Apply the focus ring unconditionally (when: 'always')\n          // to the dragged row's handle during keyboard dragging.\n          isKeyboardDragging &&\n            focusRingStatic({\n              minimal: false,\n              color: 'neutral',\n              when: 'always',\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: AccessorFnColumnDef<\n  TDataTableFeatures,\n  RowData,\n  string\n> = rowOrderColumnHelper.accessor(() => '', {\n  id: DATA_TABLE_ROW_DRAG_COLUMN_ID,\n  alignment: 'center',\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: (cell) => {\n      return [cell.row.getCanDrag()];\n    },\n  },\n  cell: ({ row, table }) => (\n    <RowDragHandleCell\n      rowId={row.id}\n      disabled={!row.getCanDrag()}\n      isDraggingActive={table.atoms.draggingRowInfo?.get()?.id === row.id}\n    />\n  ),\n});\n"],
+  "mappings": "AAwEU;AAxEV,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,OAGK;AACP,SAAS,YAAY;AAErB,SAAS,eAAe;AAExB,SAAS,4BAA4B;AAErC,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAGlC,MAAM,uBAAuB,mBAAgD;AAE7E,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,MAImB;AACjB,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,YAAY;AAC7B,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,WAAW,SAAY;AAAA,MAC5B,iBAAe;AAAA,MACf,cAAY;AAAA,MACZ,WAAW;AAAA,QACT,OAAO,UAAU;AAAA,UACf;AAAA,QACF,CAAC;AAAA;AAAA;AAAA,QAGD,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,kBAIT,qBAAqB,SAAS,MAAM,IAAI;AAAA,EAC1C,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,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,CAAC,SAAS;AAClB,aAAO,CAAC,KAAK,IAAI,WAAW,CAAC;AAAA,IAC/B;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,MAAM,iBAAiB,IAAI,GAAG,OAAO,IAAI;AAAA;AAAA,EACnE;AAEJ,CAAC;",
+  "names": []
+}

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

@@ -0,0 +1,291 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  DndContext as DragAndDropContext,
+  DragOverlay,
+  KeyboardSensor,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import { clsx } from "clsx";
+import {
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { useModality } from "../../../../../core/hooks/useModality.js";
+import { getProperInertValue } from "../../../../../core/utils/get-inert-value.js";
+import { devLog } from "../../../../../core/utils/logging.js";
+import { Grid } from "../../../../../layouts/grid/Grid.js";
+import { DataTableRow } from "../../../components/DataTableRow.js";
+import { DATA_TABLE_ROW_HEIGHT_MAP } from "../../../constants.js";
+import { useDataTable } from "../../../contexts/DataTableContext.js";
+import { RowDetailsElement } from "../../RowDetails/components/RowDetailsElement.js";
+import * as thresholdStyles from "../../Thresholds/Thresholds.sty.js";
+import {
+  createRestrictToTableRowAreaModifier,
+  createRowOrderCollisionDetection,
+  getAllRowsInTableBody,
+  getDragHandleForRow,
+  getDragIndexes,
+  resetAllStylesForRows,
+  transformRowOnDragOver
+} from "../row-order-utils.js";
+import * as styles from "../RowOrder.sty.js";
+const SCROLL_JUMP_THRESHOLD = DATA_TABLE_ROW_HEIGHT_MAP.default * 10;
+function createDraggingElement(overlayContainer, active, rows, virtualColumns, rowConfig) {
+  const activeId = active.id;
+  const draggingOriginalRow = active.data.current?.row;
+  const draggingVirtualRow = active.data.current?.virtualRow;
+  const {
+    gridTemplateColumns,
+    rowSeparation,
+    hasThresholds,
+    rowThresholds,
+    rowDetailsTemplate
+  } = rowConfig;
+  if (draggingOriginalRow === void 0 || draggingVirtualRow === void 0) {
+    devLog(
+      `[DataTable] Dragging row or virtual row with row id ${activeId} is undefined.`
+    );
+    return;
+  }
+  const isRowDetailsOpen = draggingOriginalRow.getIsDetailsOpen();
+  const draggingVirtualDetailsRow = {
+    ...draggingVirtualRow,
+    index: draggingVirtualRow.index + 1
+  };
+  return /* @__PURE__ */ jsxs(
+    Grid,
+    {
+      ref: overlayContainer,
+      gridTemplateColumns,
+      padding: 0,
+      minWidth: "max-content",
+      gap: 0,
+      ...{ inert: getProperInertValue(true) },
+      className: clsx({
+        [thresholdStyles.hasPillThresholds]: hasThresholds && rowThresholds?.some((threshold) => threshold.type === "pill")
+      }),
+      style: {
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          DataTableRow,
+          {
+            row: draggingOriginalRow,
+            virtualRow: draggingVirtualRow,
+            virtualItemIndex: 0,
+            rowCount: rows.length,
+            virtualColumns,
+            isDraggedRow: false,
+            isInDragOverlay: true,
+            rowParity: "even"
+          }
+        ),
+        isRowDetailsOpen ? /* @__PURE__ */ jsx(
+          RowDetailsElement,
+          {
+            originalRow: draggingOriginalRow,
+            virtualRow: draggingVirtualDetailsRow,
+            virtualItemIndex: 1,
+            rowSeparation,
+            rowParity: "even",
+            children: rowDetailsTemplate?.({
+              row: draggingOriginalRow.original
+            })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function RowOrderingDragAndDropContext({
+  children,
+  rows,
+  virtualColumns,
+  rowSeparation
+}) {
+  const table = useDataTable();
+  const modality = useModality();
+  const tableHeaderHeight = table.getTotalHeaderHeight();
+  const sensors = useSensors(
+    useSensor(MouseSensor, {}),
+    useSensor(TouchSensor, {}),
+    useSensor(KeyboardSensor, {})
+  );
+  const [draggingElement, setDraggingElement] = useState(
+    void 0
+  );
+  const containedVariant = table.atoms.visualVariantConfig?.get().contained;
+  const virtualizationContainer = table.getRowVirtualizationContainer();
+  const draggingRowInfo = table.atoms.draggingRowInfo?.get();
+  const tableGridElement = virtualizationContainer?.querySelector("[role=grid]");
+  const overlayContainer = useRef(null);
+  const scrollHandlerRef = useRef(null);
+  const rowOrderCollisionDetection = useMemo(
+    () => createRowOrderCollisionDetection(draggingRowInfo),
+    [draggingRowInfo]
+  );
+  const restrictToTableRowArea = useMemo(
+    () => createRestrictToTableRowAreaModifier(
+      tableHeaderHeight,
+      containedVariant,
+      virtualizationContainer
+    ),
+    [tableHeaderHeight, virtualizationContainer, containedVariant]
+  );
+  const rowOrderWhileDragging = useRef([]);
+  if (!tableGridElement || !virtualizationContainer) {
+    return;
+  }
+  const overlayWidth = tableGridElement.parentElement?.clientWidth ?? 0;
+  const originalRowOrder = table.atoms.rowOrder?.get() ?? rows.map((row) => row.id);
+  const resetDragging = () => {
+    if (virtualizationContainer && scrollHandlerRef.current) {
+      virtualizationContainer.removeEventListener(
+        "scroll",
+        scrollHandlerRef.current
+      );
+      scrollHandlerRef.current = null;
+    }
+    table.setDraggingRowInfo(null);
+    setDraggingElement(void 0);
+    resetAllStylesForRows(getAllRowsInTableBody(tableGridElement));
+  };
+  const handleOnDragStart = ({ active }) => {
+    if (active.data.current) {
+      const element = createDraggingElement(
+        overlayContainer,
+        active,
+        rows,
+        virtualColumns,
+        {
+          width: overlayWidth,
+          gridTemplateColumns: table.getGridTemplateColumns(),
+          rowSeparation,
+          hasThresholds: table.options.hasThresholds,
+          rowThresholds: table.options.rowThresholds,
+          rowDetailsTemplate: table.options.rowDetailsTemplate
+        }
+      );
+      setDraggingElement(element);
+      requestAnimationFrame(() => {
+        if (overlayContainer.current?.parentElement) {
+          overlayContainer.current.parentElement.scrollLeft = tableGridElement?.parentElement?.scrollLeft ?? 0;
+        }
+      });
+      table.setDraggingRowInfo({
+        id: active.id,
+        index: active.data.current.rowIndex,
+        row: active.data.current.row
+      });
+      rowOrderWhileDragging.current = originalRowOrder ? [...originalRowOrder] : [];
+      let lastScrollOffset = virtualizationContainer?.scrollTop ?? 0;
+      const handleScroll = () => {
+        if (!virtualizationContainer) {
+          return;
+        }
+        const currentOffset = virtualizationContainer.scrollTop;
+        const scrollDelta = Math.abs(currentOffset - lastScrollOffset);
+        if (scrollDelta >= SCROLL_JUMP_THRESHOLD) {
+          virtualizationContainer.scrollTop = lastScrollOffset;
+          return;
+        }
+        lastScrollOffset = currentOffset;
+      };
+      scrollHandlerRef.current = handleScroll;
+      virtualizationContainer?.addEventListener("scroll", handleScroll);
+    }
+  };
+  const handleOnDragEnd = ({
+    active,
+    over
+  }) => {
+    if (over === void 0 || over === null) {
+      devLog("[Table] On drag end: over info is undefined or null", over);
+      resetDragging();
+      return;
+    }
+    if (draggingRowInfo === null) {
+      devLog(
+        "[Table] On drag end: dragging row info is undefined",
+        draggingRowInfo
+      );
+      resetDragging();
+      return;
+    }
+    if (over.id === active.id) {
+      resetDragging();
+      return;
+    }
+    const { fromIndex, toIndex } = getDragIndexes(
+      originalRowOrder,
+      active.id,
+      // for us the IDs are always strings
+      over.id
+      // for us the IDs are always strings
+    );
+    const newRowOrder = [...originalRowOrder];
+    const activeRowSubRowsCount = draggingRowInfo.row.getLeafRows().length;
+    const overRowSubRowsCount = (over.data.current?.row).getLeafRows().length;
+    const rowsToMove = newRowOrder.splice(fromIndex, 1 + activeRowSubRowsCount);
+    newRowOrder.splice(
+      fromIndex < toIndex ? toIndex + overRowSubRowsCount - activeRowSubRowsCount : toIndex,
+      0,
+      ...rowsToMove
+    );
+    table.setRowOrder(newRowOrder);
+    resetDragging();
+    virtualizationContainer?.scrollBy({ top: 1, behavior: "smooth" });
+    virtualizationContainer?.scrollBy({ top: -1, behavior: "smooth" });
+    requestAnimationFrame(() => {
+      const dragHandle = getDragHandleForRow(tableGridElement, toIndex);
+      dragHandle?.focus(
+        modality !== "keyboard" ? { focusVisible: false } : void 0
+      );
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    DragAndDropContext,
+    {
+      sensors,
+      collisionDetection: rowOrderCollisionDetection,
+      modifiers: [restrictToTableRowArea],
+      onDragStart: handleOnDragStart,
+      onDragEnd: handleOnDragEnd,
+      onDragOver: (event) => transformRowOnDragOver(
+        tableGridElement,
+        event,
+        originalRowOrder,
+        table.atoms.visualVariantConfig?.get().rowSeparation === "none",
+        draggingRowInfo?.row
+      ),
+      onDragCancel: () => resetDragging(),
+      children: [
+        children,
+        // We need to portal the drag and drop overlay to escape CSS transforms on ancestor elements.
+        // This ensures transforms on parent containers don't affect the position of the drag overlay.
+        createPortal(
+          /* @__PURE__ */ jsx(
+            DragOverlay,
+            {
+              dropAnimation: null,
+              className: styles.rowDndOverlay,
+              style: { width: overlayWidth, height: "max-content" },
+              children: draggingElement
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
+export {
+  RowOrderingDragAndDropContext
+};
+//# sourceMappingURL=RowOrderingDragAndDropContext.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/tables/DataTable/features/RowOrder/components/RowOrderingDragAndDropContext.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 {\n  type Row,\n  type RowData,\n  type TableFeatures,\n  CoreFeatures,\n} from '@tanstack/react-table';\nimport { type VirtualItem } from '@tanstack/react-virtual';\nimport { clsx } from 'clsx';\nimport {\n  useMemo,\n  useRef,\n  useState,\n  type JSX,\n  type MutableRefObject,\n  type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useModality } from '../../../../../core/hooks/useModality.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 { DataTableRow } from '../../../components/DataTableRow.js';\nimport { DATA_TABLE_ROW_HEIGHT_MAP } from '../../../constants.js';\nimport { useDataTable } from '../../../contexts/DataTableContext.js';\nimport { RowDetailsElement } from '../../RowDetails/components/RowDetailsElement.js';\nimport type { DataTableRowDetailsFeature } from '../../RowDetails/RowDetails.js';\nimport type { DataTableThresholdsNormalizedRule } from '../../Thresholds/threshold-types.js';\nimport * as thresholdStyles from '../../Thresholds/Thresholds.sty.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';\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 * 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<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  overlayContainer: MutableRefObject<HTMLDivElement | null>,\n  active: Active,\n  rows: Row<TFeatures, TData>[],\n  virtualColumns: VirtualItem[],\n  rowConfig: {\n    width: number;\n    gridTemplateColumns: string;\n    rowSeparation: 'none' | 'horizontalDividers' | 'zebraStripes';\n    hasThresholds?: boolean;\n    rowThresholds?: DataTableThresholdsNormalizedRule<TData>[];\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<\n    { DataTableRowDetailsFeature: typeof DataTableRowDetailsFeature },\n    TData\n  >;\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 as Row<TableFeatures, RowData>}\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\n/**\n * @internal\n */\nexport function RowOrderingDragAndDropContext<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>({\n  children,\n  rows,\n  virtualColumns,\n  rowSeparation,\n}: Readonly<{\n  children: ReactNode;\n  rows: Row<TFeatures, TData>[];\n  virtualColumns: VirtualItem[];\n  rowSeparation: 'none' | 'horizontalDividers' | 'zebraStripes';\n}>): JSX.Element | undefined {\n  const table = useDataTable();\n  const modality = useModality();\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.atoms.visualVariantConfig?.get().contained;\n  const virtualizationContainer = table.getRowVirtualizationContainer();\n  const draggingRowInfo = table.atoms.draggingRowInfo?.get();\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.atoms.rowOrder?.get() ?? 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(null);\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<TFeatures, 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 === null) {\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<CoreFeatures, TData>\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    // Always move focus to the dropped row's drag handle so the user can\n    // continue navigating from the new position (e.g. via Tab).\n    // For mouse/touch we pass `focusVisible: false` to suppress the focus ring.\n    requestAnimationFrame(() => {\n      const dragHandle = getDragHandleForRow(tableGridElement, toIndex);\n      dragHandle?.focus(\n        modality !== 'keyboard' ? { focusVisible: false } : undefined,\n      );\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.atoms.visualVariantConfig?.get().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"],
+  "mappings": "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",
+  "names": []
+}

package/esm/tables/DataTable/features/RowOrder/row-order-column-utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/RowOrder/row-order-column-utils.ts"],
-  "sourcesContent": ["import { DATA_TABLE_ROW_DRAG_COLUMN_ID } from '../../constants.js';\nimport type { ColumnDef } from '../../hooks/useTable/types.js';\n\n/**\n * Helper function to identify the row drag column.\n * @internal\n */\nexport function isRowDragColumnDef<TData>(column: ColumnDef<TData>): boolean {\n  return column.id === DATA_TABLE_ROW_DRAG_COLUMN_ID;\n}\n"],
-  "mappings": "AAAA,SAAS,qCAAqC;AAOvC,SAAS,mBAA0B,QAAmC;AAC3E,SAAO,OAAO,OAAO;AACvB;",
+  "sourcesContent": ["import type {\n  CellData,\n  ColumnDef,\n  RowData,\n  TableFeatures,\n} from '@tanstack/react-table';\n\nimport { DATA_TABLE_ROW_DRAG_COLUMN_ID } from '../../constants.js';\n\n/**\n * Helper function to identify the row drag column.\n * @internal\n */\nexport function isRowDragColumnDef<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>(column: ColumnDef<TFeatures, TData, TValue>): boolean {\n  return column.id === DATA_TABLE_ROW_DRAG_COLUMN_ID;\n}\n"],
+  "mappings": "AAOA,SAAS,qCAAqC;AAMvC,SAAS,mBAId,QAAsD;AACtD,SAAO,OAAO,OAAO;AACvB;",
   "names": []
 }

package/esm/tables/DataTable/features/RowOrder/row-order-model.js

@@ -1,52 +1,54 @@
-import { isDev } from "../../../../core/utils/is-node-environment.js";
+import {
+  tableMemo
+} from "@tanstack/react-table";
 import { DATA_TABLE_ROW_EXPANDED_ID_SUFFIX } from "../../constants.js";
-import { memo } from "../../tanstack-table-core-override/src/index.js";
-function getRowOrderRowModel() {
-  return (table) => {
-    return memo(
-      () => [
+function createRowOrderRowModel() {
+  return (_table) => {
+    const table = _table;
+    return tableMemo({
+      feature: "DataTableRowOrderFeature",
+      table,
+      fnName: "table.getRowOrderRowModel",
+      memoDeps: () => [
         table.getPreRowOrderRowModel(),
         table.options.enableRowOrdering,
-        table.getState().rowOrder,
-        table.options.state.sorting
+        table.atoms.rowOrder?.get(),
+        table.atoms.sorting?.get()
       ],
-      (rowModel) => {
-        const rowOrder = table.getState().rowOrder;
-        if (table.options.enableRowOrdering !== true || table.options.state.sorting && table.options.state.sorting.length !== 0) {
-          return rowModel;
-        }
-        const { flatRows, rows, rowsById } = rowModel;
-        if (rowOrder === void 0) {
-          table.setRowOrder(flatRows.map((row) => row.id));
-          return rowModel;
-        }
-        const orderRows = (rows2) => {
-          const orderedData = [...rows2];
-          orderedData.sort(
-            (rowA, rowB) => rowOrderCompareFn(rowOrder, rowA, rowB)
-          );
-          orderedData.forEach((row) => {
-            if (row.subRows?.length) {
-              row.subRows = orderRows(row.subRows);
-            }
-          });
-          return orderedData;
-        };
-        const newRowsById = Object.keys(rowsById).sort((a, b) => rowOrderCompareStrFn(rowOrder, a, b)).reduce((obj, key) => {
-          obj[key] = rowsById[key];
-          return obj;
-        }, {});
-        return {
-          flatRows: orderRows(flatRows),
-          rows: orderRows(rows),
-          rowsById: newRowsById
-        };
-      },
-      {
-        key: isDev() && "_getRowOrderRowModel",
-        debug: () => table.options.debugAll ?? table.options.debugRows
+      fn: (preRowModel) => _createRowOrderRowModel(table)
+    });
+  };
+}
+function _createRowOrderRowModel(table) {
+  const preRowOrderRowModel = table.getPreRowOrderRowModel();
+  const rowOrder = table.atoms.rowOrder?.get();
+  const storingState = table.atoms.sorting?.get();
+  if (table.options.enableRowOrdering !== true || storingState && storingState.length !== 0) {
+    return preRowOrderRowModel;
+  }
+  const { flatRows, rows, rowsById } = preRowOrderRowModel;
+  if (rowOrder === void 0) {
+    table.setRowOrder(flatRows.map((row) => row.id));
+    return preRowOrderRowModel;
+  }
+  const orderRows = (rows2) => {
+    const orderedData = [...rows2];
+    orderedData.sort((rowA, rowB) => rowOrderCompareFn(rowOrder, rowA, rowB));
+    orderedData.forEach((row) => {
+      if (row.subRows?.length) {
+        row.subRows = orderRows(row.subRows);
       }
-    );
+    });
+    return orderedData;
+  };
+  const newRowsById = Object.keys(rowsById).sort((a, b) => rowOrderCompareStrFn(rowOrder, a, b)).reduce((obj, key) => {
+    obj[key] = rowsById[key];
+    return obj;
+  }, {});
+  return {
+    flatRows: orderRows(flatRows),
+    rows: orderRows(rows),
+    rowsById: newRowsById
   };
 }
 function rowOrderCompareFn(rowOrder, a, b) {
@@ -72,6 +74,6 @@ function rowOrderCompareStrFn(rowOrder, a, b) {
   return indexA - indexB;
 }
 export {
-  getRowOrderRowModel
+  createRowOrderRowModel
 };
 //# sourceMappingURL=row-order-model.js.map

package/esm/tables/DataTable/features/RowOrder/row-order-model.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/RowOrder/row-order-model.ts"],
-  "sourcesContent": ["import { isDev } from '../../../../core/utils/is-node-environment.js';\nimport { DATA_TABLE_ROW_EXPANDED_ID_SUFFIX } from '../../constants.js';\nimport type { Row, RowModel, Table } from '../../hooks/useTable/types.js';\nimport type { DataTableRowData } from '../../public.api.js';\nimport { memo } from '../../tanstack-table-core-override/src/index.js';\n\n/**\n * Row model which reflects the order given by the rowOrder set.\n * @returns new row model reflecting the order.\n * @internal\n */\nexport function getRowOrderRowModel<TData extends DataTableRowData>(): (\n  table: Table<TData>,\n) => () => RowModel<TData> {\n  return (table) => {\n    return memo(\n      () => [\n        table.getPreRowOrderRowModel(),\n        table.options.enableRowOrdering,\n        table.getState().rowOrder,\n        table.options.state.sorting,\n      ],\n      (rowModel) => {\n        const rowOrder = table.getState().rowOrder;\n        // only order if rowOrder is enabled and we are not currently sorting\n        if (\n          table.options.enableRowOrdering !== true ||\n          (table.options.state.sorting &&\n            table.options.state.sorting.length !== 0)\n        ) {\n          return rowModel;\n        }\n\n        const { flatRows, rows, rowsById } = rowModel;\n\n        if (rowOrder === undefined) {\n          table.setRowOrder(flatRows.map((row) => row.id));\n          return rowModel;\n        }\n\n        const orderRows = (rows: Row<TData>[]) => {\n          const orderedData = [...rows];\n\n          orderedData.sort((rowA, rowB) =>\n            rowOrderCompareFn(rowOrder, rowA, rowB),\n          );\n\n          // If there are sub-rows, also order them\n          orderedData.forEach((row) => {\n            if (row.subRows?.length) {\n              row.subRows = orderRows(row.subRows);\n            }\n          });\n\n          return orderedData;\n        };\n\n        const newRowsById = Object.keys(rowsById)\n          .sort((a, b) => rowOrderCompareStrFn(rowOrder, a, b))\n          .reduce((obj: Record<string, Row<TData>>, key: string) => {\n            obj[key] = rowsById[key];\n            return obj;\n          }, {});\n\n        return {\n          flatRows: orderRows(flatRows),\n          rows: orderRows(rows),\n          rowsById: newRowsById,\n        };\n      },\n      {\n        key: isDev() && '_getRowOrderRowModel',\n        debug: () => table.options.debugAll ?? table.options.debugRows,\n      },\n    );\n  };\n}\n\n/**\n * Compares when a and b are objects.\n * @param rowOrder - set of ids.\n * @param a - object containing id 1\n * @param b - object containing id 2\n * @returns negative, zero or positive value as required for sort function.\n */\nfunction rowOrderCompareFn(\n  rowOrder: string[],\n  a: { id: string },\n  b: { id: string },\n): number {\n  let indexA = rowOrder.indexOf(a.id);\n  if (indexA === -1) {\n    indexA = rowOrder.indexOf(`${a.id}${DATA_TABLE_ROW_EXPANDED_ID_SUFFIX}`);\n  }\n\n  let indexB = rowOrder.indexOf(b.id);\n  if (indexA === -1) {\n    indexB = rowOrder.indexOf(`${b.id}${DATA_TABLE_ROW_EXPANDED_ID_SUFFIX}`);\n  }\n  return indexA - indexB;\n}\n\n/**\n * Compares when a and b are strings.\n * @param rowOrder - set of ids.\n * @param a - id 1\n * @param b - id 2\n * @returns negative, zero or positive value as required for sort function.\n */\nfunction rowOrderCompareStrFn(\n  rowOrder: string[],\n  a: string,\n  b: string,\n): number {\n  let indexA = rowOrder.indexOf(a);\n  if (indexA === -1) {\n    indexA = rowOrder.indexOf(`${a}${DATA_TABLE_ROW_EXPANDED_ID_SUFFIX}`);\n  }\n\n  let indexB = rowOrder.indexOf(b);\n  if (indexA === -1) {\n    indexB = rowOrder.indexOf(`${b}${DATA_TABLE_ROW_EXPANDED_ID_SUFFIX}`);\n  }\n  return indexA - indexB;\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,yCAAyC;AAGlD,SAAS,YAAY;AAOd,SAAS,sBAEW;AACzB,SAAO,CAAC,UAAU;AAChB,WAAO;AAAA,MACL,MAAM;AAAA,QACJ,MAAM,uBAAuB;AAAA,QAC7B,MAAM,QAAQ;AAAA,QACd,MAAM,SAAS,EAAE;AAAA,QACjB,MAAM,QAAQ,MAAM;AAAA,MACtB;AAAA,MACA,CAAC,aAAa;AACZ,cAAM,WAAW,MAAM,SAAS,EAAE;AAElC,YACE,MAAM,QAAQ,sBAAsB,QACnC,MAAM,QAAQ,MAAM,WACnB,MAAM,QAAQ,MAAM,QAAQ,WAAW,GACzC;AACA,iBAAO;AAAA,QACT;AAEA,cAAM,EAAE,UAAU,MAAM,SAAS,IAAI;AAErC,YAAI,aAAa,QAAW;AAC1B,gBAAM,YAAY,SAAS,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC;AAC/C,iBAAO;AAAA,QACT;AAEA,cAAM,YAAY,CAACA,UAAuB;AACxC,gBAAM,cAAc,CAAC,GAAGA,KAAI;AAE5B,sBAAY;AAAA,YAAK,CAAC,MAAM,SACtB,kBAAkB,UAAU,MAAM,IAAI;AAAA,UACxC;AAGA,sBAAY,QAAQ,CAAC,QAAQ;AAC3B,gBAAI,IAAI,SAAS,QAAQ;AACvB,kBAAI,UAAU,UAAU,IAAI,OAAO;AAAA,YACrC;AAAA,UACF,CAAC;AAED,iBAAO;AAAA,QACT;AAEA,cAAM,cAAc,OAAO,KAAK,QAAQ,EACrC,KAAK,CAAC,GAAG,MAAM,qBAAqB,UAAU,GAAG,CAAC,CAAC,EACnD,OAAO,CAAC,KAAiC,QAAgB;AACxD,cAAI,GAAG,IAAI,SAAS,GAAG;AACvB,iBAAO;AAAA,QACT,GAAG,CAAC,CAAC;AAEP,eAAO;AAAA,UACL,UAAU,UAAU,QAAQ;AAAA,UAC5B,MAAM,UAAU,IAAI;AAAA,UACpB,UAAU;AAAA,QACZ;AAAA,MACF;AAAA,MACA;AAAA,QACE,KAAK,MAAM,KAAK;AAAA,QAChB,OAAO,MAAM,MAAM,QAAQ,YAAY,MAAM,QAAQ;AAAA,MACvD;AAAA,IACF;AAAA,EACF;AACF;AASA,SAAS,kBACP,UACA,GACA,GACQ;AACR,MAAI,SAAS,SAAS,QAAQ,EAAE,EAAE;AAClC,MAAI,WAAW,IAAI;AACjB,aAAS,SAAS,QAAQ,GAAG,EAAE,EAAE,GAAG,iCAAiC,EAAE;AAAA,EACzE;AAEA,MAAI,SAAS,SAAS,QAAQ,EAAE,EAAE;AAClC,MAAI,WAAW,IAAI;AACjB,aAAS,SAAS,QAAQ,GAAG,EAAE,EAAE,GAAG,iCAAiC,EAAE;AAAA,EACzE;AACA,SAAO,SAAS;AAClB;AASA,SAAS,qBACP,UACA,GACA,GACQ;AACR,MAAI,SAAS,SAAS,QAAQ,CAAC;AAC/B,MAAI,WAAW,IAAI;AACjB,aAAS,SAAS,QAAQ,GAAG,CAAC,GAAG,iCAAiC,EAAE;AAAA,EACtE;AAEA,MAAI,SAAS,SAAS,QAAQ,CAAC;AAC/B,MAAI,WAAW,IAAI;AACjB,aAAS,SAAS,QAAQ,GAAG,CAAC,GAAG,iCAAiC,EAAE;AAAA,EACtE;AACA,SAAO,SAAS;AAClB;",
+  "sourcesContent": ["import {\n  tableMemo,\n  type Row,\n  type RowData,\n  type RowModel,\n  type Table,\n  type Table_Internal,\n  type TableFeatures,\n} from '@tanstack/react-table';\n\nimport { DATA_TABLE_ROW_EXPANDED_ID_SUFFIX } from '../../constants.js';\n\n/**\n * Row model which reflects the order given by the rowOrder set.\n * @returns new row model reflecting the order.\n * @internal\n */\nexport function createRowOrderRowModel<\n  TFeatures extends TableFeatures,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TData extends RowData = any,\n>(): (table: Table<TFeatures, TData>) => () => RowModel<TFeatures, TData> {\n  return (_table) => {\n    const table = _table as Table_Internal<TFeatures, TData>;\n    return tableMemo({\n      feature: 'DataTableRowOrderFeature',\n      table,\n      fnName: 'table.getRowOrderRowModel',\n      memoDeps: () => [\n        table.getPreRowOrderRowModel(),\n        table.options.enableRowOrdering,\n        table.atoms.rowOrder?.get(),\n        table.atoms.sorting?.get(),\n      ],\n      fn: (preRowModel) => _createRowOrderRowModel(table),\n    });\n  };\n}\n\nfunction _createRowOrderRowModel<\n  TFeatures extends TableFeatures,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TData extends RowData = any,\n>(table: Table_Internal<TFeatures, TData>) {\n  const preRowOrderRowModel = table.getPreRowOrderRowModel();\n  const rowOrder = table.atoms.rowOrder?.get();\n  const storingState = table.atoms.sorting?.get();\n\n  // only order if rowOrder is enabled and we are not currently sorting\n  if (\n    table.options.enableRowOrdering !== true ||\n    (storingState && storingState.length !== 0)\n  ) {\n    return preRowOrderRowModel;\n  }\n\n  const { flatRows, rows, rowsById } = preRowOrderRowModel;\n\n  if (rowOrder === undefined) {\n    table.setRowOrder(flatRows.map((row) => row.id));\n    return preRowOrderRowModel;\n  }\n\n  const orderRows = (rows: Row<TFeatures, TData>[]) => {\n    const orderedData = [...rows];\n\n    orderedData.sort((rowA, rowB) => rowOrderCompareFn(rowOrder, rowA, rowB));\n\n    // If there are sub-rows, also order them\n    orderedData.forEach((row) => {\n      if (row.subRows?.length) {\n        row.subRows = orderRows(row.subRows);\n      }\n    });\n\n    return orderedData;\n  };\n\n  const newRowsById = Object.keys(rowsById)\n    .sort((a, b) => rowOrderCompareStrFn(rowOrder, a, b))\n    .reduce((obj: Record<string, Row<TFeatures, TData>>, key: string) => {\n      obj[key] = rowsById[key];\n      return obj;\n    }, {});\n\n  return {\n    flatRows: orderRows(flatRows),\n    rows: orderRows(rows),\n    rowsById: newRowsById,\n  };\n}\n\n/**\n * Compares when a and b are objects.\n * @param rowOrder - set of ids.\n * @param a - object containing id 1\n * @param b - object containing id 2\n * @returns negative, zero or positive value as required for sort function.\n */\nfunction rowOrderCompareFn(\n  rowOrder: string[],\n  a: { id: string },\n  b: { id: string },\n): number {\n  let indexA = rowOrder.indexOf(a.id);\n  if (indexA === -1) {\n    indexA = rowOrder.indexOf(`${a.id}${DATA_TABLE_ROW_EXPANDED_ID_SUFFIX}`);\n  }\n\n  let indexB = rowOrder.indexOf(b.id);\n  if (indexA === -1) {\n    indexB = rowOrder.indexOf(`${b.id}${DATA_TABLE_ROW_EXPANDED_ID_SUFFIX}`);\n  }\n  return indexA - indexB;\n}\n\n/**\n * Compares when a and b are strings.\n * @param rowOrder - set of ids.\n * @param a - id 1\n * @param b - id 2\n * @returns negative, zero or positive value as required for sort function.\n */\nfunction rowOrderCompareStrFn(\n  rowOrder: string[],\n  a: string,\n  b: string,\n): number {\n  let indexA = rowOrder.indexOf(a);\n  if (indexA === -1) {\n    indexA = rowOrder.indexOf(`${a}${DATA_TABLE_ROW_EXPANDED_ID_SUFFIX}`);\n  }\n\n  let indexB = rowOrder.indexOf(b);\n  if (indexA === -1) {\n    indexB = rowOrder.indexOf(`${b}${DATA_TABLE_ROW_EXPANDED_ID_SUFFIX}`);\n  }\n  return indexA - indexB;\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,OAOK;AAEP,SAAS,yCAAyC;AAO3C,SAAS,yBAI0D;AACxE,SAAO,CAAC,WAAW;AACjB,UAAM,QAAQ;AACd,WAAO,UAAU;AAAA,MACf,SAAS;AAAA,MACT;AAAA,MACA,QAAQ;AAAA,MACR,UAAU,MAAM;AAAA,QACd,MAAM,uBAAuB;AAAA,QAC7B,MAAM,QAAQ;AAAA,QACd,MAAM,MAAM,UAAU,IAAI;AAAA,QAC1B,MAAM,MAAM,SAAS,IAAI;AAAA,MAC3B;AAAA,MACA,IAAI,CAAC,gBAAgB,wBAAwB,KAAK;AAAA,IACpD,CAAC;AAAA,EACH;AACF;AAEA,SAAS,wBAIP,OAAyC;AACzC,QAAM,sBAAsB,MAAM,uBAAuB;AACzD,QAAM,WAAW,MAAM,MAAM,UAAU,IAAI;AAC3C,QAAM,eAAe,MAAM,MAAM,SAAS,IAAI;AAG9C,MACE,MAAM,QAAQ,sBAAsB,QACnC,gBAAgB,aAAa,WAAW,GACzC;AACA,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,UAAU,MAAM,SAAS,IAAI;AAErC,MAAI,aAAa,QAAW;AAC1B,UAAM,YAAY,SAAS,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC;AAC/C,WAAO;AAAA,EACT;AAEA,QAAM,YAAY,CAACA,UAAkC;AACnD,UAAM,cAAc,CAAC,GAAGA,KAAI;AAE5B,gBAAY,KAAK,CAAC,MAAM,SAAS,kBAAkB,UAAU,MAAM,IAAI,CAAC;AAGxE,gBAAY,QAAQ,CAAC,QAAQ;AAC3B,UAAI,IAAI,SAAS,QAAQ;AACvB,YAAI,UAAU,UAAU,IAAI,OAAO;AAAA,MACrC;AAAA,IACF,CAAC;AAED,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,OAAO,KAAK,QAAQ,EACrC,KAAK,CAAC,GAAG,MAAM,qBAAqB,UAAU,GAAG,CAAC,CAAC,EACnD,OAAO,CAAC,KAA4C,QAAgB;AACnE,QAAI,GAAG,IAAI,SAAS,GAAG;AACvB,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AAEP,SAAO;AAAA,IACL,UAAU,UAAU,QAAQ;AAAA,IAC5B,MAAM,UAAU,IAAI;AAAA,IACpB,UAAU;AAAA,EACZ;AACF;AASA,SAAS,kBACP,UACA,GACA,GACQ;AACR,MAAI,SAAS,SAAS,QAAQ,EAAE,EAAE;AAClC,MAAI,WAAW,IAAI;AACjB,aAAS,SAAS,QAAQ,GAAG,EAAE,EAAE,GAAG,iCAAiC,EAAE;AAAA,EACzE;AAEA,MAAI,SAAS,SAAS,QAAQ,EAAE,EAAE;AAClC,MAAI,WAAW,IAAI;AACjB,aAAS,SAAS,QAAQ,GAAG,EAAE,EAAE,GAAG,iCAAiC,EAAE;AAAA,EACzE;AACA,SAAO,SAAS;AAClB;AASA,SAAS,qBACP,UACA,GACA,GACQ;AACR,MAAI,SAAS,SAAS,QAAQ,CAAC;AAC/B,MAAI,WAAW,IAAI;AACjB,aAAS,SAAS,QAAQ,GAAG,CAAC,GAAG,iCAAiC,EAAE;AAAA,EACtE;AAEA,MAAI,SAAS,SAAS,QAAQ,CAAC;AAC/B,MAAI,WAAW,IAAI;AACjB,aAAS,SAAS,QAAQ,GAAG,CAAC,GAAG,iCAAiC,EAAE;AAAA,EACtE;AACA,SAAO,SAAS;AAClB;",
   "names": ["rows"]
 }

package/esm/tables/DataTable/features/RowOrder/row-order-utils.js

@@ -179,9 +179,9 @@ function findLastDisabledRow(rows) {
   }
   return lastDisabledRowIndex;
 }
-const createRowOrderCollisionDetection = (draggingRowInfo) => {
+function createRowOrderCollisionDetection(draggingRowInfo) {
   return ({ active, droppableContainers, ...rest }) => {
-    if (draggingRowInfo === void 0) {
+    if (draggingRowInfo === null) {
       return [];
     }
     const activeRow = draggingRowInfo.row;
@@ -193,7 +193,7 @@ const createRowOrderCollisionDetection = (draggingRowInfo) => {
       const targetRowIndex = target.data.current?.rowIndex;
       const targetRowSubRowDepth = targetRow?.getSubRowDepth();
       const targetRowDisabled = !targetRow?.getCanDrag();
-      const targetRowLockedDisabled = targetRow?.disabledRowDragAndDropLockPosition;
+      const targetRowLockedDisabled = targetRow?.getDisabledRowDragAndDropLockPosition?.();
       const isSameDepthAndParent = targetRowSubRowDepth === activeRowSubRowDepth && activeRow.parentId === targetRow.parentId;
       if (activeRowIndex === targetRowIndex) {
         return true;
@@ -233,7 +233,7 @@ const createRowOrderCollisionDetection = (draggingRowInfo) => {
       ...rest
     });
   };
-};
+}
 function restrictToVerticalBounds(transform, rect, verticalBounds) {
   const value = {
     ...transform