@dynatrace/strato-components 3.8.0 → 3.9.0

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 '../../../../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 '../ColumnSizing/ColumnSizing.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-8-0';\nexport var sortOrderIndicator = '_cu1al71-3-8-0';\nexport 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:[]});"],
+  "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 '../ColumnSizing/ColumnSizing.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-9-0';\nexport var sortOrderIndicator = '_cu1al71-3-9-0';\nexport 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:[]});"],
   "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,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-8-0 {
+._1udh2jz0-3-9-0 {
   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-8-0 ._1udh2jz0-3-8-0 {
+._yj6voi3-3-9-0 ._1udh2jz0-3-9-0 {
   align-items: start;
 }
-._yj6voi5-3-8-0 ._1udh2jz0-3-8-0 {
+._yj6voi5-3-9-0 ._1udh2jz0-3-9-0 {
   align-items: end;
 }
-._11pvd3zy-3-8-0 ._1udh2jz1-3-8-0, ._14k72813-3-8-0 ._1udh2jz1-3-8-0 {
+._11pvd3zy-3-9-0 ._1udh2jz1-3-9-0, ._14k72813-3-9-0 ._1udh2jz1-3-9-0 {
   margin-right: 8px;
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._11pvd3zz-3-8-0 ._1udh2jz1-3-8-0, ._14k72814-3-8-0 ._1udh2jz1-3-8-0 {
+._11pvd3zz-3-9-0 ._1udh2jz1-3-9-0, ._14k72814-3-9-0 ._1udh2jz1-3-9-0 {
   margin-right: 2px;
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._11pvd3z10-3-8-0 ._1udh2jz1-3-8-0, ._14k72815-3-8-0 ._1udh2jz1-3-8-0 {
+._11pvd3z10-3-9-0 ._1udh2jz1-3-9-0, ._14k72815-3-9-0 ._1udh2jz1-3-9-0 {
   margin-right: 12px;
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._1ons7qua-3-8-0 ._1udh2jz2-3-8-0, ._14k72813-3-8-0 ._1udh2jz2-3-8-0 {
+._1ons7qua-3-9-0 ._1udh2jz2-3-9-0, ._14k72813-3-9-0 ._1udh2jz2-3-9-0 {
   padding-right: 8px;
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._1ons7qub-3-8-0 ._1udh2jz2-3-8-0, ._14k72814-3-8-0 ._1udh2jz2-3-8-0 {
+._1ons7qub-3-9-0 ._1udh2jz2-3-9-0, ._14k72814-3-9-0 ._1udh2jz2-3-9-0 {
   padding-right: 2px;
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-._1ons7quc-3-8-0 ._1udh2jz2-3-8-0, ._14k72815-3-8-0 ._1udh2jz2-3-8-0 {
+._1ons7quc-3-9-0 ._1udh2jz2-3-9-0, ._14k72815-3-9-0 ._1udh2jz2-3-9-0 {
   padding-right: 12px;
   margin-left: calc(var(--dt-spacings-size-4, 4px) * -1);
 }
-[data-columntype='sparkline'] ._1udh2jz2-3-8-0 {
+[data-columntype='sparkline'] ._1udh2jz2-3-9-0 {
   align-items: center;
 }
-._1udh2jz3-3-8-0 {
+._1udh2jz3-3-9-0 {
   position: absolute;
   left: 0;
   overflow: hidden;
   stroke: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ons7qua-3-8-0 ._1udh2jz3-3-8-0, ._14k72813-3-8-0 ._1udh2jz3-3-8-0 {
+._1ons7qua-3-9-0 ._1udh2jz3-3-9-0, ._14k72813-3-9-0 ._1udh2jz3-3-9-0 {
   top: calc(8px * -1);
   bottom: calc(8px * -1);
   height: calc(100% + (2 * 8px));
 }
-._1ons7qub-3-8-0 ._1udh2jz3-3-8-0, ._14k72814-3-8-0 ._1udh2jz3-3-8-0 {
+._1ons7qub-3-9-0 ._1udh2jz3-3-9-0, ._14k72814-3-9-0 ._1udh2jz3-3-9-0 {
   top: calc(2px * -1);
   bottom: calc(2px * -1);
   height: calc(100% + (2 * 2px));
 }
-._1ons7quc-3-8-0 ._1udh2jz3-3-8-0, ._14k72815-3-8-0 ._1udh2jz3-3-8-0 {
+._1ons7quc-3-9-0 ._1udh2jz3-3-9-0, ._14k72815-3-9-0 ._1udh2jz3-3-9-0 {
   top: calc(12px * -1);
   bottom: calc(12px * -1);
   height: calc(100% + (2 * 12px));
 }
-._1udh2jz4-3-8-0 {
+._1udh2jz4-3-9-0 {
   right: var(--dt-spacings-size-16, 16px);
 }
-._1udh2jz5-3-8-0 {
+._1udh2jz5-3-9-0 {
   right: calc(20 + var(--dt-spacings-size-16, 16px));
 }
-._1udh2jz6-3-8-0 {
+._1udh2jz6-3-9-0 {
   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-8-0:not([disabled]):hover {
+._1udh2jz6-3-9-0:not([disabled]):hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1udh2jz6-3-8-0[disabled] {
+._1udh2jz6-3-9-0[disabled] {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
   cursor: default;
 }

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

@@ -15,11 +15,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-8-0 _1udh2jz0-3-8-0";
-var expandButtonHeaderCellWrapper = "_1udh2jz1-3-8-0 _1udh2jz0-3-8-0";
-var expandIndentSvg = "_1udh2jz3-3-8-0";
-var expandIndentSvgSize = _7a468({ defaultClassName: "_1udh2jz4-3-8-0", variantClassNames: { rowCanExpand: { true: "_1udh2jz5-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
-var expanderButton = "_1udh2jz6-3-8-0 _z0fq9b4-3-8-0 _z0fq9bd-3-8-0 _z0fq9b6-3-8-0 _z0fq9b9-3-8-0";
+var expandButtonCellWrapper = "_1udh2jz2-3-9-0 _1udh2jz0-3-9-0";
+var expandButtonHeaderCellWrapper = "_1udh2jz1-3-9-0 _1udh2jz0-3-9-0";
+var expandIndentSvg = "_1udh2jz3-3-9-0";
+var expandIndentSvgSize = _7a468({ defaultClassName: "_1udh2jz4-3-9-0", variantClassNames: { rowCanExpand: { true: "_1udh2jz5-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
+var expanderButton = "_1udh2jz6-3-9-0 _z0fq9b4-3-9-0 _z0fq9bd-3-9-0 _z0fq9b6-3-9-0 _z0fq9b9-3-9-0";
 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 '../../../../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 '../ColumnSizing/ColumnSizing.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-8-0 _1udh2jz0-3-8-0';\nexport var expandButtonHeaderCellWrapper = '_1udh2jz1-3-8-0 _1udh2jz0-3-8-0';\nexport var expandIndentSvg = '_1udh2jz3-3-8-0';\nexport var expandIndentSvgSize = _7a468({defaultClassName:'_1udh2jz4-3-8-0',variantClassNames:{rowCanExpand:{true:'_1udh2jz5-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var expanderButton = '_1udh2jz6-3-8-0 _z0fq9b4-3-8-0 _z0fq9bd-3-8-0 _z0fq9b6-3-8-0 _z0fq9b9-3-8-0';"],
+  "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 '../ColumnSizing/ColumnSizing.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-9-0 _1udh2jz0-3-9-0';\nexport var expandButtonHeaderCellWrapper = '_1udh2jz1-3-9-0 _1udh2jz0-3-9-0';\nexport var expandIndentSvg = '_1udh2jz3-3-9-0';\nexport var expandIndentSvgSize = _7a468({defaultClassName:'_1udh2jz4-3-9-0',variantClassNames:{rowCanExpand:{true:'_1udh2jz5-3-9-0'}},defaultVariants:{},compoundVariants:[]});\nexport var expanderButton = '_1udh2jz6-3-9-0 _z0fq9b4-3-9-0 _z0fq9bd-3-9-0 _z0fq9b6-3-9-0 _z0fq9b9-3-9-0';"],
   "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,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-8-0 ._1jrjqrd2-3-8-0::before {
+._1jrjqrd1-3-9-0 ._1jrjqrd2-3-9-0::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-8-0);
+  background-color: var(--_1jrjqrd0-3-9-0);
 }

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

@@ -1,7 +1,7 @@
 import "./Thresholds.css";
-var hasPillThresholds = "_1jrjqrd1-3-8-0";
-var thresholdPill = "_1jrjqrd2-3-8-0";
-var thresholdPillColor = "var(--_1jrjqrd0-3-8-0)";
+var hasPillThresholds = "_1jrjqrd1-3-9-0";
+var thresholdPill = "_1jrjqrd2-3-9-0";
+var thresholdPillColor = "var(--_1jrjqrd0-3-9-0)";
 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-8-0';\nexport var thresholdPill = '_1jrjqrd2-3-8-0';\nexport var thresholdPillColor = 'var(--_1jrjqrd0-3-8-0)';"],
+  "sourcesContent": ["import './Thresholds.css';\nexport var hasPillThresholds = '_1jrjqrd1-3-9-0';\nexport var thresholdPill = '_1jrjqrd2-3-9-0';\nexport var thresholdPillColor = 'var(--_1jrjqrd0-3-9-0)';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,gBAAgB;AACpB,IAAI,qBAAqB;",
   "names": []
 }

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

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, Children } from "react";
+import { useCallback, useMemo, Children } from "react";
 import { createPortal } from "react-dom";
+import { useCloseFloatingMenuOnScroll } from "./useCloseFloatingMenuOnScroll.js";
 import * as styles from "./UserActions.sty.js";
 import { Menu } from "../../../../navigation/menu/Menu.js";
 import {
@@ -27,6 +28,22 @@ function CellActionFloatingMenu() {
     return null;
   }, [rowId, columnId, type]);
   const menuOpen = type !== null && columnId !== null && actions !== null;
+  const closeMenu = useCallback(() => {
+    table.baseAtoms.floatingMenuInfo.set(() => ({
+      type: null,
+      headerId: null,
+      rowId: null,
+      columnId: null,
+      x: 0,
+      y: 0
+    }));
+    table.baseAtoms.openMenuRowId.set(null);
+  }, [table]);
+  useCloseFloatingMenuOnScroll({
+    isMenuOpen: menuOpen,
+    closeMenu,
+    stickyVertically: type === "headerAction"
+  });
   const { header, column, cell } = useMemo(() => {
     if (menuOpen === false) {
       return { column: void 0, cell: void 0 };
@@ -53,15 +70,7 @@ function CellActionFloatingMenu() {
         open: menuOpen,
         onOpenChange: (isOpen) => {
           if (isOpen === false) {
-            table.baseAtoms.floatingMenuInfo.set(() => ({
-              type: null,
-              headerId: null,
-              rowId: null,
-              columnId: null,
-              x: 0,
-              y: 0
-            }));
-            table.baseAtoms.openMenuRowId.set(null);
+            closeMenu();
           }
         },
         modal: false,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/UserActions/FloatingMenu.tsx"],
-  "sourcesContent": ["import type { RowData, Cell, Column, Header } from '@tanstack/react-table';\nimport { type JSX, useMemo, Children } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport * as styles from './UserActions.sty.js';\nimport { Menu } from '../../../../navigation/menu/Menu.js';\nimport {\n  DataTableCellContextProvider,\n  DataTableColumnContextProvider,\n  DataTableHeaderContextProvider,\n  useDataTable,\n} from '../../contexts/DataTableContext.js';\nimport type { TDataTableFeatures } from '../types/features.types.js';\n\n/**\n * @internal\n * Floating menu for right click events.\n */\nexport function CellActionFloatingMenu(): JSX.Element | undefined {\n  const table = useDataTable();\n  const { type, headerId, rowId, columnId, x, y } =\n    table.atoms.floatingMenuInfo?.get() ?? {\n      type: null,\n      headerId: null,\n      rowId: null,\n      columnId: null,\n    };\n\n  const actions = useMemo(() => {\n    if (type === 'headerAction' && columnId !== null) {\n      return table.getUserActionsForColumn(columnId);\n    }\n\n    if (type === 'cellAction' && columnId !== null && rowId !== null) {\n      return table.getUserActionsForCell(columnId, rowId);\n    }\n\n    return null;\n    // Avoid adding the `table` instance into the dependency array to prevent unnecessary re-renders\n    // when the table instance changes but the relevant state does not.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [rowId, columnId, type]);\n\n  const menuOpen = type !== null && columnId !== null && actions !== null;\n\n  // Find the right column and cell objects to provide\n  const { header, column, cell } = useMemo<{\n    header?: Header<TDataTableFeatures, RowData>;\n    column?: Column<TDataTableFeatures, RowData>;\n    cell?: Cell<TDataTableFeatures, RowData>;\n  }>(() => {\n    if (menuOpen === false) {\n      return { column: undefined, cell: undefined };\n    }\n\n    const header = headerId ? table.getHeader(headerId) : undefined;\n    const column = table.getColumn(columnId);\n\n    let cell: Cell<TDataTableFeatures, RowData> | undefined = undefined;\n    if (rowId) {\n      const rowCells = table.getRow(rowId).getAllCells();\n      const columnCell = rowCells.find(\n        (cell) => cell.column.id === columnId,\n      ) as Cell<TDataTableFeatures, RowData> | undefined;\n\n      cell = columnCell;\n    }\n\n    return { header, column, cell };\n    // Avoid adding the `table` instance into the dependency array to prevent unnecessary re-renders\n    // when the table instance changes but the relevant state does not.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [columnId, headerId, menuOpen, rowId]);\n\n  // Avoid spawning the menu while it is closed to avoid react render\n  // performance issues.\n  if (menuOpen === false) {\n    return;\n  }\n\n  // We need to portal the entire floating menu to escape CSS transforms on ancestor elements.\n  // This ensures transforms on parent containers don't affect the position of the trigger button.\n  return createPortal(\n    <Menu\n      open={menuOpen}\n      onOpenChange={(isOpen) => {\n        if (isOpen === false) {\n          table.baseAtoms.floatingMenuInfo.set(() => ({\n            type: null,\n            headerId: null,\n            rowId: null,\n            columnId: null,\n            x: 0,\n            y: 0,\n          }));\n          table.baseAtoms.openMenuRowId.set(null);\n        }\n      }}\n      modal={false}\n    >\n      <Menu.Trigger>\n        <button\n          disabled\n          type=\"button\"\n          className={styles.floatingMenuButton}\n          style={{\n            top: `${y}px`,\n            left: `${x}px`,\n          }}\n          data-trigger=\"context-action\"\n        />\n      </Menu.Trigger>\n      {menuOpen === true && (\n        <DataTableHeaderContextProvider value={header}>\n          <DataTableColumnContextProvider value={column}>\n            <DataTableCellContextProvider value={cell}>\n              <Menu.Content>\n                {/*\n                 * Run all actions through a React.Children map so they will receive\n                 * an automatic key and do not violate react key map rules.\n                 */}\n                {Children.map(actions, (child) => child)}\n              </Menu.Content>\n            </DataTableCellContextProvider>\n          </DataTableColumnContextProvider>\n        </DataTableHeaderContextProvider>\n      )}\n    </Menu>,\n    document.body,\n  );\n}\n"],
-  "mappings": "AAmFI,SAkBI,KAlBJ;AAlFJ,SAAmB,SAAS,gBAAgB;AAC5C,SAAS,oBAAoB;AAE7B,YAAY,YAAY;AACxB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAOA,SAAS,yBAAkD;AAChE,QAAM,QAAQ,aAAa;AAC3B,QAAM,EAAE,MAAM,UAAU,OAAO,UAAU,GAAG,EAAE,IAC5C,MAAM,MAAM,kBAAkB,IAAI,KAAK;AAAA,IACrC,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AAEF,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,SAAS,kBAAkB,aAAa,MAAM;AAChD,aAAO,MAAM,wBAAwB,QAAQ;AAAA,IAC/C;AAEA,QAAI,SAAS,gBAAgB,aAAa,QAAQ,UAAU,MAAM;AAChE,aAAO,MAAM,sBAAsB,UAAU,KAAK;AAAA,IACpD;AAEA,WAAO;AAAA,EAIT,GAAG,CAAC,OAAO,UAAU,IAAI,CAAC;AAE1B,QAAM,WAAW,SAAS,QAAQ,aAAa,QAAQ,YAAY;AAGnE,QAAM,EAAE,QAAQ,QAAQ,KAAK,IAAI,QAI9B,MAAM;AACP,QAAI,aAAa,OAAO;AACtB,aAAO,EAAE,QAAQ,QAAW,MAAM,OAAU;AAAA,IAC9C;AAEA,UAAMA,UAAS,WAAW,MAAM,UAAU,QAAQ,IAAI;AACtD,UAAMC,UAAS,MAAM,UAAU,QAAQ;AAEvC,QAAIC,QAAsD;AAC1D,QAAI,OAAO;AACT,YAAM,WAAW,MAAM,OAAO,KAAK,EAAE,YAAY;AACjD,YAAM,aAAa,SAAS;AAAA,QAC1B,CAACA,UAASA,MAAK,OAAO,OAAO;AAAA,MAC/B;AAEA,MAAAA,QAAO;AAAA,IACT;AAEA,WAAO,EAAE,QAAAF,SAAQ,QAAAC,SAAQ,MAAAC,MAAK;AAAA,EAIhC,GAAG,CAAC,UAAU,UAAU,UAAU,KAAK,CAAC;AAIxC,MAAI,aAAa,OAAO;AACtB;AAAA,EACF;AAIA,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,cAAc,CAAC,WAAW;AACxB,cAAI,WAAW,OAAO;AACpB,kBAAM,UAAU,iBAAiB,IAAI,OAAO;AAAA,cAC1C,MAAM;AAAA,cACN,UAAU;AAAA,cACV,OAAO;AAAA,cACP,UAAU;AAAA,cACV,GAAG;AAAA,cACH,GAAG;AAAA,YACL,EAAE;AACF,kBAAM,UAAU,cAAc,IAAI,IAAI;AAAA,UACxC;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QAEP;AAAA,8BAAC,KAAK,SAAL,EACC;AAAA,YAAC;AAAA;AAAA,cACC,UAAQ;AAAA,cACR,MAAK;AAAA,cACL,WAAW,OAAO;AAAA,cAClB,OAAO;AAAA,gBACL,KAAK,GAAG,CAAC;AAAA,gBACT,MAAM,GAAG,CAAC;AAAA,cACZ;AAAA,cACA,gBAAa;AAAA;AAAA,UACf,GACF;AAAA,UACC,aAAa,QACZ,oBAAC,kCAA+B,OAAO,QACrC,8BAAC,kCAA+B,OAAO,QACrC,8BAAC,gCAA6B,OAAO,MACnC,8BAAC,KAAK,SAAL,EAKE,mBAAS,IAAI,SAAS,CAAC,UAAU,KAAK,GACzC,GACF,GACF,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,IACA,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import type { RowData, Cell, Column, Header } from '@tanstack/react-table';\nimport { type JSX, useCallback, useMemo, Children } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useCloseFloatingMenuOnScroll } from './useCloseFloatingMenuOnScroll.js';\nimport * as styles from './UserActions.sty.js';\nimport { Menu } from '../../../../navigation/menu/Menu.js';\nimport {\n  DataTableCellContextProvider,\n  DataTableColumnContextProvider,\n  DataTableHeaderContextProvider,\n  useDataTable,\n} from '../../contexts/DataTableContext.js';\nimport type { TDataTableFeatures } from '../types/features.types.js';\n\n/**\n * @internal\n * Floating menu for right click events.\n */\nexport function CellActionFloatingMenu(): JSX.Element | undefined {\n  const table = useDataTable();\n  const { type, headerId, rowId, columnId, x, y } =\n    table.atoms.floatingMenuInfo?.get() ?? {\n      type: null,\n      headerId: null,\n      rowId: null,\n      columnId: null,\n    };\n\n  const actions = useMemo(() => {\n    if (type === 'headerAction' && columnId !== null) {\n      return table.getUserActionsForColumn(columnId);\n    }\n\n    if (type === 'cellAction' && columnId !== null && rowId !== null) {\n      return table.getUserActionsForCell(columnId, rowId);\n    }\n\n    return null;\n    // Avoid adding the `table` instance into the dependency array to prevent unnecessary re-renders\n    // when the table instance changes but the relevant state does not.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [rowId, columnId, type]);\n\n  const menuOpen = type !== null && columnId !== null && actions !== null;\n\n  const closeMenu = useCallback(() => {\n    table.baseAtoms.floatingMenuInfo.set(() => ({\n      type: null,\n      headerId: null,\n      rowId: null,\n      columnId: null,\n      x: 0,\n      y: 0,\n    }));\n    table.baseAtoms.openMenuRowId.set(null);\n  }, [table]);\n\n  useCloseFloatingMenuOnScroll({\n    isMenuOpen: menuOpen,\n    closeMenu,\n    stickyVertically: type === 'headerAction',\n  });\n\n  // Find the right column and cell objects to provide\n  const { header, column, cell } = useMemo<{\n    header?: Header<TDataTableFeatures, RowData>;\n    column?: Column<TDataTableFeatures, RowData>;\n    cell?: Cell<TDataTableFeatures, RowData>;\n  }>(() => {\n    if (menuOpen === false) {\n      return { column: undefined, cell: undefined };\n    }\n\n    const header = headerId ? table.getHeader(headerId) : undefined;\n    const column = table.getColumn(columnId);\n\n    let cell: Cell<TDataTableFeatures, RowData> | undefined = undefined;\n    if (rowId) {\n      const rowCells = table.getRow(rowId).getAllCells();\n      const columnCell = rowCells.find(\n        (cell) => cell.column.id === columnId,\n      ) as Cell<TDataTableFeatures, RowData> | undefined;\n\n      cell = columnCell;\n    }\n\n    return { header, column, cell };\n    // Avoid adding the `table` instance into the dependency array to prevent unnecessary re-renders\n    // when the table instance changes but the relevant state does not.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [columnId, headerId, menuOpen, rowId]);\n\n  // Avoid spawning the menu while it is closed to avoid react render\n  // performance issues.\n  if (menuOpen === false) {\n    return;\n  }\n\n  // We need to portal the entire floating menu to escape CSS transforms on ancestor elements.\n  // This ensures transforms on parent containers don't affect the position of the trigger button.\n  return createPortal(\n    <Menu\n      open={menuOpen}\n      onOpenChange={(isOpen) => {\n        if (isOpen === false) {\n          closeMenu();\n        }\n      }}\n      modal={false}\n    >\n      <Menu.Trigger>\n        <button\n          disabled\n          type=\"button\"\n          className={styles.floatingMenuButton}\n          style={{\n            top: `${y}px`,\n            left: `${x}px`,\n          }}\n          data-trigger=\"context-action\"\n        />\n      </Menu.Trigger>\n      {menuOpen === true && (\n        <DataTableHeaderContextProvider value={header}>\n          <DataTableColumnContextProvider value={column}>\n            <DataTableCellContextProvider value={cell}>\n              <Menu.Content>\n                {/*\n                 * Run all actions through a React.Children map so they will receive\n                 * an automatic key and do not violate react key map rules.\n                 */}\n                {Children.map(actions, (child) => child)}\n              </Menu.Content>\n            </DataTableCellContextProvider>\n          </DataTableColumnContextProvider>\n        </DataTableHeaderContextProvider>\n      )}\n    </Menu>,\n    document.body,\n  );\n}\n"],
+  "mappings": "AAsGI,SAUI,KAVJ;AArGJ,SAAmB,aAAa,SAAS,gBAAgB;AACzD,SAAS,oBAAoB;AAE7B,SAAS,oCAAoC;AAC7C,YAAY,YAAY;AACxB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAOA,SAAS,yBAAkD;AAChE,QAAM,QAAQ,aAAa;AAC3B,QAAM,EAAE,MAAM,UAAU,OAAO,UAAU,GAAG,EAAE,IAC5C,MAAM,MAAM,kBAAkB,IAAI,KAAK;AAAA,IACrC,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AAEF,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,SAAS,kBAAkB,aAAa,MAAM;AAChD,aAAO,MAAM,wBAAwB,QAAQ;AAAA,IAC/C;AAEA,QAAI,SAAS,gBAAgB,aAAa,QAAQ,UAAU,MAAM;AAChE,aAAO,MAAM,sBAAsB,UAAU,KAAK;AAAA,IACpD;AAEA,WAAO;AAAA,EAIT,GAAG,CAAC,OAAO,UAAU,IAAI,CAAC;AAE1B,QAAM,WAAW,SAAS,QAAQ,aAAa,QAAQ,YAAY;AAEnE,QAAM,YAAY,YAAY,MAAM;AAClC,UAAM,UAAU,iBAAiB,IAAI,OAAO;AAAA,MAC1C,MAAM;AAAA,MACN,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,GAAG;AAAA,MACH,GAAG;AAAA,IACL,EAAE;AACF,UAAM,UAAU,cAAc,IAAI,IAAI;AAAA,EACxC,GAAG,CAAC,KAAK,CAAC;AAEV,+BAA6B;AAAA,IAC3B,YAAY;AAAA,IACZ;AAAA,IACA,kBAAkB,SAAS;AAAA,EAC7B,CAAC;AAGD,QAAM,EAAE,QAAQ,QAAQ,KAAK,IAAI,QAI9B,MAAM;AACP,QAAI,aAAa,OAAO;AACtB,aAAO,EAAE,QAAQ,QAAW,MAAM,OAAU;AAAA,IAC9C;AAEA,UAAMA,UAAS,WAAW,MAAM,UAAU,QAAQ,IAAI;AACtD,UAAMC,UAAS,MAAM,UAAU,QAAQ;AAEvC,QAAIC,QAAsD;AAC1D,QAAI,OAAO;AACT,YAAM,WAAW,MAAM,OAAO,KAAK,EAAE,YAAY;AACjD,YAAM,aAAa,SAAS;AAAA,QAC1B,CAACA,UAASA,MAAK,OAAO,OAAO;AAAA,MAC/B;AAEA,MAAAA,QAAO;AAAA,IACT;AAEA,WAAO,EAAE,QAAAF,SAAQ,QAAAC,SAAQ,MAAAC,MAAK;AAAA,EAIhC,GAAG,CAAC,UAAU,UAAU,UAAU,KAAK,CAAC;AAIxC,MAAI,aAAa,OAAO;AACtB;AAAA,EACF;AAIA,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,cAAc,CAAC,WAAW;AACxB,cAAI,WAAW,OAAO;AACpB,sBAAU;AAAA,UACZ;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QAEP;AAAA,8BAAC,KAAK,SAAL,EACC;AAAA,YAAC;AAAA;AAAA,cACC,UAAQ;AAAA,cACR,MAAK;AAAA,cACL,WAAW,OAAO;AAAA,cAClB,OAAO;AAAA,gBACL,KAAK,GAAG,CAAC;AAAA,gBACT,MAAM,GAAG,CAAC;AAAA,cACZ;AAAA,cACA,gBAAa;AAAA;AAAA,UACf,GACF;AAAA,UACC,aAAa,QACZ,oBAAC,kCAA+B,OAAO,QACrC,8BAAC,kCAA+B,OAAO,QACrC,8BAAC,gCAA6B,OAAO,MACnC,8BAAC,KAAK,SAAL,EAKE,mBAAS,IAAI,SAAS,CAAC,UAAU,KAAK,GACzC,GACF,GACF,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,IACA,SAAS;AAAA,EACX;AACF;",
   "names": ["header", "column", "cell"]
 }

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

@@ -1,7 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Children, useState } from "react";
+import {
+  Children,
+  useCallback,
+  useState
+} from "react";
 import { DotMenuIcon } from "@dynatrace/strato-icons";
 import { useCellAndColumnActions } from "./useCellActions.js";
+import { useCloseMenuOnScroll } from "./useCloseMenuOnScroll.js";
 import * as styles from "./UserActions.sty.js";
 import { Menu } from "../../../../navigation/menu/Menu.js";
 import {
@@ -34,6 +39,20 @@ function InlineUserActionsMenu(props) {
     columnId,
     type
   });
+  const closeMenu = useCallback(() => {
+    onClose?.();
+    if (type === "cell") {
+      table.setOpenMenuRowId(null);
+    }
+    setMenuOpen(false);
+  }, [onClose, table, type]);
+  useCloseMenuOnScroll({
+    isMenuOpen: menuOpen,
+    closeMenu,
+    rowId: headerGroupOrRowId,
+    columnId,
+    isHeader: type === "header"
+  });
   const floatingMenuInfo = table.atoms.floatingMenuInfo?.get();
   const isFloatingMenuOpenForThis = floatingMenuInfo?.columnId === columnId && (type === "cell" && floatingMenuInfo?.rowId === headerGroupOrRowId || type === "header" && floatingMenuInfo?.type === "headerAction");
   if (isFloatingMenuOpenForThis) {
@@ -101,13 +120,11 @@ function InlineUserActionsMenu(props) {
     {
       open: menuOpen,
       onOpenChange: (open) => {
-        if (!open && onClose) {
-          onClose();
-        }
-        if (!open && type === "cell") {
-          table.setOpenMenuRowId(null);
+        if (!open) {
+          closeMenu();
+          return;
         }
-        setMenuOpen(open);
+        setMenuOpen(true);
       },
       modal: false,
       children: [

package/esm/tables/DataTable/features/UserActions/InlineUserActionsMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/UserActions/InlineUserActionsMenu.tsx"],
-  "sourcesContent": ["import { Children, type JSX, type PropsWithChildren, useState } from 'react';\n\nimport { DotMenuIcon } from '@dynatrace/strato-icons';\n\nimport { useCellAndColumnActions } from './useCellActions.js';\nimport * as styles from './UserActions.sty.js';\nimport { Menu } from '../../../../navigation/menu/Menu.js';\nimport {\n  DATA_TABLE_CELL_HORIZONTAL_PADDING_MAP,\n  DATA_TABLE_DEFAULT_ICON_SIZE,\n  DATA_TABLE_SUB_ROW_EXPANDER_ICON_SIZE as SUB_ROW_EXPANDER_ICON_SIZE,\n  DATA_TABLE_SUB_ROW_INDENT_GRID as SUB_ROW_INDENT_GRID,\n} from '../../constants.js';\nimport {\n  DataTableColumnContextProvider,\n  useDataTable,\n} from '../../contexts/DataTableContext.js';\n\n/**\n * Three dots menu for inline cell or column actions that is revealed on hover.\n * @internal\n */\nexport function InlineUserActionsMenu(\n  props: PropsWithChildren<{\n    columnId: string;\n    headerGroupOrRowId: string;\n    type: 'cell' | 'header';\n    'aria-label': string;\n    'data-header-row'?: number;\n    'data-column'?: number;\n    hovered?: boolean;\n    onClose?: () => void;\n  }>,\n): JSX.Element | undefined {\n  const {\n    columnId,\n    headerGroupOrRowId,\n    type,\n    'aria-label': ariaLabel,\n    'data-header-row': dataHeaderRow,\n    'data-column': dataColumn,\n    hovered,\n    onClose,\n  } = props;\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  const table = useDataTable();\n  const column = table.getColumn(columnId);\n  const actions = useCellAndColumnActions({\n    enabled: menuOpen,\n    headerGroupOrRowId,\n    columnId,\n    type,\n  });\n\n  const floatingMenuInfo = table.atoms.floatingMenuInfo?.get();\n  const isFloatingMenuOpenForThis =\n    floatingMenuInfo?.columnId === columnId &&\n    ((type === 'cell' && floatingMenuInfo?.rowId === headerGroupOrRowId) ||\n      (type === 'header' && floatingMenuInfo?.type === 'headerAction'));\n\n  // Don't render the inline trigger when the floating (right-click) menu\n  // is already open for this cell or column header\n  if (isFloatingMenuOpenForThis) {\n    return undefined;\n  }\n\n  /**\n   * Calculates the indentation for the action trigger to not overlap with the sub-row expander.\n   */\n  function getSubrowIndentation(): number | undefined {\n    if (!table.options.enableExpanding) {\n      // no sub-rows, no indentation needed\n      return undefined;\n    }\n\n    if (table.getSubRowIndicatorColumnId() !== columnId) {\n      // we only need to indent in the leftmost column containing the sub-row expander\n      return undefined;\n    }\n\n    if (type === 'header') {\n      if (column?.columnDef.meta?.hasCustomHeaderRenderer) {\n        // no indentation needed, custom header renderers are responsible for their own layout\n        return undefined;\n      }\n      return (\n        SUB_ROW_EXPANDER_ICON_SIZE +\n        DATA_TABLE_CELL_HORIZONTAL_PADDING_MAP[\n          table.atoms.visualVariantConfig?.get().rowDensity\n        ]\n      );\n    }\n\n    // important: only fetch the row if we are rendering a cell action menu, getRow will throw if we try to fetch a header group\n    const row = table.getRow(headerGroupOrRowId);\n    return (\n      row.depth * SUB_ROW_INDENT_GRID +\n      SUB_ROW_EXPANDER_ICON_SIZE +\n      DATA_TABLE_CELL_HORIZONTAL_PADDING_MAP[\n        table.atoms.visualVariantConfig?.get().rowDensity\n      ]\n    );\n  }\n\n  const triggerProps = {\n    type: 'button',\n    className: styles.actionButton,\n    style: {\n      display: menuOpen ? 'inline-block' : undefined,\n      marginLeft: getSubrowIndentation(),\n    },\n    'aria-label': ariaLabel,\n    'data-header-row': dataHeaderRow,\n    'data-column': dataColumn,\n    'data-trigger': 'useraction',\n    children: (\n      <DotMenuIcon\n        style={{\n          width: DATA_TABLE_DEFAULT_ICON_SIZE,\n          height: DATA_TABLE_DEFAULT_ICON_SIZE,\n        }}\n      />\n    ),\n  } as const;\n\n  // Avoid spawning the menu while it is closed to avoid react render\n  // performance issues.\n  if (!menuOpen) {\n    // Omit the button from the default render to reduce the number of rendered elements.\n    if (hovered === false) {\n      return;\n    }\n\n    return (\n      <button\n        {...triggerProps}\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          setMenuOpen(true);\n          if (type === 'cell') {\n            table.setOpenMenuRowId(headerGroupOrRowId);\n          }\n        }}\n      />\n    );\n  }\n\n  // Calculate the alignment of the opening menu based on the column alignment.\n  const alignment = column?.columnDef.alignment?.includes('right')\n    ? 'start'\n    : 'end';\n\n  return (\n    <Menu\n      open={menuOpen}\n      onOpenChange={(open) => {\n        if (!open && onClose) {\n          onClose();\n        }\n        // reset the open row id when closing the menu to remove hover styles from the row\n        if (!open && type === 'cell') {\n          table.setOpenMenuRowId(null);\n        }\n        setMenuOpen(open);\n      }}\n      modal={false}\n    >\n      <Menu.Trigger>\n        <button\n          {...triggerProps}\n          onClick={(evt) => {\n            evt.stopPropagation();\n          }}\n        />\n      </Menu.Trigger>\n      {menuOpen === true ? (\n        <DataTableColumnContextProvider value={column}>\n          <Menu.Content alignment={alignment}>\n            {/**\n           Run all actions through a Children map so they will receive\n           an automatic key and do not violate react key map rules.\n           */}\n            {Children.map(actions, (child) => child)}\n          </Menu.Content>\n        </DataTableColumnContextProvider>\n      ) : null}\n    </Menu>\n  );\n}\n"],
-  "mappings": "AAqHM,cAsCF,YAtCE;AArHN,SAAS,UAA4C,gBAAgB;AAErE,SAAS,mBAAmB;AAE5B,SAAS,+BAA+B;AACxC,YAAY,YAAY;AACxB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA,yCAAyC;AAAA,EACzC,kCAAkC;AAAA,OAC7B;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAMA,SAAS,sBACd,OAUyB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,eAAe;AAAA,IACf;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,QAAQ,aAAa;AAC3B,QAAM,SAAS,MAAM,UAAU,QAAQ;AACvC,QAAM,UAAU,wBAAwB;AAAA,IACtC,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,mBAAmB,MAAM,MAAM,kBAAkB,IAAI;AAC3D,QAAM,4BACJ,kBAAkB,aAAa,aAC7B,SAAS,UAAU,kBAAkB,UAAU,sBAC9C,SAAS,YAAY,kBAAkB,SAAS;AAIrD,MAAI,2BAA2B;AAC7B,WAAO;AAAA,EACT;AAKA,WAAS,uBAA2C;AAClD,QAAI,CAAC,MAAM,QAAQ,iBAAiB;AAElC,aAAO;AAAA,IACT;AAEA,QAAI,MAAM,2BAA2B,MAAM,UAAU;AAEnD,aAAO;AAAA,IACT;AAEA,QAAI,SAAS,UAAU;AACrB,UAAI,QAAQ,UAAU,MAAM,yBAAyB;AAEnD,eAAO;AAAA,MACT;AACA,aACE,6BACA,uCACE,MAAM,MAAM,qBAAqB,IAAI,EAAE,UACzC;AAAA,IAEJ;AAGA,UAAM,MAAM,MAAM,OAAO,kBAAkB;AAC3C,WACE,IAAI,QAAQ,sBACZ,6BACA,uCACE,MAAM,MAAM,qBAAqB,IAAI,EAAE,UACzC;AAAA,EAEJ;AAEA,QAAM,eAAe;AAAA,IACnB,MAAM;AAAA,IACN,WAAW,OAAO;AAAA,IAClB,OAAO;AAAA,MACL,SAAS,WAAW,iBAAiB;AAAA,MACrC,YAAY,qBAAqB;AAAA,IACnC;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,UACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA;AAAA,IACF;AAAA,EAEJ;AAIA,MAAI,CAAC,UAAU;AAEb,QAAI,YAAY,OAAO;AACrB;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,SAAS,CAAC,UAAU;AAClB,gBAAM,eAAe;AACrB,gBAAM,gBAAgB;AACtB,sBAAY,IAAI;AAChB,cAAI,SAAS,QAAQ;AACnB,kBAAM,iBAAiB,kBAAkB;AAAA,UAC3C;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AAGA,QAAM,YAAY,QAAQ,UAAU,WAAW,SAAS,OAAO,IAC3D,UACA;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,cAAc,CAAC,SAAS;AACtB,YAAI,CAAC,QAAQ,SAAS;AACpB,kBAAQ;AAAA,QACV;AAEA,YAAI,CAAC,QAAQ,SAAS,QAAQ;AAC5B,gBAAM,iBAAiB,IAAI;AAAA,QAC7B;AACA,oBAAY,IAAI;AAAA,MAClB;AAAA,MACA,OAAO;AAAA,MAEP;AAAA,4BAAC,KAAK,SAAL,EACC;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,SAAS,CAAC,QAAQ;AAChB,kBAAI,gBAAgB;AAAA,YACtB;AAAA;AAAA,QACF,GACF;AAAA,QACC,aAAa,OACZ,oBAAC,kCAA+B,OAAO,QACrC,8BAAC,KAAK,SAAL,EAAa,WAKX,mBAAS,IAAI,SAAS,CAAC,UAAU,KAAK,GACzC,GACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
+  "sourcesContent": ["import {\n  Children,\n  type JSX,\n  type PropsWithChildren,\n  useCallback,\n  useState,\n} from 'react';\n\nimport { DotMenuIcon } from '@dynatrace/strato-icons';\n\nimport { useCellAndColumnActions } from './useCellActions.js';\nimport { useCloseMenuOnScroll } from './useCloseMenuOnScroll.js';\nimport * as styles from './UserActions.sty.js';\nimport { Menu } from '../../../../navigation/menu/Menu.js';\nimport {\n  DATA_TABLE_CELL_HORIZONTAL_PADDING_MAP,\n  DATA_TABLE_DEFAULT_ICON_SIZE,\n  DATA_TABLE_SUB_ROW_EXPANDER_ICON_SIZE as SUB_ROW_EXPANDER_ICON_SIZE,\n  DATA_TABLE_SUB_ROW_INDENT_GRID as SUB_ROW_INDENT_GRID,\n} from '../../constants.js';\nimport {\n  DataTableColumnContextProvider,\n  useDataTable,\n} from '../../contexts/DataTableContext.js';\n\n/**\n * Three dots menu for inline cell or column actions that is revealed on hover.\n * @internal\n */\nexport function InlineUserActionsMenu(\n  props: PropsWithChildren<{\n    columnId: string;\n    headerGroupOrRowId: string;\n    type: 'cell' | 'header';\n    'aria-label': string;\n    'data-header-row'?: number;\n    'data-column'?: number;\n    hovered?: boolean;\n    onClose?: () => void;\n  }>,\n): JSX.Element | undefined {\n  const {\n    columnId,\n    headerGroupOrRowId,\n    type,\n    'aria-label': ariaLabel,\n    'data-header-row': dataHeaderRow,\n    'data-column': dataColumn,\n    hovered,\n    onClose,\n  } = props;\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  const table = useDataTable();\n  const column = table.getColumn(columnId);\n  const actions = useCellAndColumnActions({\n    enabled: menuOpen,\n    headerGroupOrRowId,\n    columnId,\n    type,\n  });\n\n  const closeMenu = useCallback(() => {\n    onClose?.();\n    if (type === 'cell') {\n      table.setOpenMenuRowId(null);\n    }\n    setMenuOpen(false);\n  }, [onClose, table, type]);\n\n  useCloseMenuOnScroll({\n    isMenuOpen: menuOpen,\n    closeMenu,\n    rowId: headerGroupOrRowId,\n    columnId,\n    isHeader: type === 'header',\n  });\n\n  const floatingMenuInfo = table.atoms.floatingMenuInfo?.get();\n  const isFloatingMenuOpenForThis =\n    floatingMenuInfo?.columnId === columnId &&\n    ((type === 'cell' && floatingMenuInfo?.rowId === headerGroupOrRowId) ||\n      (type === 'header' && floatingMenuInfo?.type === 'headerAction'));\n\n  // Don't render the inline trigger when the floating (right-click) menu\n  // is already open for this cell or column header\n  if (isFloatingMenuOpenForThis) {\n    return undefined;\n  }\n\n  /**\n   * Calculates the indentation for the action trigger to not overlap with the sub-row expander.\n   */\n  function getSubrowIndentation(): number | undefined {\n    if (!table.options.enableExpanding) {\n      // no sub-rows, no indentation needed\n      return undefined;\n    }\n\n    if (table.getSubRowIndicatorColumnId() !== columnId) {\n      // We only need to indent in the leftmost column containing the sub-row expander\n      return undefined;\n    }\n\n    if (type === 'header') {\n      if (column?.columnDef.meta?.hasCustomHeaderRenderer) {\n        // no indentation needed, custom header renderers are responsible for their own layout\n        return undefined;\n      }\n      return (\n        SUB_ROW_EXPANDER_ICON_SIZE +\n        DATA_TABLE_CELL_HORIZONTAL_PADDING_MAP[\n          table.atoms.visualVariantConfig?.get().rowDensity\n        ]\n      );\n    }\n\n    // Important: only fetch the row if we are rendering a cell action menu, getRow will throw if we try to fetch a header group\n    const row = table.getRow(headerGroupOrRowId);\n    return (\n      row.depth * SUB_ROW_INDENT_GRID +\n      SUB_ROW_EXPANDER_ICON_SIZE +\n      DATA_TABLE_CELL_HORIZONTAL_PADDING_MAP[\n        table.atoms.visualVariantConfig?.get().rowDensity\n      ]\n    );\n  }\n\n  const triggerProps = {\n    type: 'button',\n    className: styles.actionButton,\n    style: {\n      display: menuOpen ? 'inline-block' : undefined,\n      marginLeft: getSubrowIndentation(),\n    },\n    'aria-label': ariaLabel,\n    'data-header-row': dataHeaderRow,\n    'data-column': dataColumn,\n    'data-trigger': 'useraction',\n    children: (\n      <DotMenuIcon\n        style={{\n          width: DATA_TABLE_DEFAULT_ICON_SIZE,\n          height: DATA_TABLE_DEFAULT_ICON_SIZE,\n        }}\n      />\n    ),\n  } as const;\n\n  // Avoid spawning the menu while it is closed to avoid react render\n  // performance issues.\n  if (!menuOpen) {\n    // Omit the button from the default render to reduce the number of rendered elements.\n    if (hovered === false) {\n      return;\n    }\n\n    return (\n      <button\n        {...triggerProps}\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          setMenuOpen(true);\n          if (type === 'cell') {\n            table.setOpenMenuRowId(headerGroupOrRowId);\n          }\n        }}\n      />\n    );\n  }\n\n  // Calculate the alignment of the opening menu based on the column alignment.\n  const alignment = column?.columnDef.alignment?.includes('right')\n    ? 'start'\n    : 'end';\n\n  return (\n    <Menu\n      open={menuOpen}\n      onOpenChange={(open) => {\n        if (!open) {\n          closeMenu();\n          return;\n        }\n\n        setMenuOpen(true);\n      }}\n      modal={false}\n    >\n      <Menu.Trigger>\n        <button\n          {...triggerProps}\n          onClick={(evt) => {\n            evt.stopPropagation();\n          }}\n        />\n      </Menu.Trigger>\n      {menuOpen === true ? (\n        <DataTableColumnContextProvider value={column}>\n          <Menu.Content alignment={alignment}>\n            {/**\n           Run all actions through a Children map so they will receive\n           an automatic key and do not violate react key map rules.\n           */}\n            {Children.map(actions, (child) => child)}\n          </Menu.Content>\n        </DataTableColumnContextProvider>\n      ) : null}\n    </Menu>\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/tables/DataTable/features/UserActions/RowActions.css

@@ -1,4 +1,4 @@
-._bq8mqs0-3-8-0 {
+._bq8mqs0-3-9-0 {
   padding-left: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-2, 2px);
   overflow: visible;
@@ -7,15 +7,15 @@
   flex-basis: 100%;
   gap: var(--dt-spacings-size-2, 2px);
 }
-._14k72813-3-8-0._bq8mqs0-3-8-0 {
+._14k72813-3-9-0._bq8mqs0-3-9-0 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
 }
-._14k72815-3-8-0._bq8mqs0-3-8-0 {
+._14k72815-3-9-0._bq8mqs0-3-9-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
 }
-._14k72814-3-8-0._bq8mqs0-3-8-0 {
+._14k72814-3-9-0._bq8mqs0-3-9-0 {
   padding-top: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-0, 0);
 }

package/esm/tables/DataTable/features/UserActions/RowActions.sty.js

@@ -13,7 +13,7 @@ import "../ColumnOrder/ColumnOrder.css";
 import "../../components/DataTableHeaderCell.css";
 import "../../components/DataTableDefaultCell.css";
 import "./RowActions.css";
-var rowActions = "_bq8mqs0-3-8-0";
+var rowActions = "_bq8mqs0-3-9-0";
 export {
   rowActions
 };

package/esm/tables/DataTable/features/UserActions/RowActions.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/UserActions/RowActions.css.ts"],
-  "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 '../ColumnSizing/ColumnSizing.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableCell.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../../components/DataTableHeaderCell.css';\nimport '../../components/DataTableDefaultCell.css';\nimport './RowActions.css';\nexport var rowActions = '_bq8mqs0-3-8-0';"],
+  "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 '../ColumnSizing/ColumnSizing.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableCell.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../../components/DataTableHeaderCell.css';\nimport '../../components/DataTableDefaultCell.css';\nimport './RowActions.css';\nexport var rowActions = '_bq8mqs0-3-9-0';"],
   "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;AACA,IAAI,aAAa;",
   "names": []
 }

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

@@ -6,6 +6,7 @@ import {
   Children,
   isValidElement,
   memo,
+  useCallback,
   useMemo,
   useState,
   Fragment as Fragment2
@@ -14,6 +15,7 @@ import { useIntl } from "react-intl";
 import { isElement } from "react-is";
 import { DotMenuIcon } from "@dynatrace/strato-icons";
 import * as styles from "./RowActions.sty.js";
+import { useCloseMenuOnScroll } from "./useCloseMenuOnScroll.js";
 import { Button } from "../../../../buttons/button/Button.js";
 import { Menu } from "../../../../navigation/menu/Menu.js";
 import { isTrigger as isMenuTrigger } from "../../../../navigation/menu/Trigger.js";
@@ -43,10 +45,27 @@ const DataTableInternalRowActions = memo(
     const density = table.atoms.visualVariantConfig?.get().rowDensity === "condensed" ? "condensed" : "default";
     const ariaLabel = intl.formatMessage(dataTableMessages.rowActionsTrigger);
     const [open, setOpen] = useState(false);
-    const handleOpenChange = (nextOpen) => {
-      setOpen(nextOpen);
-      table.setOpenMenuRowId(nextOpen ? props.rowId : null);
-    };
+    const closeMenu = useCallback(() => {
+      setOpen(false);
+      table.setOpenMenuRowId(null);
+    }, [table]);
+    const handleOpenChange = useCallback(
+      (nextOpen) => {
+        if (!nextOpen) {
+          closeMenu();
+          return;
+        }
+        setOpen(true);
+        table.setOpenMenuRowId(props.rowId);
+      },
+      [closeMenu, props.rowId, table]
+    );
+    useCloseMenuOnScroll({
+      isMenuOpen: open && table.getOpenMenuRowId() === props.rowId,
+      closeMenu,
+      rowId: props.rowId,
+      columnId: DATA_TABLE_ROW_ACTIONS_COLUMN_ID
+    });
     const { menu, freeformSlot } = useMemo(() => {
       const slots = {
         menu: null,

package/esm/tables/DataTable/features/UserActions/RowActionsColumnDef.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/UserActions/RowActionsColumnDef.tsx"],
-  "sourcesContent": ["import {\n  createColumnHelper,\n  type AccessorFnColumnDef,\n  type RowData,\n} from '@tanstack/react-table';\nimport {\n  Children,\n  isValidElement,\n  memo,\n  useMemo,\n  useState,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  type JSX,\n  Fragment,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport { DotMenuIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './RowActions.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { Menu, type MenuProps } from '../../../../navigation/menu/Menu.js';\nimport { isTrigger as isMenuTrigger } from '../../../../navigation/menu/Trigger.js';\nimport { DataTableDefaultCell } from '../../components/DataTableDefaultCell.js';\nimport { DATA_TABLE_ROW_ACTIONS_COLUMN_ID } from '../../constants.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../messages.js';\nimport type { TDataTableFeatures } from '../types/features.types.js';\n\nconst rowActionsColumnHelper = createColumnHelper<\n  TDataTableFeatures,\n  RowData\n>();\n\n/**\n * @returns the custom menu trigger if present, or a default menu trigger (dot menu icon button) otherwise.\n */\nfunction getMenuTrigger(\n  menu: ReactElement<MenuProps>,\n  size?: 'default' | 'condensed',\n  ariaLabel?: string,\n) {\n  const menuChildren = Children.toArray(menu.props.children) as ReactElement[];\n  const customMenuTrigger = menuChildren.find(isMenuTrigger);\n  if (customMenuTrigger) {\n    return customMenuTrigger.props.children;\n  }\n  return getDefaultMenuTrigger(size, ariaLabel);\n}\n\nfunction getDefaultMenuTrigger(\n  size?: 'default' | 'condensed',\n  ariaLabel?: string,\n): JSX.Element {\n  return (\n    <Button variant=\"default\" size={size} aria-label={ariaLabel}>\n      <Button.Prefix>\n        <DotMenuIcon />\n      </Button.Prefix>\n    </Button>\n  );\n}\n\nfunction isFragment(\n  child: ReactElement,\n): child is ReactElement<PropsWithChildren> {\n  return child.type === Fragment;\n}\n\n/**\n * Internal wrapper component for the row actions children.\n * @internal\n */\nconst DataTableInternalRowActions = memo(\n  (props: PropsWithChildren<{ rowId: string }>) => {\n    const table = useDataTable();\n    const intl = useIntl();\n    const density =\n      table.atoms.visualVariantConfig?.get().rowDensity === 'condensed'\n        ? 'condensed'\n        : 'default';\n    const ariaLabel = intl.formatMessage(dataTableMessages.rowActionsTrigger);\n\n    const [open, setOpen] = useState(false);\n\n    const handleOpenChange = (nextOpen: boolean) => {\n      setOpen(nextOpen);\n      table.setOpenMenuRowId(nextOpen ? props.rowId : null);\n    };\n\n    const { menu, freeformSlot } = useMemo(() => {\n      const slots: {\n        menu: ReactElement<MenuProps> | null;\n        freeformSlot: ReactNode[];\n      } = {\n        menu: null,\n        freeformSlot: [],\n      };\n\n      const childrenArray = Children.toArray(props.children);\n      for (const child of childrenArray) {\n        if (isValidElement<MenuProps>(child) && child.type === Menu) {\n          slots.menu = child;\n          continue;\n        }\n        slots.freeformSlot.push(child);\n      }\n      return slots;\n    }, [props.children]);\n\n    if (!menu) {\n      return freeformSlot;\n    }\n\n    // Avoid spawning the menu while it is closed to avoid react render\n    // performance issues.\n    if (open === false) {\n      return (\n        <>\n          {freeformSlot}\n          <span\n            onClick={() => handleOpenChange(true)}\n            style={{ display: 'contents' }}\n          >\n            {getMenuTrigger(menu, density, ariaLabel)}\n          </span>\n        </>\n      );\n    }\n\n    return (\n      <>\n        {freeformSlot}\n        <Menu\n          open={open}\n          onOpenChange={handleOpenChange}\n          modal={false}\n          {...menu.props}\n        >\n          <Menu.Trigger>\n            <Button variant=\"default\" size={density} aria-label={ariaLabel}>\n              <Button.Prefix>\n                <DotMenuIcon />\n              </Button.Prefix>\n            </Button>\n          </Menu.Trigger>\n          {menu.props.children}\n        </Menu>\n      </>\n    );\n  },\n);\n\n/**\n * Column definition for the Action Column\n * @internal\n */\nexport const ROW_ACTIONS_COLUMN: AccessorFnColumnDef<\n  TDataTableFeatures,\n  RowData,\n  string\n> = rowActionsColumnHelper.accessor(() => '', {\n  id: DATA_TABLE_ROW_ACTIONS_COLUMN_ID,\n  header: '',\n  width: 'content',\n  enableSorting: false,\n  enableUserActions: false,\n  enableHiding: false,\n  enableResizing: false,\n  meta: {\n    builtin: true,\n    builtinPlacement: 'suffix',\n    hasCustomCellRenderer: true,\n    hasCustomHeaderRenderer: true,\n  },\n  cell: ({ row, table }) => {\n    if (table.options.rowActions === undefined) {\n      return null;\n    }\n    const actions = table.options.rowActions(row.original, {\n      rowDensity: table.atoms.visualVariantConfig?.get().rowDensity,\n      rowIndex: row.index,\n      rowId: row.id,\n    });\n\n    if (isElement(actions)) {\n      return (\n        <DataTableDefaultCell className={styles.rowActions}>\n          <DataTableInternalRowActions rowId={row.id}>\n            {isFragment(actions) ? actions.props.children : actions}\n          </DataTableInternalRowActions>\n        </DataTableDefaultCell>\n      );\n    }\n  },\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  createColumnHelper,\n  type AccessorFnColumnDef,\n  type RowData,\n} from '@tanstack/react-table';\nimport {\n  Children,\n  isValidElement,\n  memo,\n  useCallback,\n  useMemo,\n  useState,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  type JSX,\n  Fragment,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport { DotMenuIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './RowActions.sty.js';\nimport { useCloseMenuOnScroll } from './useCloseMenuOnScroll.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { Menu, type MenuProps } from '../../../../navigation/menu/Menu.js';\nimport { isTrigger as isMenuTrigger } from '../../../../navigation/menu/Trigger.js';\nimport { DataTableDefaultCell } from '../../components/DataTableDefaultCell.js';\nimport { DATA_TABLE_ROW_ACTIONS_COLUMN_ID } from '../../constants.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../messages.js';\nimport type { TDataTableFeatures } from '../types/features.types.js';\n\nconst rowActionsColumnHelper = createColumnHelper<\n  TDataTableFeatures,\n  RowData\n>();\n\n/**\n * Determines the trigger element for the row actions menu. If a custom trigger is provided as a child of the Menu component, it will be used as the trigger. Otherwise, a default trigger (dot menu icon button) will be returned.\n * @param menu - the Menu component for which to determine the trigger element.\n * @param size - the size of the default trigger button, which is determined by the row density. Condensed rows get a smaller button to match the more compact styling.\n * @param ariaLabel - the aria-label for the default trigger button, which should be provided to ensure accessibility since the button only contains an icon with no visible text.\n * @returns the custom menu trigger if present, or a default menu trigger (dot menu icon button) otherwise.\n */\nfunction getMenuTrigger(\n  menu: ReactElement<MenuProps>,\n  size?: 'default' | 'condensed',\n  ariaLabel?: string,\n) {\n  const menuChildren = Children.toArray(menu.props.children) as ReactElement[];\n  const customMenuTrigger = menuChildren.find(isMenuTrigger);\n  if (customMenuTrigger) {\n    return customMenuTrigger.props.children;\n  }\n  return getDefaultMenuTrigger(size, ariaLabel);\n}\n\n/**\n * Returns the default menu trigger element (dot menu icon button) for the row actions column.\n * @param size - the size of the button, which is determined by the row density. Condensed rows get a smaller button to match the more compact styling.\n * @param ariaLabel - the aria-label for the button, which should be provided to ensure accessibility since the button only contains an icon with no visible text.\n * @returns The default menu trigger element.\n */\nfunction getDefaultMenuTrigger(\n  size?: 'default' | 'condensed',\n  ariaLabel?: string,\n): JSX.Element {\n  return (\n    <Button variant=\"default\" size={size} aria-label={ariaLabel}>\n      <Button.Prefix>\n        <DotMenuIcon />\n      </Button.Prefix>\n    </Button>\n  );\n}\n/**\n * Typeguard function that checks if a ReactElement is a Fragment,\n * which is used to determine how to extract the children for the row actions menu.\n * @param child - the ReactElement to check.\n * @returns true if the element is a Fragment, false otherwise.\n */\nfunction isFragment(\n  child: ReactElement,\n): child is ReactElement<PropsWithChildren> {\n  return child.type === Fragment;\n}\n\n/**\n * Internal wrapper component for the row actions children.\n * @internal\n */\nconst DataTableInternalRowActions = memo(\n  (props: PropsWithChildren<{ rowId: string }>) => {\n    const table = useDataTable();\n    const intl = useIntl();\n    const density =\n      table.atoms.visualVariantConfig?.get().rowDensity === 'condensed'\n        ? 'condensed'\n        : 'default';\n    const ariaLabel = intl.formatMessage(dataTableMessages.rowActionsTrigger);\n\n    const [open, setOpen] = useState(false);\n\n    const closeMenu = useCallback(() => {\n      setOpen(false);\n      table.setOpenMenuRowId(null);\n    }, [table]);\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean) => {\n        if (!nextOpen) {\n          closeMenu();\n          return;\n        }\n        setOpen(true);\n        table.setOpenMenuRowId(props.rowId);\n      },\n      [closeMenu, props.rowId, table],\n    );\n\n    useCloseMenuOnScroll({\n      isMenuOpen: open && table.getOpenMenuRowId() === props.rowId,\n      closeMenu,\n      rowId: props.rowId,\n      columnId: DATA_TABLE_ROW_ACTIONS_COLUMN_ID,\n    });\n\n    const { menu, freeformSlot } = useMemo(() => {\n      const slots: {\n        menu: ReactElement<MenuProps> | null;\n        freeformSlot: ReactNode[];\n      } = {\n        menu: null,\n        freeformSlot: [],\n      };\n\n      const childrenArray = Children.toArray(props.children);\n      for (const child of childrenArray) {\n        if (isValidElement<MenuProps>(child) && child.type === Menu) {\n          slots.menu = child;\n          continue;\n        }\n        slots.freeformSlot.push(child);\n      }\n      return slots;\n    }, [props.children]);\n\n    if (!menu) {\n      return freeformSlot;\n    }\n\n    // Avoid spawning the menu while it is closed to avoid react render\n    // performance issues.\n    if (open === false) {\n      return (\n        <>\n          {freeformSlot}\n          <span\n            onClick={() => handleOpenChange(true)}\n            style={{ display: 'contents' }}\n          >\n            {getMenuTrigger(menu, density, ariaLabel)}\n          </span>\n        </>\n      );\n    }\n\n    return (\n      <>\n        {freeformSlot}\n        <Menu\n          open={open}\n          onOpenChange={handleOpenChange}\n          modal={false}\n          {...menu.props}\n        >\n          <Menu.Trigger>\n            <Button variant=\"default\" size={density} aria-label={ariaLabel}>\n              <Button.Prefix>\n                <DotMenuIcon />\n              </Button.Prefix>\n            </Button>\n          </Menu.Trigger>\n          {menu.props.children}\n        </Menu>\n      </>\n    );\n  },\n);\n\n/**\n * Column definition for the Action Column\n * @internal\n */\nexport const ROW_ACTIONS_COLUMN: AccessorFnColumnDef<\n  TDataTableFeatures,\n  RowData,\n  string\n> = rowActionsColumnHelper.accessor(() => '', {\n  id: DATA_TABLE_ROW_ACTIONS_COLUMN_ID,\n  header: '',\n  width: 'content',\n  enableSorting: false,\n  enableUserActions: false,\n  enableHiding: false,\n  enableResizing: false,\n  meta: {\n    builtin: true,\n    builtinPlacement: 'suffix',\n    hasCustomCellRenderer: true,\n    hasCustomHeaderRenderer: true,\n  },\n  cell: ({ row, table }) => {\n    if (table.options.rowActions === undefined) {\n      return null;\n    }\n    const actions = table.options.rowActions(row.original, {\n      rowDensity: table.atoms.visualVariantConfig?.get().rowDensity,\n      rowIndex: row.index,\n      rowId: row.id,\n    });\n\n    if (isElement(actions)) {\n      return (\n        <DataTableDefaultCell className={styles.rowActions}>\n          <DataTableInternalRowActions rowId={row.id}>\n            {isFragment(actions) ? actions.props.children : actions}\n          </DataTableInternalRowActions>\n        </DataTableDefaultCell>\n      );\n    }\n  },\n});\n"],
+  "mappings": "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",
   "names": ["Fragment"]
 }