@dynatrace/strato-components 3.1.3 → 3.2.1

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

@@ -84,11 +84,12 @@ function DataTableGlobalLineWrapToolbarAction() {
   const lineWrapState = table.getState().columnLineWrap;
   const Icon = lineWrapState === true ? /* @__PURE__ */ jsx(WrapTextOffIcon, {}) : /* @__PURE__ */ jsx(WrapTextIcon, {});
   const lineWrapLabel = lineWrapState === true ? intl.formatMessage(dataTableMessages.disableLineWrapLabel) : intl.formatMessage(dataTableMessages.enableLineWrapLabel);
+  const lineWrapDtName = lineWrapState === true ? "ToolbarDisableLineWrap" : "ToolbarEnableLineWrap";
   return /* @__PURE__ */ jsx(Tooltip, { text: lineWrapLabel, children: /* @__PURE__ */ jsx(
     Button,
     {
       "aria-label": lineWrapLabel,
-      "data-dt-name": "ToolbarLineWrap",
+      "data-dt-name": lineWrapDtName,
       onClick: () => table.setColumnLineWrap((oldLineWrap) => {
         if (oldLineWrap === true) {
           return {};

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/LineWrap/LineWrap.tsx"],
-  "sourcesContent": ["import { type RowData, functionalUpdate } from '@tanstack/react-table';\nimport { type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { WrapTextIcon, WrapTextOffIcon } from '@dynatrace/strato-icons';\n\nimport type { DataTableLineWrapProps } from './line-wrap-types.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { useDataTableConfigElement } from '../../../hooks/useDataTableConfig.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport {\n  type Column,\n  type Table,\n  type TableFeature,\n  type TableOptions,\n} from '../../hooks/useTable/types.js';\nimport { dataTableMessages } from '../../messages.js';\n\n/**\n * Global line wrap action for the DataTable to be used in the DataTable.Toolbar\n *\n * @public\n */\nexport function DataTableGlobalLineWrapAction() {\n  return null;\n}\n\n/**\n * Feature implementation for LineWrap. This contains the logic that will be given\n * to the tanstack table. The implementing interface is important as these are\n * the function that will be called by the tanstack table core during render.\n * @internal\n */\nexport const LineWrap: TableFeature = {\n  createColumn<TData extends RowData, TValue>(\n    column: Column<TData, TValue>,\n    table: Table<TData>,\n  ) {\n    column.toggleLineWrap = (value) => {\n      if (!column.getCanLineWrap()) {\n        return;\n      }\n\n      table.setColumnLineWrap((oldValue) => {\n        const columnsStatesToUpdate = computeLineWrapStateUpdate(column, value);\n\n        // Check if the lineWrap was set as a global first\n        if (typeof oldValue === 'boolean') {\n          const columnIds = table\n            .getAllLeafColumnsWithoutBuiltin()\n            .map((col) => col.id);\n\n          // when switching from a boolean, we need to preserve the current state of the other columns\n          const currentColumnsState: Record<string, boolean> =\n            Object.fromEntries(columnIds.map((id) => [id, oldValue]));\n\n          // When toggling a parent column, we need to set the state of all child columns\n          return {\n            ...currentColumnsState,\n            ...columnsStatesToUpdate,\n          };\n        }\n\n        return {\n          ...oldValue,\n          ...columnsStatesToUpdate,\n        };\n      });\n    };\n\n    column.getIsLineWrapped = () => {\n      const lineWrapState = table.getState().columnLineWrap;\n      // Boolean values define a global line wrapping on the table.\n      if (typeof lineWrapState === 'boolean') {\n        return lineWrapState;\n      }\n\n      const childColumns = column.columns;\n      if (childColumns.length > 0) {\n        // If the current column is a parent, we consider it line wrapped only if all child columns are line wrapped\n        return childColumns.every((child) => child.getIsLineWrapped());\n      }\n      return lineWrapState?.[column.id] ?? false;\n    };\n\n    column.getCanLineWrap = () => {\n      return table.options.enableLineWrap ?? true;\n    };\n  },\n\n  createTable<TData extends RowData>(table: Table<TData>): void {\n    table.setColumnLineWrap = (updater) => {\n      const newValue = functionalUpdate(\n        updater,\n        table.getState().columnLineWrap ?? false,\n      );\n      table.options.onColumnLineWrapChange?.(newValue);\n    };\n  },\n};\n\n/**\n * Determines which columns need to have their lineWrap state updated.\n * @param column - The column for which lineWrap was toggled.\n * @param value - The new lineWrap value to set. If not provided, the current value will be toggled.\n * @returns a record of column IDs and their new lineWrap states.\n */\nfunction computeLineWrapStateUpdate<TData extends RowData>(\n  column: Column<TData>,\n  value?: boolean,\n): Record<string, boolean> {\n  const newValue = value ?? !column.getIsLineWrapped();\n  const childColumns = column.columns;\n\n  if (childColumns.length === 0) {\n    // For leaf or standalone columns, we only need to update the toggled column\n    return {\n      [column.id]: newValue,\n    };\n  }\n  // If the toggled column is a parent column, we need to toggle all its child columns\n  return Object.fromEntries(childColumns.map((child) => [child.id, newValue]));\n}\n\n/**\n * Configuration hook for the DataTable LineWrap feature.\n * @internal\n */\nexport function useColumnLineWrap<T>(\n  props: DataTableLineWrapProps,\n  options: TableOptions<T>,\n): void {\n  const configLineWrap = useDataTableConfigElement('lineWrap');\n\n  const [columnLineWrap, onColumnLineWrapChange] = useControllableState({\n    value: props.lineWrap ?? configLineWrap,\n    defaultValue: props.defaultLineWrap,\n    onChange: props.onLineWrapChange,\n  });\n\n  options.state = { ...options.state, columnLineWrap };\n  options.onColumnLineWrapChange = onColumnLineWrapChange;\n}\n\n//# region Providing actions\n\n/**\n * Provides the toolbar button that allows toggling global line wrap.\n * @internal\n */\nexport function DataTableGlobalLineWrapToolbarAction(): JSX.Element {\n  const table = useDataTable();\n  const intl = useIntl();\n\n  const lineWrapState = table.getState().columnLineWrap;\n  const Icon = lineWrapState === true ? <WrapTextOffIcon /> : <WrapTextIcon />;\n  const lineWrapLabel =\n    lineWrapState === true\n      ? intl.formatMessage(dataTableMessages.disableLineWrapLabel)\n      : intl.formatMessage(dataTableMessages.enableLineWrapLabel);\n\n  return (\n    <Tooltip text={lineWrapLabel}>\n      <Button\n        aria-label={lineWrapLabel}\n        data-dt-name=\"ToolbarLineWrap\"\n        onClick={() =>\n          table.setColumnLineWrap((oldLineWrap) => {\n            if (oldLineWrap === true) {\n              return {};\n            }\n            return true;\n          })\n        }\n      >\n        <Button.Prefix>{Icon}</Button.Prefix>\n      </Button>\n    </Tooltip>\n  );\n}\n\n//# endregion Providing actions\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { type RowData, functionalUpdate } from '@tanstack/react-table';\nimport { type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { WrapTextIcon, WrapTextOffIcon } from '@dynatrace/strato-icons';\n\nimport type { DataTableLineWrapProps } from './line-wrap-types.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { useDataTableConfigElement } from '../../../hooks/useDataTableConfig.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport {\n  type Column,\n  type Table,\n  type TableFeature,\n  type TableOptions,\n} from '../../hooks/useTable/types.js';\nimport { dataTableMessages } from '../../messages.js';\n\n/**\n * Global line wrap action for the DataTable to be used in the DataTable.Toolbar\n *\n * @public\n */\nexport function DataTableGlobalLineWrapAction() {\n  return null;\n}\n\n/**\n * Feature implementation for LineWrap. This contains the logic that will be given\n * to the tanstack table. The implementing interface is important as these are\n * the function that will be called by the tanstack table core during render.\n * @internal\n */\nexport const LineWrap: TableFeature = {\n  createColumn<TData extends RowData, TValue>(\n    column: Column<TData, TValue>,\n    table: Table<TData>,\n  ) {\n    column.toggleLineWrap = (value) => {\n      if (!column.getCanLineWrap()) {\n        return;\n      }\n\n      table.setColumnLineWrap((oldValue) => {\n        const columnsStatesToUpdate = computeLineWrapStateUpdate(column, value);\n\n        // Check if the lineWrap was set as a global first\n        if (typeof oldValue === 'boolean') {\n          const columnIds = table\n            .getAllLeafColumnsWithoutBuiltin()\n            .map((col) => col.id);\n\n          // when switching from a boolean, we need to preserve the current state of the other columns\n          const currentColumnsState: Record<string, boolean> =\n            Object.fromEntries(columnIds.map((id) => [id, oldValue]));\n\n          // When toggling a parent column, we need to set the state of all child columns\n          return {\n            ...currentColumnsState,\n            ...columnsStatesToUpdate,\n          };\n        }\n\n        return {\n          ...oldValue,\n          ...columnsStatesToUpdate,\n        };\n      });\n    };\n\n    column.getIsLineWrapped = () => {\n      const lineWrapState = table.getState().columnLineWrap;\n      // Boolean values define a global line wrapping on the table.\n      if (typeof lineWrapState === 'boolean') {\n        return lineWrapState;\n      }\n\n      const childColumns = column.columns;\n      if (childColumns.length > 0) {\n        // If the current column is a parent, we consider it line wrapped only if all child columns are line wrapped\n        return childColumns.every((child) => child.getIsLineWrapped());\n      }\n      return lineWrapState?.[column.id] ?? false;\n    };\n\n    column.getCanLineWrap = () => {\n      return table.options.enableLineWrap ?? true;\n    };\n  },\n\n  createTable<TData extends RowData>(table: Table<TData>): void {\n    table.setColumnLineWrap = (updater) => {\n      const newValue = functionalUpdate(\n        updater,\n        table.getState().columnLineWrap ?? false,\n      );\n      table.options.onColumnLineWrapChange?.(newValue);\n    };\n  },\n};\n\n/**\n * Determines which columns need to have their lineWrap state updated.\n * @param column - The column for which lineWrap was toggled.\n * @param value - The new lineWrap value to set. If not provided, the current value will be toggled.\n * @returns a record of column IDs and their new lineWrap states.\n */\nfunction computeLineWrapStateUpdate<TData extends RowData>(\n  column: Column<TData>,\n  value?: boolean,\n): Record<string, boolean> {\n  const newValue = value ?? !column.getIsLineWrapped();\n  const childColumns = column.columns;\n\n  if (childColumns.length === 0) {\n    // For leaf or standalone columns, we only need to update the toggled column\n    return {\n      [column.id]: newValue,\n    };\n  }\n  // If the toggled column is a parent column, we need to toggle all its child columns\n  return Object.fromEntries(childColumns.map((child) => [child.id, newValue]));\n}\n\n/**\n * Configuration hook for the DataTable LineWrap feature.\n * @internal\n */\nexport function useColumnLineWrap<T>(\n  props: DataTableLineWrapProps,\n  options: TableOptions<T>,\n): void {\n  const configLineWrap = useDataTableConfigElement('lineWrap');\n\n  const [columnLineWrap, onColumnLineWrapChange] = useControllableState({\n    value: props.lineWrap ?? configLineWrap,\n    defaultValue: props.defaultLineWrap,\n    onChange: props.onLineWrapChange,\n  });\n\n  options.state = { ...options.state, columnLineWrap };\n  options.onColumnLineWrapChange = onColumnLineWrapChange;\n}\n\n//# region Providing actions\n\n/**\n * Provides the toolbar button that allows toggling global line wrap.\n * @internal\n */\nexport function DataTableGlobalLineWrapToolbarAction(): JSX.Element {\n  const table = useDataTable();\n  const intl = useIntl();\n\n  const lineWrapState = table.getState().columnLineWrap;\n  const Icon = lineWrapState === true ? <WrapTextOffIcon /> : <WrapTextIcon />;\n  const lineWrapLabel =\n    lineWrapState === true\n      ? intl.formatMessage(dataTableMessages.disableLineWrapLabel)\n      : intl.formatMessage(dataTableMessages.enableLineWrapLabel);\n\n  const lineWrapDtName =\n    lineWrapState === true ? 'ToolbarDisableLineWrap' : 'ToolbarEnableLineWrap';\n\n  return (\n    <Tooltip text={lineWrapLabel}>\n      <Button\n        aria-label={lineWrapLabel}\n        data-dt-name={lineWrapDtName}\n        onClick={() =>\n          table.setColumnLineWrap((oldLineWrap) => {\n            if (oldLineWrap === true) {\n              return {};\n            }\n            return true;\n          })\n        }\n      >\n        <Button.Prefix>{Icon}</Button.Prefix>\n      </Button>\n    </Tooltip>\n  );\n}\n\n//# endregion Providing actions\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,6 +1,6 @@
-._14flfjk1-3-1-3 {
+._14flfjk1-3-2-1 {
   z-index: 1;
   position: absolute;
   inset: 0;
-  top: var(--_14flfjk0-3-1-3);
+  top: var(--_14flfjk0-3-2-1);
 }

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

@@ -1,6 +1,6 @@
 import "./LoadingState.css";
-var dataTableHeaderHeight = "var(--_14flfjk0-3-1-3)";
-var loadingState = "_14flfjk1-3-1-3";
+var dataTableHeaderHeight = "var(--_14flfjk0-3-2-1)";
+var loadingState = "_14flfjk1-3-2-1";
 export {
   dataTableHeaderHeight,
   loadingState

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/LoadingState/LoadingState.css.ts"],
-  "sourcesContent": ["import './LoadingState.css';\nexport var dataTableHeaderHeight = 'var(--_14flfjk0-3-1-3)';\nexport var loadingState = '_14flfjk1-3-1-3';"],
+  "sourcesContent": ["import './LoadingState.css';\nexport var dataTableHeaderHeight = 'var(--_14flfjk0-3-2-1)';\nexport var loadingState = '_14flfjk1-3-2-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,wBAAwB;AAC5B,IAAI,eAAe;",
   "names": []
 }

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

@@ -41,9 +41,9 @@ function MeterBarChartRenderer({
         max: maxValue,
         color: config?.color,
         size: METER_BAR_SIZE.Size8,
+        width: "100%",
+        height: "auto",
         style: {
-          overflow: "hidden",
-          width: "100%",
           pointerEvents: "auto",
           padding: `${Spacings.Size6} 0`
         },
@@ -75,9 +75,9 @@ function MeterBarChartRenderer({
       min: config?.min,
       max: maxValue,
       colorPalette: config?.colorPalette || "categorical",
+      width: "100%",
+      height: "auto",
       style: {
-        overflow: "hidden",
-        width: "100%",
         pointerEvents: "auto",
         padding: `${Spacings.Size6} 0`
       },

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/MeterBarChart/MeterBarChart.tsx"],
-  "sourcesContent": ["import { isEmpty, isNumber } from 'lodash-es';\nimport { useMemo, type JSX } from 'react';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport { MultiMeterBarChart } from '../../../../charts/meter-bar/multi-meter-bar/MultiMeterBarChart.js';\nimport { METER_BAR_SIZE } from '../../../../charts/meter-bar/shared/constants.js';\nimport { MeterBarChart } from '../../../../charts/meter-bar/single-meter-bar/MeterBarChart.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport { isDisplayColumnDef } from '../../hooks/useTable/datatable-typeguards.js';\nimport type { Column, TableOptions } from '../../hooks/useTable/types.js';\nimport type {\n  DataTableColumnDef,\n  DataTableDisplayColumnDef,\n  DataTableRowData,\n} from '../../public.api.js';\nimport type { DataTableMeterbarColumnConfig } from '../ColumnTypes/column-types-types.js';\n\n/** Default max value for meterbar column. */\nconst DEFAULT_MAX_VALUE = 100;\n\n/**\n * Typeguard function ensures that the defined config in the column definition contains certain properties.\n * @internal\n */\nfunction isDataTableMeterBarColumnConfig(\n  config: unknown,\n): config is DataTableMeterbarColumnConfig {\n  return (\n    config !== null &&\n    config !== undefined &&\n    typeof config === 'object' &&\n    ('max' in config ||\n      'color' in config ||\n      'threshold' in config ||\n      'showTooltip' in config ||\n      'max' in config)\n  );\n}\n\n/**\n * Typeguard function ensures that the defined column contains the 'accessor' property.\n * @internal\n */\nfunction isColumnDefWithAccessor<TData, TValue>(\n  column: unknown,\n): column is DataTableDisplayColumnDef<TData, TValue> {\n  return (\n    column !== null &&\n    column !== undefined &&\n    typeof column === 'object' &&\n    'accessor' in column\n  );\n}\n\ntype MeterBarChartRendererType<TData, TValue> = {\n  value: number | { name: string; value: number; color?: string }[];\n  column: Column<TData, TValue>;\n};\n\n/**\n * Type guard to check value against MultiMeterBar values.\n * @internal\n */\nexport function isMultiMeterBarData(\n  value: unknown,\n): value is Array<{ name: string; value: number; color?: string }> {\n  return (\n    Array.isArray(value) &&\n    value.every(\n      (item) =>\n        typeof item === 'object' &&\n        typeof item.name === 'string' &&\n        typeof item.value === 'number' &&\n        (item.color === undefined || typeof item.color === 'string'),\n    )\n  );\n}\n\n/**\n * Intended for configuring and rendering the meterbar chart component.\n */\nexport function MeterBarChartRenderer<TData, TValue>({\n  value,\n  column,\n}: Readonly<MeterBarChartRendererType<TData, TValue>>): JSX.Element {\n  const table = useDataTable();\n  let config: DataTableMeterbarColumnConfig = {};\n  if (\n    column?.columnDef.meta &&\n    isDataTableMeterBarColumnConfig(column.columnDef.meta.config)\n  ) {\n    config = column.columnDef.meta.config;\n  }\n\n  const columnId = column.columnDef.id ?? '';\n\n  const maxValuesFromState = table.getState().meterbarChartMaxValues;\n\n  const maxValue = !isEmpty(maxValuesFromState)\n    ? maxValuesFromState[columnId]\n    : DEFAULT_MAX_VALUE;\n\n  // simple MeterBar\n  if (typeof value === 'number') {\n    return (\n      <MeterBarChart\n        value={value}\n        min={config?.min}\n        max={maxValue}\n        color={config?.color as string}\n        size={METER_BAR_SIZE.Size8}\n        style={{\n          overflow: 'hidden',\n          width: '100%',\n          pointerEvents: 'auto',\n          padding: `${Spacings.Size6} 0`,\n        }}\n        formatter={config?.formatter}\n      >\n        {config?.showTooltip && <MeterBarChart.Tooltip />}\n        {config?.thresholds?.map((threshold) => (\n          <MeterBarChart.ThresholdIndicator\n            key={`threshold-${threshold.color}-${threshold.value}`}\n            name={threshold.name}\n            color={threshold.color}\n            value={threshold.value}\n            showIndicator={threshold.showIndicator}\n          />\n        ))}\n      </MeterBarChart>\n    );\n  }\n\n  const isMultiMeterData = isMultiMeterBarData(value);\n  if (!isMultiMeterData) {\n    devLog('Invalid meter chart data.');\n  }\n\n  return (\n    <MultiMeterBarChart\n      size=\"size8\"\n      min={config?.min}\n      max={maxValue}\n      colorPalette={config?.colorPalette || 'categorical'}\n      style={{\n        overflow: 'hidden',\n        width: '100%',\n        pointerEvents: 'auto',\n        padding: `${Spacings.Size6} 0`,\n      }}\n      formatter={config?.formatter}\n    >\n      {\n        // only if this is multi meter data render segments\n        isMultiMeterData &&\n          value.map((data) => (\n            <MultiMeterBarChart.Segment\n              key={`${data.name}-${data.value}`}\n              name={data.name}\n              value={data.value}\n              color={data?.color}\n            />\n          ))\n      }\n      <MeterBarChart.Tooltip />\n      {config?.showTooltip && <MultiMeterBarChart.Tooltip variant=\"shared\" />}\n    </MultiMeterBarChart>\n  );\n}\n\n/**\n * Gets the highest total max values in a meterbar column.\n *\n * @param data - table data\n * @param columns - table column definition\n * @returns record of highest total max value per column\n * @internal\n */\nexport function getTotalMaxFromMeterbarChartData<\n  TData extends DataTableRowData,\n>(data: TData[], columns: DataTableColumnDef<TData>[]): Record<string, number> {\n  const meterbarColumns = columns.filter(\n    (columnDef) =>\n      isDisplayColumnDef(columnDef) && columnDef.columnType === 'meterbar',\n  );\n\n  const maxValuesStorage: Record<string, number> = {};\n\n  for (const row of data) {\n    for (const columnDef of meterbarColumns) {\n      if (isColumnDefWithAccessor(columnDef)) {\n        const { accessor, config, id: columnId } = columnDef;\n\n        const configuredMax: number | 'data-max' | undefined =\n          isDataTableMeterBarColumnConfig(config) ? config.max : undefined;\n\n        const meterbarValue = row as Record<string, unknown>;\n\n        const meterbarDataEntry =\n          typeof accessor === 'string'\n            ? meterbarValue[accessor]\n            : accessor(row);\n\n        let totalValue = DEFAULT_MAX_VALUE;\n\n        if (isNumber(configuredMax)) {\n          maxValuesStorage[columnId] = configuredMax;\n          continue;\n        }\n\n        if (meterbarDataEntry) {\n          if (Array.isArray(meterbarDataEntry)) {\n            totalValue = meterbarDataEntry.reduce(\n              (acc, current) => acc + current.value,\n              0,\n            );\n          } else {\n            const entry = isNumber(meterbarDataEntry)\n              ? meterbarDataEntry\n              : DEFAULT_MAX_VALUE;\n            totalValue =\n              configuredMax === 'data-max'\n                ? entry\n                : Math.max(entry, DEFAULT_MAX_VALUE);\n          }\n        }\n\n        maxValuesStorage[columnId] = Math.max(\n          maxValuesStorage[columnId] ?? totalValue,\n          totalValue,\n        );\n      }\n    }\n  }\n\n  return maxValuesStorage;\n}\n\n/**\n * Configuration hook for the DataTable Meterbar Chart feature.\n * @internal\n */\nexport function useMeterBarChartMaxValuesCalc<TData extends DataTableRowData>(\n  props: {\n    data: TData[];\n    columns: DataTableColumnDef<TData>[];\n  },\n  options: TableOptions<TData>,\n): void {\n  const meterbarChartMaxValues = useMemo(\n    () => getTotalMaxFromMeterbarChartData<TData>(props.data, props.columns),\n    [props.columns, props.data],\n  );\n\n  options.state = { ...options.state, meterbarChartMaxValues };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { isEmpty, isNumber } from 'lodash-es';\nimport { useMemo, type JSX } from 'react';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport { MultiMeterBarChart } from '../../../../charts/meter-bar/multi-meter-bar/MultiMeterBarChart.js';\nimport { METER_BAR_SIZE } from '../../../../charts/meter-bar/shared/constants.js';\nimport { MeterBarChart } from '../../../../charts/meter-bar/single-meter-bar/MeterBarChart.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport { isDisplayColumnDef } from '../../hooks/useTable/datatable-typeguards.js';\nimport type { Column, TableOptions } from '../../hooks/useTable/types.js';\nimport type {\n  DataTableColumnDef,\n  DataTableDisplayColumnDef,\n  DataTableRowData,\n} from '../../public.api.js';\nimport type { DataTableMeterbarColumnConfig } from '../ColumnTypes/column-types-types.js';\n\n/** Default max value for meterbar column. */\nconst DEFAULT_MAX_VALUE = 100;\n\n/**\n * Typeguard function ensures that the defined config in the column definition contains certain properties.\n * @internal\n */\nfunction isDataTableMeterBarColumnConfig(\n  config: unknown,\n): config is DataTableMeterbarColumnConfig {\n  return (\n    config !== null &&\n    config !== undefined &&\n    typeof config === 'object' &&\n    ('max' in config ||\n      'color' in config ||\n      'threshold' in config ||\n      'showTooltip' in config ||\n      'max' in config)\n  );\n}\n\n/**\n * Typeguard function ensures that the defined column contains the 'accessor' property.\n * @internal\n */\nfunction isColumnDefWithAccessor<TData, TValue>(\n  column: unknown,\n): column is DataTableDisplayColumnDef<TData, TValue> {\n  return (\n    column !== null &&\n    column !== undefined &&\n    typeof column === 'object' &&\n    'accessor' in column\n  );\n}\n\ntype MeterBarChartRendererType<TData, TValue> = {\n  value: number | { name: string; value: number; color?: string }[];\n  column: Column<TData, TValue>;\n};\n\n/**\n * Type guard to check value against MultiMeterBar values.\n * @internal\n */\nexport function isMultiMeterBarData(\n  value: unknown,\n): value is Array<{ name: string; value: number; color?: string }> {\n  return (\n    Array.isArray(value) &&\n    value.every(\n      (item) =>\n        typeof item === 'object' &&\n        typeof item.name === 'string' &&\n        typeof item.value === 'number' &&\n        (item.color === undefined || typeof item.color === 'string'),\n    )\n  );\n}\n\n/**\n * Intended for configuring and rendering the meterbar chart component.\n */\nexport function MeterBarChartRenderer<TData, TValue>({\n  value,\n  column,\n}: Readonly<MeterBarChartRendererType<TData, TValue>>): JSX.Element {\n  const table = useDataTable();\n  let config: DataTableMeterbarColumnConfig = {};\n  if (\n    column?.columnDef.meta &&\n    isDataTableMeterBarColumnConfig(column.columnDef.meta.config)\n  ) {\n    config = column.columnDef.meta.config;\n  }\n\n  const columnId = column.columnDef.id ?? '';\n\n  const maxValuesFromState = table.getState().meterbarChartMaxValues;\n\n  const maxValue = !isEmpty(maxValuesFromState)\n    ? maxValuesFromState[columnId]\n    : DEFAULT_MAX_VALUE;\n\n  // simple MeterBar\n  if (typeof value === 'number') {\n    return (\n      <MeterBarChart\n        value={value}\n        min={config?.min}\n        max={maxValue}\n        color={config?.color as string}\n        size={METER_BAR_SIZE.Size8}\n        width=\"100%\"\n        height=\"auto\"\n        style={{\n          pointerEvents: 'auto',\n          padding: `${Spacings.Size6} 0`,\n        }}\n        formatter={config?.formatter}\n      >\n        {config?.showTooltip && <MeterBarChart.Tooltip />}\n        {config?.thresholds?.map((threshold) => (\n          <MeterBarChart.ThresholdIndicator\n            key={`threshold-${threshold.color}-${threshold.value}`}\n            name={threshold.name}\n            color={threshold.color}\n            value={threshold.value}\n            showIndicator={threshold.showIndicator}\n          />\n        ))}\n      </MeterBarChart>\n    );\n  }\n\n  const isMultiMeterData = isMultiMeterBarData(value);\n  if (!isMultiMeterData) {\n    devLog('Invalid meter chart data.');\n  }\n\n  return (\n    <MultiMeterBarChart\n      size=\"size8\"\n      min={config?.min}\n      max={maxValue}\n      colorPalette={config?.colorPalette || 'categorical'}\n      width=\"100%\"\n      height=\"auto\"\n      style={{\n        pointerEvents: 'auto',\n        padding: `${Spacings.Size6} 0`,\n      }}\n      formatter={config?.formatter}\n    >\n      {\n        // only if this is multi meter data render segments\n        isMultiMeterData &&\n          value.map((data) => (\n            <MultiMeterBarChart.Segment\n              key={`${data.name}-${data.value}`}\n              name={data.name}\n              value={data.value}\n              color={data?.color}\n            />\n          ))\n      }\n      <MeterBarChart.Tooltip />\n      {config?.showTooltip && <MultiMeterBarChart.Tooltip variant=\"shared\" />}\n    </MultiMeterBarChart>\n  );\n}\n\n/**\n * Gets the highest total max values in a meterbar column.\n *\n * @param data - table data\n * @param columns - table column definition\n * @returns record of highest total max value per column\n * @internal\n */\nexport function getTotalMaxFromMeterbarChartData<\n  TData extends DataTableRowData,\n>(data: TData[], columns: DataTableColumnDef<TData>[]): Record<string, number> {\n  const meterbarColumns = columns.filter(\n    (columnDef) =>\n      isDisplayColumnDef(columnDef) && columnDef.columnType === 'meterbar',\n  );\n\n  const maxValuesStorage: Record<string, number> = {};\n\n  for (const row of data) {\n    for (const columnDef of meterbarColumns) {\n      if (isColumnDefWithAccessor(columnDef)) {\n        const { accessor, config, id: columnId } = columnDef;\n\n        const configuredMax: number | 'data-max' | undefined =\n          isDataTableMeterBarColumnConfig(config) ? config.max : undefined;\n\n        const meterbarValue = row as Record<string, unknown>;\n\n        const meterbarDataEntry =\n          typeof accessor === 'string'\n            ? meterbarValue[accessor]\n            : accessor(row);\n\n        let totalValue = DEFAULT_MAX_VALUE;\n\n        if (isNumber(configuredMax)) {\n          maxValuesStorage[columnId] = configuredMax;\n          continue;\n        }\n\n        if (meterbarDataEntry) {\n          if (Array.isArray(meterbarDataEntry)) {\n            totalValue = meterbarDataEntry.reduce(\n              (acc, current) => acc + current.value,\n              0,\n            );\n          } else {\n            const entry = isNumber(meterbarDataEntry)\n              ? meterbarDataEntry\n              : DEFAULT_MAX_VALUE;\n            totalValue =\n              configuredMax === 'data-max'\n                ? entry\n                : Math.max(entry, DEFAULT_MAX_VALUE);\n          }\n        }\n\n        maxValuesStorage[columnId] = Math.max(\n          maxValuesStorage[columnId] ?? totalValue,\n          totalValue,\n        );\n      }\n    }\n  }\n\n  return maxValuesStorage;\n}\n\n/**\n * Configuration hook for the DataTable Meterbar Chart feature.\n * @internal\n */\nexport function useMeterBarChartMaxValuesCalc<TData extends DataTableRowData>(\n  props: {\n    data: TData[];\n    columns: DataTableColumnDef<TData>[];\n  },\n  options: TableOptions<TData>,\n): void {\n  const meterbarChartMaxValues = useMemo(\n    () => getTotalMaxFromMeterbarChartData<TData>(props.data, props.columns),\n    [props.columns, props.data],\n  );\n\n  options.state = { ...options.state, meterbarChartMaxValues };\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-._15silbj0-3-1-3 {
+._15silbj0-3-2-1 {
   box-sizing: border-box;
   appearance: none;
   outline: 0;
@@ -7,7 +7,7 @@
   position: relative;
   cursor: pointer;
 }
-._15silbj0-3-1-3::after {
+._15silbj0-3-2-1::after {
   content: "";
   position: absolute;
   top: 0;
@@ -20,44 +20,44 @@
   pointer-events: none;
   z-index: 4;
 }
-._15silbj1-3-1-3::after {
+._15silbj1-3-2-1::after {
   border-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._15silbj1-3-1-3:hover {
+._15silbj1-3-2-1:hover {
   background-color: var(--dt-colors-background-container-primary-default, #f1f2f9);
 }
-._15silbj1-3-1-3:hover::after {
+._15silbj1-3-2-1:hover::after {
   border-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._15silbj3-3-1-3 {
+._15silbj3-3-2-1 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._15silbj3-3-1-3::after {
+._15silbj3-3-2-1::after {
   box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-accent, #595a7d), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-neutral-default, #dadbe4);
   border-width: 0;
 }
-._15silbj4-3-1-3 {
+._15silbj4-3-2-1 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._15silbj4-3-1-3::after {
+._15silbj4-3-2-1::after {
   border-color: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._ytdpswb-3-1-3 ._14sp6az6-3-1-3._15silbj5-3-1-3::after {
+._ytdpswb-3-2-1 ._14sp6az6-3-2-1._15silbj5-3-2-1::after {
   border-bottom-right-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
   border-bottom-left-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._ytdpswd-3-1-3 ._14sp6az6-3-1-3._15silbj5-3-1-3::after {
+._ytdpswd-3-2-1 ._14sp6az6-3-2-1._15silbj5-3-2-1::after {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: calc(var(--dt-borders-radius-container-subdued, 6px) - var(--dt-borders-width-emphasized, 2px));
 }
-._15silbj6-3-1-3 {
+._15silbj6-3-2-1 {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
-._15silbj7-3-1-3 {
+._15silbj7-3-2-1 {
   background-color: var(--dt-colors-background-container-primary-default, #f1f2f9);
 }
-._15silbj7-3-1-3::after {
+._15silbj7-3-2-1::after {
   border-width: 0;
   box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-primary-accent, #464cce), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }

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

@@ -49,6 +49,32 @@ function useRowInteractivityProps(row, scrollToIndex) {
     focus: isFocusVisible,
     contained: table.getVisualVariantOptions().contained
   });
+  function handleRowActivation(event) {
+    const { target } = event;
+    if (table.options.enableRowInteractivity !== true || target instanceof HTMLElement === false && target instanceof SVGElement === false || // prevent deactivation if the user clicks on a Gantt segment (SVG <rect>) and the row is already active
+    target.nodeName === "rect" && isActivated) {
+      return;
+    }
+    const rowElement = target.closest('[role="row"]');
+    if (rowElement && !isTargetInteractive(rowElement, target)) {
+      row.toggleActivated(event);
+    }
+  }
+  function isSelectionInsideTable() {
+    const selection = globalThis.getSelection();
+    if (!selection?.toString()) {
+      return false;
+    }
+    const container = table.getRowVirtualizationContainer();
+    if (!container) {
+      return false;
+    }
+    let anchorNode = selection.anchorNode;
+    if (anchorNode?.nodeType === Node.TEXT_NODE) {
+      anchorNode = anchorNode.parentElement;
+    }
+    return !!anchorNode && container.contains(anchorNode);
+  }
   const rowInteractivityProps = {
     tabIndex: 0,
     "data-trigger": "interactive-row",
@@ -59,16 +85,14 @@ function useRowInteractivityProps(row, scrollToIndex) {
     onPointerDown: (event) => {
       clicked.current = true;
     },
-    onPointerUp: (event) => {
-      const { target } = event;
-      const isValidMouseButton = event.button === 0 || event.button === 1;
-      if (!isValidMouseButton || table.options.enableRowInteractivity !== true || target instanceof HTMLElement === false && target instanceof SVGElement === false || // prevent deactivation if the user clicks on a Gantt segment (SVG <rect>) and the row is already active
-      target.nodeName === "rect" && isActivated) {
-        return;
+    onClick: (event) => {
+      if (!isSelectionInsideTable() && event.detail === 1) {
+        handleRowActivation(event);
       }
-      const rowElement = target.closest('[role="row"]');
-      if (rowElement && !isTargetInteractive(rowElement, target)) {
-        row.toggleActivated(event);
+    },
+    onAuxClick: (event) => {
+      if (event.button === 1) {
+        handleRowActivation(event);
       }
     },
     onKeyDown: (event) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/RowInteractivity/RowInteractivity.tsx"],
-  "sourcesContent": ["import { functionalUpdate } from '@tanstack/react-table';\nimport type { ScrollToOptions } from '@tanstack/react-virtual';\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  type PointerEvent,\n  type FocusEvent as ReactFocusEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\n\nimport type {\n  DataTableRowActivationEvent,\n  DataTableRowInteractivityProps,\n} from './row-interactivity-types.js';\nimport * as styles from './RowInteractivity.sty.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport { useFocusRing } from '../../../../core/styles/useFocusRing.js';\nimport { mergeProps as _mergeProps } from '../../../../core/utils/merge-props.js';\nimport { isTargetInteractive } from '../../../utils/is-target-interactive.js';\nimport { DATA_TABLE_ROW_EXPANDED_ID_SUFFIX } from '../../constants.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport type {\n  Row,\n  Table,\n  TableFeature,\n  TableOptions,\n  Updater,\n} from '../../hooks/useTable/types.js';\nimport { assignRowMethods } from '../../hooks/useTable/utils.js';\nimport { dataTableMessages } from '../../messages.js';\nimport type { DataTableRowData } from '../../public.api.js';\n\nfunction removeHoverStyles(target: HTMLElement | SVGElement): void {\n  const virtualizationContainer = target.closest(\n    '.strato-table-virtualization-container',\n  );\n\n  if (virtualizationContainer) {\n    const hoveredRows = virtualizationContainer.querySelectorAll(\n      `.${styles.interactiveRow.classNames.variants.hovered.true}`,\n    );\n    for (const hoveredRow of Array.from(hoveredRows)) {\n      hoveredRow.classList.remove(\n        styles.interactiveRow.classNames.variants.hovered.true,\n      );\n    }\n  }\n}\n\nfunction addHoverStyles(row: HTMLElement): void {\n  row.classList.add(styles.interactiveRow.classNames.variants.hovered.true);\n}\n\n/**\n * Provides all necessary props for an interactive row element.\n *\n * @param row - the table row element\n * @param scrollToIndex - rowVirtualizer function for scrolling to the row with the specified index\n * @returns className and props for the row element\n */\nexport function useRowInteractivityProps<TData extends DataTableRowData>(\n  row: Row<TData>,\n  scrollToIndex: (index: number, options?: ScrollToOptions) => void,\n): {\n  rowInteractivityClassName: string;\n  rowInteractivityProps: Record<string, unknown> | undefined;\n} {\n  const table = useDataTable();\n  const intl = useIntl();\n  // used to detect if the focus event was triggered by a click\n  const clicked = useRef(false);\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  if (!row.getCanActivateRow()) {\n    return { rowInteractivityClassName: '', rowInteractivityProps: undefined };\n  }\n\n  const isRowDragging = table.getState().draggingRowInfo !== undefined;\n  const isActivated = row.getIsActivated();\n  const isAutoActivationEnabled = table.options.enableAutoActivation;\n  const rowInteractivityClassName = styles.interactiveRow({\n    hovered: table.getHoveredRow() === row.id,\n    active: isActivated,\n    focus: isFocusVisible,\n    contained: table.getVisualVariantOptions().contained,\n  });\n\n  const rowInteractivityProps = {\n    tabIndex: 0,\n    'data-trigger': 'interactive-row',\n    'aria-label': intl.formatMessage(dataTableMessages.interactiveRowTrigger, {\n      isActivated,\n      rowId: row.id,\n    }),\n    onPointerDown: (event: PointerEvent<HTMLElement>) => {\n      clicked.current = true;\n    },\n    onPointerUp: (event: PointerEvent<HTMLElement>) => {\n      const { target } = event;\n\n      // main (left button) or auxiliary button (wheel/middle button)\n      const isValidMouseButton = event.button === 0 || event.button === 1;\n\n      if (\n        !isValidMouseButton ||\n        table.options.enableRowInteractivity !== true ||\n        (target instanceof HTMLElement === false &&\n          target instanceof SVGElement === false) ||\n        // prevent deactivation if the user clicks on a Gantt segment (SVG <rect>) and the row is already active\n        (target.nodeName === 'rect' && isActivated)\n      ) {\n        return;\n      }\n\n      const rowElement = target.closest('[role=\"row\"]');\n\n      if (rowElement && !isTargetInteractive(rowElement, target)) {\n        row.toggleActivated(event);\n      }\n    },\n    onKeyDown: (event: ReactKeyboardEvent<HTMLElement>) => {\n      if (isRowDragging) {\n        return;\n      }\n\n      const { key, target } = event;\n\n      if (\n        key === 'Enter' &&\n        !isAutoActivationEnabled &&\n        (target instanceof HTMLElement || target instanceof SVGElement)\n      ) {\n        const rowElement = target.closest('[role=\"row\"]');\n\n        if (rowElement && !isTargetInteractive(rowElement, target)) {\n          event.preventDefault();\n          event.stopPropagation();\n          row.toggleActivated(event);\n          return;\n        }\n      }\n\n      let offset: number | null = null;\n      switch (key) {\n        case 'ArrowDown': {\n          offset = +1;\n          break;\n        }\n        case 'ArrowUp': {\n          offset = -1;\n          break;\n        }\n        case 'PageUp': {\n          offset = -10;\n          break;\n        }\n        case 'PageDown': {\n          offset = +10;\n          break;\n        }\n        case 'Home': {\n          offset = -Infinity;\n          break;\n        }\n        case 'End': {\n          offset = Infinity;\n          break;\n        }\n      }\n\n      if (offset === null) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n      if (!(event.target instanceof HTMLElement)) {\n        return;\n      }\n\n      const allRows = table.getRowModel().rows;\n      const currentRowIndex = allRows.findIndex(\n        (currentRow) => currentRow.id === row.id,\n      );\n      if (currentRowIndex === -1) {\n        return;\n      }\n\n      const clampedIndex = Math.max(\n        0,\n        Math.min(currentRowIndex + offset, allRows.length - 1),\n      );\n      const nextRow: Row<unknown> | undefined = allRows.at(clampedIndex);\n      if (nextRow === undefined) {\n        return;\n      }\n\n      scrollToIndex(clampedIndex, {\n        align: 'auto',\n      });\n      requestAnimationFrame(() => {\n        const nextRowButton = table\n          .getRowVirtualizationContainer()\n          ?.querySelector<HTMLButtonElement>(\n            `[data-rowid=\"${CSS.escape(\n              nextRow.id,\n            )}\"][data-trigger=\"interactive-row\"]`,\n          );\n        nextRowButton?.focus();\n      });\n    },\n    ..._mergeProps(focusProps, {\n      onFocus: (event: ReactFocusEvent<HTMLElement>) => {\n        // only activate row if focus was triggered on the row itself\n        if (event.currentTarget !== event.target) {\n          return;\n        }\n        // When a row is initially activated, and you click on it to deactivate it using a pointing device,\n        // the `pointerdown` event is called before the `focus` event. This code is needed in order to\n        // not re-activate the row again. It also ensures that the focus ring is still correctly\n        // moved within the table.\n        if (clicked.current) {\n          clicked.current = false;\n          return;\n        }\n\n        if (!isActivated && isAutoActivationEnabled) {\n          row.toggleActivated(event);\n        }\n      },\n    }),\n  };\n\n  return { rowInteractivityClassName, rowInteractivityProps };\n}\n\n/**\n * Validates the event target and extracts row information.\n */\nfunction getRowInfoFromMouseEvent(event: ReactMouseEvent<HTMLDivElement>): {\n  target: HTMLElement | SVGElement;\n  row: HTMLElement | null;\n  rowId: string | undefined;\n  isRowDetailsRow: boolean;\n} | null {\n  const { target } = event;\n\n  if (!(target instanceof HTMLElement) && !(target instanceof SVGElement)) {\n    return null;\n  }\n\n  const row: HTMLElement | null = target.closest('[role=\"row\"]');\n  const rowId =\n    row instanceof HTMLElement && 'rowid' in row.dataset\n      ? row.dataset.rowid\n      : undefined;\n  const isRowDetailsRow =\n    rowId?.endsWith(DATA_TABLE_ROW_EXPANDED_ID_SUFFIX) ?? false;\n\n  return { target, row, rowId, isRowDetailsRow };\n}\n\n/**\n * Defines the user action table feature\n * @internal\n */\nexport const DataTableRowInteractivity: TableFeature = {\n  createTable<TData>(table: Table<TData>) {\n    let hoveredRow: string | null = null;\n    /**\n     * Activates a given row for the row interactivity\n     */\n    table.setActiveRow = (\n      updater: Updater<string | null>,\n      event?: DataTableRowActivationEvent,\n    ) => {\n      table.options.onActiveRowChange?.(updater, event);\n    };\n\n    /**\n     * Sets a given row as hovered on the table instance.\n     */\n    table.setHoveredRow = (rowId: string | null) => {\n      if (rowId !== hoveredRow) {\n        hoveredRow = rowId;\n      }\n    };\n\n    /**\n     * Gets a given row as hovered on the table instance.\n     */\n    table.getHoveredRow = () => {\n      return hoveredRow;\n    };\n\n    /** Handles mouse over events for interactive rows. */\n    table.handleInteractiveRowMouseOver = (\n      event: ReactMouseEvent<HTMLDivElement>,\n    ) => {\n      if (table.options.enableRowInteractivity !== true) {\n        return;\n      }\n\n      const rowInfo = getRowInfoFromMouseEvent(event);\n      if (!rowInfo) {\n        return;\n      }\n\n      const { target, row, rowId, isRowDetailsRow } = rowInfo;\n      if (row && rowId && !isRowDetailsRow && table.getHoveredRow() !== rowId) {\n        table.setHoveredRow(rowId);\n        removeHoverStyles(row);\n        addHoverStyles(row);\n      } else if (row === null || isRowDetailsRow) {\n        table.setHoveredRow(null);\n        removeHoverStyles(target);\n      }\n    };\n\n    /** Handles mouse leave events for interactive rows. */\n    table.handleInteractiveRowMouseLeave = (\n      event: ReactMouseEvent<HTMLDivElement>,\n    ) => {\n      if (table.options.enableRowInteractivity !== true) {\n        return;\n      }\n\n      const { target } = event;\n      if (!(target instanceof HTMLElement) && !(target instanceof SVGElement)) {\n        return;\n      }\n\n      table.setHoveredRow(null);\n      removeHoverStyles(target);\n    };\n\n    /** Handles click events for interactive rows. */\n    table.handleInteractiveRowClick = (\n      event: ReactMouseEvent<HTMLDivElement>,\n    ) => {\n      if (table.options.enableRowInteractivity !== true) {\n        return;\n      }\n\n      const rowInfo = getRowInfoFromMouseEvent(event);\n      if (!rowInfo) {\n        return;\n      }\n\n      const { target, row, rowId, isRowDetailsRow } = rowInfo;\n      if (\n        row &&\n        rowId &&\n        !isRowDetailsRow &&\n        !isTargetInteractive(row, target)\n      ) {\n        event.stopPropagation();\n        row.focus();\n      }\n    };\n\n    assignRowMethods(table, {\n      /**\n       * Returns a boolean value if the row can be activated.\n       */\n      getCanActivateRow() {\n        return table.options.enableRowInteractivity === true;\n      },\n\n      /**\n       * Returns a boolean value if the row is currently activated.\n       */\n      getIsActivated(this: Row<TData>) {\n        return table.getState().activeRow === this.id;\n      },\n\n      /**\n       * Activates the row, if it is not activated.\n       * Deactivates the row, if it is currently activated.\n       */\n      toggleActivated(this: Row<TData>, event?: DataTableRowActivationEvent) {\n        table.setActiveRow(this.getIsActivated() ? null : this.id, event);\n      },\n\n      /**\n       * DEPRECATION: [APPDEV-15075] BREAKING-CHANGE: Remove rowInteractivity link\n       */\n      getLinkForRow(this: Row<TData>) {\n        return table.options.getLinkForRow?.(this);\n      },\n    });\n  },\n};\n\n/**\n * Configuration hook for the rowInteractivity in the DataTable.\n * @internal\n */\nexport function useRowInteractivity<TData extends DataTableRowData>(\n  props: DataTableRowInteractivityProps<TData>,\n  options: TableOptions<TData>,\n): void {\n  const {\n    activeRow: activeRowProp,\n    defaultActiveRow,\n    onActiveRowChange,\n    interactiveRows,\n  } = props;\n\n  const [activeRow, setActiveRow] = useControllableState<string | null>({\n    value: activeRowProp,\n    defaultValue: defaultActiveRow,\n  });\n  options.enableRowInteractivity =\n    interactiveRows !== undefined && interactiveRows !== false;\n\n  // DEPRECATION: [APPDEV-15075] BREAKING-CHANGE: Remove rowInteractivity link\n  const getLinkForRow = useCallback(\n    (row: Row<TData>) => {\n      if (\n        interactiveRows !== undefined &&\n        typeof interactiveRows === 'object' &&\n        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        interactiveRows.link\n      ) {\n        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        return interactiveRows.link(row.original);\n      }\n      return undefined;\n    },\n    [interactiveRows],\n  );\n\n  if (options.enableRowInteractivity) {\n    options.onActiveRowChange = (updater: Updater<string | null>, event) => {\n      const nextState = functionalUpdate(\n        updater,\n        options.state?.activeRow ?? null,\n      );\n\n      setActiveRow(nextState);\n      onActiveRowChange?.(nextState, event);\n    };\n    options.enableAutoActivation =\n      interactiveRows &&\n      (interactiveRows === true || interactiveRows.autoActivate !== false);\n\n    // DEPRECATION: [APPDEV-15075] BREAKING-CHANGE: Remove rowInteractivity link\n    options.getLinkForRow = getLinkForRow;\n  }\n\n  // Auto reset the state if the data changes\n  const firstRun = useRef(true);\n  useEffect(\n    () => {\n      if (firstRun.current) {\n        firstRun.current = false;\n        return;\n      }\n\n      if (options.enableRowInteractivity) {\n        options.onActiveRowChange?.(null);\n      }\n    },\n    // We only want to listen to the individual options parts and not the entire options.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [options.enableRowInteractivity, options.data],\n  );\n\n  options.state = {\n    ...options.state,\n    activeRow: activeRow ?? null,\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { functionalUpdate } from '@tanstack/react-table';\nimport type { ScrollToOptions } from '@tanstack/react-virtual';\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  type PointerEvent,\n  type FocusEvent as ReactFocusEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type {\n  DataTableRowActivationEvent,\n  DataTableRowInteractivityProps,\n} from './row-interactivity-types.js';\nimport * as styles from './RowInteractivity.sty.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport { useFocusRing } from '../../../../core/styles/useFocusRing.js';\nimport { mergeProps as _mergeProps } from '../../../../core/utils/merge-props.js';\nimport { isTargetInteractive } from '../../../utils/is-target-interactive.js';\nimport { DATA_TABLE_ROW_EXPANDED_ID_SUFFIX } from '../../constants.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport type {\n  Row,\n  Table,\n  TableFeature,\n  TableOptions,\n  Updater,\n} from '../../hooks/useTable/types.js';\nimport { assignRowMethods } from '../../hooks/useTable/utils.js';\nimport { dataTableMessages } from '../../messages.js';\nimport type { DataTableRowData } from '../../public.api.js';\n\nfunction removeHoverStyles(target: HTMLElement | SVGElement): void {\n  const virtualizationContainer = target.closest(\n    '.strato-table-virtualization-container',\n  );\n\n  if (virtualizationContainer) {\n    const hoveredRows = virtualizationContainer.querySelectorAll(\n      `.${styles.interactiveRow.classNames.variants.hovered.true}`,\n    );\n    for (const hoveredRow of Array.from(hoveredRows)) {\n      hoveredRow.classList.remove(\n        styles.interactiveRow.classNames.variants.hovered.true,\n      );\n    }\n  }\n}\n\nfunction addHoverStyles(row: HTMLElement): void {\n  row.classList.add(styles.interactiveRow.classNames.variants.hovered.true);\n}\n\n/**\n * Provides all necessary props for an interactive row element.\n *\n * @param row - the table row element\n * @param scrollToIndex - rowVirtualizer function for scrolling to the row with the specified index\n * @returns className and props for the row element\n */\nexport function useRowInteractivityProps<TData extends DataTableRowData>(\n  row: Row<TData>,\n  scrollToIndex: (index: number, options?: ScrollToOptions) => void,\n): {\n  rowInteractivityClassName: string;\n  rowInteractivityProps: Record<string, unknown> | undefined;\n} {\n  const table = useDataTable();\n  const intl = useIntl();\n  // used to detect if the focus event was triggered by a click\n  const clicked = useRef(false);\n  const { isFocusVisible, focusProps } = useFocusRing();\n\n  if (!row.getCanActivateRow()) {\n    return { rowInteractivityClassName: '', rowInteractivityProps: undefined };\n  }\n\n  const isRowDragging = table.getState().draggingRowInfo !== undefined;\n  const isActivated = row.getIsActivated();\n  const isAutoActivationEnabled = table.options.enableAutoActivation;\n  const rowInteractivityClassName = styles.interactiveRow({\n    hovered: table.getHoveredRow() === row.id,\n    active: isActivated,\n    focus: isFocusVisible,\n    contained: table.getVisualVariantOptions().contained,\n  });\n\n  function handleRowActivation(event: ReactMouseEvent<HTMLElement>): void {\n    const { target } = event;\n\n    if (\n      table.options.enableRowInteractivity !== true ||\n      (target instanceof HTMLElement === false &&\n        target instanceof SVGElement === false) ||\n      // prevent deactivation if the user clicks on a Gantt segment (SVG <rect>) and the row is already active\n      (target.nodeName === 'rect' && isActivated)\n    ) {\n      return;\n    }\n\n    const rowElement = target.closest('[role=\"row\"]');\n    if (rowElement && !isTargetInteractive(rowElement, target)) {\n      row.toggleActivated(event);\n    }\n  }\n\n  function isSelectionInsideTable(): boolean {\n    const selection = globalThis.getSelection();\n\n    if (!selection?.toString()) {\n      return false;\n    }\n\n    const container = table.getRowVirtualizationContainer();\n    if (!container) {\n      return false;\n    }\n\n    // Use anchorNode (where the selection started) to determine whether the\n    // selection originated inside the table. A selection outside the table\n    // should not prevent row activation.\n    let anchorNode = selection.anchorNode;\n    if (anchorNode?.nodeType === Node.TEXT_NODE) {\n      anchorNode = anchorNode.parentElement;\n    }\n\n    return !!anchorNode && container.contains(anchorNode);\n  }\n\n  const rowInteractivityProps = {\n    tabIndex: 0,\n    'data-trigger': 'interactive-row',\n    'aria-label': intl.formatMessage(dataTableMessages.interactiveRowTrigger, {\n      isActivated,\n      rowId: row.id,\n    }),\n    onPointerDown: (event: PointerEvent<HTMLElement>) => {\n      clicked.current = true;\n    },\n    onClick: (event: ReactMouseEvent<HTMLElement>) => {\n      // prevent row action if the user is selecting text inside the table and ensure\n      // that double click doesn't trigger the row action twice\n      // (event.detail represents the click count, 1 indicates a single click)\n      if (!isSelectionInsideTable() && event.detail === 1) {\n        handleRowActivation(event);\n      }\n    },\n    onAuxClick: (event: ReactMouseEvent<HTMLElement>) => {\n      // only handle middle mouse button (button 1), ignore right-click and others\n      if (event.button === 1) {\n        handleRowActivation(event);\n      }\n    },\n    onKeyDown: (event: ReactKeyboardEvent<HTMLElement>) => {\n      if (isRowDragging) {\n        return;\n      }\n\n      const { key, target } = event;\n\n      if (\n        key === 'Enter' &&\n        !isAutoActivationEnabled &&\n        (target instanceof HTMLElement || target instanceof SVGElement)\n      ) {\n        const rowElement = target.closest('[role=\"row\"]');\n\n        if (rowElement && !isTargetInteractive(rowElement, target)) {\n          event.preventDefault();\n          event.stopPropagation();\n          row.toggleActivated(event);\n          return;\n        }\n      }\n\n      let offset: number | null = null;\n      switch (key) {\n        case 'ArrowDown': {\n          offset = +1;\n          break;\n        }\n        case 'ArrowUp': {\n          offset = -1;\n          break;\n        }\n        case 'PageUp': {\n          offset = -10;\n          break;\n        }\n        case 'PageDown': {\n          offset = +10;\n          break;\n        }\n        case 'Home': {\n          offset = -Infinity;\n          break;\n        }\n        case 'End': {\n          offset = Infinity;\n          break;\n        }\n      }\n\n      if (offset === null) {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n      if (!(event.target instanceof HTMLElement)) {\n        return;\n      }\n\n      const allRows = table.getRowModel().rows;\n      const currentRowIndex = allRows.findIndex(\n        (currentRow) => currentRow.id === row.id,\n      );\n      if (currentRowIndex === -1) {\n        return;\n      }\n\n      const clampedIndex = Math.max(\n        0,\n        Math.min(currentRowIndex + offset, allRows.length - 1),\n      );\n      const nextRow: Row<unknown> | undefined = allRows.at(clampedIndex);\n      if (nextRow === undefined) {\n        return;\n      }\n\n      scrollToIndex(clampedIndex, {\n        align: 'auto',\n      });\n      requestAnimationFrame(() => {\n        const nextRowButton = table\n          .getRowVirtualizationContainer()\n          ?.querySelector<HTMLButtonElement>(\n            `[data-rowid=\"${CSS.escape(\n              nextRow.id,\n            )}\"][data-trigger=\"interactive-row\"]`,\n          );\n        nextRowButton?.focus();\n      });\n    },\n    ..._mergeProps(focusProps, {\n      onFocus: (event: ReactFocusEvent<HTMLElement>) => {\n        // only activate row if focus was triggered on the row itself\n        if (event.currentTarget !== event.target) {\n          return;\n        }\n        // When a row is initially activated, and you click on it to deactivate it using a pointing device,\n        // the `pointerdown` event is called before the `focus` event. This code is needed in order to\n        // not re-activate the row again. It also ensures that the focus ring is still correctly\n        // moved within the table.\n        if (clicked.current) {\n          clicked.current = false;\n          return;\n        }\n\n        if (!isActivated && isAutoActivationEnabled) {\n          row.toggleActivated(event);\n        }\n      },\n    }),\n  };\n\n  return { rowInteractivityClassName, rowInteractivityProps };\n}\n\n/**\n * Validates the event target and extracts row information.\n */\nfunction getRowInfoFromMouseEvent(event: ReactMouseEvent<HTMLDivElement>): {\n  target: HTMLElement | SVGElement;\n  row: HTMLElement | null;\n  rowId: string | undefined;\n  isRowDetailsRow: boolean;\n} | null {\n  const { target } = event;\n\n  if (!(target instanceof HTMLElement) && !(target instanceof SVGElement)) {\n    return null;\n  }\n\n  const row: HTMLElement | null = target.closest('[role=\"row\"]');\n  const rowId =\n    row instanceof HTMLElement && 'rowid' in row.dataset\n      ? row.dataset.rowid\n      : undefined;\n  const isRowDetailsRow =\n    rowId?.endsWith(DATA_TABLE_ROW_EXPANDED_ID_SUFFIX) ?? false;\n\n  return { target, row, rowId, isRowDetailsRow };\n}\n\n/**\n * Defines the user action table feature\n * @internal\n */\nexport const DataTableRowInteractivity: TableFeature = {\n  createTable<TData>(table: Table<TData>) {\n    let hoveredRow: string | null = null;\n    /**\n     * Activates a given row for the row interactivity\n     */\n    table.setActiveRow = (\n      updater: Updater<string | null>,\n      event?: DataTableRowActivationEvent,\n    ) => {\n      table.options.onActiveRowChange?.(updater, event);\n    };\n\n    /**\n     * Sets a given row as hovered on the table instance.\n     */\n    table.setHoveredRow = (rowId: string | null) => {\n      if (rowId !== hoveredRow) {\n        hoveredRow = rowId;\n      }\n    };\n\n    /**\n     * Gets a given row as hovered on the table instance.\n     */\n    table.getHoveredRow = () => {\n      return hoveredRow;\n    };\n\n    /** Handles mouse over events for interactive rows. */\n    table.handleInteractiveRowMouseOver = (\n      event: ReactMouseEvent<HTMLDivElement>,\n    ) => {\n      if (table.options.enableRowInteractivity !== true) {\n        return;\n      }\n\n      const rowInfo = getRowInfoFromMouseEvent(event);\n      if (!rowInfo) {\n        return;\n      }\n\n      const { target, row, rowId, isRowDetailsRow } = rowInfo;\n      if (row && rowId && !isRowDetailsRow && table.getHoveredRow() !== rowId) {\n        table.setHoveredRow(rowId);\n        removeHoverStyles(row);\n        addHoverStyles(row);\n      } else if (row === null || isRowDetailsRow) {\n        table.setHoveredRow(null);\n        removeHoverStyles(target);\n      }\n    };\n\n    /** Handles mouse leave events for interactive rows. */\n    table.handleInteractiveRowMouseLeave = (\n      event: ReactMouseEvent<HTMLDivElement>,\n    ) => {\n      if (table.options.enableRowInteractivity !== true) {\n        return;\n      }\n\n      const { target } = event;\n      if (!(target instanceof HTMLElement) && !(target instanceof SVGElement)) {\n        return;\n      }\n\n      table.setHoveredRow(null);\n      removeHoverStyles(target);\n    };\n\n    /** Handles click events for interactive rows. */\n    table.handleInteractiveRowClick = (\n      event: ReactMouseEvent<HTMLDivElement>,\n    ) => {\n      if (table.options.enableRowInteractivity !== true) {\n        return;\n      }\n\n      const rowInfo = getRowInfoFromMouseEvent(event);\n      if (!rowInfo) {\n        return;\n      }\n\n      const { target, row, rowId, isRowDetailsRow } = rowInfo;\n      if (\n        row &&\n        rowId &&\n        !isRowDetailsRow &&\n        !isTargetInteractive(row, target)\n      ) {\n        event.stopPropagation();\n        row.focus();\n      }\n    };\n\n    assignRowMethods(table, {\n      /**\n       * Returns a boolean value if the row can be activated.\n       */\n      getCanActivateRow() {\n        return table.options.enableRowInteractivity === true;\n      },\n\n      /**\n       * Returns a boolean value if the row is currently activated.\n       */\n      getIsActivated(this: Row<TData>) {\n        return table.getState().activeRow === this.id;\n      },\n\n      /**\n       * Activates the row, if it is not activated.\n       * Deactivates the row, if it is currently activated.\n       */\n      toggleActivated(this: Row<TData>, event?: DataTableRowActivationEvent) {\n        table.setActiveRow(this.getIsActivated() ? null : this.id, event);\n      },\n\n      /**\n       * DEPRECATION: [APPDEV-15075] BREAKING-CHANGE: Remove rowInteractivity link\n       */\n      getLinkForRow(this: Row<TData>) {\n        return table.options.getLinkForRow?.(this);\n      },\n    });\n  },\n};\n\n/**\n * Configuration hook for the rowInteractivity in the DataTable.\n * @internal\n */\nexport function useRowInteractivity<TData extends DataTableRowData>(\n  props: DataTableRowInteractivityProps<TData>,\n  options: TableOptions<TData>,\n): void {\n  const {\n    activeRow: activeRowProp,\n    defaultActiveRow,\n    onActiveRowChange,\n    interactiveRows,\n  } = props;\n\n  const [activeRow, setActiveRow] = useControllableState<string | null>({\n    value: activeRowProp,\n    defaultValue: defaultActiveRow,\n  });\n  options.enableRowInteractivity =\n    interactiveRows !== undefined && interactiveRows !== false;\n\n  // DEPRECATION: [APPDEV-15075] BREAKING-CHANGE: Remove rowInteractivity link\n  const getLinkForRow = useCallback(\n    (row: Row<TData>) => {\n      if (\n        interactiveRows !== undefined &&\n        typeof interactiveRows === 'object' &&\n        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        interactiveRows.link\n      ) {\n        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        return interactiveRows.link(row.original);\n      }\n      return undefined;\n    },\n    [interactiveRows],\n  );\n\n  if (options.enableRowInteractivity) {\n    options.onActiveRowChange = (updater: Updater<string | null>, event) => {\n      const nextState = functionalUpdate(\n        updater,\n        options.state?.activeRow ?? null,\n      );\n\n      setActiveRow(nextState);\n      onActiveRowChange?.(nextState, event);\n    };\n    options.enableAutoActivation =\n      interactiveRows &&\n      (interactiveRows === true || interactiveRows.autoActivate !== false);\n\n    // DEPRECATION: [APPDEV-15075] BREAKING-CHANGE: Remove rowInteractivity link\n    options.getLinkForRow = getLinkForRow;\n  }\n\n  // Auto reset the state if the data changes\n  const firstRun = useRef(true);\n  useEffect(\n    () => {\n      if (firstRun.current) {\n        firstRun.current = false;\n        return;\n      }\n\n      if (options.enableRowInteractivity) {\n        options.onActiveRowChange?.(null);\n      }\n    },\n    // We only want to listen to the individual options parts and not the entire options.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [options.enableRowInteractivity, options.data],\n  );\n\n  options.state = {\n    ...options.state,\n    activeRow: activeRow ?? null,\n  };\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -2,7 +2,7 @@ import "../../components/DataTableVirtualizationContainer.css";
 import "../../DataTable.css";
 import "./RowInteractivity.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var interactiveRow = _7a468({ defaultClassName: "_15silbj0-3-1-3", variantClassNames: { active: { true: "_15silbj1-3-1-3", false: "_15silbj2-3-1-3" }, focus: { true: "_15silbj3-3-1-3" }, hovered: { true: "_15silbj4-3-1-3" }, contained: { true: "_15silbj5-3-1-3", false: "_15silbj6-3-1-3" } }, defaultVariants: {}, compoundVariants: [[{ active: true, focus: true }, "_15silbj7-3-1-3"]] });
+var interactiveRow = _7a468({ defaultClassName: "_15silbj0-3-2-1", variantClassNames: { active: { true: "_15silbj1-3-2-1", false: "_15silbj2-3-2-1" }, focus: { true: "_15silbj3-3-2-1" }, hovered: { true: "_15silbj4-3-2-1" }, contained: { true: "_15silbj5-3-2-1", false: "_15silbj6-3-2-1" } }, defaultVariants: {}, compoundVariants: [[{ active: true, focus: true }, "_15silbj7-3-2-1"]] });
 export {
   interactiveRow
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/RowInteractivity/RowInteractivity.css.ts"],
-  "sourcesContent": ["import '../../components/DataTableVirtualizationContainer.css';\nimport '../../DataTable.css';\nimport './RowInteractivity.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var interactiveRow = _7a468({defaultClassName:'_15silbj0-3-1-3',variantClassNames:{active:{true:'_15silbj1-3-1-3',false:'_15silbj2-3-1-3'},focus:{true:'_15silbj3-3-1-3'},hovered:{true:'_15silbj4-3-1-3'},contained:{true:'_15silbj5-3-1-3',false:'_15silbj6-3-1-3'}},defaultVariants:{},compoundVariants:[[{active:true,focus:true},'_15silbj7-3-1-3']]});"],
+  "sourcesContent": ["import '../../components/DataTableVirtualizationContainer.css';\nimport '../../DataTable.css';\nimport './RowInteractivity.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var interactiveRow = _7a468({defaultClassName:'_15silbj0-3-2-1',variantClassNames:{active:{true:'_15silbj1-3-2-1',false:'_15silbj2-3-2-1'},focus:{true:'_15silbj3-3-2-1'},hovered:{true:'_15silbj4-3-2-1'},contained:{true:'_15silbj5-3-2-1',false:'_15silbj6-3-2-1'}},defaultVariants:{},compoundVariants:[[{active:true,focus:true},'_15silbj7-3-2-1']]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,OAAM,EAAC,MAAK,kBAAiB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,GAAE,WAAU,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,QAAO,MAAK,OAAM,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

@@ -1,11 +1,11 @@
-._or8s40-3-1-3 {
+._or8s40-3-2-1 {
   cursor: grabbing;
   box-shadow: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
   background-color: var(--dt-colors-background-surface-default, #fff);
   z-index: 4;
   overflow: hidden;
 }
-._or8s41-3-1-3 {
+._or8s41-3-2-1 {
   vertical-align: middle;
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
   padding-left: var(--dt-spacings-size-2, 2px);
@@ -14,21 +14,21 @@
   padding-bottom: 0;
   transition: none;
 }
-._or8s41-3-1-3:active {
+._or8s41-3-2-1:active {
   background: transparent;
 }
-._or8s41-3-1-3:hover {
+._or8s41-3-2-1:hover {
   background: transparent;
 }
-._or8s40-3-1-3 ._or8s41-3-1-3 {
+._or8s40-3-2-1 ._or8s41-3-2-1 {
   cursor: grabbing;
 }
-._or8s42-3-1-3 {
+._or8s42-3-2-1 {
   cursor: not-allowed;
 }
-._or8s43-3-1-3 {
+._or8s43-3-2-1 {
   cursor: grab;
 }
-._or8s44-3-1-3 {
+._or8s44-3-2-1 {
   opacity: 0.2;
 }

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

@@ -1,8 +1,8 @@
 import "./RowOrder.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var disabledNonTargetRow = "_or8s44-3-1-3";
-var dndHandle = _7a468({ defaultClassName: "_or8s41-3-1-3", variantClassNames: { disabled: { true: "_or8s42-3-1-3", false: "_or8s43-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var rowDndOverlay = "_or8s40-3-1-3";
+var disabledNonTargetRow = "_or8s44-3-2-1";
+var dndHandle = _7a468({ defaultClassName: "_or8s41-3-2-1", variantClassNames: { disabled: { true: "_or8s42-3-2-1", false: "_or8s43-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
+var rowDndOverlay = "_or8s40-3-2-1";
 export {
   disabledNonTargetRow,
   dndHandle,