@dynatrace/strato-components 3.8.0 → 3.9.0

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

@@ -1,4 +1,4 @@
-._2twyod0-3-8-0::before {
+._2twyod0-3-9-0::before {
   content: "";
   display: block;
   top: 0;
@@ -8,10 +8,10 @@
   width: 100%;
   z-index: 4;
 }
-._or8s40-3-8-0 ._2twyod0-3-8-0::before, ._2twyod0-3-8-0:not(:first-child)::before {
+._or8s40-3-9-0 ._2twyod0-3-9-0::before, ._2twyod0-3-9-0:not(:first-child)::before {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._2twyod1-3-8-0 {
+._2twyod1-3-9-0 {
   position: relative;
   box-sizing: border-box;
   border-bottom-width: 1px;
@@ -19,40 +19,40 @@
   border-bottom-color: transparent;
   overflow: hidden;
 }
-._2twyod1-3-8-0:not(:has(+ ._2twyod0-3-8-0)) {
+._2twyod1-3-9-0:not(:has(+ ._2twyod0-3-9-0)) {
   border-bottom-color: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._2twyod4-3-8-0:not(._or8s40-3-8-0 ._2twyod4-3-8-0) {
+._2twyod4-3-9-0:not(._or8s40-3-9-0 ._2twyod4-3-9-0) {
   opacity: 0;
 }
-._2twyod6-3-8-0 {
+._2twyod6-3-9-0 {
   border-top: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._2twyod7-3-8-0 {
+._2twyod7-3-9-0 {
   border-top: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._2twyod8-3-8-0 {
+._2twyod8-3-9-0 {
   border-bottom-width: 0;
 }
-._2twyod9-3-8-0 {
+._2twyod9-3-9-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._2twyoda-3-8-0 {
+._2twyoda-3-9-0 {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._2twyodc-3-8-0 {
+._2twyodc-3-9-0 {
   padding-top: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-8, 8px);
   padding-left: var(--dt-spacings-size-12, 12px);
 }
-._2twyodd-3-8-0 {
+._2twyodd-3-9-0 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-6, 6px);
 }
-._2twyode-3-8-0 {
+._2twyode-3-9-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-16, 16px);
   padding-bottom: var(--dt-spacings-size-12, 12px);

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

@@ -1,9 +1,9 @@
 import "../RowOrder/RowOrder.css";
 import "./RowDetails.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var rowDetailsExpandedRowCell = "_2twyod0-3-8-0";
-var rowDetailsRow = _7a468({ defaultClassName: "_2twyod1-3-8-0", variantClassNames: { rowParity: { even: "_2twyod2-3-8-0", odd: "_2twyod3-3-8-0" }, isDraggedRow: { true: "_2twyod4-3-8-0" }, rowSeparation: { none: "_2twyod5-3-8-0", horizontalDividers: "_2twyod6-3-8-0", zebraStripes: "_2twyod7-3-8-0" }, isLastRow: { true: "_2twyod8-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ rowSeparation: "zebraStripes", rowParity: "even" }, "_2twyod9-3-8-0"], [{ rowSeparation: "zebraStripes", rowParity: "odd" }, "_2twyoda-3-8-0"]] });
-var rowDetailsWrapperCSS = _7a468({ defaultClassName: "_2twyodb-3-8-0", variantClassNames: { rowDensity: { "default": "_2twyodc-3-8-0", condensed: "_2twyodd-3-8-0", comfortable: "_2twyode-3-8-0" } }, defaultVariants: { rowDensity: "default" }, compoundVariants: [] });
+var rowDetailsExpandedRowCell = "_2twyod0-3-9-0";
+var rowDetailsRow = _7a468({ defaultClassName: "_2twyod1-3-9-0", variantClassNames: { rowParity: { even: "_2twyod2-3-9-0", odd: "_2twyod3-3-9-0" }, isDraggedRow: { true: "_2twyod4-3-9-0" }, rowSeparation: { none: "_2twyod5-3-9-0", horizontalDividers: "_2twyod6-3-9-0", zebraStripes: "_2twyod7-3-9-0" }, isLastRow: { true: "_2twyod8-3-9-0" } }, defaultVariants: {}, compoundVariants: [[{ rowSeparation: "zebraStripes", rowParity: "even" }, "_2twyod9-3-9-0"], [{ rowSeparation: "zebraStripes", rowParity: "odd" }, "_2twyoda-3-9-0"]] });
+var rowDetailsWrapperCSS = _7a468({ defaultClassName: "_2twyodb-3-9-0", variantClassNames: { rowDensity: { "default": "_2twyodc-3-9-0", condensed: "_2twyodd-3-9-0", comfortable: "_2twyode-3-9-0" } }, defaultVariants: { rowDensity: "default" }, compoundVariants: [] });
 export {
   rowDetailsExpandedRowCell,
   rowDetailsRow,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/RowDetails/RowDetails.css.ts"],
-  "sourcesContent": ["import '../RowOrder/RowOrder.css';\nimport './RowDetails.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var rowDetailsExpandedRowCell = '_2twyod0-3-8-0';\nexport var rowDetailsRow = _7a468({defaultClassName:'_2twyod1-3-8-0',variantClassNames:{rowParity:{even:'_2twyod2-3-8-0',odd:'_2twyod3-3-8-0'},isDraggedRow:{true:'_2twyod4-3-8-0'},rowSeparation:{none:'_2twyod5-3-8-0',horizontalDividers:'_2twyod6-3-8-0',zebraStripes:'_2twyod7-3-8-0'},isLastRow:{true:'_2twyod8-3-8-0'}},defaultVariants:{},compoundVariants:[[{rowSeparation:'zebraStripes',rowParity:'even'},'_2twyod9-3-8-0'],[{rowSeparation:'zebraStripes',rowParity:'odd'},'_2twyoda-3-8-0']]});\nexport var rowDetailsWrapperCSS = _7a468({defaultClassName:'_2twyodb-3-8-0',variantClassNames:{rowDensity:{'default':'_2twyodc-3-8-0',condensed:'_2twyodd-3-8-0',comfortable:'_2twyode-3-8-0'}},defaultVariants:{rowDensity:'default'},compoundVariants:[]});"],
+  "sourcesContent": ["import '../RowOrder/RowOrder.css';\nimport './RowDetails.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var rowDetailsExpandedRowCell = '_2twyod0-3-9-0';\nexport var rowDetailsRow = _7a468({defaultClassName:'_2twyod1-3-9-0',variantClassNames:{rowParity:{even:'_2twyod2-3-9-0',odd:'_2twyod3-3-9-0'},isDraggedRow:{true:'_2twyod4-3-9-0'},rowSeparation:{none:'_2twyod5-3-9-0',horizontalDividers:'_2twyod6-3-9-0',zebraStripes:'_2twyod7-3-9-0'},isLastRow:{true:'_2twyod8-3-9-0'}},defaultVariants:{},compoundVariants:[[{rowSeparation:'zebraStripes',rowParity:'even'},'_2twyod9-3-9-0'],[{rowSeparation:'zebraStripes',rowParity:'odd'},'_2twyoda-3-9-0']]});\nexport var rowDetailsWrapperCSS = _7a468({defaultClassName:'_2twyodb-3-9-0',variantClassNames:{rowDensity:{'default':'_2twyodc-3-9-0',condensed:'_2twyodd-3-9-0',comfortable:'_2twyode-3-9-0'}},defaultVariants:{rowDensity:'default'},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,4BAA4B;AAChC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,WAAU,EAAC,MAAK,kBAAiB,KAAI,iBAAgB,GAAE,cAAa,EAAC,MAAK,iBAAgB,GAAE,eAAc,EAAC,MAAK,kBAAiB,oBAAmB,kBAAiB,cAAa,iBAAgB,GAAE,WAAU,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,eAAc,gBAAe,WAAU,OAAM,GAAE,gBAAgB,GAAE,CAAC,EAAC,eAAc,gBAAe,WAAU,MAAK,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACne,IAAI,uBAAuB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,YAAW,EAAC,WAAU,kBAAiB,WAAU,kBAAiB,aAAY,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,YAAW,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._15silbj0-3-8-0 {
+._15silbj0-3-9-0 {
   box-sizing: border-box;
   appearance: none;
   outline: 0;
@@ -7,7 +7,7 @@
   position: relative;
   cursor: pointer;
 }
-._15silbj0-3-8-0::after {
+._15silbj0-3-9-0::after {
   content: "";
   position: absolute;
   top: 0;
@@ -20,44 +20,44 @@
   pointer-events: none;
   z-index: 4;
 }
-._15silbj1-3-8-0::after {
+._15silbj1-3-9-0::after {
   border-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._15silbj1-3-8-0:hover {
+._15silbj1-3-9-0:hover {
   background-color: var(--dt-colors-background-container-primary-default, #f1f2f9);
 }
-._15silbj1-3-8-0:hover::after {
+._15silbj1-3-9-0:hover::after {
   border-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._15silbj3-3-8-0 {
+._15silbj3-3-9-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._15silbj3-3-8-0::after {
+._15silbj3-3-9-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-8-0 {
+._15silbj4-3-9-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._15silbj4-3-8-0::after {
+._15silbj4-3-9-0::after {
   border-color: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._ytdpswb-3-8-0 ._14sp6az6-3-8-0._15silbj5-3-8-0::after {
+._ytdpswb-3-9-0 ._14sp6az6-3-9-0._15silbj5-3-9-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-8-0 ._14sp6az6-3-8-0._15silbj5-3-8-0::after {
+._ytdpswd-3-9-0 ._14sp6az6-3-9-0._15silbj5-3-9-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-8-0 {
+._15silbj6-3-9-0 {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
-._15silbj7-3-8-0 {
+._15silbj7-3-9-0 {
   background-color: var(--dt-colors-background-container-primary-default, #f1f2f9);
 }
-._15silbj7-3-8-0::after {
+._15silbj7-3-9-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

@@ -3,7 +3,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-8-0", variantClassNames: { active: { true: "_15silbj1-3-8-0", false: "_15silbj2-3-8-0" }, focus: { true: "_15silbj3-3-8-0" }, hovered: { true: "_15silbj4-3-8-0" }, contained: { true: "_15silbj5-3-8-0", false: "_15silbj6-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ active: true, focus: true }, "_15silbj7-3-8-0"]] });
+var interactiveRow = _7a468({ defaultClassName: "_15silbj0-3-9-0", variantClassNames: { active: { true: "_15silbj1-3-9-0", false: "_15silbj2-3-9-0" }, focus: { true: "_15silbj3-3-9-0" }, hovered: { true: "_15silbj4-3-9-0" }, contained: { true: "_15silbj5-3-9-0", false: "_15silbj6-3-9-0" } }, defaultVariants: {}, compoundVariants: [[{ active: true, focus: true }, "_15silbj7-3-9-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 '../../../../core/components/app-root/AppRoot.css';\nimport '../../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-8-0',variantClassNames:{active:{true:'_15silbj1-3-8-0',false:'_15silbj2-3-8-0'},focus:{true:'_15silbj3-3-8-0'},hovered:{true:'_15silbj4-3-8-0'},contained:{true:'_15silbj5-3-8-0',false:'_15silbj6-3-8-0'}},defaultVariants:{},compoundVariants:[[{active:true,focus:true},'_15silbj7-3-8-0']]});"],
+  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport '../../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-9-0',variantClassNames:{active:{true:'_15silbj1-3-9-0',false:'_15silbj2-3-9-0'},focus:{true:'_15silbj3-3-9-0'},hovered:{true:'_15silbj4-3-9-0'},contained:{true:'_15silbj5-3-9-0',false:'_15silbj6-3-9-0'}},defaultVariants:{},compoundVariants:[[{active:true,focus:true},'_15silbj7-3-9-0']]});"],
   "mappings": "AAAA,OAAO;AACP,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-8-0 {
+._or8s40-3-9-0 {
   cursor: grabbing;
   box-shadow: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
   background-color: var(--dt-colors-background-surface-default, #fff);
   z-index: 4;
   overflow: hidden;
 }
-._or8s41-3-8-0 {
+._or8s41-3-9-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-8-0:active {
+._or8s41-3-9-0:active {
   background: transparent;
 }
-._or8s41-3-8-0:hover {
+._or8s41-3-9-0:hover {
   background: transparent;
 }
-._or8s40-3-8-0 ._or8s41-3-8-0 {
+._or8s40-3-9-0 ._or8s41-3-9-0 {
   cursor: grabbing;
 }
-._or8s42-3-8-0 {
+._or8s42-3-9-0 {
   cursor: not-allowed;
 }
-._or8s43-3-8-0 {
+._or8s43-3-9-0 {
   cursor: grab;
 }
-._or8s44-3-8-0 {
+._or8s44-3-9-0 {
   opacity: 0.2;
 }

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-8-0";
-var dndHandle = _7a468({ defaultClassName: "_or8s41-3-8-0", variantClassNames: { disabled: { true: "_or8s42-3-8-0", false: "_or8s43-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
-var rowDndOverlay = "_or8s40-3-8-0";
+var disabledNonTargetRow = "_or8s44-3-9-0";
+var dndHandle = _7a468({ defaultClassName: "_or8s41-3-9-0", variantClassNames: { disabled: { true: "_or8s42-3-9-0", false: "_or8s43-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
+var rowDndOverlay = "_or8s40-3-9-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-8-0';\nexport var dndHandle = _7a468({defaultClassName:'_or8s41-3-8-0',variantClassNames:{disabled:{true:'_or8s42-3-8-0',false:'_or8s43-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var rowDndOverlay = '_or8s40-3-8-0';"],
+  "sourcesContent": ["import './RowOrder.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabledNonTargetRow = '_or8s44-3-9-0';\nexport var dndHandle = _7a468({defaultClassName:'_or8s41-3-9-0',variantClassNames:{disabled:{true:'_or8s42-3-9-0',false:'_or8s43-3-9-0'}},defaultVariants:{},compoundVariants:[]});\nexport var rowDndOverlay = '_or8s40-3-9-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/RowOrder/RowOrderColumnDef.js

@@ -10,6 +10,7 @@ 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 { Tooltip } from "../../../../overlays/tooltip/Tooltip.js";
 import { DataTableDefaultCell } from "../../components/DataTableDefaultCell.js";
 import {
   DATA_TABLE_BUILTIN_COLUMN_MIN_WIDTH,
@@ -17,10 +18,24 @@ import {
 } from "../../constants.js";
 import { dataTableMessages } from "../../messages.js";
 const rowOrderColumnHelper = createColumnHelper();
+const getSortDirection = (sorting) => {
+  if (sorting === void 0 || sorting.length === 0) {
+    return void 0;
+  }
+  if (sorting.every((sort) => sort.desc)) {
+    return "descending";
+  }
+  if (sorting.every((sort) => !sort.desc)) {
+    return "ascending";
+  }
+  return "mixed";
+};
 const RowDragHandleCell = ({
   rowId,
   disabled,
-  isDraggingActive
+  isDraggingActive,
+  sortDirection,
+  disabledTooltip
 }) => {
   const intl = useIntl();
   const modality = useModality();
@@ -32,7 +47,11 @@ const RowDragHandleCell = ({
     dataTableMessages.rowDragAndDropLabel,
     { rowId }
   );
-  return /* @__PURE__ */ jsx(DataTableDefaultCell, { children: /* @__PURE__ */ jsx(
+  const effectiveTooltip = sortDirection !== void 0 ? intl.formatMessage(dataTableMessages.rowDragAndDropSortedTooltip, {
+    sortDirection
+  }) : disabledTooltip;
+  const tooltipText = disabled ? effectiveTooltip : void 0;
+  const dragHandle = /* @__PURE__ */ jsx(
     Button,
     {
       size: "condensed",
@@ -46,7 +65,7 @@ const RowDragHandleCell = ({
           disabled
         }),
         // Apply the focus ring unconditionally (when: 'always')
-        // to the dragged row's handle during keyboard dragging.
+        // to the dragged row's drag handle during keyboard dragging.
         isKeyboardDragging && focusRingStatic({
           minimal: false,
           color: "neutral",
@@ -56,7 +75,8 @@ const RowDragHandleCell = ({
       "data-dt-name": "RowOrderDragAndDrop",
       children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(DragAllDirectionIcon, {}) })
     }
-  ) });
+  );
+  return /* @__PURE__ */ jsx(DataTableDefaultCell, { children: tooltipText ? /* @__PURE__ */ jsx(Tooltip, { text: tooltipText, children: dragHandle }) : dragHandle });
 };
 const ROW_DRAG_COLUMN = rowOrderColumnHelper.accessor(() => "", {
   id: DATA_TABLE_ROW_DRAG_COLUMN_ID,
@@ -76,17 +96,30 @@ const ROW_DRAG_COLUMN = rowOrderColumnHelper.accessor(() => "", {
     hasCustomHeaderRenderer: true,
     builtinPlacement: "prefix",
     cellDeps: (cell) => {
-      return [cell.row.getCanDrag()];
+      const sorting = cell.row.table.atoms.sorting?.get();
+      return [
+        cell.row.getCanDrag(),
+        getSortDirection(sorting) ?? "",
+        cell.row.table.options.disabledRowDragAndDropTooltip?.(cell.row) ?? ""
+      ];
     }
   },
-  cell: ({ row, table }) => /* @__PURE__ */ jsx(
-    RowDragHandleCell,
-    {
-      rowId: row.id,
-      disabled: !row.getCanDrag(),
-      isDraggingActive: table.atoms.draggingRowInfo?.get()?.id === row.id
-    }
-  )
+  cell: ({ row, table }) => {
+    const isDraggingActive = table.atoms.draggingRowInfo?.get()?.id === row.id;
+    const sorting = table.atoms.sorting?.get();
+    const disabledTooltip = table.options.disabledRowDragAndDropTooltip?.(row);
+    const sortDirection = getSortDirection(sorting);
+    return /* @__PURE__ */ jsx(
+      RowDragHandleCell,
+      {
+        rowId: row.id,
+        disabled: !row.getCanDrag(),
+        isDraggingActive,
+        sortDirection,
+        disabledTooltip
+      }
+    );
+  }
 });
 export {
   ROW_DRAG_COLUMN

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

@@ -1,7 +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;",
+  "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 { Tooltip } from '../../../../overlays/tooltip/Tooltip.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\n/**\n * Derives the sort direction used for the drag handle's \"clear sort order\"\n * tooltip from the current sorting state: 'ascending', 'descending', 'mixed',\n * or undefined when the table is not sorted.\n */\nconst getSortDirection = (\n  sorting: { desc: boolean }[] | undefined,\n): string | undefined => {\n  if (sorting === undefined || sorting.length === 0) {\n    return undefined;\n  }\n  if (sorting.every((sort) => sort.desc)) {\n    return 'descending';\n  }\n  if (sorting.every((sort) => !sort.desc)) {\n    return 'ascending';\n  }\n  return 'mixed'; // multi-sort with some asc and some desc sorted columns\n};\n\nconst RowDragHandleCell = ({\n  rowId,\n  disabled,\n  isDraggingActive,\n  sortDirection,\n  disabledTooltip,\n}: {\n  /**\n   * The id of the row this handle belongs to.\n   */\n  rowId: string;\n  /**\n   * Whether drag and drop is disabled for this row.\n   */\n  disabled: boolean;\n  /**\n   * Whether this row is the one currently being dragged.\n   */\n  isDraggingActive: boolean;\n  /**\n   * The sort direction for the sorted tooltip: 'ascending', 'descending', 'mixed',\n   * or undefined if not sorted.\n   */\n  sortDirection: string | undefined;\n  /**\n   * The consumer-provided tooltip shown when the handle is disabled via\n   * `disableRowDragAndDrop`. Superseded by the built-in default while sorted.\n   */\n  disabledTooltip: string | undefined;\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  // Sorted tooltip takes precedence over consumer-provided disabled tooltip.\n  const effectiveTooltip =\n    sortDirection !== undefined\n      ? intl.formatMessage(dataTableMessages.rowDragAndDropSortedTooltip, {\n          sortDirection,\n        })\n      : disabledTooltip;\n  const tooltipText = disabled ? effectiveTooltip : undefined;\n\n  const dragHandle = (\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 drag 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  );\n\n  return (\n    <DataTableDefaultCell>\n      {tooltipText ? (\n        <Tooltip text={tooltipText}>{dragHandle}</Tooltip>\n      ) : (\n        dragHandle\n      )}\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      const sorting = cell.row.table.atoms.sorting?.get();\n      return [\n        cell.row.getCanDrag(),\n        getSortDirection(sorting) ?? '',\n        cell.row.table.options.disabledRowDragAndDropTooltip?.(cell.row) ?? '',\n      ];\n    },\n  },\n  cell: ({ row, table }) => {\n    const isDraggingActive = table.atoms.draggingRowInfo?.get()?.id === row.id;\n    const sorting = table.atoms.sorting?.get();\n    const disabledTooltip = table.options.disabledRowDragAndDropTooltip?.(row);\n    const sortDirection = getSortDirection(sorting);\n\n    return (\n      <RowDragHandleCell\n        rowId={row.id}\n        disabled={!row.getCanDrag()}\n        isDraggingActive={isDraggingActive}\n        sortDirection={sortDirection}\n        disabledTooltip={disabledTooltip}\n      />\n    );\n  },\n});\n"],
+  "mappings": "AA0HQ;AA1HR,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,eAAe;AACxB,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAGlC,MAAM,uBAAuB,mBAAgD;AAO7E,MAAM,mBAAmB,CACvB,YACuB;AACvB,MAAI,YAAY,UAAa,QAAQ,WAAW,GAAG;AACjD,WAAO;AAAA,EACT;AACA,MAAI,QAAQ,MAAM,CAAC,SAAS,KAAK,IAAI,GAAG;AACtC,WAAO;AAAA,EACT;AACA,MAAI,QAAQ,MAAM,CAAC,SAAS,CAAC,KAAK,IAAI,GAAG;AACvC,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEA,MAAM,oBAAoB,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAuBmB;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;AAGA,QAAM,mBACJ,kBAAkB,SACd,KAAK,cAAc,kBAAkB,6BAA6B;AAAA,IAChE;AAAA,EACF,CAAC,IACD;AACN,QAAM,cAAc,WAAW,mBAAmB;AAElD,QAAM,aACJ;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;AAGF,SACE,oBAAC,wBACE,wBACC,oBAAC,WAAQ,MAAM,aAAc,sBAAW,IAExC,YAEJ;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,YAAM,UAAU,KAAK,IAAI,MAAM,MAAM,SAAS,IAAI;AAClD,aAAO;AAAA,QACL,KAAK,IAAI,WAAW;AAAA,QACpB,iBAAiB,OAAO,KAAK;AAAA,QAC7B,KAAK,IAAI,MAAM,QAAQ,gCAAgC,KAAK,GAAG,KAAK;AAAA,MACtE;AAAA,IACF;AAAA,EACF;AAAA,EACA,MAAM,CAAC,EAAE,KAAK,MAAM,MAAM;AACxB,UAAM,mBAAmB,MAAM,MAAM,iBAAiB,IAAI,GAAG,OAAO,IAAI;AACxE,UAAM,UAAU,MAAM,MAAM,SAAS,IAAI;AACzC,UAAM,kBAAkB,MAAM,QAAQ,gCAAgC,GAAG;AACzE,UAAM,gBAAgB,iBAAiB,OAAO;AAE9C,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,IAAI;AAAA,QACX,UAAU,CAAC,IAAI,WAAW;AAAA,QAC1B;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF,CAAC;",
   "names": []
 }

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

@@ -15,6 +15,11 @@ function useRowOrder(props, options) {
     },
     [disableRowDragAndDropFn]
   );
+  const tooltipOption = typeof rowOrdering === "object" ? rowOrdering.disabledRowDragAndDropTooltip : void 0;
+  const disabledRowDragAndDropTooltipCallback = useCallback(
+    (row) => typeof tooltipOption === "function" ? tooltipOption(row.original) : tooltipOption,
+    [tooltipOption]
+  );
   const [rowOrder, onRowOrderChange] = useControllableState({
     value: props.rowOrder,
     defaultValue: props.defaultRowOrder,
@@ -32,6 +37,7 @@ function useRowOrder(props, options) {
     if (rowOrdering.enableDragAndDrop === true && rowOrdering.disableRowDragAndDrop !== void 0) {
       options.lockDisabledRows = rowOrdering.lockDisabledRows;
       options.enableRowOrderDragAndDrop = enableRowDragAndDropCallback;
+      options.disabledRowDragAndDropTooltip = disabledRowDragAndDropTooltipCallback;
       options.autoResetPageIndex = false;
     } else {
       options.enableRowOrderDragAndDrop = rowOrdering.enableDragAndDrop === true;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/RowOrder/useRowOrder.ts"],
-  "sourcesContent": ["/* eslint-disable react-hooks/immutability */\nimport { type Row, type TableOptions } from '@tanstack/react-table';\nimport { useCallback } from 'react';\n\nimport type { DataTableRowOrderProps } from './row-order-types.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport type { DataTableRowData } from '../../row-data-types.js';\nimport type { TDataTableFeatures } from '../types/features.types.js';\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<TDataTableFeatures, Exclude<TData, unknown>>,\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<TDataTableFeatures, Exclude<TData, unknown>>) => {\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.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"],
-  "mappings": "AAEA,SAAS,mBAAmB;AAG5B,SAAS,4BAA4B;AASrC,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,QAA0D;AAEzD,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,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;",
+  "sourcesContent": ["import { type Row, type TableOptions } from '@tanstack/react-table';\nimport { useCallback } from 'react';\n\nimport type { DataTableRowOrderProps } from './row-order-types.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport type { DataTableRowData } from '../../row-data-types.js';\nimport type { TDataTableFeatures } from '../types/features.types.js';\n\n/**\n * Typed shape of the `rowOrdering` object prop accepted by `DataTable`.\n */\ninterface RowOrderConfigObject<TData> {\n  /**\n   * Renders the drag-handle column when `true`.\n   */\n  enableDragAndDrop?: boolean;\n  /**\n   * Returns `true` for rows whose drag handle should be disabled.\n   */\n  disableRowDragAndDrop?: (row: TData) => boolean;\n  /**\n   * Tooltip shown on disabled drag handles. A string is reused for every\n   * disabled row; a function receives the row data and can return a per-row\n   * message (or `undefined` for no tooltip).\n   *\n   * @remarks If passing a function, ensure it is stable across renders\n   * (e.g. wrap it with `useCallback` or define it outside the component) \u2014\n   * an unstable reference triggers unnecessary re-renders.\n   */\n  disabledRowDragAndDropTooltip?: string | ((row: TData) => string | undefined);\n}\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: boolean | RowOrderConfigObject<TData>,\n): rowOrdering is RowOrderConfigObject<TData> {\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<TDataTableFeatures, Exclude<TData, unknown>>,\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<TDataTableFeatures, Exclude<TData, unknown>>) => {\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 tooltipOption =\n    typeof rowOrdering === 'object'\n      ? rowOrdering.disabledRowDragAndDropTooltip\n      : undefined;\n\n  const disabledRowDragAndDropTooltipCallback = useCallback(\n    (row: Row<TDataTableFeatures, Exclude<TData, unknown>>) =>\n      typeof tooltipOption === 'function'\n        ? tooltipOption(row.original)\n        : tooltipOption,\n    [tooltipOption],\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.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.disabledRowDragAndDropTooltip =\n        disabledRowDragAndDropTooltipCallback;\n      options.autoResetPageIndex = false;\n    } else {\n      options.enableRowOrderDragAndDrop =\n        rowOrdering.enableDragAndDrop === true;\n    }\n  }\n}\n"],
+  "mappings": "AACA,SAAS,mBAAmB;AAG5B,SAAS,4BAA4B;AAiCrC,SAAS,uBACP,aAC4C;AAC5C,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,QAA0D;AAEzD,UAAI,CAAC,yBAAyB;AAC5B,eAAO;AAAA,MACT;AACA,aAAO,CAAC,wBAAwB,IAAI,QAAQ;AAAA,IAC9C;AAAA,IACA,CAAC,uBAAuB;AAAA,EAC1B;AAEA,QAAM,gBACJ,OAAO,gBAAgB,WACnB,YAAY,gCACZ;AAEN,QAAM,wCAAwC;AAAA,IAC5C,CAAC,QACC,OAAO,kBAAkB,aACrB,cAAc,IAAI,QAAQ,IAC1B;AAAA,IACN,CAAC,aAAa;AAAA,EAChB;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,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,gCACN;AACF,cAAQ,qBAAqB;AAAA,IAC/B,OAAO;AACL,cAAQ,4BACN,YAAY,sBAAsB;AAAA,IACtC;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._cu1al70-3-8-0 {
+._cu1al70-3-9-0 {
   display: inline-flex;
   align-items: center;
   flex-direction: row;
@@ -10,60 +10,60 @@
   overflow: hidden;
   transform: translateY(2px);
 }
-._yj6voi4-3-8-0 ._cu1al70-3-8-0 {
+._yj6voi4-3-9-0 ._cu1al70-3-9-0 {
   transform: translateY(0);
 }
-._yj6voi5-3-8-0 ._cu1al70-3-8-0 {
+._yj6voi5-3-9-0 ._cu1al70-3-9-0 {
   transform: translateY(-2px);
 }
-._yj6voi1-3-8-0 ._cu1al70-3-8-0, ._yj6voi2-3-8-0 ._cu1al70-3-8-0 {
+._yj6voi1-3-9-0 ._cu1al70-3-9-0, ._yj6voi2-3-9-0 ._cu1al70-3-9-0 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._yj6voi0-3-8-0 ._cu1al70-3-8-0 {
+._yj6voi0-3-9-0 ._cu1al70-3-9-0 {
   order: -1;
   flex-direction: row-reverse;
   margin-right: var(--dt-spacings-size-2, 2px);
 }
-._11pvd3z6-3-8-0 ._14k72810-3-8-0 ~ ._cu1al70-3-8-0 {
+._11pvd3z6-3-9-0 ._14k72810-3-9-0 ~ ._cu1al70-3-9-0 {
   margin-top: 8px;
   margin-bottom: 8px;
 }
-._11pvd3z6-3-8-0:not(._yj6voi0-3-8-0, ._11pvd3z0-3-8-0:has([data-trigger="useraction"])) ._cu1al70-3-8-0 {
+._11pvd3z6-3-9-0:not(._yj6voi0-3-9-0, ._11pvd3z0-3-9-0:has([data-trigger="useraction"])) ._cu1al70-3-9-0 {
   margin-right: 12px;
 }
-._11pvd3z6-3-8-0:where(._yj6voi0-3-8-0):not(._11pvd3z0-3-8-0:has([data-trigger="useraction"])) ._cu1al70-3-8-0 {
+._11pvd3z6-3-9-0:where(._yj6voi0-3-9-0):not(._11pvd3z0-3-9-0:has([data-trigger="useraction"])) ._cu1al70-3-9-0 {
   margin-left: 12px;
 }
-._11pvd3z7-3-8-0 ._14k72810-3-8-0 ~ ._cu1al70-3-8-0 {
+._11pvd3z7-3-9-0 ._14k72810-3-9-0 ~ ._cu1al70-3-9-0 {
   margin-top: 2px;
   margin-bottom: 2px;
 }
-._11pvd3z7-3-8-0:not(._yj6voi0-3-8-0, ._11pvd3z0-3-8-0:has([data-trigger="useraction"])) ._cu1al70-3-8-0 {
+._11pvd3z7-3-9-0:not(._yj6voi0-3-9-0, ._11pvd3z0-3-9-0:has([data-trigger="useraction"])) ._cu1al70-3-9-0 {
   margin-right: 6px;
 }
-._11pvd3z7-3-8-0:where(._yj6voi0-3-8-0):not(._11pvd3z0-3-8-0:has([data-trigger="useraction"])) ._cu1al70-3-8-0 {
+._11pvd3z7-3-9-0:where(._yj6voi0-3-9-0):not(._11pvd3z0-3-9-0:has([data-trigger="useraction"])) ._cu1al70-3-9-0 {
   margin-left: 6px;
 }
-._11pvd3z8-3-8-0 ._14k72810-3-8-0 ~ ._cu1al70-3-8-0 {
+._11pvd3z8-3-9-0 ._14k72810-3-9-0 ~ ._cu1al70-3-9-0 {
   margin-top: 12px;
   margin-bottom: 12px;
 }
-._11pvd3z8-3-8-0:not(._yj6voi0-3-8-0, ._11pvd3z0-3-8-0:has([data-trigger="useraction"])) ._cu1al70-3-8-0 {
+._11pvd3z8-3-9-0:not(._yj6voi0-3-9-0, ._11pvd3z0-3-9-0:has([data-trigger="useraction"])) ._cu1al70-3-9-0 {
   margin-right: 16px;
 }
-._11pvd3z8-3-8-0:where(._yj6voi0-3-8-0):not(._11pvd3z0-3-8-0:has([data-trigger="useraction"])) ._cu1al70-3-8-0 {
+._11pvd3z8-3-9-0:where(._yj6voi0-3-9-0):not(._11pvd3z0-3-9-0:has([data-trigger="useraction"])) ._cu1al70-3-9-0 {
   margin-left: 16px;
 }
-._11pvd3z5-3-8-0._yj6voi0-3-8-0:not(._11pvd3zx-3-8-0) ._cu1al70-3-8-0 {
+._11pvd3z5-3-9-0._yj6voi0-3-9-0:not(._11pvd3zx-3-9-0) ._cu1al70-3-9-0 {
   order: 1;
 }
-._cu1al71-3-8-0 {
+._cu1al71-3-9-0 {
   transform: translateX(-4px);
 }
-._yj6voi0-3-8-0 ._cu1al71-3-8-0 {
+._yj6voi0-3-9-0 ._cu1al71-3-9-0 {
   transform: translateX(4px);
 }
-._cu1al72-3-8-0 {
+._cu1al72-3-9-0 {
   fill: currentColor;
   transition: transform 250ms ease-out;
   transform-origin: center;
@@ -71,54 +71,54 @@
   flex-shrink: 0;
   display: none;
 }
-._11pvd3z0-3-8-0 ._cu1al72-3-8-0 {
+._11pvd3z0-3-9-0 ._cu1al72-3-9-0 {
   display: inline;
 }
-:where(._yj6voi1-3-8-0,._yj6voi2-3-8-0) > ._cu1al72-3-8-0 {
+:where(._yj6voi1-3-9-0,._yj6voi2-3-9-0) > ._cu1al72-3-9-0 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._yj6voi0-3-8-0 ._cu1al72-3-8-0 {
+._yj6voi0-3-9-0 ._cu1al72-3-9-0 {
   order: -1;
 }
-._yj6voi0-3-8-0 > ._cu1al72-3-8-0 {
+._yj6voi0-3-9-0 > ._cu1al72-3-9-0 {
   margin-right: var(--dt-spacings-size-2, 2px);
 }
-._11pvd3z5-3-8-0._yj6voi0-3-8-0:not(._11pvd3zx-3-8-0) ._cu1al72-3-8-0 {
+._11pvd3z5-3-9-0._yj6voi0-3-9-0:not(._11pvd3zx-3-9-0) ._cu1al72-3-9-0 {
   order: 1;
 }
-._11pvd3z5-3-8-0._yj6voi0-3-8-0:not(._11pvd3zx-3-8-0) ._cu1al70-3-8-0 ._cu1al72-3-8-0 {
+._11pvd3z5-3-9-0._yj6voi0-3-9-0:not(._11pvd3zx-3-9-0) ._cu1al70-3-9-0 ._cu1al72-3-9-0 {
   order: -1;
 }
-._cu1al73-3-8-0 {
+._cu1al73-3-9-0 {
   transform: rotate(-180deg);
 }
-._11pvd3zx-3-8-0 ._14k72810-3-8-0 ~ ._cu1al74-3-8-0 {
+._11pvd3zx-3-9-0 ._14k72810-3-9-0 ~ ._cu1al74-3-9-0 {
   padding-top: 8px;
   padding-bottom: 8px;
 }
-._11pvd3zx-3-8-0:where(._yj6voi1-3-8-0, ._yj6voi2-3-8-0):not(._11pvd3z0-3-8-0:has([data-trigger="useraction"])) > ._cu1al74-3-8-0 {
+._11pvd3zx-3-9-0:where(._yj6voi1-3-9-0, ._yj6voi2-3-9-0):not(._11pvd3z0-3-9-0:has([data-trigger="useraction"])) > ._cu1al74-3-9-0 {
   padding-right: 12px;
 }
-._11pvd3zx-3-8-0:where(._yj6voi0-3-8-0):not(._11pvd3z0-3-8-0:has([data-trigger="useraction"])) > ._cu1al74-3-8-0 {
+._11pvd3zx-3-9-0:where(._yj6voi0-3-9-0):not(._11pvd3z0-3-9-0:has([data-trigger="useraction"])) > ._cu1al74-3-9-0 {
   padding-left: 12px;
 }
-._11pvd3zx-3-8-0 ._14k72810-3-8-0 ~ ._cu1al75-3-8-0 {
+._11pvd3zx-3-9-0 ._14k72810-3-9-0 ~ ._cu1al75-3-9-0 {
   padding-top: 2px;
   padding-bottom: 2px;
 }
-._11pvd3zx-3-8-0:where(._yj6voi1-3-8-0, ._yj6voi2-3-8-0):not(._11pvd3z0-3-8-0:has([data-trigger="useraction"])) > ._cu1al75-3-8-0 {
+._11pvd3zx-3-9-0:where(._yj6voi1-3-9-0, ._yj6voi2-3-9-0):not(._11pvd3z0-3-9-0:has([data-trigger="useraction"])) > ._cu1al75-3-9-0 {
   padding-right: 6px;
 }
-._11pvd3zx-3-8-0:where(._yj6voi0-3-8-0):not(._11pvd3z0-3-8-0:has([data-trigger="useraction"])) > ._cu1al75-3-8-0 {
+._11pvd3zx-3-9-0:where(._yj6voi0-3-9-0):not(._11pvd3z0-3-9-0:has([data-trigger="useraction"])) > ._cu1al75-3-9-0 {
   padding-left: 6px;
 }
-._11pvd3zx-3-8-0 ._14k72810-3-8-0 ~ ._cu1al76-3-8-0 {
+._11pvd3zx-3-9-0 ._14k72810-3-9-0 ~ ._cu1al76-3-9-0 {
   padding-top: 12px;
   padding-bottom: 12px;
 }
-._11pvd3zx-3-8-0:where(._yj6voi1-3-8-0, ._yj6voi2-3-8-0):not(._11pvd3z0-3-8-0:has([data-trigger="useraction"])) > ._cu1al76-3-8-0 {
+._11pvd3zx-3-9-0:where(._yj6voi1-3-9-0, ._yj6voi2-3-9-0):not(._11pvd3z0-3-9-0:has([data-trigger="useraction"])) > ._cu1al76-3-9-0 {
   padding-right: 16px;
 }
-._11pvd3zx-3-8-0:where(._yj6voi0-3-8-0):not(._11pvd3z0-3-8-0:has([data-trigger="useraction"])) > ._cu1al76-3-8-0 {
+._11pvd3zx-3-9-0:where(._yj6voi0-3-9-0):not(._11pvd3z0-3-9-0:has([data-trigger="useraction"])) > ._cu1al76-3-9-0 {
   padding-left: 16px;
 }

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

@@ -14,9 +14,9 @@ import "../../components/DataTableHeaderCell.css";
 import "../../components/DataTableDefaultCell.css";
 import "./Sorting.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var multiSortIndicatorBubble = "_cu1al70-3-8-0";
-var sortOrderIndicator = "_cu1al71-3-8-0";
-var sortingArrow = _7a468({ defaultClassName: "_cu1al72-3-8-0", variantClassNames: { arrowUp: { true: "_cu1al73-3-8-0" }, rowDensity: { "default": "_cu1al74-3-8-0", condensed: "_cu1al75-3-8-0", comfortable: "_cu1al76-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var multiSortIndicatorBubble = "_cu1al70-3-9-0";
+var sortOrderIndicator = "_cu1al71-3-9-0";
+var sortingArrow = _7a468({ defaultClassName: "_cu1al72-3-9-0", variantClassNames: { arrowUp: { true: "_cu1al73-3-9-0" }, rowDensity: { "default": "_cu1al74-3-9-0", condensed: "_cu1al75-3-9-0", comfortable: "_cu1al76-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   multiSortIndicatorBubble,
   sortOrderIndicator,