@dynatrace/strato-components 3.6.0 → 3.7.0

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

@@ -1,35 +1,12 @@
+import {
+  assignPrototypeAPIs
+} from "@tanstack/react-table";
 import { defaultComparators } from "./default-comparators.js";
 import { normalizeThresholdRules } from "./normalize-rules.js";
-import { useDataTableConfigElement } from "../../../hooks/useDataTableConfig.js";
 import {
   isAccessorFnColumnDef,
-  isAccessorKeyColumnDef,
-  isGroupColumnDef
+  isAccessorKeyColumnDef
 } from "../../hooks/useTable/datatable-typeguards.js";
-import {
-  assignRowMethods,
-  getMemoOptions
-} from "../../hooks/useTable/utils.js";
-import { memo } from "../../tanstack-table-core-override/src/index.js";
-function useThresholds(props, options) {
-  const configThresholds = useDataTableConfigElement("rowThresholds");
-  const rowThresholds = props.rowThresholds ?? configThresholds;
-  if (rowThresholds) {
-    options.rowThresholds = normalizeThresholdRules(rowThresholds);
-    options.hasThresholds = true;
-  } else {
-    options.rowThresholds = void 0;
-    options.hasThresholds = options.columns.some((column) => {
-      if (isGroupColumnDef(column)) {
-        const groupedColumn = column;
-        return groupedColumn.columns && groupedColumn.columns.some(
-          (childColumn) => childColumn.thresholds && childColumn.thresholds.length > 0
-        );
-      }
-      return column.thresholds && column.thresholds.length > 0;
-    });
-  }
-}
 function matchesThreshold(threshold, rowData) {
   return threshold.rules.every((rule) => {
     const compareValue = rule.accessor?.(rowData) ?? void 0;
@@ -39,96 +16,106 @@ function matchesThreshold(threshold, rowData) {
     return rule.comparator(rowData);
   });
 }
-const Thresholds = {
-  createTable(table) {
-    assignRowMethods(table, {
-      getThresholdPill: memo(
-        function() {
-          return [table.options.rowThresholds, this.id, this.index];
-        },
-        function(rowThresholds) {
-          if (rowThresholds === void 0 || rowThresholds.length === 0) {
-            return null;
-          }
-          const pillColor = rowThresholds.findLast(
-            (threshold) => threshold.type === "pill" && matchesThreshold(threshold, this.original)
-          )?.color;
-          return pillColor ?? null;
-        },
-        getMemoOptions(table.options, "debugRows", "row.getThresholdPill")
-      ),
-      getThresholdColors: memo(
-        function() {
-          return [table.options.rowThresholds, this.id, this.index];
-        },
-        function(rowThresholds) {
-          if (rowThresholds === void 0 || rowThresholds.length === 0) {
-            return null;
-          }
-          const matchedThreshold = rowThresholds.findLast(
-            (threshold) => threshold.type === "highlight" && matchesThreshold(threshold, this.original)
-          );
-          if (matchedThreshold) {
-            return {
-              color: matchedThreshold.color,
-              backgroundColor: matchedThreshold.backgroundColor
-            };
-          }
-          return null;
-        },
-        getMemoOptions(table.options, "debugRows", "row.getThresholdColors")
-      )
-    });
-  },
-  createColumn(column, table) {
-    column.getThresholdRules = memo(
-      () => [column.columnDef.thresholds],
-      (thresholds) => {
-        if (thresholds === void 0 || thresholds.length === 0) {
-          return null;
-        }
-        const columnDef = column.columnDef;
-        let fallbackAccessor;
-        if (isAccessorKeyColumnDef(columnDef)) {
-          fallbackAccessor = columnDef.accessorKey;
-        }
-        if (isAccessorFnColumnDef(columnDef)) {
-          const accessorFn = columnDef.accessorFn;
-          fallbackAccessor = (row) => accessorFn(row, 0);
-        }
-        return normalizeThresholdRules(thresholds, fallbackAccessor);
-      },
-      getMemoOptions(table.options, "debugColumns", "column.getThresholdRules")
+function row_getThresholdPill(row, rowThresholds) {
+  if (rowThresholds === void 0 || rowThresholds.length === 0) {
+    return null;
+  }
+  const pillColor = rowThresholds.findLast(
+    (threshold) => threshold.type === "pill" && matchesThreshold(threshold, row.original)
+  )?.color;
+  return pillColor ?? null;
+}
+function row_getThresholdColors(row, rowThresholds) {
+  if (rowThresholds === void 0 || rowThresholds.length === 0) {
+    return null;
+  }
+  const matchedThreshold = rowThresholds.findLast(
+    (threshold) => threshold.type === "highlight" && matchesThreshold(threshold, row.original)
+  );
+  if (matchedThreshold) {
+    return {
+      color: matchedThreshold.color,
+      backgroundColor: matchedThreshold.backgroundColor
+    };
+  }
+  return null;
+}
+function column_getThresholdRules(column, thresholds) {
+  if (thresholds === void 0 || thresholds.length === 0) {
+    return null;
+  }
+  const columnDef = column.columnDef;
+  let fallbackAccessor;
+  if (isAccessorKeyColumnDef(columnDef)) {
+    fallbackAccessor = columnDef.accessorKey;
+  }
+  if (isAccessorFnColumnDef(columnDef)) {
+    const accessorFn = columnDef.accessorFn;
+    fallbackAccessor = (row) => accessorFn(row, 0);
+  }
+  return normalizeThresholdRules(thresholds, fallbackAccessor);
+}
+function cell_getThresholdColors(cell) {
+  const columnThresholds = cell.column.getThresholdRules();
+  const matchedColors = {
+    color: void 0,
+    backgroundColor: void 0
+  };
+  if (columnThresholds) {
+    const matchedColumnThreshold = columnThresholds.findLast(
+      (threshold) => matchesThreshold(threshold, cell.row.original)
     );
-  },
-  createCell(cell, column, row) {
-    cell.getThresholdColors = () => {
-      const columnThresholds = column.getThresholdRules();
-      const matchedColors = {
-        color: void 0,
-        backgroundColor: void 0
-      };
-      if (columnThresholds) {
-        const matchedColumnThreshold = columnThresholds.findLast(
-          (threshold) => matchesThreshold(threshold, row.original)
-        );
-        if (matchedColumnThreshold) {
-          matchedColors.color = matchedColumnThreshold.color;
-          matchedColors.backgroundColor = matchedColumnThreshold.backgroundColor;
-          return matchedColors;
-        }
-      }
-      const rowThresholds = row.getThresholdColors();
-      if (rowThresholds) {
-        matchedColors.color = rowThresholds.color;
-        matchedColors.backgroundColor = rowThresholds.backgroundColor;
-      }
+    if (matchedColumnThreshold) {
+      matchedColors.color = matchedColumnThreshold.color;
+      matchedColors.backgroundColor = matchedColumnThreshold.backgroundColor;
       return matchedColors;
-    };
+    }
   }
-};
+  const rowThresholds = cell.row.getThresholdColors();
+  if (rowThresholds) {
+    matchedColors.color = rowThresholds.color;
+    matchedColors.backgroundColor = rowThresholds.backgroundColor;
+  }
+  return matchedColors;
+}
+function constructRowThresholdsFeature() {
+  return {
+    assignCellPrototype: (prototype, table) => {
+      assignPrototypeAPIs("DataTableRowThresholdsFeature", prototype, table, {
+        cell_getThresholdColors: {
+          fn: (cell) => cell_getThresholdColors(cell)
+        }
+      });
+    },
+    assignColumnPrototype: (prototype, table) => {
+      assignPrototypeAPIs("DataTableRowThresholdsFeature", prototype, table, {
+        column_getThresholdRules: {
+          fn: (column, thresholds) => column_getThresholdRules(column, thresholds),
+          memoDeps: (column) => [column.columnDef.thresholds]
+        }
+      });
+    },
+    assignRowPrototype: (prototype, table) => {
+      assignPrototypeAPIs("DataTableRowThresholdsFeature", prototype, table, {
+        row_getThresholdPill: {
+          fn: (row, thresholds) => row_getThresholdPill(row, thresholds),
+          memoDeps: (row) => [table.options.rowThresholds, row.id, row.index]
+        },
+        row_getThresholdColors: {
+          fn: (row, thresholds) => row_getThresholdColors(row, thresholds),
+          memoDeps: (row) => [table.options.rowThresholds, row.id, row.index]
+        }
+      });
+    }
+  };
+}
+const DataTableRowThresholdsFeature = constructRowThresholdsFeature();
 export {
-  Thresholds,
-  useThresholds
+  DataTableRowThresholdsFeature,
+  cell_getThresholdColors,
+  column_getThresholdRules,
+  constructRowThresholdsFeature,
+  row_getThresholdColors,
+  row_getThresholdPill
 };
 //# sourceMappingURL=Thresholds.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/Thresholds/Thresholds.ts"],
-  "sourcesContent": ["import { defaultComparators } from './default-comparators.js';\nimport { normalizeThresholdRules } from './normalize-rules.js';\nimport type {\n  DataTableThresholdsNormalizedRule,\n  DataTableThresholdProps,\n} from './threshold-types.js';\nimport { useDataTableConfigElement } from '../../../hooks/useDataTableConfig.js';\nimport {\n  isAccessorFnColumnDef,\n  isAccessorKeyColumnDef,\n  isGroupColumnDef,\n} from '../../hooks/useTable/datatable-typeguards.js';\nimport {\n  type Cell,\n  type Column,\n  type Row,\n  type RowData,\n  type Table,\n  type TableFeature,\n  type TableOptions,\n} from '../../hooks/useTable/types.js';\nimport {\n  assignRowMethods,\n  getMemoOptions,\n} from '../../hooks/useTable/utils.js';\nimport type { DataTableRowData } from '../../public.api.js';\nimport { memo } from '../../tanstack-table-core-override/src/index.js';\n\n/**\n * Hook configuring the thresholds feature for the DataTable.\n * @internal\n */\nexport function useThresholds<TData>(\n  props: DataTableThresholdProps<TData>,\n  options: TableOptions<TData>,\n): void {\n  const configThresholds = useDataTableConfigElement('rowThresholds');\n\n  // check if either the table or any columns have thresholds\n  const rowThresholds = props.rowThresholds ?? configThresholds;\n  // First check if rowThresholds is defined, because this is the cheaper check\n  if (rowThresholds) {\n    options.rowThresholds = normalizeThresholdRules(rowThresholds);\n    options.hasThresholds = true;\n  } else {\n    options.rowThresholds = undefined;\n    // Check through the columnDefs if there are thresholds defined.\n    options.hasThresholds = options.columns.some((column) => {\n      if (isGroupColumnDef(column)) {\n        const groupedColumn = column;\n        return (\n          groupedColumn.columns &&\n          groupedColumn.columns.some(\n            (childColumn) =>\n              childColumn.thresholds && childColumn.thresholds.length > 0,\n          )\n        );\n      }\n      return column.thresholds && column.thresholds.length > 0;\n    });\n  }\n}\n\n/**\n * Helper function that will check if all rules of a given threshold match.\n * @internal\n */\nfunction matchesThreshold<TData extends DataTableRowData>(\n  threshold: DataTableThresholdsNormalizedRule<TData>,\n  rowData: TData,\n): boolean {\n  return threshold.rules.every((rule) => {\n    const compareValue = rule.accessor?.(rowData) ?? undefined;\n    if (typeof rule.comparator === 'string') {\n      return defaultComparators[rule.comparator](rule.value, compareValue);\n    }\n    return rule.comparator(rowData);\n  });\n}\n\n/**\n * Feature to handle thresholds to help in row and cell highlighting.\n * @internal\n */\nexport const Thresholds: TableFeature = {\n  createTable<TData extends DataTableRowData>(table: Table<TData>) {\n    assignRowMethods(table, {\n      getThresholdPill: memo(\n        function (this: Row<TData>) {\n          return [table.options.rowThresholds, this.id, this.index];\n        },\n        function (\n          this: Row<TData>,\n          rowThresholds: DataTableThresholdsNormalizedRule<TData>[] | undefined,\n        ) {\n          if (rowThresholds === undefined || rowThresholds.length === 0) {\n            return null;\n          }\n\n          // Check from the back, because the last one matching one should be\n          // the one applying, if there are more than one rules applied.\n          const pillColor = rowThresholds.findLast(\n            (threshold) =>\n              threshold.type === 'pill' &&\n              matchesThreshold(threshold, this.original),\n          )?.color;\n\n          return pillColor ?? null;\n        },\n        getMemoOptions(table.options, 'debugRows', 'row.getThresholdPill'),\n      ),\n\n      getThresholdColors: memo(\n        function (this: Row<TData>) {\n          return [table.options.rowThresholds, this.id, this.index];\n        },\n        function (\n          this: Row<TData>,\n          rowThresholds: DataTableThresholdsNormalizedRule<TData>[] | undefined,\n        ) {\n          if (rowThresholds === undefined || rowThresholds.length === 0) {\n            return null;\n          }\n\n          // Check from the back, because the last one matching one should be\n          // the one applying, if there are more than one rules applied.\n          const matchedThreshold = rowThresholds.findLast(\n            (threshold) =>\n              threshold.type === 'highlight' &&\n              matchesThreshold(threshold, this.original),\n          );\n\n          if (matchedThreshold) {\n            return {\n              color: matchedThreshold.color,\n              backgroundColor: matchedThreshold.backgroundColor,\n            };\n          }\n          return null;\n        },\n        getMemoOptions(table.options, 'debugRows', 'row.getThresholdColors'),\n      ),\n    });\n  },\n\n  createColumn<TData extends DataTableRowData>(\n    column: Column<TData>,\n    table: Table<TData>,\n  ) {\n    column.getThresholdRules = memo(\n      () => [column.columnDef.thresholds],\n      (thresholds) => {\n        if (thresholds === undefined || thresholds.length === 0) {\n          return null;\n        }\n\n        const columnDef = column.columnDef;\n\n        // Calculate the fallback accessor that should be used if there is\n        // non given on the threshold rule.\n        let fallbackAccessor: string | ((row: TData) => unknown) | undefined;\n        if (isAccessorKeyColumnDef(columnDef)) {\n          fallbackAccessor = columnDef.accessorKey;\n        }\n        if (isAccessorFnColumnDef(columnDef)) {\n          const accessorFn = columnDef.accessorFn;\n          fallbackAccessor = (row: TData) => accessorFn(row, 0);\n        }\n\n        return normalizeThresholdRules(thresholds, fallbackAccessor);\n      },\n      getMemoOptions(table.options, 'debugColumns', 'column.getThresholdRules'),\n    );\n  },\n\n  createCell<TData extends RowData, TValue>(\n    cell: Cell<TData, TValue>,\n    column: Column<TData, TValue>,\n    row: Row<TData>,\n  ) {\n    cell.getThresholdColors = () => {\n      const columnThresholds = column.getThresholdRules();\n\n      const matchedColors: { color?: string; backgroundColor?: string } = {\n        color: undefined,\n        backgroundColor: undefined,\n      };\n\n      if (columnThresholds) {\n        // Check from the back, because the last one matching one should be\n        // the one applying, if there are more than one rules applied.\n        const matchedColumnThreshold = columnThresholds.findLast((threshold) =>\n          matchesThreshold(threshold, row.original),\n        );\n\n        if (matchedColumnThreshold) {\n          matchedColors.color = matchedColumnThreshold.color;\n          matchedColors.backgroundColor =\n            matchedColumnThreshold.backgroundColor;\n          return matchedColors;\n        }\n      }\n\n      // If no column threshold rules matched, we can check if the row threshold\n      // rule will match.\n      const rowThresholds = row.getThresholdColors();\n      if (rowThresholds) {\n        matchedColors.color = rowThresholds.color;\n        matchedColors.backgroundColor = rowThresholds.backgroundColor;\n      }\n      return matchedColors;\n    };\n  },\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  assignPrototypeAPIs,\n  type Cell,\n  type CellData,\n  type Column,\n  type Row,\n  type RowData,\n  type TableFeature,\n  type TableFeatures,\n} from '@tanstack/react-table';\n\nimport { defaultComparators } from './default-comparators.js';\nimport { normalizeThresholdRules } from './normalize-rules.js';\nimport type {\n  DataTableColumnThreshold,\n  DataTableThresholdsNormalizedRule,\n  RowThresholdsFeatureConstructors,\n} from './threshold-types.js';\nimport {\n  isAccessorFnColumnDef,\n  isAccessorKeyColumnDef,\n} from '../../hooks/useTable/datatable-typeguards.js';\n\n/**\n * Helper function that will check if all rules of a given threshold match.\n * @internal\n */\nfunction matchesThreshold<TData extends RowData>(\n  threshold: DataTableThresholdsNormalizedRule<TData>,\n  rowData: TData,\n): boolean {\n  return threshold.rules.every((rule) => {\n    const compareValue = rule.accessor?.(rowData) ?? undefined;\n    if (typeof rule.comparator === 'string') {\n      return defaultComparators[rule.comparator](rule.value, compareValue);\n    }\n    return rule.comparator(rowData);\n  });\n}\n\n/**\n * Helper function to get the pill color for the row threshold.\n * @internal\n */\nexport function row_getThresholdPill<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  row: Row<TFeatures, TData>,\n  rowThresholds: DataTableThresholdsNormalizedRule<TData>[] | undefined,\n): string | null {\n  if (rowThresholds === undefined || rowThresholds.length === 0) {\n    return null;\n  }\n\n  // Check from the back, because the last one matching one should be\n  // the one applying, if there are more than one rules applied.\n  const pillColor = rowThresholds.findLast(\n    (threshold) =>\n      threshold.type === 'pill' && matchesThreshold(threshold, row.original),\n  )?.color;\n\n  return pillColor ?? null;\n}\n\n/**\n * Helper function to get the threshold color and backgroundColor for the cell.\n * @internal\n */\nexport function row_getThresholdColors<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  row: Row<TFeatures, TData>,\n  rowThresholds: DataTableThresholdsNormalizedRule<TData>[] | undefined,\n): { color?: string; backgroundColor?: string } | null {\n  if (rowThresholds === undefined || rowThresholds.length === 0) {\n    return null;\n  }\n\n  // Check from the back, because the last one matching one should be\n  // the one applying, if there are more than one rules applied.\n  const matchedThreshold = rowThresholds.findLast(\n    (threshold) =>\n      threshold.type === 'highlight' &&\n      matchesThreshold(threshold, row.original),\n  );\n\n  if (matchedThreshold) {\n    return {\n      color: matchedThreshold.color,\n      backgroundColor: matchedThreshold.backgroundColor,\n    };\n  }\n  return null;\n}\n\n/**\n * Helper function to get the threshold rules for the column.\n * @internal\n */\nexport function column_getThresholdRules<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n>(\n  column: Column<TFeatures, TData>,\n  thresholds: DataTableColumnThreshold<TData>[] | undefined,\n): DataTableThresholdsNormalizedRule<TData>[] | null {\n  if (thresholds === undefined || thresholds.length === 0) {\n    return null;\n  }\n\n  const columnDef = column.columnDef;\n\n  // Calculate the fallback accessor that should be used if there is\n  // non given on the threshold rule.\n  let fallbackAccessor:\n    | string\n    | number\n    | symbol\n    | ((row: TData) => unknown)\n    | undefined;\n  if (isAccessorKeyColumnDef<TFeatures, TData>(columnDef)) {\n    fallbackAccessor = columnDef.accessorKey;\n  }\n  if (isAccessorFnColumnDef<TFeatures, TData>(columnDef)) {\n    const accessorFn = columnDef.accessorFn;\n    fallbackAccessor = (row: TData) => accessorFn(row, 0);\n  }\n\n  return normalizeThresholdRules(thresholds, fallbackAccessor);\n}\n\n/**\n * Helper function to get the threshold color and backgroundColor for the cell.\n * @internal\n */\nexport function cell_getThresholdColors<\n  TFeatures extends TableFeatures,\n  TData extends RowData,\n  TValue extends CellData,\n>(cell: Cell<TFeatures, TData, TValue>) {\n  const columnThresholds = cell.column.getThresholdRules();\n\n  const matchedColors: { color?: string; backgroundColor?: string } = {\n    color: undefined,\n    backgroundColor: undefined,\n  };\n\n  if (columnThresholds) {\n    // Check from the back, because the last one matching one should be\n    // the one applying, if there are more than one rules applied.\n    const matchedColumnThreshold = columnThresholds.findLast((threshold) =>\n      matchesThreshold(threshold, cell.row.original),\n    );\n\n    if (matchedColumnThreshold) {\n      matchedColors.color = matchedColumnThreshold.color;\n      matchedColors.backgroundColor = matchedColumnThreshold.backgroundColor;\n      return matchedColors;\n    }\n  }\n\n  // If no column threshold rules matched, we can check if the row threshold\n  // rule will match.\n  const rowThresholds = cell.row.getThresholdColors();\n  if (rowThresholds) {\n    matchedColors.color = rowThresholds.color;\n    matchedColors.backgroundColor = rowThresholds.backgroundColor;\n  }\n  return matchedColors;\n}\n\n/**\n * Constructs the column row thresholds for the table,\n * including API implementations and prototype assignments.\n * @internal\n */\nexport function constructRowThresholdsFeature<\n  TData extends RowData,\n>(): TableFeature<RowThresholdsFeatureConstructors<TData>> {\n  return {\n    assignCellPrototype: (prototype, table) => {\n      assignPrototypeAPIs('DataTableRowThresholdsFeature', prototype, table, {\n        cell_getThresholdColors: {\n          fn: (cell) => cell_getThresholdColors(cell),\n        },\n      });\n    },\n    assignColumnPrototype: (prototype, table) => {\n      assignPrototypeAPIs('DataTableRowThresholdsFeature', prototype, table, {\n        column_getThresholdRules: {\n          fn: (column, thresholds) =>\n            column_getThresholdRules(column, thresholds),\n          memoDeps: (column) => [column.columnDef.thresholds],\n        },\n      });\n    },\n    assignRowPrototype: (prototype, table) => {\n      assignPrototypeAPIs('DataTableRowThresholdsFeature', prototype, table, {\n        row_getThresholdPill: {\n          fn: (row, thresholds) => row_getThresholdPill(row, thresholds),\n          memoDeps: (row) => [table.options.rowThresholds, row.id, row.index],\n        },\n        row_getThresholdColors: {\n          fn: (row, thresholds) => row_getThresholdColors(row, thresholds),\n          memoDeps: (row) => [table.options.rowThresholds, row.id, row.index],\n        },\n      });\n    },\n  };\n}\n\n/**\n * Feature to handle thresholds to help in row and cell highlighting.\n * @internal\n */\nexport const DataTableRowThresholdsFeature = constructRowThresholdsFeature();\n"],
+  "mappings": "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",
   "names": []
 }

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

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

package/esm/tables/DataTable/features/Thresholds/normalize-rules.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/Thresholds/normalize-rules.ts"],
-  "sourcesContent": ["import type {\n  DataTableColumnThreshold,\n  DataTableRowThreshold,\n  DataTableThresholdsNormalizedRule,\n} from './threshold-types.js';\nimport { makeAccessorFunction } from '../../hooks/makeAccessorFunction.js';\nimport type { DataTableRowData } from '../../public.api.js';\n\n/**\n * @internal\n * Helper function that will normalize the given accessor to a function\n * in the normalized threshold rules.\n */\nfunction makeAccessor<TData extends DataTableRowData>(\n  accessor?: string | ((row: TData) => unknown),\n  fallbackAccessor?: string | ((row: TData) => unknown),\n): (row: TData) => unknown {\n  // Check if the accessor is defined. If it is defined use this one for\n  // the checks. If not, use the one from the columnDef.\n  const appliedAccessor = accessor ?? fallbackAccessor;\n\n  if (typeof appliedAccessor === 'string') {\n    // Check if the string access contains JSONPath like characters, that would\n    // require a complex replacer logic.\n    if (appliedAccessor.includes('.') || appliedAccessor.includes('[')) {\n      return makeAccessorFunction(appliedAccessor);\n    } else {\n      return (row: TData) => {\n        // We can no longer infer this in the callback\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        return (row as any)[appliedAccessor];\n      };\n    }\n  } else if (typeof appliedAccessor === 'function') {\n    return appliedAccessor;\n  }\n  return () => undefined;\n}\n\n/**\n * Normalizes the simple rules and combined rules into a standard internal\n * rule set.\n * @internal\n */\nexport function normalizeThresholdRules<\n  TData extends DataTableRowData,\n  ThresholdRule extends\n    | DataTableColumnThreshold<TData>[]\n    | DataTableRowThreshold<TData>[],\n>(\n  thresholds: ThresholdRule,\n  fallbackAccessor?: string | ((row: TData) => unknown),\n): Array<DataTableThresholdsNormalizedRule<TData>> {\n  // Unify the rules into a single setup in order to combine simple and combined rules:\n  const columnThresholdDefinitions: Array<\n    DataTableThresholdsNormalizedRule<TData>\n  > = [];\n\n  for (const threshold of thresholds) {\n    // Create the basis of the normalized rule.\n    const unifiedRule: DataTableThresholdsNormalizedRule<TData> = {\n      color: threshold.color,\n      backgroundColor:\n        'backgroundColor' in threshold ? threshold.backgroundColor : undefined,\n      rules: [],\n      type: 'type' in threshold ? threshold.type : undefined,\n    };\n\n    // Map the simple rules to an array as well, so we do not need to deal\n    // with two different datatypes further down the line.\n    const normalizedRulesArray =\n      threshold.rules !== undefined\n        ? threshold.rules\n        : [\n            {\n              accessor:\n                'accessor' in threshold ? threshold.accessor : undefined,\n              value: 'value' in threshold ? threshold.value : undefined,\n              comparator: threshold.comparator,\n            },\n          ];\n\n    unifiedRule.rules = normalizedRulesArray.map((rule) => {\n      return {\n        // Accessors might be undefined in scenarios where a custom comparator function\n        // is given.\n        accessor:\n          'accessor' in rule\n            ? makeAccessor(rule.accessor, fallbackAccessor)\n            : undefined,\n        // Value might be undefined in scenarios where a custom comparator function\n        // is given.\n        value: 'value' in rule ? rule.value : undefined,\n        comparator: rule.comparator,\n      };\n    });\n\n    columnThresholdDefinitions.push(unifiedRule);\n  }\n  return columnThresholdDefinitions;\n}\n"],
-  "mappings": "AAKA,SAAS,4BAA4B;AAQrC,SAAS,aACP,UACA,kBACyB;AAGzB,QAAM,kBAAkB,YAAY;AAEpC,MAAI,OAAO,oBAAoB,UAAU;AAGvC,QAAI,gBAAgB,SAAS,GAAG,KAAK,gBAAgB,SAAS,GAAG,GAAG;AAClE,aAAO,qBAAqB,eAAe;AAAA,IAC7C,OAAO;AACL,aAAO,CAAC,QAAe;AAGrB,eAAQ,IAAY,eAAe;AAAA,MACrC;AAAA,IACF;AAAA,EACF,WAAW,OAAO,oBAAoB,YAAY;AAChD,WAAO;AAAA,EACT;AACA,SAAO,MAAM;AACf;AAOO,SAAS,wBAMd,YACA,kBACiD;AAEjD,QAAM,6BAEF,CAAC;AAEL,aAAW,aAAa,YAAY;AAElC,UAAM,cAAwD;AAAA,MAC5D,OAAO,UAAU;AAAA,MACjB,iBACE,qBAAqB,YAAY,UAAU,kBAAkB;AAAA,MAC/D,OAAO,CAAC;AAAA,MACR,MAAM,UAAU,YAAY,UAAU,OAAO;AAAA,IAC/C;AAIA,UAAM,uBACJ,UAAU,UAAU,SAChB,UAAU,QACV;AAAA,MACE;AAAA,QACE,UACE,cAAc,YAAY,UAAU,WAAW;AAAA,QACjD,OAAO,WAAW,YAAY,UAAU,QAAQ;AAAA,QAChD,YAAY,UAAU;AAAA,MACxB;AAAA,IACF;AAEN,gBAAY,QAAQ,qBAAqB,IAAI,CAAC,SAAS;AACrD,aAAO;AAAA;AAAA;AAAA,QAGL,UACE,cAAc,OACV,aAAa,KAAK,UAAU,gBAAgB,IAC5C;AAAA;AAAA;AAAA,QAGN,OAAO,WAAW,OAAO,KAAK,QAAQ;AAAA,QACtC,YAAY,KAAK;AAAA,MACnB;AAAA,IACF,CAAC;AAED,+BAA2B,KAAK,WAAW;AAAA,EAC7C;AACA,SAAO;AACT;",
+  "sourcesContent": ["import type { RowData } from '@tanstack/react-table';\n\nimport type {\n  DataTableColumnThreshold,\n  DataTableRowThreshold,\n  DataTableThresholdsNormalizedRule,\n} from './threshold-types.js';\nimport { makeAccessorFunction } from '../../hooks/makeAccessorFunction.js';\nimport type { DataTableRowData } from '../../public.api.js';\n\ntype Accessor<TData extends DataTableRowData> =\n  | string\n  | number\n  | symbol\n  | ((row: TData) => unknown);\n\n/**\n * @internal\n * Helper function that will normalize the given accessor to a function\n * in the normalized threshold rules.\n */\nfunction makeAccessor<TData extends DataTableRowData>(\n  accessor?: Accessor<TData>,\n  fallbackAccessor?: Accessor<TData>,\n): (row: TData) => unknown {\n  // Check if the accessor is defined. If it is defined use this one for\n  // the checks. If not, use the one from the columnDef.\n  const appliedAccessor = accessor ?? fallbackAccessor;\n\n  if (typeof appliedAccessor === 'string') {\n    // Check if the string access contains JSONPath like characters, that would\n    // require a complex replacer logic.\n    if (appliedAccessor.includes('.') || appliedAccessor.includes('[')) {\n      return makeAccessorFunction(appliedAccessor);\n    } else {\n      return (row: TData) => {\n        // We can no longer infer this in the callback\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        return (row as any)[appliedAccessor];\n      };\n    }\n  } else if (typeof appliedAccessor === 'function') {\n    return appliedAccessor;\n  }\n  return () => undefined;\n}\n\n/**\n * Normalizes the simple rules and combined rules into a standard internal\n * rule set.\n * @internal\n */\nexport function normalizeThresholdRules<\n  TData extends RowData,\n  ThresholdRule extends\n    | DataTableColumnThreshold<TData>[]\n    | DataTableRowThreshold<TData>[],\n>(\n  thresholds: ThresholdRule,\n  fallbackAccessor?: Accessor<TData>,\n): Array<DataTableThresholdsNormalizedRule<TData>> {\n  // Unify the rules into a single setup in order to combine simple and combined rules:\n  const columnThresholdDefinitions: Array<\n    DataTableThresholdsNormalizedRule<TData>\n  > = [];\n\n  for (const threshold of thresholds) {\n    // Create the basis of the normalized rule.\n    const unifiedRule: DataTableThresholdsNormalizedRule<TData> = {\n      color: threshold.color,\n      backgroundColor:\n        'backgroundColor' in threshold ? threshold.backgroundColor : undefined,\n      rules: [],\n      type: 'type' in threshold ? threshold.type : undefined,\n    };\n\n    // Map the simple rules to an array as well, so we do not need to deal\n    // with two different datatypes further down the line.\n    const normalizedRulesArray =\n      threshold.rules !== undefined\n        ? threshold.rules\n        : [\n            {\n              accessor:\n                'accessor' in threshold ? threshold.accessor : undefined,\n              value: 'value' in threshold ? threshold.value : undefined,\n              comparator: threshold.comparator,\n            },\n          ];\n\n    unifiedRule.rules = normalizedRulesArray.map((rule) => {\n      return {\n        // Accessors might be undefined in scenarios where a custom comparator function\n        // is given.\n        accessor:\n          'accessor' in rule\n            ? makeAccessor(rule.accessor, fallbackAccessor)\n            : undefined,\n        // Value might be undefined in scenarios where a custom comparator function\n        // is given.\n        value: 'value' in rule ? rule.value : undefined,\n        comparator: rule.comparator,\n      };\n    });\n\n    columnThresholdDefinitions.push(unifiedRule);\n  }\n  return columnThresholdDefinitions;\n}\n"],
+  "mappings": "AAOA,SAAS,4BAA4B;AAcrC,SAAS,aACP,UACA,kBACyB;AAGzB,QAAM,kBAAkB,YAAY;AAEpC,MAAI,OAAO,oBAAoB,UAAU;AAGvC,QAAI,gBAAgB,SAAS,GAAG,KAAK,gBAAgB,SAAS,GAAG,GAAG;AAClE,aAAO,qBAAqB,eAAe;AAAA,IAC7C,OAAO;AACL,aAAO,CAAC,QAAe;AAGrB,eAAQ,IAAY,eAAe;AAAA,MACrC;AAAA,IACF;AAAA,EACF,WAAW,OAAO,oBAAoB,YAAY;AAChD,WAAO;AAAA,EACT;AACA,SAAO,MAAM;AACf;AAOO,SAAS,wBAMd,YACA,kBACiD;AAEjD,QAAM,6BAEF,CAAC;AAEL,aAAW,aAAa,YAAY;AAElC,UAAM,cAAwD;AAAA,MAC5D,OAAO,UAAU;AAAA,MACjB,iBACE,qBAAqB,YAAY,UAAU,kBAAkB;AAAA,MAC/D,OAAO,CAAC;AAAA,MACR,MAAM,UAAU,YAAY,UAAU,OAAO;AAAA,IAC/C;AAIA,UAAM,uBACJ,UAAU,UAAU,SAChB,UAAU,QACV;AAAA,MACE;AAAA,QACE,UACE,cAAc,YAAY,UAAU,WAAW;AAAA,QACjD,OAAO,WAAW,YAAY,UAAU,QAAQ;AAAA,QAChD,YAAY,UAAU;AAAA,MACxB;AAAA,IACF;AAEN,gBAAY,QAAQ,qBAAqB,IAAI,CAAC,SAAS;AACrD,aAAO;AAAA;AAAA;AAAA,QAGL,UACE,cAAc,OACV,aAAa,KAAK,UAAU,gBAAgB,IAC5C;AAAA;AAAA;AAAA,QAGN,OAAO,WAAW,OAAO,KAAK,QAAQ;AAAA,QACtC,YAAY,KAAK;AAAA,MACnB;AAAA,IACF,CAAC;AAED,+BAA2B,KAAK,WAAW;AAAA,EAC7C;AACA,SAAO;AACT;",
   "names": []
 }

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

@@ -0,0 +1,26 @@
+import { normalizeThresholdRules } from "./normalize-rules.js";
+import { useDataTableConfigElement } from "../../../hooks/useDataTableConfig.js";
+import { isGroupColumnDef } from "../../hooks/useTable/datatable-typeguards.js";
+function useThresholds(props, options) {
+  const configThresholds = useDataTableConfigElement("rowThresholds");
+  const rowThresholds = props.rowThresholds ?? configThresholds;
+  if (rowThresholds) {
+    options.rowThresholds = normalizeThresholdRules(rowThresholds);
+    options.hasThresholds = true;
+  } else {
+    options.rowThresholds = void 0;
+    options.hasThresholds = options.columns.some((column) => {
+      if (isGroupColumnDef(column)) {
+        const groupedColumn = column;
+        return groupedColumn.columns?.some(
+          (childColumn) => childColumn.thresholds && childColumn.thresholds.length > 0
+        );
+      }
+      return column.thresholds && column.thresholds.length > 0;
+    });
+  }
+}
+export {
+  useThresholds
+};
+//# sourceMappingURL=useThresholds.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/tables/DataTable/features/Thresholds/useThresholds.ts"],
+  "sourcesContent": ["/* eslint-disable react-hooks/immutability */\nimport { type TableOptions } from '@tanstack/react-table';\n\nimport { normalizeThresholdRules } from './normalize-rules.js';\nimport type { DataTableThresholdProps } from './threshold-types.js';\nimport { useDataTableConfigElement } from '../../../hooks/useDataTableConfig.js';\nimport { isGroupColumnDef } from '../../hooks/useTable/datatable-typeguards.js';\nimport type { DataTableRowData } from '../../row-data-types.js';\nimport type { TDataTableFeatures } from '../types/features.types.js';\n\n/**\n * Hook configuring the thresholds feature for the DataTable.\n * @internal\n */\nexport function useThresholds<\n  TFeatures extends TDataTableFeatures,\n  TData extends DataTableRowData,\n>(\n  props: DataTableThresholdProps<TData>,\n  options: TableOptions<TFeatures, Exclude<TData, unknown>>,\n): void {\n  const configThresholds = useDataTableConfigElement('rowThresholds');\n\n  // check if either the table or any columns have thresholds\n  const rowThresholds = props.rowThresholds ?? configThresholds;\n  // First check if rowThresholds is defined, because this is the cheaper check\n  if (rowThresholds) {\n    options.rowThresholds = normalizeThresholdRules(rowThresholds);\n    options.hasThresholds = true;\n  } else {\n    options.rowThresholds = undefined;\n    // Check through the columnDefs if there are thresholds defined.\n    options.hasThresholds = options.columns.some((column) => {\n      if (isGroupColumnDef<TFeatures, Exclude<TData, unknown>>(column)) {\n        const groupedColumn = column;\n        return groupedColumn.columns?.some(\n          (childColumn) =>\n            childColumn.thresholds && childColumn.thresholds.length > 0,\n        );\n      }\n      return column.thresholds && column.thresholds.length > 0;\n    });\n  }\n}\n"],
+  "mappings": "AAGA,SAAS,+BAA+B;AAExC,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AAQ1B,SAAS,cAId,OACA,SACM;AACN,QAAM,mBAAmB,0BAA0B,eAAe;AAGlE,QAAM,gBAAgB,MAAM,iBAAiB;AAE7C,MAAI,eAAe;AACjB,YAAQ,gBAAgB,wBAAwB,aAAa;AAC7D,YAAQ,gBAAgB;AAAA,EAC1B,OAAO;AACL,YAAQ,gBAAgB;AAExB,YAAQ,gBAAgB,QAAQ,QAAQ,KAAK,CAAC,WAAW;AACvD,UAAI,iBAAqD,MAAM,GAAG;AAChE,cAAM,gBAAgB;AACtB,eAAO,cAAc,SAAS;AAAA,UAC5B,CAAC,gBACC,YAAY,cAAc,YAAY,WAAW,SAAS;AAAA,QAC9D;AAAA,MACF;AACA,aAAO,OAAO,cAAc,OAAO,WAAW,SAAS;AAAA,IACzD,CAAC;AAAA,EACH;AACF;",
+  "names": []
+}

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/UserActions/CellActions.tsx"],
-  "sourcesContent": ["import type { PropsWithChildren, ReactElement, ReactNode } from 'react';\nimport { isElement } from 'react-is';\n\nimport type { DataTableColumnDef, DataTableRowData } from '../../public.api.js';\n\n/**\n * Props for the `DataTableCellActions` component.\n * @public\n */\nexport interface DataTableCellActionsProps<TData extends DataTableRowData> {\n  /**\n   * Content for the cell actions.\n   * Should be a `TableActionsMenu` directly or a function returning one.\n   */\n  children: DataTableCellActionsContent<TData>;\n  /**\n   * Column ID that the given cell actions apply to. When a function is provided, it receives a\n   * column ID and must return a boolean whether the action should be applied to that column.\n   * If left empty, the actions apply to all cells in columns that allow cell actions.\n   */\n  column?: string | ((columnId: string) => boolean);\n}\n\n/**\n * Type for the content of a DataTableCellAction.\n * @public\n */\nexport type DataTableCellActionsContent<TData> =\n  | ReactNode\n  | ((props: {\n      columnDef: DataTableColumnDef<TData>;\n      cellValue: unknown;\n      row: TData;\n      rowId: string;\n    }) => ReactElement<PropsWithChildren>);\n\n/**\n * Type for the cell actions collected from the table configuration.\n * `column` is the extracted column prop of the CellActions slot component\n * and `action` is the content.\n * @internal\n */\nexport type CollectedCellActions<TData> = Array<{\n  column?: string | ((id: string) => boolean);\n  action: DataTableCellActionsContent<TData>;\n}>;\n\n/**\n * The slot component for defining cell actions within the DataTable.\n * @public\n */\nexport function DataTableCellActions<TData extends DataTableRowData>(\n  props: DataTableCellActionsProps<TData>,\n) {\n  return null;\n}\n\n/**\n * Typeguard function that will check if a ReactNode is of type DataTableCellActions.\n * @internal\n */\nexport function isDataTableCellActions<TData extends DataTableRowData>(\n  child: ReactNode,\n): child is ReactElement<DataTableCellActionsProps<TData>> {\n  if (isElement(child) && child.type === DataTableCellActions) {\n    return true;\n  }\n  return false;\n}\n"],
+  "sourcesContent": ["import type { PropsWithChildren, ReactElement, ReactNode } from 'react';\nimport { isElement } from 'react-is';\n\nimport type { DataTableColumnDef, DataTableRowData } from '../../public.api.js';\n\n/**\n * Props for the `DataTableCellActions` component.\n * @public\n */\nexport interface DataTableCellActionsProps<TData extends DataTableRowData> {\n  /**\n   * Content for the cell actions.\n   * Should be a `TableActionsMenu` directly or a function returning one.\n   */\n  children: DataTableCellActionsContent<TData>;\n  /**\n   * Column ID that the given cell actions apply to. When a function is provided, it receives a\n   * column ID and must return a boolean whether the action should be applied to that column.\n   * If left empty, the actions apply to all cells in columns that allow cell actions.\n   */\n  column?: string | ((columnId: string) => boolean);\n}\n\n/**\n * Type for the content of a DataTableCellAction.\n * @public\n */\nexport type DataTableCellActionsContent<TData extends DataTableRowData> =\n  | ReactNode\n  | ((props: {\n      columnDef: DataTableColumnDef<TData>;\n      cellValue: unknown;\n      row: TData;\n      rowId: string;\n    }) => ReactElement<PropsWithChildren>);\n\n/**\n * Type for the cell actions collected from the table configuration.\n * `column` is the extracted column prop of the CellActions slot component\n * and `action` is the content.\n * @internal\n */\nexport type CollectedCellActions<TData extends DataTableRowData> = Array<{\n  column?: string | ((id: string) => boolean);\n  action: DataTableCellActionsContent<TData>;\n}>;\n\n/**\n * The slot component for defining cell actions within the DataTable.\n * @public\n */\nexport function DataTableCellActions<TData extends DataTableRowData>(\n  props: DataTableCellActionsProps<TData>,\n) {\n  return null;\n}\n\n/**\n * Typeguard function that will check if a ReactNode is of type DataTableCellActions.\n * @internal\n */\nexport function isDataTableCellActions<TData extends DataTableRowData>(\n  child: ReactNode,\n): child is ReactElement<DataTableCellActionsProps<TData>> {\n  if (isElement(child) && child.type === DataTableCellActions) {\n    return true;\n  }\n  return false;\n}\n"],
   "mappings": "AACA,SAAS,iBAAiB;AAkDnB,SAAS,qBACd,OACA;AACA,SAAO;AACT;AAMO,SAAS,uBACd,OACyD;AACzD,MAAI,UAAU,KAAK,KAAK,MAAM,SAAS,sBAAsB;AAC3D,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/UserActions/ColumnActions.tsx"],
-  "sourcesContent": ["import type { PropsWithChildren, ReactElement, ReactNode } from 'react';\nimport { isElement } from 'react-is';\n\nimport type { DataTableColumnDef, DataTableRowData } from '../../public.api.js';\n\n/**\n * Props for the `DataTableColumnActions` component.\n * @public\n */\nexport interface DataTableColumnActionsProps<TData extends DataTableRowData> {\n  /**\n   * Content for the column actions.\n   * Should be a `TableActionsMenu` directly or a function returning one.\n   */\n  children: DataTableColumnActionsContent<TData>;\n  /**\n   * Column id that the given column actions apply to. If left empty, the given column actions\n   * apply to all columns that allow column actions.\n   */\n  column?: string;\n}\n\n/**\n * Type for the content of a DataTableColumnAction.\n * @public\n */\nexport type DataTableColumnActionsContent<TData extends DataTableRowData> =\n  | ReactNode\n  | ((column: DataTableColumnDef<TData>) => ReactElement<PropsWithChildren>);\n\n/**\n * Type for the column actions collected from the table configuration.\n * `column` is the extracted column prop of the ColumnActions slot component\n * and `action` is the content.\n * @internal\n */\nexport type CollectedColumnActions<TData> = Array<{\n  column?: string;\n  action: DataTableColumnActionsContent<TData>;\n}>;\n\n/**\n * The slot component for defining column actions within the DataTable.\n * @public\n */\nexport function DataTableColumnActions<TData extends DataTableRowData>(\n  props: DataTableColumnActionsProps<TData>,\n) {\n  return null;\n}\n\n/**\n * Typeguard function that will check if a ReactNode is of type DataTableColumnActions.\n * @internal\n */\nexport function isDataTableColumnActions<TData extends DataTableRowData>(\n  child: ReactNode,\n): child is ReactElement<DataTableColumnActionsProps<TData>> {\n  if (isElement(child) && child.type === DataTableColumnActions) {\n    return true;\n  }\n  return false;\n}\n"],
-  "mappings": "AACA,SAAS,iBAAiB;AA4CnB,SAAS,uBACd,OACA;AACA,SAAO;AACT;AAMO,SAAS,yBACd,OAC2D;AAC3D,MAAI,UAAU,KAAK,KAAK,MAAM,SAAS,wBAAwB;AAC7D,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
+  "sourcesContent": ["import type { RowData } from '@tanstack/react-table';\nimport type { PropsWithChildren, ReactElement, ReactNode } from 'react';\nimport { isElement } from 'react-is';\n\nimport type { DataTableColumnDef, DataTableRowData } from '../../public.api.js';\n\n/**\n * Props for the `DataTableColumnActions` component.\n * @public\n */\nexport interface DataTableColumnActionsProps<TData extends DataTableRowData> {\n  /**\n   * Content for the column actions.\n   * Should be a `TableActionsMenu` directly or a function returning one.\n   */\n  children: DataTableColumnActionsContent<TData>;\n  /**\n   * Column id that the given column actions apply to. If left empty, the given column actions\n   * apply to all columns that allow column actions.\n   */\n  column?: string;\n}\n\n/**\n * Type for the content of a DataTableColumnAction.\n * @public\n */\nexport type DataTableColumnActionsContent<TData extends DataTableRowData> =\n  | ReactNode\n  | ((column: DataTableColumnDef<TData>) => ReactElement<PropsWithChildren>);\n\n/**\n * Type for the column actions collected from the table configuration.\n * `column` is the extracted column prop of the ColumnActions slot component\n * and `action` is the content.\n * @internal\n */\nexport type CollectedColumnActions<TData extends RowData> = Array<{\n  column?: string;\n  action: DataTableColumnActionsContent<TData>;\n}>;\n\n/**\n * The slot component for defining column actions within the DataTable.\n * @public\n */\nexport function DataTableColumnActions<TData extends DataTableRowData>(\n  props: DataTableColumnActionsProps<TData>,\n) {\n  return null;\n}\n\n/**\n * Typeguard function that will check if a ReactNode is of type DataTableColumnActions.\n * @internal\n */\nexport function isDataTableColumnActions<TData extends DataTableRowData>(\n  child: ReactNode,\n): child is ReactElement<DataTableColumnActionsProps<TData>> {\n  if (isElement(child) && child.type === DataTableColumnActions) {\n    return true;\n  }\n  return false;\n}\n"],
+  "mappings": "AAEA,SAAS,iBAAiB;AA4CnB,SAAS,uBACd,OACA;AACA,SAAO;AACT;AAMO,SAAS,yBACd,OAC2D;AAC3D,MAAI,UAAU,KAAK,KAAK,MAAM,SAAS,wBAAwB;AAC7D,WAAO;AAAA,EACT;AACA,SAAO;AACT;",
   "names": []
 }

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

@@ -11,7 +11,7 @@ import {
 } from "../../contexts/DataTableContext.js";
 function CellActionFloatingMenu() {
   const table = useDataTable();
-  const { type, headerId, rowId, columnId, x, y } = table.getState()?.floatingMenuInfo ?? {
+  const { type, headerId, rowId, columnId, x, y } = table.atoms.floatingMenuInfo?.get() ?? {
     type: null,
     headerId: null,
     rowId: null,
@@ -25,7 +25,7 @@ function CellActionFloatingMenu() {
       return table.getUserActionsForCell(columnId, rowId);
     }
     return null;
-  }, [rowId, columnId, type, table]);
+  }, [rowId, columnId, type]);
   const menuOpen = type !== null && columnId !== null && actions !== null;
   const { header, column, cell } = useMemo(() => {
     if (menuOpen === false) {
@@ -36,11 +36,13 @@ function CellActionFloatingMenu() {
     let cell2 = void 0;
     if (rowId) {
       const rowCells = table.getRow(rowId).getAllCells();
-      const columnCell = rowCells.find((cell3) => cell3.column.id === columnId);
+      const columnCell = rowCells.find(
+        (cell3) => cell3.column.id === columnId
+      );
       cell2 = columnCell;
     }
     return { header: header2, column: column2, cell: cell2 };
-  }, [columnId, headerId, menuOpen, rowId, table]);
+  }, [columnId, headerId, menuOpen, rowId]);
   if (menuOpen === false) {
     return;
   }
@@ -51,19 +53,15 @@ function CellActionFloatingMenu() {
         open: menuOpen,
         onOpenChange: (isOpen) => {
           if (isOpen === false) {
-            table.setState((state) => {
-              const newState = { ...state };
-              newState.floatingMenuInfo = {
-                type: null,
-                headerId: null,
-                rowId: null,
-                columnId: null,
-                x: 0,
-                y: 0
-              };
-              newState.openMenuRowId = null;
-              return newState;
-            });
+            table.baseAtoms.floatingMenuInfo.set(() => ({
+              type: null,
+              headerId: null,
+              rowId: null,
+              columnId: null,
+              x: 0,
+              y: 0
+            }));
+            table.baseAtoms.openMenuRowId.set(null);
           }
         },
         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 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 { Cell, Column, Header } from '../../hooks/useTable/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 } = table.getState()\n    ?.floatingMenuInfo ?? {\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  }, [rowId, columnId, type, table]);\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<unknown, unknown>;\n    column?: Column<unknown, unknown>;\n    cell?: Cell<unknown, unknown>;\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<unknown, unknown> | undefined = undefined;\n    if (rowId) {\n      const rowCells = table.getRow(rowId).getAllCells();\n      const columnCell = rowCells.find((cell) => cell.column.id === columnId);\n\n      cell = columnCell;\n    }\n\n    return { header, column, cell };\n  }, [columnId, headerId, menuOpen, rowId, table]);\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.setState((state) => {\n            const newState = { ...state };\n            newState.floatingMenuInfo = {\n              type: null,\n              headerId: null,\n              rowId: null,\n              columnId: null,\n              x: 0,\n              y: 0,\n            };\n            newState.openMenuRowId = null;\n            return newState;\n          });\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": "AA0EI,SAsBI,KAtBJ;AA1EJ,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,IAAI,MAAM,SAAS,GAC7D,oBAAoB;AAAA,IACtB,MAAM;AAAA,IACN,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,EACZ;AAEA,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,EACT,GAAG,CAAC,OAAO,UAAU,MAAM,KAAK,CAAC;AAEjC,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,QAA2C;AAC/C,QAAI,OAAO;AACT,YAAM,WAAW,MAAM,OAAO,KAAK,EAAE,YAAY;AACjD,YAAM,aAAa,SAAS,KAAK,CAACA,UAASA,MAAK,OAAO,OAAO,QAAQ;AAEtE,MAAAA,QAAO;AAAA,IACT;AAEA,WAAO,EAAE,QAAAF,SAAQ,QAAAC,SAAQ,MAAAC,MAAK;AAAA,EAChC,GAAG,CAAC,UAAU,UAAU,UAAU,OAAO,KAAK,CAAC;AAI/C,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,SAAS,CAAC,UAAU;AACxB,oBAAM,WAAW,EAAE,GAAG,MAAM;AAC5B,uBAAS,mBAAmB;AAAA,gBAC1B,MAAM;AAAA,gBACN,UAAU;AAAA,gBACV,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,GAAG;AAAA,gBACH,GAAG;AAAA,cACL;AACA,uBAAS,gBAAgB;AACzB,qBAAO;AAAA,YACT,CAAC;AAAA,UACH;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, 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;",
   "names": ["header", "column", "cell"]
 }

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

@@ -34,7 +34,7 @@ function InlineUserActionsMenu(props) {
     columnId,
     type
   });
-  const floatingMenuInfo = table.getState().floatingMenuInfo;
+  const floatingMenuInfo = table.atoms.floatingMenuInfo?.get();
   const isFloatingMenuOpenForThis = floatingMenuInfo?.columnId === columnId && (type === "cell" && floatingMenuInfo?.rowId === headerGroupOrRowId || type === "header" && floatingMenuInfo?.type === "headerAction");
   if (isFloatingMenuOpenForThis) {
     return void 0;
@@ -46,15 +46,14 @@ function InlineUserActionsMenu(props) {
     if (table.getSubRowIndicatorColumnId() !== columnId) {
       return void 0;
     }
-    const rowDensity = table.getVisualVariantOptions().rowDensity;
     if (type === "header") {
       if (column?.columnDef.meta?.hasCustomHeaderRenderer) {
         return void 0;
       }
-      return SUB_ROW_EXPANDER_ICON_SIZE + DATA_TABLE_CELL_HORIZONTAL_PADDING_MAP[rowDensity];
+      return SUB_ROW_EXPANDER_ICON_SIZE + DATA_TABLE_CELL_HORIZONTAL_PADDING_MAP[table.atoms.visualVariantConfig?.get().rowDensity];
     }
     const row = table.getRow(headerGroupOrRowId);
-    return row.depth * SUB_ROW_INDENT_GRID + SUB_ROW_EXPANDER_ICON_SIZE + DATA_TABLE_CELL_HORIZONTAL_PADDING_MAP[rowDensity];
+    return row.depth * SUB_ROW_INDENT_GRID + SUB_ROW_EXPANDER_ICON_SIZE + DATA_TABLE_CELL_HORIZONTAL_PADDING_MAP[table.atoms.visualVariantConfig?.get().rowDensity];
   }
   const triggerProps = {
     type: "button",

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.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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",
+  "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": "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",
   "names": []
 }