@dynatrace/strato-components 3.4.1 → 3.5.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-4-1";
-var dndHandle = _7a468({ defaultClassName: "_or8s41-3-4-1", variantClassNames: { disabled: { true: "_or8s42-3-4-1", false: "_or8s43-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var rowDndOverlay = "_or8s40-3-4-1";
+var disabledNonTargetRow = "_or8s44-3-5-2";
+var dndHandle = _7a468({ defaultClassName: "_or8s41-3-5-2", variantClassNames: { disabled: { true: "_or8s42-3-5-2", false: "_or8s43-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var rowDndOverlay = "_or8s40-3-5-2";
 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-4-1';\nexport var dndHandle = _7a468({defaultClassName:'_or8s41-3-4-1',variantClassNames:{disabled:{true:'_or8s42-3-4-1',false:'_or8s43-3-4-1'}},defaultVariants:{},compoundVariants:[]});\nexport var rowDndOverlay = '_or8s40-3-4-1';"],
+  "sourcesContent": ["import './RowOrder.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var disabledNonTargetRow = '_or8s44-3-5-2';\nexport var dndHandle = _7a468({defaultClassName:'_or8s41-3-5-2',variantClassNames:{disabled:{true:'_or8s42-3-5-2',false:'_or8s43-3-5-2'}},defaultVariants:{},compoundVariants:[]});\nexport var rowDndOverlay = '_or8s40-3-5-2';"],
   "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/row-order-utils.js

@@ -1,7 +1,7 @@
 import Animations from "@dynatrace/strato-design-tokens/animations";
 import { disabledNonTargetRow } from "./RowOrder.sty.js";
+import { getDataTableBorderWidth } from "../../../utils/data-table-border-width.js";
 import {
-  DATA_TABLE_BORDER_WIDTH,
   DATA_TABLE_DEFAULT_MIN_ROW_HEIGHT,
   DATA_TABLE_PINNING_SHADOW_CELL_ROW_ID_SUFFIX,
   DATA_TABLE_ROW_BORDER,
@@ -261,8 +261,8 @@ function createRestrictToTableRowAreaModifier(tableHeaderHeight, containedVarian
     transform.x = 0;
     const parentRect = virtualizationContainer.getBoundingClientRect();
     const verticalBounds = {
-      top: containedVariant ? parentRect?.top + tableHeaderHeight + DATA_TABLE_BORDER_WIDTH : parentRect?.top + tableHeaderHeight,
-      bottom: containedVariant ? parentRect?.bottom - DATA_TABLE_BORDER_WIDTH : parentRect?.bottom
+      top: containedVariant ? parentRect?.top + tableHeaderHeight + getDataTableBorderWidth() : parentRect?.top + tableHeaderHeight,
+      bottom: containedVariant ? parentRect?.bottom - getDataTableBorderWidth() : parentRect?.bottom
     };
     return restrictToVerticalBounds(
       transform,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/RowOrder/row-order-utils.ts"],
-  "sourcesContent": ["import {\n  type ClientRect,\n  type CollisionDescriptor,\n  type CollisionDetection,\n  type DragOverEvent,\n  type Modifier,\n} from '@dnd-kit/core';\n\nimport Animations from '@dynatrace/strato-design-tokens/animations';\n\nimport { disabledNonTargetRow } from './RowOrder.sty.js';\nimport {\n  DATA_TABLE_BORDER_WIDTH,\n  DATA_TABLE_DEFAULT_MIN_ROW_HEIGHT,\n  DATA_TABLE_PINNING_SHADOW_CELL_ROW_ID_SUFFIX,\n  DATA_TABLE_ROW_BORDER,\n  DATA_TABLE_ROW_EXPANDED_ID_SUFFIX,\n} from '../../constants.js';\nimport type { DragAndDropTransform, Row } from '../../hooks/useTable/types.js';\n\n// #region RowTransforms\n// all rows that were transformed in the last onDragOver call\nlet lastAffectedRows = new Set<string>();\n\n/**\n * Transforms row upwards or downwards to make space for the row which is currently being dragged (\"active\" row).\n * @param table - the table where the row ordering is happening.\n * @param event - contains \"active\" (row being dragged) and \"over\" ids (row where the active row is currently dragged over).\n * @param rowOrder - original row order before dragging.\n * @param rowSeparationNone - whether the rows are visually separated by a border.\n * @param activeRow - the currently dragged row.\n * @internal\n */\nexport function transformRowOnDragOver(\n  table: HTMLElement,\n  event: DragOverEvent,\n  rowOrder: string[] | undefined,\n  rowSeparationNone: boolean,\n  activeRow?: Row<unknown>,\n): void {\n  let rowHeight = event.active?.rect.current.translated?.height;\n\n  if (\n    activeRow === undefined ||\n    rowOrder === undefined ||\n    event.collisions === null ||\n    event.active === null ||\n    event.over === null ||\n    rowHeight === undefined\n  ) {\n    return;\n  }\n\n  // visually disable rows that do not share the same parent as the dragged row\n  styleNonTargetRows(table, activeRow.parentId);\n\n  // keep track of all rows that are transformed during the current onDragOver call\n  const newAffectedRows = new Set<string>();\n  const { fromIndex, toIndex } = getDragIndexes(\n    rowOrder,\n    event.active.id as string, // for us the IDs are always strings\n    event.over.id as string, // for us the IDs are always strings\n  );\n\n  const activeRowIsLastRow = fromIndex === rowOrder.length - 1;\n\n  // if rowSeparation is active, consider 1px border for all rows\n  // except if dragging the last row or if row details are open\n  if (\n    !rowSeparationNone &&\n    !activeRowIsLastRow &&\n    !activeRow.getIsDetailsOpen()\n  ) {\n    rowHeight += DATA_TABLE_ROW_BORDER;\n  }\n\n  if (fromIndex < toIndex) {\n    transformRows(\n      table,\n      rowOrder.slice(fromIndex + 1, toIndex + 1),\n      -rowHeight,\n      newAffectedRows,\n    );\n  } else if (fromIndex > toIndex) {\n    transformRows(\n      table,\n      rowOrder.slice(toIndex, fromIndex),\n      rowHeight,\n      newAffectedRows,\n    );\n  }\n\n  // Reset rows that were translated in the last drag operation but are not in the current one\n  transformRows(table, lastAffectedRows, 0);\n  lastAffectedRows = newAffectedRows;\n}\n\n/**\n * Moves rows on the y-axis by the given number of pixels.\n * @param table - the table grid element.\n * @param rowIds - the ids of rows to transform.\n * @param amountToTransform - number of pixels to translate (positive for down or negative for up)\n * @param newAffectedRows - set to save all rows that are transformed during the current onDragOver call\n */\nfunction transformRows(\n  table: HTMLElement,\n  rowIds: string[] | Set<string>,\n  amountToTransform: number,\n  newAffectedRows?: Set<string>,\n): void {\n  for (const rowId of rowIds) {\n    const row = getRowWithId(table, rowId);\n    if (row.length <= 0) {\n      continue;\n    }\n    translateRowY(row, amountToTransform);\n    if (newAffectedRows) {\n      lastAffectedRows.delete(rowId);\n      newAffectedRows.add(rowId);\n    }\n  }\n}\n\n/**\n * Applies styles to visually indicate droppable targets for the currently active row.\n * Rows that do not share the same parent as the dragged row will appear visually disabled.\n *\n * @param table - The table element containing the rows to style.\n * @param activeParentId - parent id of the currently dragged row.\n */\nfunction styleNonTargetRows(table: HTMLElement, activeParentId?: string): void {\n  // if the dragged row is a top-level row, we don't want to add any styles\n  if (activeParentId === undefined) {\n    return;\n  }\n  const rows = getAllNonTargetRowsInTableBody(table, activeParentId);\n  for (const row of rows) {\n    row.classList.add(disabledNonTargetRow);\n  }\n}\n\n/**\n * Moves row on the y-axis by the given number of pixels. Applies a transition\n * also to make it looks smoother, using strato tokens for duration and easing.\n * @param row - the row to translate\n * @param value - number of pixels (positive for down or negative for up)\n */\nfunction translateRowY(row: HTMLElement[], value: number): void {\n  const transform = `translateY(${value}px)`;\n  const transition = `transform ${Animations.SlideIn.Duration.Base} ${Animations.Move.Easing}`;\n  for (const rowElement of row) {\n    rowElement.style.transform = transform;\n    rowElement.style.transition = transition;\n  }\n}\n\n/**\n * Resets the transform style on the given row.\n * @param rows - the row we want to reset.\n * @internal\n */\nexport function resetAllStylesForRows(rows: HTMLElement[]): void {\n  if (rows.length === 0) {\n    return;\n  }\n  for (const row of rows) {\n    row.style.removeProperty('transform');\n    row.style.removeProperty('transition');\n    row.classList.remove(disabledNonTargetRow);\n  }\n}\n\n/**\n * Gets the row elements with a given row id (including row details row).\n * @param table - the current table.\n * @param id - id of the row (matches against `data-rowid`).\n * @returns matching rows.\n * @internal\n */\nexport function getRowWithId(\n  table: HTMLElement,\n  id: string | number | undefined,\n): HTMLElement[] {\n  if (id === undefined) {\n    return [];\n  }\n  const rowElements = table.querySelectorAll<HTMLElement>(\n    `[data-rowid=\"${CSS.escape(String(id))}\"], [data-rowid=\"${CSS.escape(\n      String(id),\n    )}${DATA_TABLE_ROW_EXPANDED_ID_SUFFIX}\"], [data-rowid=\"${CSS.escape(\n      String(id),\n    )}${DATA_TABLE_PINNING_SHADOW_CELL_ROW_ID_SUFFIX}\"]`,\n  );\n\n  return Array.from(rowElements);\n}\n\n/**\n * Gets all rows in the given table that are not within the same sub-row parent.\n *\n * @param table - the table we are concerned with.\n * @param parentIdToExclude - parent id to be excluded\n * @returns all rows in the table (div elements with role=\"row\").\n * @internal\n */\nexport function getAllNonTargetRowsInTableBody(\n  table: HTMLElement,\n  parentIdToExclude?: string,\n): HTMLElement[] {\n  const nonTargetRows = table.querySelectorAll<HTMLElement>(\n    `[data-rowgroup=\"body\"] [role=\"row\"]:not([data-rowid^=\"${CSS.escape(\n      String(parentIdToExclude),\n    )}\"]`,\n  );\n\n  return Array.from(nonTargetRows);\n}\n\n/**\n * Gets all rows in the given table (all rows that have role=\"row\" and a data-rowid attribute).\n * @param table - the table we are concerned with.\n * @returns all rows in the table.\n * @internal\n */\nexport function getAllRowsInTableBody(table: HTMLElement): HTMLElement[] {\n  const allRowsInTableBody = table.querySelectorAll<HTMLElement>(\n    '[role=\"row\"][data-rowid], [role=\"presentation\"][data-rowid]',\n  );\n\n  return Array.from(allRowsInTableBody);\n}\n\n/**\n * @param table - the table we are concerned with.\n * @param rowNumber - zero-based row number\n * @returns the drag handle of the given row for drag and drop ordering\n * @internal\n */\nexport function getDragHandleForRow(\n  table: HTMLElement,\n  rowNumber: number,\n): HTMLElement | null {\n  return table.querySelector<HTMLElement>(\n    `[role=\"row\"][data-row=\"${rowNumber}\"] [role=\"cell\"][data-column=\"0\"] button`,\n  );\n}\n// #endregion RowTransforms\n\n/**\n * Gets the `fromIndex` and `toIndex` from the over and active id.\n * @param rowOrder - contains the ids of the rows in order.\n * @param activeId - is the id of the currently actively dragged row\n * @param overId - is the target id of where the dragging row is currently dragged to\n * @returns indexes from where a row is dragged and where it is dragged to\n * @internal\n */\nexport function getDragIndexes(\n  rowOrder: string[],\n  activeId: string,\n  overId: string,\n): { fromIndex: number; toIndex: number } {\n  const fromIndex = rowOrder.findIndex((id) => id === activeId);\n  const toIndex = rowOrder.findIndex((id) => id === overId);\n  return { fromIndex, toIndex };\n}\n\n// #region CollisionDetection\n/**\n * Check if a given point is contained within a bounding rectangle\n */\nfunction isPointWithinRectY(pointY: number, rect: ClientRect): boolean {\n  return rect.top <= pointY && pointY <= rect.bottom;\n}\n\nexport const DATA_TABLE_ROW_DND_COLLISION_OFFSET =\n  DATA_TABLE_DEFAULT_MIN_ROW_HEIGHT / 2 - 1;\n\n/**\n * Custom collision detection algorithm for row order drag and drop.\n * Determines the closest droppable target within the Y-axis based on the dragging direction.\n *\n * @param param0 - Object containing the droppable containers, the droppable rects, the collision rect and\n *                 the active element, which are needed for the collision detection.\n * @returns An array of collision descriptors, sorted by the distance to the dragged row, or an empty array if none is found.\n * @internal\n */\nexport const closestTargetWithinY: CollisionDetection = ({\n  droppableContainers,\n  droppableRects,\n  collisionRect,\n  active,\n}) => {\n  const initialRect = active.rect.current.initial;\n  if (initialRect === null) {\n    return [];\n  }\n\n  const collisions: CollisionDescriptor[] = [];\n\n  // To make this work for varying row heights, depending on the dragging direction\n  // we take either the top or the bottom of the dragged row to check for collisions\n  // (minus a small offset, so the rows have to overlap a bit, before they would be swapped)\n  const isDraggingUp = collisionRect.top < initialRect.top;\n  // min row height is 24px, to ensure the offset is in the top/bottom half: 24 / 2 - 1 = 11\n  const collisionRectY = isDraggingUp\n    ? collisionRect.top + DATA_TABLE_ROW_DND_COLLISION_OFFSET\n    : collisionRect.bottom - DATA_TABLE_ROW_DND_COLLISION_OFFSET;\n\n  for (const droppableContainer of droppableContainers) {\n    const { id, node } = droppableContainer;\n    const rect = droppableRects.get(id);\n    if (rect === undefined) {\n      continue;\n    }\n\n    // the droppable containers do not consider the row details height, so we need to get that\n    // this can be removed once we have subgrids and can put the ref on the row itself (APPDEV-12251)\n    const heightAdaptedRect = { ...rect };\n    const rowDetailsElement = node.current?.parentElement?.querySelector(\n      `[data-rowid=\"${CSS.escape(\n        String(id),\n      )}${DATA_TABLE_ROW_EXPANDED_ID_SUFFIX}\"]`,\n    );\n\n    if (rowDetailsElement) {\n      const detailsHeight = rowDetailsElement.getBoundingClientRect().height;\n      heightAdaptedRect.height += detailsHeight;\n      heightAdaptedRect.bottom += detailsHeight;\n    }\n\n    if (isPointWithinRectY(collisionRectY, heightAdaptedRect)) {\n      // return the container that the active rect is dragged over\n      return [\n        {\n          id,\n          data: { droppableContainer },\n        },\n      ];\n    }\n\n    // in case the dragged row's collisionRectY is not directly within any of the droppable containers\n    // (e.g. when dragging over the scrollbar) we need to find the closest one. Therefore, we calculate\n    // the distance between the droppable container's top/bottom and the collisionRectY coordinate.\n    const droppableContainerY = isDraggingUp ? rect.top : rect.bottom;\n    const distance = Math.abs(collisionRectY - droppableContainerY);\n    collisions.push({ id, data: { droppableContainer, value: distance } });\n  }\n\n  return collisions.toSorted((a, b) => a.data.value - b.data.value);\n};\n\n/**\n * Identifies the last row in the given array where drag-and-drop is disabled, and where all preceding rows are also disabled.\n *\n * @param rows - the table rows\n * @returns the index of the last found row with disabled drag and drop\n */\nfunction findLastDisabledRow(rows: { rowIndex: number; row: Row<unknown> }[]) {\n  let lastDisabledRowIndex: number | undefined = undefined;\n  for (const { rowIndex, row } of rows) {\n    if (row.getCanDrag()) {\n      break;\n    }\n    lastDisabledRowIndex = rowIndex;\n  }\n  return lastDisabledRowIndex;\n}\n\n/**\n * Custom collision detection function that filters droppable containers based the sub-row depth of the dragged row,\n * and then applies the custom closestCenterWithinY algorithm on the filtered targets.\n * Only rows on the same sub-row depth level can be ordered.\n *\n * We need to pass the dragged row stored in the table state, as during dragging in a scrollable table it can happen\n * that the active row is virtualized and would therefore be undefined.\n *\n * @param draggingRowInfo - active/dragged row info saved in the table state\n * @returns\n */\nexport const createRowOrderCollisionDetection = (draggingRowInfo?: {\n  id: string;\n  index: number;\n  row: Row<unknown>;\n}): CollisionDetection => {\n  return ({ active, droppableContainers, ...rest }) => {\n    if (draggingRowInfo === undefined) {\n      return [];\n    }\n    const activeRow = draggingRowInfo.row;\n    const activeRowIndex = draggingRowInfo.index;\n    const activeRowSubRowDepth = activeRow.getSubRowDepth();\n\n    const lastExpandedSubRowsOnLevel = new Set<string>();\n\n    const validTargets = droppableContainers.filter((target) => {\n      const targetRow = target.data.current?.row as Row<unknown>;\n      const targetRowIndex = target.data.current?.rowIndex;\n      const targetRowSubRowDepth = targetRow?.getSubRowDepth();\n      const targetRowDisabled = !targetRow?.getCanDrag();\n      const targetRowLockedDisabled =\n        targetRow?.disabledRowDragAndDropLockPosition;\n\n      const isSameDepthAndParent =\n        targetRowSubRowDepth === activeRowSubRowDepth &&\n        activeRow.parentId === targetRow.parentId;\n\n      // currently active row is a valid target\n      if (activeRowIndex === targetRowIndex) {\n        return true;\n      }\n\n      if (targetRowDisabled && targetRowLockedDisabled !== false) {\n        const rowsByRowIndex = droppableContainers\n          .filter(\n            (container) => container.data.current?.row.parentId === undefined,\n          )\n          .map((container) => ({\n            rowIndex: container.data.current?.rowIndex,\n            row: container.data.current?.row,\n          }))\n          .toSorted((data1, data2) => data1?.rowIndex - data2?.rowIndex);\n\n        const lastDisabledRowIndexFromStart =\n          targetRowLockedDisabled !== 'end'\n            ? findLastDisabledRow(rowsByRowIndex)\n            : undefined;\n        const firstDisabledRowIndexFromEnd =\n          targetRowLockedDisabled !== 'start'\n            ? findLastDisabledRow(rowsByRowIndex.toReversed())\n            : undefined;\n\n        // if the disabled row is already (grouped) at the start or end,\n        // the row is not a valid target\n        if (\n          targetRow.parentId === undefined &&\n          ((lastDisabledRowIndexFromStart !== undefined &&\n            targetRowIndex <= lastDisabledRowIndexFromStart) ||\n            (firstDisabledRowIndexFromEnd !== undefined &&\n              targetRowIndex >= firstDisabledRowIndexFromEnd))\n        ) {\n          return false;\n        }\n      }\n\n      if (isSameDepthAndParent) {\n        const hasOpenSubRows =\n          targetRow.getCanExpand() && targetRow.getIsExpanded();\n\n        // when active row is moved down, and the target row has expanded sub-rows the row\n        // should only be moved when it's moved past the sub-rows\n        // therefore, instead of the parent row, the last expanded sub-row is the valid target\n        if (activeRowIndex < targetRowIndex && hasOpenSubRows) {\n          // get id of last open subrow and save it to be able to make it the actual target\n          const lastExpandedRow = targetRow.getLastExpandedSubRow();\n          if (lastExpandedRow) {\n            lastExpandedSubRowsOnLevel.add(lastExpandedRow.id);\n          }\n          return false;\n        }\n\n        return true;\n      }\n\n      if (targetRowSubRowDepth > activeRowSubRowDepth) {\n        // if the target is the last expanded sub-row of a target row\n        return lastExpandedSubRowsOnLevel.has(targetRow.id);\n      }\n\n      return false;\n    });\n\n    // Apply closestTargetWithinY on filtered targets\n    return closestTargetWithinY({\n      active,\n      droppableContainers: validTargets,\n      ...rest,\n    });\n  };\n};\n// #endregion CollisionDetection\n\n// #region Modifiers\n/**\n * Restricts the vertical movement of an element within the specified bounds.\n *\n * @param transform - Transform values of the currently dragged element\n * @param rect - The bounding rectangle of the element being transformed.\n * @param verticalBounds - The bounds within which the element should be restricted.\n * @returns The updated transform object with restricted y value.\n * @internal\n */\nexport function restrictToVerticalBounds(\n  transform: DragAndDropTransform,\n  rect: ClientRect,\n  verticalBounds: {\n    top: number;\n    bottom: number;\n  },\n): DragAndDropTransform {\n  const value = {\n    ...transform,\n  };\n\n  if (\n    rect.top >= verticalBounds.top &&\n    rect.top + transform.y <= verticalBounds.top\n  ) {\n    value.y = verticalBounds.top - rect.top;\n  } else if (\n    rect.bottom <= verticalBounds.bottom &&\n    rect.bottom + transform.y >= verticalBounds.bottom\n  ) {\n    value.y = verticalBounds.bottom - rect.bottom;\n  }\n  // Only with keyboard navigation:\n  // When focusing the drag handle and scrolling the table so that the row is not visible anymore,\n  // and then pressing SPACE/ENTER to start dragging, the dragged row's position needs to be adjusted\n  // in a way where we need to make sure the row remains within the vertical bounds with the new transform value.\n  else if (rect.top < verticalBounds.top) {\n    const bottomTransformYLimit = verticalBounds.bottom - rect.bottom;\n    const transformY =\n      transform.y > 0\n        ? verticalBounds.top - rect.top + transform.y\n        : verticalBounds.top - rect.top;\n\n    // adjust value.y to be the bottom bound if the new transform value would position the row outside the bottom vertical bound\n    value.y =\n      transformY > bottomTransformYLimit ? bottomTransformYLimit : transformY;\n  } else if (rect.bottom > verticalBounds.bottom) {\n    const topTransformYLimit = verticalBounds.top - rect.top;\n    const transformY =\n      transform.y < 0\n        ? verticalBounds.bottom - rect.bottom + transform.y\n        : verticalBounds.bottom - rect.bottom;\n\n    // adjust value.y to be the top bound if the new transform value would position the row outside the top vertical bound\n    value.y = transformY > topTransformYLimit ? transformY : topTransformYLimit;\n  }\n\n  return value;\n}\n\n/**\n * Creates a dnd-kit modifier to restrict the dragging to the table row area.\n * @param tableHeaderHeight - This height is subtracted from the parent element height.\n * @param containedVariant - Whether the table is using the contained visual variant.\n * @param virtualizationContainer - The table's virtualization container.\n * @returns dnd-kit modifier\n * @internal\n */\nexport function createRestrictToTableRowAreaModifier(\n  tableHeaderHeight: number,\n  containedVariant: boolean,\n  virtualizationContainer?: HTMLDivElement,\n): Modifier {\n  return ({ transform, draggingNodeRect }) => {\n    if (!draggingNodeRect || virtualizationContainer === undefined) {\n      return transform;\n    }\n\n    // Restrict dragging to the vertical axis\n    transform.x = 0;\n\n    const parentRect = virtualizationContainer.getBoundingClientRect();\n    // Restrict dragging to the table container minus borders\n    const verticalBounds = {\n      top: containedVariant\n        ? parentRect?.top + tableHeaderHeight + DATA_TABLE_BORDER_WIDTH\n        : parentRect?.top + tableHeaderHeight,\n      bottom: containedVariant\n        ? parentRect?.bottom - DATA_TABLE_BORDER_WIDTH\n        : parentRect?.bottom,\n    };\n\n    return restrictToVerticalBounds(\n      transform,\n      draggingNodeRect,\n      verticalBounds,\n    );\n  };\n}\n// #endregion Modifiers\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type ClientRect,\n  type CollisionDescriptor,\n  type CollisionDetection,\n  type DragOverEvent,\n  type Modifier,\n} from '@dnd-kit/core';\n\nimport Animations from '@dynatrace/strato-design-tokens/animations';\n\nimport { disabledNonTargetRow } from './RowOrder.sty.js';\nimport { getDataTableBorderWidth } from '../../../utils/data-table-border-width.js';\nimport {\n  DATA_TABLE_DEFAULT_MIN_ROW_HEIGHT,\n  DATA_TABLE_PINNING_SHADOW_CELL_ROW_ID_SUFFIX,\n  DATA_TABLE_ROW_BORDER,\n  DATA_TABLE_ROW_EXPANDED_ID_SUFFIX,\n} from '../../constants.js';\nimport type { DragAndDropTransform, Row } from '../../hooks/useTable/types.js';\n\n// #region RowTransforms\n// all rows that were transformed in the last onDragOver call\nlet lastAffectedRows = new Set<string>();\n\n/**\n * Transforms row upwards or downwards to make space for the row which is currently being dragged (\"active\" row).\n * @param table - the table where the row ordering is happening.\n * @param event - contains \"active\" (row being dragged) and \"over\" ids (row where the active row is currently dragged over).\n * @param rowOrder - original row order before dragging.\n * @param rowSeparationNone - whether the rows are visually separated by a border.\n * @param activeRow - the currently dragged row.\n * @internal\n */\nexport function transformRowOnDragOver(\n  table: HTMLElement,\n  event: DragOverEvent,\n  rowOrder: string[] | undefined,\n  rowSeparationNone: boolean,\n  activeRow?: Row<unknown>,\n): void {\n  let rowHeight = event.active?.rect.current.translated?.height;\n\n  if (\n    activeRow === undefined ||\n    rowOrder === undefined ||\n    event.collisions === null ||\n    event.active === null ||\n    event.over === null ||\n    rowHeight === undefined\n  ) {\n    return;\n  }\n\n  // visually disable rows that do not share the same parent as the dragged row\n  styleNonTargetRows(table, activeRow.parentId);\n\n  // keep track of all rows that are transformed during the current onDragOver call\n  const newAffectedRows = new Set<string>();\n  const { fromIndex, toIndex } = getDragIndexes(\n    rowOrder,\n    event.active.id as string, // for us the IDs are always strings\n    event.over.id as string, // for us the IDs are always strings\n  );\n\n  const activeRowIsLastRow = fromIndex === rowOrder.length - 1;\n\n  // if rowSeparation is active, consider 1px border for all rows\n  // except if dragging the last row or if row details are open\n  if (\n    !rowSeparationNone &&\n    !activeRowIsLastRow &&\n    !activeRow.getIsDetailsOpen()\n  ) {\n    rowHeight += DATA_TABLE_ROW_BORDER;\n  }\n\n  if (fromIndex < toIndex) {\n    transformRows(\n      table,\n      rowOrder.slice(fromIndex + 1, toIndex + 1),\n      -rowHeight,\n      newAffectedRows,\n    );\n  } else if (fromIndex > toIndex) {\n    transformRows(\n      table,\n      rowOrder.slice(toIndex, fromIndex),\n      rowHeight,\n      newAffectedRows,\n    );\n  }\n\n  // Reset rows that were translated in the last drag operation but are not in the current one\n  transformRows(table, lastAffectedRows, 0);\n  lastAffectedRows = newAffectedRows;\n}\n\n/**\n * Moves rows on the y-axis by the given number of pixels.\n * @param table - the table grid element.\n * @param rowIds - the ids of rows to transform.\n * @param amountToTransform - number of pixels to translate (positive for down or negative for up)\n * @param newAffectedRows - set to save all rows that are transformed during the current onDragOver call\n */\nfunction transformRows(\n  table: HTMLElement,\n  rowIds: string[] | Set<string>,\n  amountToTransform: number,\n  newAffectedRows?: Set<string>,\n): void {\n  for (const rowId of rowIds) {\n    const row = getRowWithId(table, rowId);\n    if (row.length <= 0) {\n      continue;\n    }\n    translateRowY(row, amountToTransform);\n    if (newAffectedRows) {\n      lastAffectedRows.delete(rowId);\n      newAffectedRows.add(rowId);\n    }\n  }\n}\n\n/**\n * Applies styles to visually indicate droppable targets for the currently active row.\n * Rows that do not share the same parent as the dragged row will appear visually disabled.\n *\n * @param table - The table element containing the rows to style.\n * @param activeParentId - parent id of the currently dragged row.\n */\nfunction styleNonTargetRows(table: HTMLElement, activeParentId?: string): void {\n  // if the dragged row is a top-level row, we don't want to add any styles\n  if (activeParentId === undefined) {\n    return;\n  }\n  const rows = getAllNonTargetRowsInTableBody(table, activeParentId);\n  for (const row of rows) {\n    row.classList.add(disabledNonTargetRow);\n  }\n}\n\n/**\n * Moves row on the y-axis by the given number of pixels. Applies a transition\n * also to make it looks smoother, using strato tokens for duration and easing.\n * @param row - the row to translate\n * @param value - number of pixels (positive for down or negative for up)\n */\nfunction translateRowY(row: HTMLElement[], value: number): void {\n  const transform = `translateY(${value}px)`;\n  const transition = `transform ${Animations.SlideIn.Duration.Base} ${Animations.Move.Easing}`;\n  for (const rowElement of row) {\n    rowElement.style.transform = transform;\n    rowElement.style.transition = transition;\n  }\n}\n\n/**\n * Resets the transform style on the given row.\n * @param rows - the row we want to reset.\n * @internal\n */\nexport function resetAllStylesForRows(rows: HTMLElement[]): void {\n  if (rows.length === 0) {\n    return;\n  }\n  for (const row of rows) {\n    row.style.removeProperty('transform');\n    row.style.removeProperty('transition');\n    row.classList.remove(disabledNonTargetRow);\n  }\n}\n\n/**\n * Gets the row elements with a given row id (including row details row).\n * @param table - the current table.\n * @param id - id of the row (matches against `data-rowid`).\n * @returns matching rows.\n * @internal\n */\nexport function getRowWithId(\n  table: HTMLElement,\n  id: string | number | undefined,\n): HTMLElement[] {\n  if (id === undefined) {\n    return [];\n  }\n  const rowElements = table.querySelectorAll<HTMLElement>(\n    `[data-rowid=\"${CSS.escape(String(id))}\"], [data-rowid=\"${CSS.escape(\n      String(id),\n    )}${DATA_TABLE_ROW_EXPANDED_ID_SUFFIX}\"], [data-rowid=\"${CSS.escape(\n      String(id),\n    )}${DATA_TABLE_PINNING_SHADOW_CELL_ROW_ID_SUFFIX}\"]`,\n  );\n\n  return Array.from(rowElements);\n}\n\n/**\n * Gets all rows in the given table that are not within the same sub-row parent.\n *\n * @param table - the table we are concerned with.\n * @param parentIdToExclude - parent id to be excluded\n * @returns all rows in the table (div elements with role=\"row\").\n * @internal\n */\nexport function getAllNonTargetRowsInTableBody(\n  table: HTMLElement,\n  parentIdToExclude?: string,\n): HTMLElement[] {\n  const nonTargetRows = table.querySelectorAll<HTMLElement>(\n    `[data-rowgroup=\"body\"] [role=\"row\"]:not([data-rowid^=\"${CSS.escape(\n      String(parentIdToExclude),\n    )}\"]`,\n  );\n\n  return Array.from(nonTargetRows);\n}\n\n/**\n * Gets all rows in the given table (all rows that have role=\"row\" and a data-rowid attribute).\n * @param table - the table we are concerned with.\n * @returns all rows in the table.\n * @internal\n */\nexport function getAllRowsInTableBody(table: HTMLElement): HTMLElement[] {\n  const allRowsInTableBody = table.querySelectorAll<HTMLElement>(\n    '[role=\"row\"][data-rowid], [role=\"presentation\"][data-rowid]',\n  );\n\n  return Array.from(allRowsInTableBody);\n}\n\n/**\n * @param table - the table we are concerned with.\n * @param rowNumber - zero-based row number\n * @returns the drag handle of the given row for drag and drop ordering\n * @internal\n */\nexport function getDragHandleForRow(\n  table: HTMLElement,\n  rowNumber: number,\n): HTMLElement | null {\n  return table.querySelector<HTMLElement>(\n    `[role=\"row\"][data-row=\"${rowNumber}\"] [role=\"cell\"][data-column=\"0\"] button`,\n  );\n}\n// #endregion RowTransforms\n\n/**\n * Gets the `fromIndex` and `toIndex` from the over and active id.\n * @param rowOrder - contains the ids of the rows in order.\n * @param activeId - is the id of the currently actively dragged row\n * @param overId - is the target id of where the dragging row is currently dragged to\n * @returns indexes from where a row is dragged and where it is dragged to\n * @internal\n */\nexport function getDragIndexes(\n  rowOrder: string[],\n  activeId: string,\n  overId: string,\n): { fromIndex: number; toIndex: number } {\n  const fromIndex = rowOrder.findIndex((id) => id === activeId);\n  const toIndex = rowOrder.findIndex((id) => id === overId);\n  return { fromIndex, toIndex };\n}\n\n// #region CollisionDetection\n/**\n * Check if a given point is contained within a bounding rectangle\n */\nfunction isPointWithinRectY(pointY: number, rect: ClientRect): boolean {\n  return rect.top <= pointY && pointY <= rect.bottom;\n}\n\nexport const DATA_TABLE_ROW_DND_COLLISION_OFFSET =\n  DATA_TABLE_DEFAULT_MIN_ROW_HEIGHT / 2 - 1;\n\n/**\n * Custom collision detection algorithm for row order drag and drop.\n * Determines the closest droppable target within the Y-axis based on the dragging direction.\n *\n * @param param0 - Object containing the droppable containers, the droppable rects, the collision rect and\n *                 the active element, which are needed for the collision detection.\n * @returns An array of collision descriptors, sorted by the distance to the dragged row, or an empty array if none is found.\n * @internal\n */\nexport const closestTargetWithinY: CollisionDetection = ({\n  droppableContainers,\n  droppableRects,\n  collisionRect,\n  active,\n}) => {\n  const initialRect = active.rect.current.initial;\n  if (initialRect === null) {\n    return [];\n  }\n\n  const collisions: CollisionDescriptor[] = [];\n\n  // To make this work for varying row heights, depending on the dragging direction\n  // we take either the top or the bottom of the dragged row to check for collisions\n  // (minus a small offset, so the rows have to overlap a bit, before they would be swapped)\n  const isDraggingUp = collisionRect.top < initialRect.top;\n  // min row height is 24px, to ensure the offset is in the top/bottom half: 24 / 2 - 1 = 11\n  const collisionRectY = isDraggingUp\n    ? collisionRect.top + DATA_TABLE_ROW_DND_COLLISION_OFFSET\n    : collisionRect.bottom - DATA_TABLE_ROW_DND_COLLISION_OFFSET;\n\n  for (const droppableContainer of droppableContainers) {\n    const { id, node } = droppableContainer;\n    const rect = droppableRects.get(id);\n    if (rect === undefined) {\n      continue;\n    }\n\n    // the droppable containers do not consider the row details height, so we need to get that\n    // this can be removed once we have subgrids and can put the ref on the row itself (APPDEV-12251)\n    const heightAdaptedRect = { ...rect };\n    const rowDetailsElement = node.current?.parentElement?.querySelector(\n      `[data-rowid=\"${CSS.escape(\n        String(id),\n      )}${DATA_TABLE_ROW_EXPANDED_ID_SUFFIX}\"]`,\n    );\n\n    if (rowDetailsElement) {\n      const detailsHeight = rowDetailsElement.getBoundingClientRect().height;\n      heightAdaptedRect.height += detailsHeight;\n      heightAdaptedRect.bottom += detailsHeight;\n    }\n\n    if (isPointWithinRectY(collisionRectY, heightAdaptedRect)) {\n      // return the container that the active rect is dragged over\n      return [\n        {\n          id,\n          data: { droppableContainer },\n        },\n      ];\n    }\n\n    // in case the dragged row's collisionRectY is not directly within any of the droppable containers\n    // (e.g. when dragging over the scrollbar) we need to find the closest one. Therefore, we calculate\n    // the distance between the droppable container's top/bottom and the collisionRectY coordinate.\n    const droppableContainerY = isDraggingUp ? rect.top : rect.bottom;\n    const distance = Math.abs(collisionRectY - droppableContainerY);\n    collisions.push({ id, data: { droppableContainer, value: distance } });\n  }\n\n  return collisions.toSorted((a, b) => a.data.value - b.data.value);\n};\n\n/**\n * Identifies the last row in the given array where drag-and-drop is disabled, and where all preceding rows are also disabled.\n *\n * @param rows - the table rows\n * @returns the index of the last found row with disabled drag and drop\n */\nfunction findLastDisabledRow(rows: { rowIndex: number; row: Row<unknown> }[]) {\n  let lastDisabledRowIndex: number | undefined = undefined;\n  for (const { rowIndex, row } of rows) {\n    if (row.getCanDrag()) {\n      break;\n    }\n    lastDisabledRowIndex = rowIndex;\n  }\n  return lastDisabledRowIndex;\n}\n\n/**\n * Custom collision detection function that filters droppable containers based the sub-row depth of the dragged row,\n * and then applies the custom closestCenterWithinY algorithm on the filtered targets.\n * Only rows on the same sub-row depth level can be ordered.\n *\n * We need to pass the dragged row stored in the table state, as during dragging in a scrollable table it can happen\n * that the active row is virtualized and would therefore be undefined.\n *\n * @param draggingRowInfo - active/dragged row info saved in the table state\n * @returns\n */\nexport const createRowOrderCollisionDetection = (draggingRowInfo?: {\n  id: string;\n  index: number;\n  row: Row<unknown>;\n}): CollisionDetection => {\n  return ({ active, droppableContainers, ...rest }) => {\n    if (draggingRowInfo === undefined) {\n      return [];\n    }\n    const activeRow = draggingRowInfo.row;\n    const activeRowIndex = draggingRowInfo.index;\n    const activeRowSubRowDepth = activeRow.getSubRowDepth();\n\n    const lastExpandedSubRowsOnLevel = new Set<string>();\n\n    const validTargets = droppableContainers.filter((target) => {\n      const targetRow = target.data.current?.row as Row<unknown>;\n      const targetRowIndex = target.data.current?.rowIndex;\n      const targetRowSubRowDepth = targetRow?.getSubRowDepth();\n      const targetRowDisabled = !targetRow?.getCanDrag();\n      const targetRowLockedDisabled =\n        targetRow?.disabledRowDragAndDropLockPosition;\n\n      const isSameDepthAndParent =\n        targetRowSubRowDepth === activeRowSubRowDepth &&\n        activeRow.parentId === targetRow.parentId;\n\n      // currently active row is a valid target\n      if (activeRowIndex === targetRowIndex) {\n        return true;\n      }\n\n      if (targetRowDisabled && targetRowLockedDisabled !== false) {\n        const rowsByRowIndex = droppableContainers\n          .filter(\n            (container) => container.data.current?.row.parentId === undefined,\n          )\n          .map((container) => ({\n            rowIndex: container.data.current?.rowIndex,\n            row: container.data.current?.row,\n          }))\n          .toSorted((data1, data2) => data1?.rowIndex - data2?.rowIndex);\n\n        const lastDisabledRowIndexFromStart =\n          targetRowLockedDisabled !== 'end'\n            ? findLastDisabledRow(rowsByRowIndex)\n            : undefined;\n        const firstDisabledRowIndexFromEnd =\n          targetRowLockedDisabled !== 'start'\n            ? findLastDisabledRow(rowsByRowIndex.toReversed())\n            : undefined;\n\n        // if the disabled row is already (grouped) at the start or end,\n        // the row is not a valid target\n        if (\n          targetRow.parentId === undefined &&\n          ((lastDisabledRowIndexFromStart !== undefined &&\n            targetRowIndex <= lastDisabledRowIndexFromStart) ||\n            (firstDisabledRowIndexFromEnd !== undefined &&\n              targetRowIndex >= firstDisabledRowIndexFromEnd))\n        ) {\n          return false;\n        }\n      }\n\n      if (isSameDepthAndParent) {\n        const hasOpenSubRows =\n          targetRow.getCanExpand() && targetRow.getIsExpanded();\n\n        // when active row is moved down, and the target row has expanded sub-rows the row\n        // should only be moved when it's moved past the sub-rows\n        // therefore, instead of the parent row, the last expanded sub-row is the valid target\n        if (activeRowIndex < targetRowIndex && hasOpenSubRows) {\n          // get id of last open subrow and save it to be able to make it the actual target\n          const lastExpandedRow = targetRow.getLastExpandedSubRow();\n          if (lastExpandedRow) {\n            lastExpandedSubRowsOnLevel.add(lastExpandedRow.id);\n          }\n          return false;\n        }\n\n        return true;\n      }\n\n      if (targetRowSubRowDepth > activeRowSubRowDepth) {\n        // if the target is the last expanded sub-row of a target row\n        return lastExpandedSubRowsOnLevel.has(targetRow.id);\n      }\n\n      return false;\n    });\n\n    // Apply closestTargetWithinY on filtered targets\n    return closestTargetWithinY({\n      active,\n      droppableContainers: validTargets,\n      ...rest,\n    });\n  };\n};\n// #endregion CollisionDetection\n\n// #region Modifiers\n/**\n * Restricts the vertical movement of an element within the specified bounds.\n *\n * @param transform - Transform values of the currently dragged element\n * @param rect - The bounding rectangle of the element being transformed.\n * @param verticalBounds - The bounds within which the element should be restricted.\n * @returns The updated transform object with restricted y value.\n * @internal\n */\nexport function restrictToVerticalBounds(\n  transform: DragAndDropTransform,\n  rect: ClientRect,\n  verticalBounds: {\n    top: number;\n    bottom: number;\n  },\n): DragAndDropTransform {\n  const value = {\n    ...transform,\n  };\n\n  if (\n    rect.top >= verticalBounds.top &&\n    rect.top + transform.y <= verticalBounds.top\n  ) {\n    value.y = verticalBounds.top - rect.top;\n  } else if (\n    rect.bottom <= verticalBounds.bottom &&\n    rect.bottom + transform.y >= verticalBounds.bottom\n  ) {\n    value.y = verticalBounds.bottom - rect.bottom;\n  }\n  // Only with keyboard navigation:\n  // When focusing the drag handle and scrolling the table so that the row is not visible anymore,\n  // and then pressing SPACE/ENTER to start dragging, the dragged row's position needs to be adjusted\n  // in a way where we need to make sure the row remains within the vertical bounds with the new transform value.\n  else if (rect.top < verticalBounds.top) {\n    const bottomTransformYLimit = verticalBounds.bottom - rect.bottom;\n    const transformY =\n      transform.y > 0\n        ? verticalBounds.top - rect.top + transform.y\n        : verticalBounds.top - rect.top;\n\n    // adjust value.y to be the bottom bound if the new transform value would position the row outside the bottom vertical bound\n    value.y =\n      transformY > bottomTransformYLimit ? bottomTransformYLimit : transformY;\n  } else if (rect.bottom > verticalBounds.bottom) {\n    const topTransformYLimit = verticalBounds.top - rect.top;\n    const transformY =\n      transform.y < 0\n        ? verticalBounds.bottom - rect.bottom + transform.y\n        : verticalBounds.bottom - rect.bottom;\n\n    // adjust value.y to be the top bound if the new transform value would position the row outside the top vertical bound\n    value.y = transformY > topTransformYLimit ? transformY : topTransformYLimit;\n  }\n\n  return value;\n}\n\n/**\n * Creates a dnd-kit modifier to restrict the dragging to the table row area.\n * @param tableHeaderHeight - This height is subtracted from the parent element height.\n * @param containedVariant - Whether the table is using the contained visual variant.\n * @param virtualizationContainer - The table's virtualization container.\n * @returns dnd-kit modifier\n * @internal\n */\nexport function createRestrictToTableRowAreaModifier(\n  tableHeaderHeight: number,\n  containedVariant: boolean,\n  virtualizationContainer?: HTMLDivElement,\n): Modifier {\n  return ({ transform, draggingNodeRect }) => {\n    if (!draggingNodeRect || virtualizationContainer === undefined) {\n      return transform;\n    }\n\n    // Restrict dragging to the vertical axis\n    transform.x = 0;\n\n    const parentRect = virtualizationContainer.getBoundingClientRect();\n    // Restrict dragging to the table container minus borders\n    const verticalBounds = {\n      top: containedVariant\n        ? parentRect?.top + tableHeaderHeight + getDataTableBorderWidth()\n        : parentRect?.top + tableHeaderHeight,\n      bottom: containedVariant\n        ? parentRect?.bottom - getDataTableBorderWidth()\n        : parentRect?.bottom,\n    };\n\n    return restrictToVerticalBounds(\n      transform,\n      draggingNodeRect,\n      verticalBounds,\n    );\n  };\n}\n// #endregion Modifiers\n"],
+  "mappings": "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",
   "names": []
 }

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

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

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

@@ -1,5 +1,6 @@
 import "../../components/Alignment.css";
 import "../../DataTable.css";
+import "../../../../core/components/app-root/AppRoot.css";
 import "../../components/DataTableVirtualizationContainer.css";
 import "../RowOrder/RowOrder.css";
 import "../RowDetails/RowDetails.css";
@@ -12,9 +13,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-4-1";
-var sortOrderIndicator = "_cu1al71-3-4-1";
-var sortingArrow = _7a468({ defaultClassName: "_cu1al72-3-4-1", variantClassNames: { arrowUp: { true: "_cu1al73-3-4-1" }, rowDensity: { "default": "_cu1al74-3-4-1", condensed: "_cu1al75-3-4-1", comfortable: "_cu1al76-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
+var multiSortIndicatorBubble = "_cu1al70-3-5-2";
+var sortOrderIndicator = "_cu1al71-3-5-2";
+var sortingArrow = _7a468({ defaultClassName: "_cu1al72-3-5-2", variantClassNames: { arrowUp: { true: "_cu1al73-3-5-2" }, rowDensity: { "default": "_cu1al74-3-5-2", condensed: "_cu1al75-3-5-2", comfortable: "_cu1al76-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   multiSortIndicatorBubble,
   sortOrderIndicator,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/Sorting/Sorting.css.ts"],
-  "sourcesContent": ["import '../../components/Alignment.css';\nimport '../../DataTable.css';\nimport '../../components/DataTableVirtualizationContainer.css';\nimport '../RowOrder/RowOrder.css';\nimport '../RowDetails/RowDetails.css';\nimport '../RowInteractivity/RowInteractivity.css';\nimport '../../components/DataTableRow.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableCell.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../../components/DataTableHeaderCell.css';\nimport '../../components/DataTableDefaultCell.css';\nimport './Sorting.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var multiSortIndicatorBubble = '_cu1al70-3-4-1';\nexport var sortOrderIndicator = '_cu1al71-3-4-1';\nexport var sortingArrow = _7a468({defaultClassName:'_cu1al72-3-4-1',variantClassNames:{arrowUp:{true:'_cu1al73-3-4-1'},rowDensity:{'default':'_cu1al74-3-4-1',condensed:'_cu1al75-3-4-1',comfortable:'_cu1al76-3-4-1'}},defaultVariants:{},compoundVariants:[]});"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,2BAA2B;AAC/B,IAAI,qBAAqB;AACzB,IAAI,eAAe,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,iBAAgB,GAAE,YAAW,EAAC,WAAU,kBAAiB,WAAU,kBAAiB,aAAY,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
+  "sourcesContent": ["import '../../components/Alignment.css';\nimport '../../DataTable.css';\nimport '../../../../core/components/app-root/AppRoot.css';\nimport '../../components/DataTableVirtualizationContainer.css';\nimport '../RowOrder/RowOrder.css';\nimport '../RowDetails/RowDetails.css';\nimport '../RowInteractivity/RowInteractivity.css';\nimport '../../components/DataTableRow.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableCell.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../../components/DataTableHeaderCell.css';\nimport '../../components/DataTableDefaultCell.css';\nimport './Sorting.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var multiSortIndicatorBubble = '_cu1al70-3-5-2';\nexport var sortOrderIndicator = '_cu1al71-3-5-2';\nexport var sortingArrow = _7a468({defaultClassName:'_cu1al72-3-5-2',variantClassNames:{arrowUp:{true:'_cu1al73-3-5-2'},rowDensity:{'default':'_cu1al74-3-5-2',condensed:'_cu1al75-3-5-2',comfortable:'_cu1al76-3-5-2'}},defaultVariants:{},compoundVariants:[]});"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,2BAA2B;AAC/B,IAAI,qBAAqB;AACzB,IAAI,eAAe,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,iBAAgB,GAAE,YAAW,EAAC,WAAU,kBAAiB,WAAU,kBAAiB,aAAY,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._1udh2jz0-3-4-1 {
+._1udh2jz0-3-5-2 {
   position: relative;
   padding-left: 0;
   padding-right: var(--dt-spacings-size-8, 8px);
@@ -9,67 +9,67 @@
   flex-shrink: 0;
   align-items: center;
 }
-._yj6voi3-3-4-1 ._1udh2jz0-3-4-1 {
+._yj6voi3-3-5-2 ._1udh2jz0-3-5-2 {
   align-items: start;
 }
-._yj6voi5-3-4-1 ._1udh2jz0-3-4-1 {
+._yj6voi5-3-5-2 ._1udh2jz0-3-5-2 {
   align-items: end;
 }
-._11pvd3zy-3-4-1 ._1udh2jz1-3-4-1, ._14k72813-3-4-1 ._1udh2jz1-3-4-1 {
+._11pvd3zy-3-5-2 ._1udh2jz1-3-5-2, ._14k72813-3-5-2 ._1udh2jz1-3-5-2 {
   margin-right: var(--dt-spacings-size-8, 8px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._11pvd3zz-3-4-1 ._1udh2jz1-3-4-1, ._14k72814-3-4-1 ._1udh2jz1-3-4-1 {
+._11pvd3zz-3-5-2 ._1udh2jz1-3-5-2, ._14k72814-3-5-2 ._1udh2jz1-3-5-2 {
   margin-right: var(--dt-spacings-size-2, 2px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._11pvd3z10-3-4-1 ._1udh2jz1-3-4-1, ._14k72815-3-4-1 ._1udh2jz1-3-4-1 {
+._11pvd3z10-3-5-2 ._1udh2jz1-3-5-2, ._14k72815-3-5-2 ._1udh2jz1-3-5-2 {
   margin-right: var(--dt-spacings-size-12, 12px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._1ons7qua-3-4-1 ._1udh2jz2-3-4-1, ._14k72813-3-4-1 ._1udh2jz2-3-4-1 {
+._1ons7qua-3-5-2 ._1udh2jz2-3-5-2, ._14k72813-3-5-2 ._1udh2jz2-3-5-2 {
   padding-right: var(--dt-spacings-size-8, 8px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._1ons7qub-3-4-1 ._1udh2jz2-3-4-1, ._14k72814-3-4-1 ._1udh2jz2-3-4-1 {
+._1ons7qub-3-5-2 ._1udh2jz2-3-5-2, ._14k72814-3-5-2 ._1udh2jz2-3-5-2 {
   padding-right: var(--dt-spacings-size-2, 2px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._1ons7quc-3-4-1 ._1udh2jz2-3-4-1, ._14k72815-3-4-1 ._1udh2jz2-3-4-1 {
+._1ons7quc-3-5-2 ._1udh2jz2-3-5-2, ._14k72815-3-5-2 ._1udh2jz2-3-5-2 {
   padding-right: var(--dt-spacings-size-12, 12px);
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-[data-columntype='sparkline'] ._1udh2jz2-3-4-1 {
+[data-columntype='sparkline'] ._1udh2jz2-3-5-2 {
   align-items: center;
 }
-._1udh2jz3-3-4-1 {
+._1udh2jz3-3-5-2 {
   position: absolute;
   left: 0;
   overflow: hidden;
   stroke: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ons7qua-3-4-1 ._1udh2jz3-3-4-1, ._14k72813-3-4-1 ._1udh2jz3-3-4-1 {
+._1ons7qua-3-5-2 ._1udh2jz3-3-5-2, ._14k72813-3-5-2 ._1udh2jz3-3-5-2 {
   top: calc(var(--dt-spacings-size-8, 8px) * -1);
   bottom: calc(var(--dt-spacings-size-8, 8px) * -1);
   height: calc(100% + (2 * var(--dt-spacings-size-8, 8px)));
 }
-._1ons7qub-3-4-1 ._1udh2jz3-3-4-1, ._14k72814-3-4-1 ._1udh2jz3-3-4-1 {
+._1ons7qub-3-5-2 ._1udh2jz3-3-5-2, ._14k72814-3-5-2 ._1udh2jz3-3-5-2 {
   top: calc(var(--dt-spacings-size-2, 2px) * -1);
   bottom: calc(var(--dt-spacings-size-2, 2px) * -1);
   height: calc(100% + (2 * var(--dt-spacings-size-2, 2px)));
 }
-._1ons7quc-3-4-1 ._1udh2jz3-3-4-1, ._14k72815-3-4-1 ._1udh2jz3-3-4-1 {
+._1ons7quc-3-5-2 ._1udh2jz3-3-5-2, ._14k72815-3-5-2 ._1udh2jz3-3-5-2 {
   top: calc(var(--dt-spacings-size-12, 12px) * -1);
   bottom: calc(var(--dt-spacings-size-12, 12px) * -1);
   height: calc(100% + (2 * var(--dt-spacings-size-12, 12px)));
 }
-._1udh2jz4-3-4-1 {
+._1udh2jz4-3-5-2 {
   right: var(--dt-spacings-size-16, 16px);
 }
-._1udh2jz5-3-4-1 {
+._1udh2jz5-3-5-2 {
   right: calc(20 + var(--dt-spacings-size-16, 16px));
 }
-._1udh2jz6-3-4-1 {
+._1udh2jz6-3-5-2 {
   appearance: none;
   border: 0;
   line-height: 0;
@@ -84,10 +84,10 @@
   height: max-content;
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1udh2jz6-3-4-1:not([disabled]):hover {
+._1udh2jz6-3-5-2:not([disabled]):hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1udh2jz6-3-4-1[disabled] {
+._1udh2jz6-3-5-2[disabled] {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
   cursor: default;
 }

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

@@ -1,6 +1,7 @@
 import "../../../../core/styles/focusRingStatic.css";
 import "../../components/Alignment.css";
 import "../../DataTable.css";
+import "../../../../core/components/app-root/AppRoot.css";
 import "../../components/DataTableVirtualizationContainer.css";
 import "../RowOrder/RowOrder.css";
 import "../RowDetails/RowDetails.css";
@@ -13,11 +14,11 @@ import "../../components/DataTableHeaderCell.css";
 import "../../components/DataTableDefaultCell.css";
 import "./SubRows.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var expandButtonCellWrapper = "_1udh2jz2-3-4-1 _1udh2jz0-3-4-1";
-var expandButtonHeaderCellWrapper = "_1udh2jz1-3-4-1 _1udh2jz0-3-4-1";
-var expandIndentSvg = "_1udh2jz3-3-4-1";
-var expandIndentSvgSize = _7a468({ defaultClassName: "_1udh2jz4-3-4-1", variantClassNames: { rowCanExpand: { true: "_1udh2jz5-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var expanderButton = "_1udh2jz6-3-4-1 _z0fq9b4-3-4-1 _z0fq9bc-3-4-1 _z0fq9b6-3-4-1 _z0fq9b8-3-4-1";
+var expandButtonCellWrapper = "_1udh2jz2-3-5-2 _1udh2jz0-3-5-2";
+var expandButtonHeaderCellWrapper = "_1udh2jz1-3-5-2 _1udh2jz0-3-5-2";
+var expandIndentSvg = "_1udh2jz3-3-5-2";
+var expandIndentSvgSize = _7a468({ defaultClassName: "_1udh2jz4-3-5-2", variantClassNames: { rowCanExpand: { true: "_1udh2jz5-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var expanderButton = "_1udh2jz6-3-5-2 _z0fq9b4-3-5-2 _z0fq9bd-3-5-2 _z0fq9b6-3-5-2 _z0fq9b9-3-5-2";
 export {
   expandButtonCellWrapper,
   expandButtonHeaderCellWrapper,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/SubRows/SubRows.css.ts"],
-  "sourcesContent": ["import '../../../../core/styles/focusRingStatic.css';\nimport '../../components/Alignment.css';\nimport '../../DataTable.css';\nimport '../../components/DataTableVirtualizationContainer.css';\nimport '../RowOrder/RowOrder.css';\nimport '../RowDetails/RowDetails.css';\nimport '../RowInteractivity/RowInteractivity.css';\nimport '../../components/DataTableRow.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableCell.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../../components/DataTableHeaderCell.css';\nimport '../../components/DataTableDefaultCell.css';\nimport './SubRows.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var expandButtonCellWrapper = '_1udh2jz2-3-4-1 _1udh2jz0-3-4-1';\nexport var expandButtonHeaderCellWrapper = '_1udh2jz1-3-4-1 _1udh2jz0-3-4-1';\nexport var expandIndentSvg = '_1udh2jz3-3-4-1';\nexport var expandIndentSvgSize = _7a468({defaultClassName:'_1udh2jz4-3-4-1',variantClassNames:{rowCanExpand:{true:'_1udh2jz5-3-4-1'}},defaultVariants:{},compoundVariants:[]});\nexport var expanderButton = '_1udh2jz6-3-4-1 _z0fq9b4-3-4-1 _z0fq9bc-3-4-1 _z0fq9b6-3-4-1 _z0fq9b8-3-4-1';"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,0BAA0B;AAC9B,IAAI,gCAAgC;AACpC,IAAI,kBAAkB;AACtB,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,cAAa,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACtK,IAAI,iBAAiB;",
+  "sourcesContent": ["import '../../../../core/styles/focusRingStatic.css';\nimport '../../components/Alignment.css';\nimport '../../DataTable.css';\nimport '../../../../core/components/app-root/AppRoot.css';\nimport '../../components/DataTableVirtualizationContainer.css';\nimport '../RowOrder/RowOrder.css';\nimport '../RowDetails/RowDetails.css';\nimport '../RowInteractivity/RowInteractivity.css';\nimport '../../components/DataTableRow.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableCell.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../../components/DataTableHeaderCell.css';\nimport '../../components/DataTableDefaultCell.css';\nimport './SubRows.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var expandButtonCellWrapper = '_1udh2jz2-3-5-2 _1udh2jz0-3-5-2';\nexport var expandButtonHeaderCellWrapper = '_1udh2jz1-3-5-2 _1udh2jz0-3-5-2';\nexport var expandIndentSvg = '_1udh2jz3-3-5-2';\nexport var expandIndentSvgSize = _7a468({defaultClassName:'_1udh2jz4-3-5-2',variantClassNames:{rowCanExpand:{true:'_1udh2jz5-3-5-2'}},defaultVariants:{},compoundVariants:[]});\nexport var expanderButton = '_1udh2jz6-3-5-2 _z0fq9b4-3-5-2 _z0fq9bd-3-5-2 _z0fq9b6-3-5-2 _z0fq9b9-3-5-2';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,0BAA0B;AAC9B,IAAI,gCAAgC;AACpC,IAAI,kBAAkB;AACtB,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,cAAa,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACtK,IAAI,iBAAiB;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._1jrjqrd1-3-4-1 ._1jrjqrd2-3-4-1::before {
+._1jrjqrd1-3-5-2 ._1jrjqrd2-3-5-2::before {
   content: "";
   position: absolute;
   display: inline-block;
@@ -8,5 +8,5 @@
   width: var(--dt-spacings-size-4, 4px);
   left: var(--dt-spacings-size-0, 0);
   border-radius: 0 var(--dt-borders-radius-field-subdued, 3px) var(--dt-borders-radius-field-subdued, 3px) 0;
-  background-color: var(--_1jrjqrd0-3-4-1);
+  background-color: var(--_1jrjqrd0-3-5-2);
 }

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

@@ -1,7 +1,7 @@
 import "./Thresholds.css";
-var hasPillThresholds = "_1jrjqrd1-3-4-1";
-var thresholdPill = "_1jrjqrd2-3-4-1";
-var thresholdPillColor = "var(--_1jrjqrd0-3-4-1)";
+var hasPillThresholds = "_1jrjqrd1-3-5-2";
+var thresholdPill = "_1jrjqrd2-3-5-2";
+var thresholdPillColor = "var(--_1jrjqrd0-3-5-2)";
 export {
   hasPillThresholds,
   thresholdPill,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/Thresholds/Thresholds.css.ts"],
-  "sourcesContent": ["import './Thresholds.css';\nexport var hasPillThresholds = '_1jrjqrd1-3-4-1';\nexport var thresholdPill = '_1jrjqrd2-3-4-1';\nexport var thresholdPillColor = 'var(--_1jrjqrd0-3-4-1)';"],
+  "sourcesContent": ["import './Thresholds.css';\nexport var hasPillThresholds = '_1jrjqrd1-3-5-2';\nexport var thresholdPill = '_1jrjqrd2-3-5-2';\nexport var thresholdPillColor = 'var(--_1jrjqrd0-3-5-2)';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,gBAAgB;AACpB,IAAI,qBAAqB;",
   "names": []
 }

package/esm/tables/DataTable/features/UserActions/FloatingMenu.js

@@ -61,6 +61,7 @@ function CellActionFloatingMenu() {
                 x: 0,
                 y: 0
               };
+              newState.openMenuRowId = null;
               return newState;
             });
           }