@dynatrace/strato-components 3.4.0 → 3.5.0

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

@@ -34,6 +34,11 @@ function InlineUserActionsMenu(props) {
     columnId,
     type
   });
+  const floatingMenuInfo = table.getState().floatingMenuInfo;
+  const isFloatingMenuOpenForThis = floatingMenuInfo?.columnId === columnId && (type === "cell" && floatingMenuInfo?.rowId === headerGroupOrRowId || type === "header" && floatingMenuInfo?.type === "headerAction");
+  if (isFloatingMenuOpenForThis) {
+    return void 0;
+  }
   function getSubrowIndentation() {
     if (!table.options.enableExpanding) {
       return void 0;
@@ -84,6 +89,9 @@ function InlineUserActionsMenu(props) {
           event.preventDefault();
           event.stopPropagation();
           setMenuOpen(true);
+          if (type === "cell") {
+            table.setOpenMenuRowId(headerGroupOrRowId);
+          }
         }
       }
     );
@@ -97,6 +105,9 @@ function InlineUserActionsMenu(props) {
         if (!open && onClose) {
           onClose();
         }
+        if (!open && type === "cell") {
+          table.setOpenMenuRowId(null);
+        }
         setMenuOpen(open);
       },
       modal: false,

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  /**\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    const rowDensity = table.getVisualVariantOptions().rowDensity;\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[rowDensity]\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[rowDensity]\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        }}\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        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": "AAsGM,cAmCF,YAnCE;AAtGN,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;AAKD,WAAS,uBAA2C;AAClD,QAAI,CAAC,MAAM,QAAQ,iBAAiB;AAElC,aAAO;AAAA,IACT;AAEA,QAAI,MAAM,2BAA2B,MAAM,UAAU;AAEnD,aAAO;AAAA,IACT;AAEA,UAAM,aAAa,MAAM,wBAAwB,EAAE;AACnD,QAAI,SAAS,UAAU;AACrB,UAAI,QAAQ,UAAU,MAAM,yBAAyB;AAEnD,eAAO;AAAA,MACT;AACA,aACE,6BACA,uCAAuC,UAAU;AAAA,IAErD;AAGA,UAAM,MAAM,MAAM,OAAO,kBAAkB;AAC3C,WACE,IAAI,QAAQ,sBACZ,6BACA,uCAAuC,UAAU;AAAA,EAErD;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;AAAA,QAClB;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;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 { 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.getState().floatingMenuInfo;\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    const rowDensity = table.getVisualVariantOptions().rowDensity;\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[rowDensity]\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[rowDensity]\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": "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",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._bq8mqs0-3-4-0 {
+._bq8mqs0-3-5-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-4-0._bq8mqs0-3-4-0 {
+._14k72813-3-5-0._bq8mqs0-3-5-0 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
 }
-._14k72815-3-4-0._bq8mqs0-3-4-0 {
+._14k72815-3-5-0._bq8mqs0-3-5-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
 }
-._14k72814-3-4-0._bq8mqs0-3-4-0 {
+._14k72814-3-5-0._bq8mqs0-3-5-0 {
   padding-top: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-0, 0);
 }

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

@@ -27,44 +27,66 @@ function isDataTableRowActions(child) {
   }
   return false;
 }
-const DataTableInternalRowActions = memo((props) => {
-  const table = useDataTable();
-  const intl = useIntl();
-  const density = table.getVisualVariantOptions().rowDensity === "condensed" ? "condensed" : "default";
-  const ariaLabel = intl.formatMessage(dataTableMessages.rowActionsTrigger);
-  const [open, setOpen] = useState(false);
-  const { menu, freeformSlot } = useMemo(() => {
-    const slots = {
-      menu: null,
-      freeformSlot: []
+const DataTableInternalRowActions = memo(
+  (props) => {
+    const table = useDataTable();
+    const intl = useIntl();
+    const density = table.getVisualVariantOptions().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 childrenArray = Children.toArray(props.children);
-    for (const child of childrenArray) {
-      if (isValidElement(child) && child.type === Menu) {
-        slots.menu = child;
-        continue;
+    const { menu, freeformSlot } = useMemo(() => {
+      const slots = {
+        menu: null,
+        freeformSlot: []
+      };
+      const childrenArray = Children.toArray(props.children);
+      for (const child of childrenArray) {
+        if (isValidElement(child) && child.type === Menu) {
+          slots.menu = child;
+          continue;
+        }
+        slots.freeformSlot.push(child);
       }
-      slots.freeformSlot.push(child);
+      return slots;
+    }, [props.children]);
+    if (!menu) {
+      return freeformSlot;
+    }
+    if (open === false) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        freeformSlot,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            onClick: () => handleOpenChange(true),
+            style: { display: "contents" },
+            children: getMenuTrigger(menu, density, ariaLabel)
+          }
+        )
+      ] });
     }
-    return slots;
-  }, [props.children]);
-  if (!menu) {
-    return freeformSlot;
-  }
-  if (open === false) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       freeformSlot,
-      /* @__PURE__ */ jsx("span", { onClick: () => setOpen(true), style: { display: "contents" }, children: getMenuTrigger(menu, density, ariaLabel) })
+      /* @__PURE__ */ jsxs(
+        Menu,
+        {
+          open,
+          onOpenChange: handleOpenChange,
+          modal: false,
+          ...menu.props,
+          children: [
+            /* @__PURE__ */ jsx(Menu.Trigger, { children: /* @__PURE__ */ jsx(Button, { variant: "default", size: density, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(DotMenuIcon, {}) }) }) }),
+            menu.props.children
+          ]
+        }
+      )
     ] });
   }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    freeformSlot,
-    /* @__PURE__ */ jsxs(Menu, { open, onOpenChange: setOpen, modal: false, ...menu.props, children: [
-      /* @__PURE__ */ jsx(Menu.Trigger, { children: /* @__PURE__ */ jsx(Button, { variant: "default", size: density, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(DotMenuIcon, {}) }) }) }),
-      menu.props.children
-    ] })
-  ] });
-});
+);
 function getMenuTrigger(menu, size, ariaLabel) {
   const menuChildren = Children.toArray(menu.props.children);
   const customMenuTrigger = menuChildren.find(isMenuTrigger);
@@ -104,7 +126,7 @@ const ROW_ACTIONS_COLUMN = {
       rowId: row.id
     });
     if (isElement(actions)) {
-      return /* @__PURE__ */ jsx(DataTableDefaultCell, { className: styles.rowActions, children: /* @__PURE__ */ jsx(DataTableInternalRowActions, { children: isFragment(actions) ? actions.props.children : actions }) });
+      return /* @__PURE__ */ jsx(DataTableDefaultCell, { className: styles.rowActions, children: /* @__PURE__ */ jsx(DataTableInternalRowActions, { rowId: row.id, children: isFragment(actions) ? actions.props.children : actions }) });
     }
   }
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/UserActions/RowActions.tsx"],
-  "sourcesContent": ["import {\n  Children,\n  Fragment,\n  isValidElement,\n  memo,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  type JSX,\n  useMemo,\n  useState,\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 { type ColumnDef } from '../../hooks/useTable/types.js';\nimport { dataTableMessages } from '../../messages.js';\nimport { type DataTableRowData } from '../../public.api.js';\n\n/**\n * Props for the `DataTableRowActions` component.\n * @public\n */\nexport interface DataTableRowActionsProps<TData extends DataTableRowData> {\n  children: (\n    row: TData,\n    {\n      rowDensity,\n      rowIndex,\n      rowId,\n    }: {\n      rowDensity: 'default' | 'condensed' | 'comfortable';\n      rowIndex: number;\n      rowId: string;\n    },\n  ) => ReactElement<PropsWithChildren>;\n}\n\n/**\n * The slot component for defining row actions within the DataTable.\n * @public\n */\nexport function DataTableRowActions<TData extends DataTableRowData>(\n  props: DataTableRowActionsProps<TData>,\n) {\n  return null;\n}\n\n/**\n * Typeguard function that will check if a ReactNode is of type DataTableRowActions.\n * @internal\n */\nexport function isDataTableRowActions<TData extends DataTableRowData>(\n  child: ReactNode,\n): child is ReactElement<DataTableRowActionsProps<TData>> {\n  if (isElement(child) && child.type === DataTableRowActions) {\n    return true;\n  }\n  return false;\n}\n\n/**\n * Internal wrapper component for the row actions children.\n * @internal\n */\nconst DataTableInternalRowActions = memo((props: PropsWithChildren) => {\n  const table = useDataTable();\n  const intl = useIntl();\n  const density =\n    table.getVisualVariantOptions().rowDensity === 'condensed'\n      ? 'condensed'\n      : 'default';\n  const ariaLabel = intl.formatMessage(dataTableMessages.rowActionsTrigger);\n\n  const [open, setOpen] = useState(false);\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 onClick={() => setOpen(true)} style={{ display: 'contents' }}>\n          {getMenuTrigger(menu, density, ariaLabel)}\n        </span>\n      </>\n    );\n  }\n\n  return (\n    <>\n      {freeformSlot}\n      <Menu open={open} onOpenChange={setOpen} modal={false} {...menu.props}>\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 * @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 * Column definition for the Action Column\n * @internal\n */\nexport const ROW_ACTIONS_COLUMN: ColumnDef<unknown, unknown> = {\n  id: DATA_TABLE_ROW_ACTIONS_COLUMN_ID,\n  accessorFn: () => '',\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.getVisualVariantOptions().rowDensity,\n      rowIndex: row.index,\n      rowId: row.id,\n    });\n\n    if (isElement(actions)) {\n      return (\n        <DataTableDefaultCell className={styles.rowActions}>\n          <DataTableInternalRowActions>\n            {isFragment(actions) ? actions.props.children : actions}\n          </DataTableInternalRowActions>\n        </DataTableDefaultCell>\n      );\n    }\n  },\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  Children,\n  Fragment,\n  isValidElement,\n  memo,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  type JSX,\n  useMemo,\n  useState,\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 { type ColumnDef } from '../../hooks/useTable/types.js';\nimport { dataTableMessages } from '../../messages.js';\nimport { type DataTableRowData } from '../../public.api.js';\n\n/**\n * Props for the `DataTableRowActions` component.\n * @public\n */\nexport interface DataTableRowActionsProps<TData extends DataTableRowData> {\n  children: (\n    row: TData,\n    {\n      rowDensity,\n      rowIndex,\n      rowId,\n    }: {\n      rowDensity: 'default' | 'condensed' | 'comfortable';\n      rowIndex: number;\n      rowId: string;\n    },\n  ) => ReactElement<PropsWithChildren>;\n}\n\n/**\n * The slot component for defining row actions within the DataTable.\n * @public\n */\nexport function DataTableRowActions<TData extends DataTableRowData>(\n  props: DataTableRowActionsProps<TData>,\n) {\n  return null;\n}\n\n/**\n * Typeguard function that will check if a ReactNode is of type DataTableRowActions.\n * @internal\n */\nexport function isDataTableRowActions<TData extends DataTableRowData>(\n  child: ReactNode,\n): child is ReactElement<DataTableRowActionsProps<TData>> {\n  if (isElement(child) && child.type === DataTableRowActions) {\n    return true;\n  }\n  return false;\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.getVisualVariantOptions().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 * @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 * Column definition for the Action Column\n * @internal\n */\nexport const ROW_ACTIONS_COLUMN: ColumnDef<unknown, unknown> = {\n  id: DATA_TABLE_ROW_ACTIONS_COLUMN_ID,\n  accessorFn: () => '',\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.getVisualVariantOptions().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"]
 }

package/esm/tables/DataTable/features/UserActions/RowActions.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";
@@ -11,7 +12,7 @@ import "../ColumnOrder/ColumnOrder.css";
 import "../../components/DataTableHeaderCell.css";
 import "../../components/DataTableDefaultCell.css";
 import "./RowActions.css";
-var rowActions = "_bq8mqs0-3-4-0";
+var rowActions = "_bq8mqs0-3-5-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 '../../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 './RowActions.css';\nexport var rowActions = '_bq8mqs0-3-4-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;AACA,IAAI,aAAa;",
+  "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 './RowActions.css';\nexport var rowActions = '_bq8mqs0-3-5-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;AACA,IAAI,aAAa;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._duopj90-3-4-0 {
+._duopj90-3-5-0 {
   appearance: none;
   border: 0;
   padding: 0;
@@ -14,79 +14,79 @@
   width: 24px;
   z-index: var(--dt-elevations-default, 1);
 }
-._duopj90-3-4-0:hover {
+._duopj90-3-5-0:hover {
   cursor: pointer;
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._duopj90-3-4-0:focus {
+._duopj90-3-5-0:focus {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
   outline: none;
 }
-._1ons7qub-3-4-0 ._duopj90-3-4-0, ._14k72814-3-4-0 ~ ._duopj90-3-4-0, ._11pvd3zz-3-4-0 ._duopj90-3-4-0 {
+._1ons7qub-3-5-0 ._duopj90-3-5-0, ._14k72814-3-5-0 ~ ._duopj90-3-5-0, ._11pvd3zz-3-5-0 ._duopj90-3-5-0 {
   right: var(--dt-spacings-size-2, 2px);
   top: var(--dt-spacings-size-2, 2px);
 }
-._1ons7qua-3-4-0 ._duopj90-3-4-0, ._14k72813-3-4-0 ~ ._duopj90-3-4-0, ._11pvd3zy-3-4-0 ._duopj90-3-4-0 {
+._1ons7qua-3-5-0 ._duopj90-3-5-0, ._14k72813-3-5-0 ~ ._duopj90-3-5-0, ._11pvd3zy-3-5-0 ._duopj90-3-5-0 {
   right: var(--dt-spacings-size-8, 8px);
   top: var(--dt-spacings-size-8, 8px);
 }
-._1ons7quc-3-4-0  ._duopj90-3-4-0, ._14k72815-3-4-0 ~ ._duopj90-3-4-0, ._11pvd3z10-3-4-0 ._duopj90-3-4-0 {
+._1ons7quc-3-5-0  ._duopj90-3-5-0, ._14k72815-3-5-0 ~ ._duopj90-3-5-0, ._11pvd3z10-3-5-0 ._duopj90-3-5-0 {
   right: var(--dt-spacings-size-12, 12px);
   top: var(--dt-spacings-size-12, 12px);
 }
-._11pvd3zz-3-4-0._yj6voi0-3-4-0 ._duopj90-3-4-0, ._14k72814-3-4-0._yj6voi0-3-4-0 ~ ._duopj90-3-4-0, ._1ons7qub-3-4-0._yj6voi0-3-4-0 ._duopj90-3-4-0 {
+._11pvd3zz-3-5-0._yj6voi0-3-5-0 ._duopj90-3-5-0, ._14k72814-3-5-0._yj6voi0-3-5-0 ~ ._duopj90-3-5-0, ._1ons7qub-3-5-0._yj6voi0-3-5-0 ._duopj90-3-5-0 {
   left: var(--dt-spacings-size-2, 2px);
   top: var(--dt-spacings-size-2, 2px);
   right: auto;
 }
-._11pvd3zy-3-4-0._yj6voi0-3-4-0 ._duopj90-3-4-0, ._14k72813-3-4-0._yj6voi0-3-4-0 ~ ._duopj90-3-4-0, ._1ons7qua-3-4-0._yj6voi0-3-4-0 ._duopj90-3-4-0 {
+._11pvd3zy-3-5-0._yj6voi0-3-5-0 ._duopj90-3-5-0, ._14k72813-3-5-0._yj6voi0-3-5-0 ~ ._duopj90-3-5-0, ._1ons7qua-3-5-0._yj6voi0-3-5-0 ._duopj90-3-5-0 {
   left: var(--dt-spacings-size-8, 8px);
   top: var(--dt-spacings-size-8, 8px);
   right: auto;
 }
-._11pvd3z10-3-4-0._yj6voi0-3-4-0 ._duopj90-3-4-0, ._14k72815-3-4-0._yj6voi0-3-4-0 ~ ._duopj90-3-4-0, ._1ons7quc-3-4-0._yj6voi0-3-4-0 ._duopj90-3-4-0 {
+._11pvd3z10-3-5-0._yj6voi0-3-5-0 ._duopj90-3-5-0, ._14k72815-3-5-0._yj6voi0-3-5-0 ~ ._duopj90-3-5-0, ._1ons7quc-3-5-0._yj6voi0-3-5-0 ._duopj90-3-5-0 {
   left: var(--dt-spacings-size-12, 12px);
   top: var(--dt-spacings-size-12, 12px);
   right: auto;
 }
-._1ons7qub-3-4-0 ._yj6voi0-3-4-0 ._duopj90-3-4-0 {
+._1ons7qub-3-5-0 ._yj6voi0-3-5-0 ._duopj90-3-5-0 {
   left: var(--dt-spacings-size-2, 2px);
   top: var(--dt-spacings-size-2, 2px);
   right: auto;
 }
-._1ons7qua-3-4-0 ._yj6voi0-3-4-0 ._duopj90-3-4-0 {
+._1ons7qua-3-5-0 ._yj6voi0-3-5-0 ._duopj90-3-5-0 {
   left: var(--dt-spacings-size-8, 8px);
   top: var(--dt-spacings-size-8, 8px);
   right: auto;
 }
-._1ons7quc-3-4-0 ._yj6voi0-3-4-0 ._duopj90-3-4-0 {
+._1ons7quc-3-5-0 ._yj6voi0-3-5-0 ._duopj90-3-5-0 {
   left: var(--dt-spacings-size-12, 12px);
   top: var(--dt-spacings-size-12, 12px);
   right: auto;
 }
-._14k72814-3-4-0 ._yj6voi0-3-4-0 ~ ._duopj90-3-4-0 {
+._14k72814-3-5-0 ._yj6voi0-3-5-0 ~ ._duopj90-3-5-0 {
   left: var(--dt-spacings-size-2, 2px);
   top: var(--dt-spacings-size-2, 2px);
   right: auto;
 }
-._14k72813-3-4-0 ._yj6voi0-3-4-0 ~ ._duopj90-3-4-0 {
+._14k72813-3-5-0 ._yj6voi0-3-5-0 ~ ._duopj90-3-5-0 {
   left: var(--dt-spacings-size-8, 8px);
   top: var(--dt-spacings-size-8, 8px);
   right: auto;
 }
-._14k72815-3-4-0 ._yj6voi0-3-4-0 ~ ._duopj90-3-4-0 {
+._14k72815-3-5-0 ._yj6voi0-3-5-0 ~ ._duopj90-3-5-0 {
   left: var(--dt-spacings-size-12, 12px);
   top: var(--dt-spacings-size-12, 12px);
   right: auto;
 }
-._duopj90-3-4-0[data-state="open"] {
+._duopj90-3-5-0[data-state="open"] {
   display: inline-block;
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1ons7qu2-3-4-0:hover > ._duopj90-3-4-0, ._11pvd3z4-3-4-0 > ._duopj90-3-4-0 {
+._1ons7qu2-3-5-0:hover > ._duopj90-3-5-0, ._11pvd3z4-3-5-0 > ._duopj90-3-5-0 {
   display: inline-block;
 }
-._duopj91-3-4-0 {
+._duopj91-3-5-0 {
   appearance: none;
   border: 0;
   position: fixed;

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

@@ -16,7 +16,8 @@ const UserActions = {
         rowId: null,
         x: 0,
         y: 0
-      }
+      },
+      openMenuRowId: null
     };
   },
   createTable(table) {
@@ -31,6 +32,7 @@ const UserActions = {
           x,
           y
         };
+        newState.openMenuRowId = rowId;
         return newState;
       });
     };
@@ -98,6 +100,15 @@ const UserActions = {
         }
       };
     };
+    table.setOpenMenuRowId = (rowId) => {
+      table.setState((state) => ({
+        ...state,
+        openMenuRowId: rowId
+      }));
+    };
+    table.getOpenMenuRowId = () => {
+      return table.getState().openMenuRowId;
+    };
   },
   createColumn(column, table) {
     column.getColumnActions = memo(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/UserActions/UserActions.tsx"],
-  "sourcesContent": ["import type { MouseEvent as ReactMouseEvent } from 'react';\nimport { isElement } from 'react-is';\n\nimport type { DataTableCellActionsContent } from './CellActions.js';\nimport {\n  filterActionsForChartColumn,\n  getColumnActionsElements,\n} from './user-actions-utils.js';\nimport type {\n  Cell,\n  Column,\n  InitialTableState,\n  Row,\n  RowData,\n  Table,\n  TableFeature,\n} from '../../hooks/useTable/types.js';\nimport { getMemoOptions } from '../../hooks/useTable/utils.js';\nimport { memo } from '../../tanstack-table-core-override/src/index.js';\nimport { SortingColumnActions } from '../Sorting/SortingColumnActions.js';\n\n/**\n * Defines the user action table feature\n */\nexport const UserActions: TableFeature = {\n  getInitialState(state?: InitialTableState) {\n    return {\n      ...state,\n      floatingMenuInfo: {\n        columnId: null,\n        rowId: null,\n        x: 0,\n        y: 0,\n      },\n    };\n  },\n\n  createTable<TData extends RowData>(table: Table<TData>) {\n    table._setFloatingMenuInfo = (\n      headerId: string | null,\n      columnId: string,\n      rowId: string | null,\n      x: number,\n      y: number,\n    ) => {\n      table.setState((state) => {\n        const newState = { ...state };\n        newState.floatingMenuInfo = {\n          type: rowId === null ? 'headerAction' : 'cellAction',\n          headerId,\n          rowId,\n          columnId,\n          x,\n          y,\n        };\n        return newState;\n      });\n    };\n\n    table.getUserActionsForColumn = (columnId: string) => {\n      const column = table.getColumn(columnId);\n\n      if (column?.getCanColumnActions()) {\n        return column.getColumnActions();\n      }\n\n      return null;\n    };\n\n    table.getUserActionsForCell = (columnId: string, rowId: string) => {\n      const row = table.getRow(rowId);\n      const cell = row\n        .getVisibleCells()\n        .find((cell) => cell.column.id === columnId);\n\n      if (cell?.column.getCanCellActions()) {\n        return cell.getCellActions();\n      }\n      return null;\n    };\n\n    table.getUserActionFloatingMenuContextMenuHandler = () => {\n      return (event: ReactMouseEvent<HTMLDivElement>) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (\n          event.target instanceof HTMLElement === false &&\n          event.target instanceof SVGElement === false\n        ) {\n          return;\n        }\n\n        const cellElement = event.target.closest<HTMLElement>('[role=\"cell\"]');\n        // the click was on a body cell\n        if (cellElement) {\n          const { columnid } = cellElement.dataset;\n          const rowid = cellElement\n            .closest('[role=\"row\"]')\n            ?.getAttribute('data-rowid');\n\n          if (!columnid || !rowid) {\n            return;\n          }\n\n          // In order to check if the column or cell could take actions we get the actual cell objects.\n          const row = table.getRow(rowid);\n          const cell = row._getAllCellsByColumnId()[columnid];\n\n          if (cell?.column.getCanCellActions()) {\n            table._setFloatingMenuInfo(\n              null, // header is not needed for floating menu on body cell\n              columnid,\n              rowid,\n              event.pageX,\n              event.pageY,\n            );\n          }\n          return;\n        }\n\n        const headerElement = event.target.closest<HTMLElement>(\n          '[role=\"columnheader\"]',\n        );\n        // the click happened on a header cell\n        if (headerElement) {\n          const { columnid, headerid } = headerElement.dataset;\n          if (!columnid) {\n            return;\n          }\n\n          // In order to check if the column or cell could take actions we get the actual column object.\n          const column = table.getColumn(columnid);\n\n          if (column?.getCanColumnActions()) {\n            table._setFloatingMenuInfo(\n              headerid ?? null,\n              columnid,\n              null,\n              event.pageX,\n              event.pageY,\n            );\n          }\n        }\n      };\n    };\n  },\n\n  createColumn<TData extends RowData, TValue>(\n    column: Column<TData, TValue>,\n    table: Table<TData>,\n  ) {\n    column.getColumnActions = memo(\n      () => [\n        column.id,\n        table.options.columnActions,\n        table.options.enableSorting,\n      ],\n      (columnId, columnActionsOption, enableSortingOption) => {\n        const columnActions = getColumnActionsElements(\n          columnId,\n          columnActionsOption ?? [],\n          table.options.consumerColumnDefMap,\n        );\n\n        const isChartColumn =\n          typeof column.columnDef.enableUserActions === 'object' &&\n          column.columnDef.enableUserActions.type === 'chart';\n        const filteredActions = isChartColumn\n          ? filterActionsForChartColumn(columnActions)\n          : columnActions;\n\n        // Append sorting actions at the end when sorting is enabled for this column.\n        if (enableSortingOption && column.getCanSort()) {\n          filteredActions.push(\n            <SortingColumnActions\n              key=\"strato-table-sorting-column-actions\"\n              hasOtherColumnActions={filteredActions.length > 0}\n            />,\n          );\n        }\n\n        return filteredActions;\n      },\n      getMemoOptions(table.options, 'debugColumns', 'column.getColumnActions'),\n    );\n\n    column.getCanColumnActions = () => {\n      if (column.columnDef.enableUserActions === false) {\n        return false;\n      }\n\n      const columnActionsEnabled = table.options.enableColumnActions;\n      const sortingEnabled = table.options.enableSorting && column.getCanSort();\n\n      // the column cannot have any actions if neither column actions nor sorting are enabled for this column.\n      if (!columnActionsEnabled && !sortingEnabled) {\n        return false;\n      }\n\n      const definedColumnActions = column.getColumnActions();\n      if (!definedColumnActions) {\n        // runtime safety net\n        return false;\n      }\n\n      return (definedColumnActions.length ?? 0) > 0;\n    };\n\n    column.getCellActionsContent = memo(\n      () => [column.id, table.options.cellActions],\n      (columnId, cellActionsOptions = []) => {\n        return cellActionsOptions.reduce((actions, cellAction) => {\n          if (\n            cellAction.column === undefined ||\n            // global action for all columns\n            cellAction.column === columnId ||\n            // column-specific action\n            (typeof cellAction.column === 'function' &&\n              cellAction.column(columnId))\n          ) {\n            actions.push(cellAction.action);\n          }\n          return actions;\n        }, [] as Array<DataTableCellActionsContent<TData>>);\n      },\n      getMemoOptions(\n        table.options,\n        'debugCells',\n        'column.getCellActionsElements',\n      ),\n    );\n\n    column.getCanCellActions = () => {\n      if (column.columnDef.enableUserActions === false) {\n        return false;\n      }\n\n      if (!table.options.enableCellActions) {\n        return false;\n      }\n\n      const definedCellActions = column.getCellActionsContent();\n      if (!definedCellActions) {\n        // runtime safety net\n        return false;\n      }\n\n      return (definedCellActions.length ?? 0) > 0;\n    };\n  },\n\n  createCell<TData extends RowData, TValue>(\n    cell: Cell<TData, TValue>,\n    column: Column<TData, TValue>,\n    row: Row<TData>,\n    table: Table<TData>,\n  ) {\n    cell.getCellActions = memo(\n      () => [column.id, table.options.cellActions],\n      () => {\n        const cellActions = column.getCellActionsContent().map((cellAction) => {\n          // If the entry is a react element, we can directly return it\n          if (isElement(cellAction)) {\n            return cellAction;\n          }\n          // If it is a function, we will need to resolve the closure first\n          if (typeof cellAction === 'function') {\n            const columnDef = table.options.consumerColumnDefMap?.get(\n              column.id,\n            );\n            if (columnDef !== undefined) {\n              return cellAction({\n                columnDef: columnDef,\n                cellValue: cell.getValue(),\n                row: row.original,\n                rowId: row.id,\n              });\n            }\n          }\n          return null;\n        });\n\n        return cellActions;\n      },\n      getMemoOptions(table.options, 'debugCells', 'cell.getCellActions'),\n    );\n  },\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { MouseEvent as ReactMouseEvent } from 'react';\nimport { isElement } from 'react-is';\n\nimport type { DataTableCellActionsContent } from './CellActions.js';\nimport {\n  filterActionsForChartColumn,\n  getColumnActionsElements,\n} from './user-actions-utils.js';\nimport type {\n  Cell,\n  Column,\n  InitialTableState,\n  Row,\n  RowData,\n  Table,\n  TableFeature,\n} from '../../hooks/useTable/types.js';\nimport { getMemoOptions } from '../../hooks/useTable/utils.js';\nimport { memo } from '../../tanstack-table-core-override/src/index.js';\nimport { SortingColumnActions } from '../Sorting/SortingColumnActions.js';\n\n/**\n * Defines the user action table feature\n */\nexport const UserActions: TableFeature = {\n  getInitialState(state?: InitialTableState) {\n    return {\n      ...state,\n      floatingMenuInfo: {\n        columnId: null,\n        rowId: null,\n        x: 0,\n        y: 0,\n      },\n      openMenuRowId: null,\n    };\n  },\n\n  createTable<TData extends RowData>(table: Table<TData>) {\n    table._setFloatingMenuInfo = (\n      headerId: string | null,\n      columnId: string,\n      rowId: string | null,\n      x: number,\n      y: number,\n    ) => {\n      table.setState((state) => {\n        const newState = { ...state };\n        newState.floatingMenuInfo = {\n          type: rowId === null ? 'headerAction' : 'cellAction',\n          headerId,\n          rowId,\n          columnId,\n          x,\n          y,\n        };\n        newState.openMenuRowId = rowId;\n        return newState;\n      });\n    };\n\n    table.getUserActionsForColumn = (columnId: string) => {\n      const column = table.getColumn(columnId);\n\n      if (column?.getCanColumnActions()) {\n        return column.getColumnActions();\n      }\n\n      return null;\n    };\n\n    table.getUserActionsForCell = (columnId: string, rowId: string) => {\n      const row = table.getRow(rowId);\n      const cell = row\n        .getVisibleCells()\n        .find((cell) => cell.column.id === columnId);\n\n      if (cell?.column.getCanCellActions()) {\n        return cell.getCellActions();\n      }\n      return null;\n    };\n\n    table.getUserActionFloatingMenuContextMenuHandler = () => {\n      return (event: ReactMouseEvent<HTMLDivElement>) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (\n          event.target instanceof HTMLElement === false &&\n          event.target instanceof SVGElement === false\n        ) {\n          return;\n        }\n\n        const cellElement = event.target.closest<HTMLElement>('[role=\"cell\"]');\n        // the click was on a body cell\n        if (cellElement) {\n          const { columnid } = cellElement.dataset;\n          const rowid = cellElement\n            .closest('[role=\"row\"]')\n            ?.getAttribute('data-rowid');\n\n          if (!columnid || !rowid) {\n            return;\n          }\n\n          // In order to check if the column or cell could take actions we get the actual cell objects.\n          const row = table.getRow(rowid);\n          const cell = row._getAllCellsByColumnId()[columnid];\n\n          if (cell?.column.getCanCellActions()) {\n            table._setFloatingMenuInfo(\n              null, // header is not needed for floating menu on body cell\n              columnid,\n              rowid,\n              event.pageX,\n              event.pageY,\n            );\n          }\n          return;\n        }\n\n        const headerElement = event.target.closest<HTMLElement>(\n          '[role=\"columnheader\"]',\n        );\n        // the click happened on a header cell\n        if (headerElement) {\n          const { columnid, headerid } = headerElement.dataset;\n          if (!columnid) {\n            return;\n          }\n\n          // In order to check if the column or cell could take actions we get the actual column object.\n          const column = table.getColumn(columnid);\n\n          if (column?.getCanColumnActions()) {\n            table._setFloatingMenuInfo(\n              headerid ?? null,\n              columnid,\n              null,\n              event.pageX,\n              event.pageY,\n            );\n          }\n        }\n      };\n    };\n\n    table.setOpenMenuRowId = (rowId: string | null) => {\n      table.setState((state) => ({\n        ...state,\n        openMenuRowId: rowId,\n      }));\n    };\n\n    table.getOpenMenuRowId = () => {\n      return table.getState().openMenuRowId;\n    };\n  },\n\n  createColumn<TData extends RowData, TValue>(\n    column: Column<TData, TValue>,\n    table: Table<TData>,\n  ) {\n    column.getColumnActions = memo(\n      () => [\n        column.id,\n        table.options.columnActions,\n        table.options.enableSorting,\n      ],\n      (columnId, columnActionsOption, enableSortingOption) => {\n        const columnActions = getColumnActionsElements(\n          columnId,\n          columnActionsOption ?? [],\n          table.options.consumerColumnDefMap,\n        );\n\n        const isChartColumn =\n          typeof column.columnDef.enableUserActions === 'object' &&\n          column.columnDef.enableUserActions.type === 'chart';\n        const filteredActions = isChartColumn\n          ? filterActionsForChartColumn(columnActions)\n          : columnActions;\n\n        // Append sorting actions at the end when sorting is enabled for this column.\n        if (enableSortingOption && column.getCanSort()) {\n          filteredActions.push(\n            <SortingColumnActions\n              key=\"strato-table-sorting-column-actions\"\n              hasOtherColumnActions={filteredActions.length > 0}\n            />,\n          );\n        }\n\n        return filteredActions;\n      },\n      getMemoOptions(table.options, 'debugColumns', 'column.getColumnActions'),\n    );\n\n    column.getCanColumnActions = () => {\n      if (column.columnDef.enableUserActions === false) {\n        return false;\n      }\n\n      const columnActionsEnabled = table.options.enableColumnActions;\n      const sortingEnabled = table.options.enableSorting && column.getCanSort();\n\n      // the column cannot have any actions if neither column actions nor sorting are enabled for this column.\n      if (!columnActionsEnabled && !sortingEnabled) {\n        return false;\n      }\n\n      const definedColumnActions = column.getColumnActions();\n      if (!definedColumnActions) {\n        // runtime safety net\n        return false;\n      }\n\n      return (definedColumnActions.length ?? 0) > 0;\n    };\n\n    column.getCellActionsContent = memo(\n      () => [column.id, table.options.cellActions],\n      (columnId, cellActionsOptions = []) => {\n        return cellActionsOptions.reduce((actions, cellAction) => {\n          if (\n            cellAction.column === undefined ||\n            // global action for all columns\n            cellAction.column === columnId ||\n            // column-specific action\n            (typeof cellAction.column === 'function' &&\n              cellAction.column(columnId))\n          ) {\n            actions.push(cellAction.action);\n          }\n          return actions;\n        }, [] as Array<DataTableCellActionsContent<TData>>);\n      },\n      getMemoOptions(\n        table.options,\n        'debugCells',\n        'column.getCellActionsElements',\n      ),\n    );\n\n    column.getCanCellActions = () => {\n      if (column.columnDef.enableUserActions === false) {\n        return false;\n      }\n\n      if (!table.options.enableCellActions) {\n        return false;\n      }\n\n      const definedCellActions = column.getCellActionsContent();\n      if (!definedCellActions) {\n        // runtime safety net\n        return false;\n      }\n\n      return (definedCellActions.length ?? 0) > 0;\n    };\n  },\n\n  createCell<TData extends RowData, TValue>(\n    cell: Cell<TData, TValue>,\n    column: Column<TData, TValue>,\n    row: Row<TData>,\n    table: Table<TData>,\n  ) {\n    cell.getCellActions = memo(\n      () => [column.id, table.options.cellActions],\n      () => {\n        const cellActions = column.getCellActionsContent().map((cellAction) => {\n          // If the entry is a react element, we can directly return it\n          if (isElement(cellAction)) {\n            return cellAction;\n          }\n          // If it is a function, we will need to resolve the closure first\n          if (typeof cellAction === 'function') {\n            const columnDef = table.options.consumerColumnDefMap?.get(\n              column.id,\n            );\n            if (columnDef !== undefined) {\n              return cellAction({\n                columnDef: columnDef,\n                cellValue: cell.getValue(),\n                row: row.original,\n                rowId: row.id,\n              });\n            }\n          }\n          return null;\n        });\n\n        return cellActions;\n      },\n      getMemoOptions(table.options, 'debugCells', 'cell.getCellActions'),\n    );\n  },\n};\n"],
+  "mappings": "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",
   "names": ["cell"]
 }

package/esm/tables/DataTable/features/UserActions/UserActions.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";
@@ -11,8 +12,8 @@ import "../ColumnOrder/ColumnOrder.css";
 import "../../components/DataTableHeaderCell.css";
 import "../../components/DataTableDefaultCell.css";
 import "./UserActions.css";
-var actionButton = "_duopj90-3-4-0";
-var floatingMenuButton = "_duopj91-3-4-0";
+var actionButton = "_duopj90-3-5-0";
+var floatingMenuButton = "_duopj91-3-5-0";
 export {
   actionButton,
   floatingMenuButton

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/UserActions/UserActions.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 './UserActions.css';\nexport var actionButton = '_duopj90-3-4-0';\nexport var floatingMenuButton = '_duopj91-3-4-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;AACA,IAAI,eAAe;AACnB,IAAI,qBAAqB;",
+  "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 './UserActions.css';\nexport var actionButton = '_duopj90-3-5-0';\nexport var floatingMenuButton = '_duopj91-3-5-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;AACA,IAAI,eAAe;AACnB,IAAI,qBAAqB;",
   "names": []
 }

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

@@ -1,3 +1,4 @@
+import { flushSync } from "react-dom";
 import { devLog } from "../../../../core/utils/logging.js";
 import { DATA_TABLE_DEFAULT_SCROLL_OPTIONS } from "../../constants.js";
 import { getMemoOptions } from "../../hooks/useTable/utils.js";
@@ -42,20 +43,56 @@ const DataTableVirtualScrolling = {
       }
     };
     table.scrollToRow = (rowId, align = DATA_TABLE_DEFAULT_SCROLL_OPTIONS.align) => {
-      if (!_rowVirtualizer) {
+      const rowVirtualizer = _rowVirtualizer;
+      if (!rowVirtualizer) {
         devLog("[Table - VirtualScrolling] No rowVirtualizer was registered");
         return;
       }
-      const allRows = table.getRowModel().rows;
-      const rowIndex = allRows.findIndex((row) => row.id === rowId);
-      if (rowIndex === -1) {
+      const scrollToTargetRow = () => {
+        requestAnimationFrame(() => {
+          const allRows = table.getRowModel().rows;
+          const rowIndex = allRows.findIndex((row) => row.id === rowId);
+          if (rowIndex === -1) {
+            devLog(
+              `[Table - VirtualScrolling] Row with id: "${rowId}" not found`
+            );
+            return;
+          }
+          rowVirtualizer.scrollToIndex(rowIndex, {
+            behavior: DATA_TABLE_DEFAULT_SCROLL_OPTIONS.behavior,
+            align
+          });
+        });
+      };
+      if (!table.options.enablePagination) {
+        scrollToTargetRow();
+        return;
+      }
+      const prePaginationRows = table.getPrePaginationRowModel().rows;
+      const prePaginationRowIndex = prePaginationRows.findIndex(
+        (row) => row.id === rowId
+      );
+      if (prePaginationRowIndex === -1) {
         devLog(`[Table - VirtualScrolling] Row with id: "${rowId}" not found`);
         return;
       }
-      _rowVirtualizer.scrollToIndex(rowIndex, {
-        behavior: DATA_TABLE_DEFAULT_SCROLL_OPTIONS.behavior,
-        align
-      });
+      const paginationState = table.getState().pagination;
+      const pageSize = paginationState.pageSize;
+      if (!Number.isFinite(pageSize) || pageSize <= 0) {
+        devLog(
+          `[Table - VirtualScrolling] Invalid page size "${String(
+            pageSize
+          )}" while scrolling to row with id: "${rowId}"`
+        );
+        return;
+      }
+      const targetPageIndex = Math.floor(prePaginationRowIndex / pageSize);
+      if (targetPageIndex !== paginationState.pageIndex) {
+        flushSync(() => {
+          table.setPageIndex(targetPageIndex, "internal");
+        });
+      }
+      scrollToTargetRow();
     };
     function measureRows() {
       if (!_rowVirtualizer?.scrollElement) {