@dynatrace/strato-components 3.9.0 → 3.10.0

package/esm/tables/DataTable/features/GanttChart/DataTableGanttChartCell.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/GanttChart/DataTableGanttChartCell.css.ts"],
-  "sourcesContent": ["import '../../../../core/styles/focusRingStatic.css';\nimport '../../components/Alignment.css';\nimport '../../DataTable.css';\nimport '../../../../core/components/app-root/AppRoot.css';\nimport '../../components/DataTableVirtualizationContainer.css';\nimport '../RowOrder/RowOrder.css';\nimport '../RowDetails/RowDetails.css';\nimport '../RowInteractivity/RowInteractivity.css';\nimport '../../components/DataTableRow.css';\nimport '../ColumnSizing/ColumnSizing.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableCell.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../../components/DataTableHeaderCell.css';\nimport '../../components/DataTableDefaultCell.css';\nimport '../SubRows/SubRows.css';\nimport './DataTableGanttChartCell.css';\nexport var ganttChartCell = '_5jn5tp0-3-9-0';\nexport var ganttChartDefaultCell = '_5jn5tp1-3-9-0';"],
+  "sourcesContent": ["import '../../../../core/styles/focusRingStatic.css';\nimport '../../components/Alignment.css';\nimport '../../DataTable.css';\nimport '../../../../core/components/app-root/AppRoot.css';\nimport '../../components/DataTableVirtualizationContainer.css';\nimport '../RowOrder/RowOrder.css';\nimport '../RowDetails/RowDetails.css';\nimport '../RowInteractivity/RowInteractivity.css';\nimport '../../components/DataTableRow.css';\nimport '../ColumnSizing/ColumnSizing.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableCell.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../../components/DataTableHeaderCell.css';\nimport '../../components/DataTableDefaultCell.css';\nimport '../SubRows/SubRows.css';\nimport './DataTableGanttChartCell.css';\nexport var ganttChartCell = '_5jn5tp0-3-10-0';\nexport var ganttChartDefaultCell = '_5jn5tp1-3-10-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,wBAAwB;",
   "names": []
 }

package/esm/tables/DataTable/features/GanttChart/DataTableGanttChartGrid.css

@@ -1,4 +1,4 @@
-._evozey0-3-9-0 {
+._evozey0-3-10-0 {
   position: absolute;
   inset: 0;
   margin-left: auto;

package/esm/tables/DataTable/features/GanttChart/DataTableGanttChartGrid.sty.js

@@ -1,5 +1,5 @@
 import "./DataTableGanttChartGrid.css";
-var ganttChartGrid = "_evozey0-3-9-0";
+var ganttChartGrid = "_evozey0-3-10-0";
 export {
   ganttChartGrid
 };

package/esm/tables/DataTable/features/GanttChart/DataTableGanttChartGrid.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/GanttChart/DataTableGanttChartGrid.css.ts"],
-  "sourcesContent": ["import './DataTableGanttChartGrid.css';\nexport var ganttChartGrid = '_evozey0-3-9-0';"],
+  "sourcesContent": ["import './DataTableGanttChartGrid.css';\nexport var ganttChartGrid = '_evozey0-3-10-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iBAAiB;",
   "names": []
 }

package/esm/tables/DataTable/features/GanttChart/DataTableGanttChartHeader.css

@@ -1,14 +1,14 @@
-._10y95u40-3-9-0 {
+._10y95u40-3-10-0 {
   padding-right: 0;
   align-items: center;
 }
-._11pvd3zt-3-9-0:not(._11pvd3z5-3-9-0) ._10y95u40-3-9-0 {
+._11pvd3zt-3-10-0:not(._11pvd3z5-3-10-0) ._10y95u40-3-10-0 {
   width: 100%;
   padding-left: 0;
 }
-._11pvd3z5-3-9-0 ._10y95u40-3-9-0 {
+._11pvd3z5-3-10-0 ._10y95u40-3-10-0 {
   width: 100%;
 }
-._10y95u40-3-9-0 span {
+._10y95u40-3-10-0 span {
   margin-top: 0 !important;
 }

package/esm/tables/DataTable/features/GanttChart/DataTableGanttChartHeader.sty.js

@@ -5,7 +5,7 @@ import "../ColumnOrder/ColumnOrder.css";
 import "../Thresholds/Thresholds.css";
 import "../../components/DataTableHeaderCell.css";
 import "./DataTableGanttChartHeader.css";
-var ganttChartHeader = "_10y95u40-3-9-0";
+var ganttChartHeader = "_10y95u40-3-10-0";
 export {
   ganttChartHeader
 };

package/esm/tables/DataTable/features/GanttChart/DataTableGanttChartHeader.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/GanttChart/DataTableGanttChartHeader.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport '../../DataTable.css';\nimport '../../components/Alignment.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableHeaderCell.css';\nimport './DataTableGanttChartHeader.css';\nexport var ganttChartHeader = '_10y95u40-3-9-0';"],
+  "sourcesContent": ["import '../../../../core/components/app-root/AppRoot.css';\nimport '../../DataTable.css';\nimport '../../components/Alignment.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableHeaderCell.css';\nimport './DataTableGanttChartHeader.css';\nexport var ganttChartHeader = '_10y95u40-3-10-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,mBAAmB;",
   "names": []
 }

package/esm/tables/DataTable/features/Layout/width-utils.js

@@ -1,3 +1,23 @@
+import {
+  DATA_TABLE_METERBAR_MIN_COLUMN_WIDTH,
+  DATA_TABLE_METERBAR_WITH_VALUE_MIN_COLUMN_WIDTH
+} from "../../constants.js";
+import { isDatatableMeterBarColumnConfig } from "../ColumnTypes/column-types-types.js";
+function getColumnMinWidth(columnDef) {
+  const isMeterbar = columnDef.columnType === "meterbar";
+  const meterbarConfig = isDatatableMeterBarColumnConfig(
+    columnDef.config,
+    columnDef.columnType
+  ) ? columnDef.config : void 0;
+  const meterbarShowsValue = meterbarConfig?.showValue === "left" || meterbarConfig?.showValue === "right";
+  let defaultMinWidth;
+  if (meterbarShowsValue) {
+    defaultMinWidth = DATA_TABLE_METERBAR_WITH_VALUE_MIN_COLUMN_WIDTH;
+  } else if (isMeterbar) {
+    defaultMinWidth = DATA_TABLE_METERBAR_MIN_COLUMN_WIDTH;
+  }
+  return Math.max(columnDef.minWidth ?? 0, defaultMinWidth ?? 0) || void 0;
+}
 function isFractionWidth(width) {
   return typeof width === "string" && width.endsWith("fr");
 }
@@ -5,6 +25,7 @@ function isWidthExtendedConfig(width) {
   return typeof width === "object";
 }
 export {
+  getColumnMinWidth,
   isFractionWidth,
   isWidthExtendedConfig
 };

package/esm/tables/DataTable/features/Layout/width-utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/Layout/width-utils.ts"],
-  "sourcesContent": ["/**\n * Typeguard function to make sure a passed width is a fraction width.\n * @internal\n */\nexport function isFractionWidth(\n  width?:\n    | number\n    | `${number}fr`\n    | 'auto'\n    | 'content'\n    | {\n        type: 'auto' | 'content';\n        maxWidth?: number;\n      },\n): width is `${number}fr` {\n  return typeof width === 'string' && width.endsWith('fr');\n}\n\n/**\n * Typeguard function to make sure a passed width is an extended config.\n * @internal\n */\nexport function isWidthExtendedConfig(\n  width?:\n    | number\n    | `${number}fr`\n    | 'auto'\n    | 'content'\n    | {\n        type: 'auto' | 'content';\n        maxWidth?: number;\n      },\n): width is {\n  type: 'auto' | 'content';\n  maxWidth?: number;\n} {\n  return typeof width === 'object';\n}\n"],
-  "mappings": "AAIO,SAAS,gBACd,OASwB;AACxB,SAAO,OAAO,UAAU,YAAY,MAAM,SAAS,IAAI;AACzD;AAMO,SAAS,sBACd,OAYA;AACA,SAAO,OAAO,UAAU;AAC1B;",
+  "sourcesContent": ["import {\n  DATA_TABLE_METERBAR_MIN_COLUMN_WIDTH,\n  DATA_TABLE_METERBAR_WITH_VALUE_MIN_COLUMN_WIDTH,\n} from '../../constants.js';\nimport type {\n  DataTableDisplayColumnDef,\n  DataTableRowData,\n} from '../../public.api.js';\nimport { isDatatableMeterBarColumnConfig } from '../ColumnTypes/column-types-types.js';\n\n/**\n * Determines the minimum width for a column.\n */\nexport function getColumnMinWidth(\n  columnDef: DataTableDisplayColumnDef<DataTableRowData, unknown>,\n): number | undefined {\n  const isMeterbar = columnDef.columnType === 'meterbar';\n  const meterbarConfig = isDatatableMeterBarColumnConfig(\n    columnDef.config,\n    columnDef.columnType,\n  )\n    ? columnDef.config\n    : undefined;\n  const meterbarShowsValue =\n    meterbarConfig?.showValue === 'left' ||\n    meterbarConfig?.showValue === 'right';\n\n  let defaultMinWidth: number | undefined;\n  if (meterbarShowsValue) {\n    defaultMinWidth = DATA_TABLE_METERBAR_WITH_VALUE_MIN_COLUMN_WIDTH;\n  } else if (isMeterbar) {\n    defaultMinWidth = DATA_TABLE_METERBAR_MIN_COLUMN_WIDTH;\n  }\n\n  return Math.max(columnDef.minWidth ?? 0, defaultMinWidth ?? 0) || undefined;\n}\n\n/**\n * Typeguard function to make sure a passed width is a fraction width.\n * @internal\n */\nexport function isFractionWidth(\n  width?:\n    | number\n    | `${number}fr`\n    | 'auto'\n    | 'content'\n    | {\n        type: 'auto' | 'content';\n        maxWidth?: number;\n      },\n): width is `${number}fr` {\n  return typeof width === 'string' && width.endsWith('fr');\n}\n\n/**\n * Typeguard function to make sure a passed width is an extended config.\n * @internal\n */\nexport function isWidthExtendedConfig(\n  width?:\n    | number\n    | `${number}fr`\n    | 'auto'\n    | 'content'\n    | {\n        type: 'auto' | 'content';\n        maxWidth?: number;\n      },\n): width is {\n  type: 'auto' | 'content';\n  maxWidth?: number;\n} {\n  return typeof width === 'object';\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAKP,SAAS,uCAAuC;AAKzC,SAAS,kBACd,WACoB;AACpB,QAAM,aAAa,UAAU,eAAe;AAC5C,QAAM,iBAAiB;AAAA,IACrB,UAAU;AAAA,IACV,UAAU;AAAA,EACZ,IACI,UAAU,SACV;AACJ,QAAM,qBACJ,gBAAgB,cAAc,UAC9B,gBAAgB,cAAc;AAEhC,MAAI;AACJ,MAAI,oBAAoB;AACtB,sBAAkB;AAAA,EACpB,WAAW,YAAY;AACrB,sBAAkB;AAAA,EACpB;AAEA,SAAO,KAAK,IAAI,UAAU,YAAY,GAAG,mBAAmB,CAAC,KAAK;AACpE;AAMO,SAAS,gBACd,OASwB;AACxB,SAAO,OAAO,UAAU,YAAY,MAAM,SAAS,IAAI;AACzD;AAMO,SAAS,sBACd,OAYA;AACA,SAAO,OAAO,UAAU;AAC1B;",
   "names": []
 }

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

@@ -16,7 +16,7 @@ function DataTableGlobalLineWrapToolbarAction() {
     Button,
     {
       "aria-label": lineWrapLabel,
-      "data-dt-name": "ToolbarLineWrap",
+      "data-dt-children-name": "ToolbarLineWrap",
       "data-dt-properties": lineWrapDtProperty,
       onClick: () => table.setColumnLineWrap((oldLineWrap) => {
         if (oldLineWrap === true) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/LineWrap/LineWrapToolbarAction.tsx"],
-  "sourcesContent": ["import { type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { WrapTextIcon, WrapTextOffIcon } from '@dynatrace/strato-icons';\n\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../messages.js';\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.atoms.columnLineWrap?.get();\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 lineWrapDtProperty = `state:${\n    lineWrapState === true ? 'unwrap' : 'wrap'\n  }`;\n\n  return (\n    <Tooltip text={lineWrapLabel}>\n      <Button\n        aria-label={lineWrapLabel}\n        data-dt-name=\"ToolbarLineWrap\"\n        data-dt-properties={lineWrapDtProperty}\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"],
-  "mappings": "AAmBwC;AAlBxC,SAAS,eAAe;AAExB,SAAS,cAAc,uBAAuB;AAE9C,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAM3B,SAAS,uCAAoD;AAClE,QAAM,QAAQ,aAAa;AAC3B,QAAM,OAAO,QAAQ;AAErB,QAAM,gBAAgB,MAAM,MAAM,gBAAgB,IAAI;AACtD,QAAM,OAAO,kBAAkB,OAAO,oBAAC,mBAAgB,IAAK,oBAAC,gBAAa;AAC1E,QAAM,gBACJ,kBAAkB,OACd,KAAK,cAAc,kBAAkB,oBAAoB,IACzD,KAAK,cAAc,kBAAkB,mBAAmB;AAE9D,QAAM,qBAAqB,SACzB,kBAAkB,OAAO,WAAW,MACtC;AAEA,SACE,oBAAC,WAAQ,MAAM,eACb;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,gBAAa;AAAA,MACb,sBAAoB;AAAA,MACpB,SAAS,MACP,MAAM,kBAAkB,CAAC,gBAAgB;AACvC,YAAI,gBAAgB,MAAM;AACxB,iBAAO,CAAC;AAAA,QACV;AACA,eAAO;AAAA,MACT,CAAC;AAAA,MAGH,8BAAC,OAAO,QAAP,EAAe,gBAAK;AAAA;AAAA,EACvB,GACF;AAEJ;",
+  "sourcesContent": ["import { type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { WrapTextIcon, WrapTextOffIcon } from '@dynatrace/strato-icons';\n\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../messages.js';\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.atoms.columnLineWrap?.get();\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 lineWrapDtProperty = `state:${\n    lineWrapState === true ? 'unwrap' : 'wrap'\n  }`;\n\n  return (\n    <Tooltip text={lineWrapLabel}>\n      <Button\n        aria-label={lineWrapLabel}\n        data-dt-children-name=\"ToolbarLineWrap\"\n        data-dt-properties={lineWrapDtProperty}\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"],
+  "mappings": "AAmBwC;AAlBxC,SAAS,eAAe;AAExB,SAAS,cAAc,uBAAuB;AAE9C,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAM3B,SAAS,uCAAoD;AAClE,QAAM,QAAQ,aAAa;AAC3B,QAAM,OAAO,QAAQ;AAErB,QAAM,gBAAgB,MAAM,MAAM,gBAAgB,IAAI;AACtD,QAAM,OAAO,kBAAkB,OAAO,oBAAC,mBAAgB,IAAK,oBAAC,gBAAa;AAC1E,QAAM,gBACJ,kBAAkB,OACd,KAAK,cAAc,kBAAkB,oBAAoB,IACzD,KAAK,cAAc,kBAAkB,mBAAmB;AAE9D,QAAM,qBAAqB,SACzB,kBAAkB,OAAO,WAAW,MACtC;AAEA,SACE,oBAAC,WAAQ,MAAM,eACb;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,yBAAsB;AAAA,MACtB,sBAAoB;AAAA,MACpB,SAAS,MACP,MAAM,kBAAkB,CAAC,gBAAgB;AACvC,YAAI,gBAAgB,MAAM;AACxB,iBAAO,CAAC;AAAA,QACV;AACA,eAAO;AAAA,MACT,CAAC;AAAA,MAGH,8BAAC,OAAO,QAAP,EAAe,gBAAK;AAAA;AAAA,EACvB,GACF;AAEJ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
-._14flfjk2-3-9-0 {
+._14flfjk2-3-10-0 {
   z-index: 1;
   position: absolute;
   inset: 0;
-  top: calc(var(--_14flfjk0-3-9-0) + var(--_14flfjk1-3-9-0));
-  bottom: calc(var(--_14flfjk1-3-9-0) * -1);
+  top: calc(var(--_14flfjk0-3-10-0) + var(--_14flfjk1-3-10-0));
+  bottom: calc(var(--_14flfjk1-3-10-0) * -1);
 }

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

@@ -1,7 +1,7 @@
 import "./LoadingState.css";
-var dataTableHeaderHeight = "var(--_14flfjk0-3-9-0)";
-var dataTableScrollOffset = "var(--_14flfjk1-3-9-0)";
-var loadingState = "_14flfjk2-3-9-0";
+var dataTableHeaderHeight = "var(--_14flfjk0-3-10-0)";
+var dataTableScrollOffset = "var(--_14flfjk1-3-10-0)";
+var loadingState = "_14flfjk2-3-10-0";
 export {
   dataTableHeaderHeight,
   dataTableScrollOffset,

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-9-0)';\nexport var dataTableScrollOffset = 'var(--_14flfjk1-3-9-0)';\nexport var loadingState = '_14flfjk2-3-9-0';"],
+  "sourcesContent": ["import './LoadingState.css';\nexport var dataTableHeaderHeight = 'var(--_14flfjk0-3-10-0)';\nexport var dataTableScrollOffset = 'var(--_14flfjk1-3-10-0)';\nexport var loadingState = '_14flfjk2-3-10-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,wBAAwB;AAC5B,IAAI,wBAAwB;AAC5B,IAAI,eAAe;",
   "names": []
 }

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

@@ -0,0 +1,25 @@
+._116rojq0-3-10-0 {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--dt-spacings-size-8, 8px);
+}
+._116rojq1-3-10-0 {
+  display: contents;
+}
+._116rojq2-3-10-0 {
+  flex-shrink: 0;
+  min-width: var(--dt-spacings-size-48, 48px);
+  max-width: 50%;
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--dt-colors-text-neutral-default, #2f2f4f);
+}
+._116rojq3-3-10-0 {
+  order: -1;
+}
+._116rojq4-3-10-0 {
+  order: 1;
+}

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

@@ -1,16 +1,22 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
 import { isEmpty, isNumber } from "lodash-es";
 import { useEffect, useMemo, useRef } from "react";
 import Spacings from "@dynatrace/strato-design-tokens/spacings";
+import {
+  format
+} from "@dynatrace-sdk/units";
+import * as styles from "./MeterBarChart.sty.js";
+import {
+  isFormatterOptions
+} from "../../../../charts/core/types/formatter.js";
 import { MultiMeterBarChart } from "../../../../charts/meter-bar/multi-meter-bar/MultiMeterBarChart.js";
 import { METER_BAR_SIZE } from "../../../../charts/meter-bar/shared/constants.js";
 import { MeterBarChart } from "../../../../charts/meter-bar/single-meter-bar/MeterBarChart.js";
 import { devLog } from "../../../../core/utils/logging.js";
 import { isDisplayColumnDefConfig } from "../../hooks/useTable/datatable-typeguards.js";
+import { isDatatableMeterBarColumnConfig } from "../ColumnTypes/column-types-types.js";
 const DEFAULT_MAX_VALUE = 100;
-function isDataTableMeterBarColumnConfig(config) {
-  return config !== null && config !== void 0 && typeof config === "object" && ("max" in config || "color" in config || "threshold" in config || "showTooltip" in config || "max" in config);
-}
 function isColumnDefWithAccessor(column) {
   return column !== null && column !== void 0 && typeof column === "object" && "accessor" in column;
 }
@@ -19,13 +25,25 @@ function isMultiMeterBarData(value) {
     (item) => typeof item === "object" && typeof item.name === "string" && typeof item.value === "number" && (item.color === void 0 || typeof item.color === "string")
   );
 }
+function formatMeterBarValue(value, formatter) {
+  if (!formatter) {
+    return String(value);
+  }
+  if (isFormatterOptions(formatter)) {
+    return format(value, formatter);
+  }
+  return formatter(value);
+}
 function MeterBarChartRenderer({
   value,
   column
 }) {
   const chartRef = useRef(null);
   let config = {};
-  if (column?.columnDef.meta && isDataTableMeterBarColumnConfig(column.columnDef.meta.config)) {
+  if (column?.columnDef.meta && isDatatableMeterBarColumnConfig(
+    column.columnDef.meta.config,
+    column.columnDef.columnType
+  )) {
     config = column.columnDef.meta.config;
   }
   const columnId = column.columnDef.id ?? "";
@@ -53,43 +71,48 @@ function MeterBarChartRenderer({
     document.addEventListener("pointerup", handler);
   } : void 0;
   if (typeof value === "number") {
-    return /* @__PURE__ */ jsx(
+    const showValue = config?.showValue ?? false;
+    const chart = /* @__PURE__ */ jsxs(
+      MeterBarChart,
+      {
+        value,
+        min: config?.min,
+        max: maxValue,
+        color: config?.color,
+        size: METER_BAR_SIZE.Size8,
+        width: "100%",
+        height: "auto",
+        style: { padding: `${Spacings.Size6} 0` },
+        formatter: config?.formatter,
+        ref: chartRef,
+        children: [
+          /* @__PURE__ */ jsx(MeterBarChart.Tooltip, { hidden: !config?.showTooltip }),
+          config?.thresholds?.map((threshold) => /* @__PURE__ */ jsx(
+            MeterBarChart.ThresholdIndicator,
+            {
+              name: threshold.name,
+              color: threshold.color,
+              value: threshold.value,
+              showIndicator: threshold.showIndicator
+            },
+            `threshold-${threshold.color}-${threshold.value}`
+          ))
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxs(
       "span",
       {
-        style: { display: "contents" },
+        className: clsx({
+          [styles.wrapperVariants.shown]: showValue !== false,
+          [styles.wrapperVariants.hidden]: showValue === false
+        }),
         onClick: registerUnpinOnPointerUp,
         role: "none",
-        children: /* @__PURE__ */ jsxs(
-          MeterBarChart,
-          {
-            value,
-            min: config?.min,
-            max: maxValue,
-            color: config?.color,
-            size: METER_BAR_SIZE.Size8,
-            width: "100%",
-            height: "auto",
-            style: {
-              pointerEvents: "auto",
-              padding: `${Spacings.Size6} 0`
-            },
-            formatter: config?.formatter,
-            ref: chartRef,
-            children: [
-              /* @__PURE__ */ jsx(MeterBarChart.Tooltip, { hidden: !config?.showTooltip }),
-              config?.thresholds?.map((threshold) => /* @__PURE__ */ jsx(
-                MeterBarChart.ThresholdIndicator,
-                {
-                  name: threshold.name,
-                  color: threshold.color,
-                  value: threshold.value,
-                  showIndicator: threshold.showIndicator
-                },
-                `threshold-${threshold.color}-${threshold.value}`
-              ))
-            ]
-          }
-        )
+        children: [
+          showValue !== false && /* @__PURE__ */ jsx("span", { className: styles.inlineValueVariants[showValue], children: formatMeterBarValue(value, config?.formatter) }),
+          chart
+        ]
       }
     );
   }
@@ -106,16 +129,13 @@ function MeterBarChartRenderer({
       children: /* @__PURE__ */ jsxs(
         MultiMeterBarChart,
         {
-          size: "size8",
+          size: METER_BAR_SIZE.Size8,
           min: config?.min,
           max: maxValue,
           colorPalette: config?.colorPalette || "categorical",
           width: "100%",
           height: "auto",
-          style: {
-            pointerEvents: "auto",
-            padding: `${Spacings.Size6} 0`
-          },
+          style: { padding: `${Spacings.Size6} 0` },
           formatter: config?.formatter,
           ref: chartRef,
           // only if this is multi meter data render segments
@@ -151,7 +171,7 @@ function getTotalMaxFromMeterbarChartData(data, columns) {
     for (const columnDef of meterbarColumns) {
       if (isColumnDefWithAccessor(columnDef)) {
         const { accessor, config, id: columnId } = columnDef;
-        const configuredMax = isDataTableMeterBarColumnConfig(config) ? config.max : void 0;
+        const configuredMax = isDatatableMeterBarColumnConfig(config, columnDef.columnType) ? config.max : void 0;
         const meterbarValue = row;
         const meterbarDataEntry = typeof accessor === "string" ? meterbarValue[accessor] : accessor(row);
         let totalValue = DEFAULT_MAX_VALUE;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/MeterBarChart/MeterBarChart.tsx"],
-  "sourcesContent": ["/* eslint-disable react-hooks/immutability */\nimport type {\n  CellData,\n  Column,\n  RowData,\n  TableFeature,\n  TableOptions,\n} from '@tanstack/react-table';\nimport { isEmpty, isNumber } from 'lodash-es';\nimport { useEffect, useMemo, useRef, type JSX } from 'react';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport type { MeterBarChartColumnTypeFeatureConstructors } from './meterbar-chart-types.js';\nimport { MultiMeterBarChart } from '../../../../charts/meter-bar/multi-meter-bar/MultiMeterBarChart.js';\nimport { METER_BAR_SIZE } from '../../../../charts/meter-bar/shared/constants.js';\nimport type { MeterBarChartElementRef } from '../../../../charts/meter-bar/shared/types/meter-bars.js';\nimport { MeterBarChart } from '../../../../charts/meter-bar/single-meter-bar/MeterBarChart.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { isDisplayColumnDefConfig } from '../../hooks/useTable/datatable-typeguards.js';\nimport type {\n  DataTableColumnDef,\n  DataTableDisplayColumnDef,\n  DataTableRowData,\n} from '../../public.api.js';\nimport type { DataTableMeterbarColumnConfig } from '../ColumnTypes/column-types-types.js';\nimport type { TDataTableFeatures } from '../types/features.types.js';\n\n/** Default max value for meterbar column. */\nconst DEFAULT_MAX_VALUE = 100;\n\n/**\n * Type guard 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 * Type guard function ensures that the defined column contains the 'accessor' property.\n * @internal\n */\nfunction isColumnDefWithAccessor<TData extends DataTableRowData, 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<\n  TData extends RowData,\n  TValue extends CellData = CellData,\n> = {\n  value: number | { name: string; value: number; color?: string }[];\n  column: Column<TDataTableFeatures, 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<\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>({\n  value,\n  column,\n}: Readonly<MeterBarChartRendererType<TData, TValue>>): JSX.Element {\n  const chartRef = useRef<MeterBarChartElementRef>(null);\n\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 = column.table.atoms.meterbarChartMaxValues?.get();\n\n  const maxValue = !isEmpty(maxValuesFromState)\n    ? maxValuesFromState[columnId]\n    : DEFAULT_MAX_VALUE;\n\n  const listenerRef = useRef<((e?: PointerEvent) => void) | null>(null);\n\n  useEffect(() => {\n    // clean possible leftover event on unmount\n    return () => {\n      listenerRef.current?.();\n    };\n  }, []);\n\n  const registerUnpinOnPointerUp = config?.showTooltip\n    ? () => {\n        if (listenerRef.current) {\n          return;\n        }\n        const handler = (event: PointerEvent) => {\n          if (\n            (event.target as HTMLElement).closest('[role=\"tooltip\"]') !== null\n          ) {\n            return;\n          }\n\n          chartRef.current?.unpinTooltip();\n          listenerRef.current?.();\n          listenerRef.current = null;\n        };\n        listenerRef.current = () =>\n          document.removeEventListener('pointerup', handler);\n        document.addEventListener('pointerup', handler);\n      }\n    : undefined;\n\n  // simple MeterBar\n  if (typeof value === 'number') {\n    return (\n      <span\n        style={{ display: 'contents' }}\n        onClick={registerUnpinOnPointerUp}\n        role=\"none\"\n      >\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          ref={chartRef}\n        >\n          <MeterBarChart.Tooltip hidden={!config?.showTooltip} />\n          {config?.thresholds?.map((threshold) => (\n            <MeterBarChart.ThresholdIndicator\n              key={`threshold-${threshold.color}-${threshold.value}`}\n              // DEPRECATION: [APPDEV-15843] BREAKING-CHANGE: Remove `name` from `thresholds`\n              // eslint-disable-next-line @typescript-eslint/no-deprecated\n              name={threshold.name}\n              color={threshold.color}\n              value={threshold.value}\n              showIndicator={threshold.showIndicator}\n            />\n          ))}\n        </MeterBarChart>\n      </span>\n    );\n  }\n\n  const isMultiMeterData = isMultiMeterBarData(value);\n  if (!isMultiMeterData) {\n    devLog('Invalid meter chart data.');\n  }\n\n  return (\n    <span\n      style={{ display: 'contents' }}\n      onClick={registerUnpinOnPointerUp}\n      role=\"none\"\n    >\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        ref={chartRef}\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        <MultiMeterBarChart.Tooltip\n          variant=\"shared\"\n          hidden={!config?.showTooltip}\n        />\n      </MultiMeterBarChart>\n    </span>\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      isDisplayColumnDefConfig<TData>(columnDef) &&\n      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<TDataTableFeatures, Exclude<TData, unknown>>,\n): void {\n  const meterbarChartMaxValues = useMemo(\n    () => getTotalMaxFromMeterbarChartData<TData>(props.data, props.columns),\n    [props.columns, props.data],\n  );\n\n  options.state = {\n    ...options.state,\n    meterbarChartMaxValues,\n  };\n}\n\nexport function constructMeterBarChartColumnTypeFeature(): TableFeature<MeterBarChartColumnTypeFeatureConstructors> {\n  return {\n    getInitialState: (initialState) => {\n      return {\n        meterbarChartMaxValues: null,\n        ...initialState,\n      };\n    },\n  };\n}\n\n/**\n * DataTableMeterBarChartColumnTypeFeature is the plugin that provides the loading state for the DataTable,\n * which can be used to display a loading indicator while the table's columns and/or data are being loaded.\n */\nexport const DataTableMeterBarChartColumnTypeFeature =\n  constructMeterBarChartColumnTypeFeature();\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable react-hooks/immutability */\nimport type {\n  CellData,\n  Column,\n  RowData,\n  TableFeature,\n  TableOptions,\n} from '@tanstack/react-table';\nimport clsx from 'clsx';\nimport { isEmpty, isNumber } from 'lodash-es';\nimport { useEffect, useMemo, useRef, type JSX } from 'react';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport {\n  type ConvertibleUnit,\n  format,\n  type FormatOptions,\n  type Unit,\n} from '@dynatrace-sdk/units';\n\nimport type { MeterBarChartColumnTypeFeatureConstructors } from './meterbar-chart-types.js';\nimport * as styles from './MeterBarChart.sty.js';\nimport {\n  isFormatterOptions,\n  type Formatter,\n} from '../../../../charts/core/types/formatter.js';\nimport { MultiMeterBarChart } from '../../../../charts/meter-bar/multi-meter-bar/MultiMeterBarChart.js';\nimport { METER_BAR_SIZE } from '../../../../charts/meter-bar/shared/constants.js';\nimport type { MeterBarChartElementRef } from '../../../../charts/meter-bar/shared/types/meter-bars.js';\nimport { MeterBarChart } from '../../../../charts/meter-bar/single-meter-bar/MeterBarChart.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { isDisplayColumnDefConfig } from '../../hooks/useTable/datatable-typeguards.js';\nimport type {\n  DataTableColumnDef,\n  DataTableDisplayColumnDef,\n  DataTableRowData,\n} from '../../public.api.js';\nimport { isDatatableMeterBarColumnConfig } from '../ColumnTypes/column-types-types.js';\nimport type { DataTableMeterbarColumnConfig } from '../ColumnTypes/column-types-types.js';\nimport type { TDataTableFeatures } from '../types/features.types.js';\n\n/** Default max value for meterbar column. */\nconst DEFAULT_MAX_VALUE = 100;\n\n/**\n * Type guard function ensures that the defined column contains the 'accessor' property.\n * @internal\n */\nfunction isColumnDefWithAccessor<TData extends DataTableRowData, 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<\n  TData extends RowData,\n  TValue extends CellData = CellData,\n> = {\n  value: number | { name: string; value: number; color?: string }[];\n  column: Column<TDataTableFeatures, 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 * Formats the value for the meterbar chart based on the provided formatter or format options.\n * @param value - The numeric value to be formatted.\n * @param formatter - Optional formatter function or format options to format the value.\n * @returns The formatted value as a string.\n * @internal\n */\nfunction formatMeterBarValue(\n  value: number,\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>,\n): string {\n  if (!formatter) {\n    return String(value);\n  }\n  if (isFormatterOptions(formatter)) {\n    return format(value, formatter);\n  }\n  return formatter(value);\n}\n\n/**\n * Intended for configuring and rendering the meterbar chart component.\n */\nexport function MeterBarChartRenderer<\n  TData extends RowData,\n  TValue extends CellData = CellData,\n>({\n  value,\n  column,\n}: Readonly<MeterBarChartRendererType<TData, TValue>>): JSX.Element {\n  const chartRef = useRef<MeterBarChartElementRef>(null);\n\n  let config: DataTableMeterbarColumnConfig = {};\n  if (\n    column?.columnDef.meta &&\n    isDatatableMeterBarColumnConfig(\n      column.columnDef.meta.config,\n      column.columnDef.columnType,\n    )\n  ) {\n    config = column.columnDef.meta.config;\n  }\n\n  const columnId = column.columnDef.id ?? '';\n\n  const maxValuesFromState = column.table.atoms.meterbarChartMaxValues?.get();\n\n  const maxValue = !isEmpty(maxValuesFromState)\n    ? maxValuesFromState[columnId]\n    : DEFAULT_MAX_VALUE;\n\n  const listenerRef = useRef<((e?: PointerEvent) => void) | null>(null);\n\n  useEffect(() => {\n    // clean possible leftover event on unmount\n    return () => {\n      listenerRef.current?.();\n    };\n  }, []);\n\n  const registerUnpinOnPointerUp = config?.showTooltip\n    ? () => {\n        if (listenerRef.current) {\n          return;\n        }\n        const handler = (event: PointerEvent) => {\n          if (\n            (event.target as HTMLElement).closest('[role=\"tooltip\"]') !== null\n          ) {\n            return;\n          }\n\n          chartRef.current?.unpinTooltip();\n          listenerRef.current?.();\n          listenerRef.current = null;\n        };\n        listenerRef.current = () =>\n          document.removeEventListener('pointerup', handler);\n        document.addEventListener('pointerup', handler);\n      }\n    : undefined;\n\n  // simple MeterBar\n  if (typeof value === 'number') {\n    const showValue = config?.showValue ?? false;\n\n    const chart = (\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        // Override the chart's default height: '100%'.\n        style={{ padding: `${Spacings.Size6} 0` }}\n        formatter={config?.formatter}\n        ref={chartRef}\n      >\n        <MeterBarChart.Tooltip hidden={!config?.showTooltip} />\n        {config?.thresholds?.map((threshold) => (\n          <MeterBarChart.ThresholdIndicator\n            key={`threshold-${threshold.color}-${threshold.value}`}\n            // DEPRECATION: [APPDEV-15843] BREAKING-CHANGE: Remove `name` from `thresholds`\n            // eslint-disable-next-line @typescript-eslint/no-deprecated\n            name={threshold.name}\n            color={threshold.color}\n            value={threshold.value}\n            showIndicator={threshold.showIndicator}\n          />\n        ))}\n      </MeterBarChart>\n    );\n\n    return (\n      <span\n        className={clsx({\n          [styles.wrapperVariants.shown]: showValue !== false,\n          [styles.wrapperVariants.hidden]: showValue === false,\n        })}\n        onClick={registerUnpinOnPointerUp}\n        role=\"none\"\n      >\n        {showValue !== false && (\n          <span className={styles.inlineValueVariants[showValue]}>\n            {formatMeterBarValue(value, config?.formatter)}\n          </span>\n        )}\n        {chart}\n      </span>\n    );\n  }\n\n  const isMultiMeterData = isMultiMeterBarData(value);\n  if (!isMultiMeterData) {\n    devLog('Invalid meter chart data.');\n  }\n\n  return (\n    <span\n      style={{ display: 'contents' }}\n      onClick={registerUnpinOnPointerUp}\n      role=\"none\"\n    >\n      <MultiMeterBarChart\n        size={METER_BAR_SIZE.Size8}\n        min={config?.min}\n        max={maxValue}\n        colorPalette={config?.colorPalette || 'categorical'}\n        width=\"100%\"\n        height=\"auto\"\n        // Override the chart's default height: '100%'.\n        style={{ padding: `${Spacings.Size6} 0` }}\n        formatter={config?.formatter}\n        ref={chartRef}\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        <MultiMeterBarChart.Tooltip\n          variant=\"shared\"\n          hidden={!config?.showTooltip}\n        />\n      </MultiMeterBarChart>\n    </span>\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      isDisplayColumnDefConfig<TData>(columnDef) &&\n      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, columnDef.columnType)\n            ? config.max\n            : 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<TDataTableFeatures, Exclude<TData, unknown>>,\n): void {\n  const meterbarChartMaxValues = useMemo(\n    () => getTotalMaxFromMeterbarChartData<TData>(props.data, props.columns),\n    [props.columns, props.data],\n  );\n\n  options.state = {\n    ...options.state,\n    meterbarChartMaxValues,\n  };\n}\n\nexport function constructMeterBarChartColumnTypeFeature(): TableFeature<MeterBarChartColumnTypeFeatureConstructors> {\n  return {\n    getInitialState: (initialState) => {\n      return {\n        meterbarChartMaxValues: null,\n        ...initialState,\n      };\n    },\n  };\n}\n\n/**\n * DataTableMeterBarChartColumnTypeFeature is the plugin that provides the loading state for the DataTable,\n * which can be used to display a loading indicator while the table's columns and/or data are being loaded.\n */\nexport const DataTableMeterBarChartColumnTypeFeature =\n  constructMeterBarChartColumnTypeFeature();\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -0,0 +1,8 @@
+import "./MeterBarChart.css";
+var inlineValueVariants = { left: "_116rojq3-3-10-0 _116rojq2-3-10-0", right: "_116rojq4-3-10-0 _116rojq2-3-10-0" };
+var wrapperVariants = { shown: "_116rojq0-3-10-0", hidden: "_116rojq1-3-10-0" };
+export {
+  inlineValueVariants,
+  wrapperVariants
+};
+//# sourceMappingURL=MeterBarChart.sty.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/tables/DataTable/features/MeterBarChart/MeterBarChart.css.ts"],
+  "sourcesContent": ["import './MeterBarChart.css';\nexport var inlineValueVariants = {left:'_116rojq3-3-10-0 _116rojq2-3-10-0',right:'_116rojq4-3-10-0 _116rojq2-3-10-0'};\nexport var wrapperVariants = {shown:'_116rojq0-3-10-0',hidden:'_116rojq1-3-10-0'};"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,sBAAsB,EAAC,MAAK,qCAAoC,OAAM,oCAAmC;AAC7G,IAAI,kBAAkB,EAAC,OAAM,oBAAmB,QAAO,mBAAkB;",
+  "names": []
+}

package/esm/tables/DataTable/features/Pagination/PaginationInternal.js

@@ -50,7 +50,7 @@ const PaginationNavigation = ({
           value: pageIndex,
           onChange: handlePageIndexSelect,
           "aria-label": intl.formatMessage(dataTableMessages.selectPage),
-          "data-dt-name": "PaginationPageIndex",
+          "data-dt-children-name": "PaginationPageIndex",
           children: /* @__PURE__ */ jsx(Select.Content, { children: pageCountArray.length === 0 ? /* @__PURE__ */ jsx(Select.Option, { id: 0, value: 0, children: 0 }, "pageIndex-0") : pageCountArray.map((pageIndexOption) => /* @__PURE__ */ jsx(
             Select.Option,
             {
@@ -74,7 +74,7 @@ const PaginationNavigation = ({
             dataTableMessages.paginationPrevPage
           ),
           variant: "default",
-          "data-dt-name": "PaginationPreviousPage",
+          "data-dt-children-name": "PaginationPreviousPage",
           children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(ChevronLeftSmallIcon, {}) })
         }
       ),
@@ -87,7 +87,7 @@ const PaginationNavigation = ({
             dataTableMessages.paginationNextPage
           ),
           variant: "default",
-          "data-dt-name": "PaginationNextPage",
+          "data-dt-children-name": "PaginationNextPage",
           children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(ChevronRightSmallIcon, {}) })
         }
       )
@@ -137,7 +137,7 @@ function DataTablePaginationInternal(props) {
               required: true,
               onChange: (newPageSize) => newPageSize !== null && onPageSizeChange?.(newPageSize),
               "aria-label": intl.formatMessage(dataTableMessages.selectPageSize),
-              "data-dt-name": "PaginationPageSize",
+              "data-dt-children-name": "PaginationPageSize",
               children: /* @__PURE__ */ jsx(Select.Content, { children: pageSizeOptions.map((pageSize2) => /* @__PURE__ */ jsx(
                 Select.Option,
                 {

package/esm/tables/DataTable/features/Pagination/PaginationInternal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/Pagination/PaginationInternal.tsx"],
-  "sourcesContent": ["import { type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Breakpoints from '@dynatrace/strato-design-tokens/breakpoints-js';\nimport {\n  ChevronLeftSmallIcon,\n  ChevronRightSmallIcon,\n} from '@dynatrace/strato-icons';\n\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { Select } from '../../../../forms/select/Select.js';\nimport type { SelectSingleValue } from '../../../../forms/select/types.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useBreakpoint } from '../../../../layouts/hooks/useBreakpoint.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../messages.js';\n\n/**\n * DataTable internal pagination component that is actually rendering the pagination.\n * @internal\n */\ninterface DataTablePaginationInternalProps extends DataTestId, StylingProps {\n  /**\n   * The element's unique identifier.\n   *  @see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).\n   */\n  id?: string;\n}\n\ninterface PaginationControlsProps {\n  /**\n   * Number of rows per page.\n   */\n  pageSize: number;\n  /**\n   *  Number that represents the number of available pages. Will be -1 for server-side pagination.\n   */\n  pageCount: number;\n  /**\n   * Current page index in a controlled scenario.\n   */\n  pageIndex: number;\n  /**\n   * Whether the \"Go to previous page\" button is disabled.\n   */\n  isPrevPageDisabled: boolean;\n  /**\n   * Whether the \"Go to next page\" button is disabled.\n   */\n  isNextPageDisabled: boolean;\n  /**\n   * Whether pagination is server-side controlled, derived from enablePreviousPage or enableNextPage pagination state flags\n   */\n  isServerSidePaginated: boolean;\n  /**\n   * Called when the page index changes. Provides the changed page index along with the underlying trigger.\n   */\n  onPageIndexChange: (pageIndex: number, trigger: 'user' | 'internal') => void;\n  /**\n   * The total number of rows.\n   * Will be used to determine the total number of pages to display the indicator \"Page X of Y\" for server-side pagination.\n   */\n  totalRowsCount?: number;\n}\n\n/**\n * Page Select and next/prev buttons\n */\nconst PaginationNavigation = ({\n  pageSize,\n  pageCount,\n  pageIndex,\n  isPrevPageDisabled,\n  isNextPageDisabled,\n  isServerSidePaginated,\n  totalRowsCount,\n  onPageIndexChange,\n}: PaginationControlsProps) => {\n  const pageIndexSelectId = useId();\n  const intl = useIntl();\n  const smallScreen = useBreakpoint(`(max-width: ${Breakpoints.Max.Mobile}px)`);\n  const totalPages =\n    isServerSidePaginated && totalRowsCount !== undefined\n      ? Math.ceil(totalRowsCount / pageSize)\n      : pageCount;\n  // An array of zero-based index integers corresponding to available pages in the table\n  const pageCountArray: number[] = Array.from(\n    { length: totalPages },\n    (_, i) => i,\n  );\n  const hasMultiplePages = totalPages > 1;\n  const shouldShowPageInfo =\n    !isServerSidePaginated || (isServerSidePaginated && totalPages !== -1);\n\n  const totalPagesCountText = hasMultiplePages\n    ? intl.formatMessage(dataTableMessages.paginationTotalPages, { totalPages })\n    : intl.formatMessage(dataTableMessages.paginationSinglePageInfo);\n\n  const handlePageIndexSelect = (newPageIndex: SelectSingleValue<number>) =>\n    newPageIndex !== null && onPageIndexChange(newPageIndex, 'user');\n\n  const handlePreviousPage = () => {\n    const prevPageIndex = Math.max(0, pageIndex - 1);\n    onPageIndexChange(prevPageIndex, 'user');\n  };\n\n  const handleNextPage = () => onPageIndexChange(pageIndex + 1, 'user');\n\n  return (\n    <Flex gap={16} justifySelf=\"flex-end\">\n      {shouldShowPageInfo && (\n        <Flex flexWrap=\"nowrap\" alignItems=\"center\">\n          <Text as=\"p\">\n            {intl.formatMessage(dataTableMessages.paginationPageSelection)}\n          </Text>\n          {hasMultiplePages && (\n            <Select\n              id={pageIndexSelectId}\n              value={pageIndex}\n              onChange={handlePageIndexSelect}\n              aria-label={intl.formatMessage(dataTableMessages.selectPage)}\n              data-dt-name=\"PaginationPageIndex\"\n            >\n              <Select.Content>\n                {pageCountArray.length === 0 ? (\n                  <Select.Option key=\"pageIndex-0\" id={0} value={0}>\n                    {0}\n                  </Select.Option>\n                ) : (\n                  pageCountArray.map((pageIndexOption) => (\n                    <Select.Option\n                      key={`pageIndex-${pageIndexOption}`}\n                      id={pageIndexOption}\n                      value={pageIndexOption}\n                    >\n                      {pageIndexOption + 1}\n                    </Select.Option>\n                  ))\n                )}\n              </Select.Content>\n            </Select>\n          )}\n          {(!hasMultiplePages || !smallScreen) && (\n            <Text as=\"span\" textStyle=\"base\" style={{ whiteSpace: 'nowrap' }}>\n              {totalPagesCountText}\n            </Text>\n          )}\n        </Flex>\n      )}\n      {(!smallScreen || isServerSidePaginated) && (\n        <Flex gap={2}>\n          <Button\n            onClick={handlePreviousPage}\n            disabled={isPrevPageDisabled}\n            aria-label={intl.formatMessage(\n              dataTableMessages.paginationPrevPage,\n            )}\n            variant=\"default\"\n            data-dt-name=\"PaginationPreviousPage\"\n          >\n            <Button.Prefix>\n              <ChevronLeftSmallIcon />\n            </Button.Prefix>\n          </Button>\n          <Button\n            onClick={handleNextPage}\n            disabled={isNextPageDisabled}\n            aria-label={intl.formatMessage(\n              dataTableMessages.paginationNextPage,\n            )}\n            variant=\"default\"\n            data-dt-name=\"PaginationNextPage\"\n          >\n            <Button.Prefix>\n              <ChevronRightSmallIcon />\n            </Button.Prefix>\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\n/**\n * Internal component that actually renders the pagination.\n * @internal\n */\nexport function DataTablePaginationInternal(\n  props: Readonly<DataTablePaginationInternalProps>,\n): JSX.Element {\n  const table = useDataTable();\n  const intl = useIntl();\n  const pageSizeSelectId = useId();\n  const paginationState = table.atoms.pagination?.get();\n  // Number of rows per page\n  const pageSize = paginationState.pageSize;\n  // handler that is called when the page size changes\n  const onPageSizeChange = table.setPageSize;\n  const pageSizeOptions = table.options.availablePaginationOptions ?? [];\n  // If there is only one entry in the pageSizeOptions, we do not render the select\n  const hasPageSizeOptions = pageSizeOptions.length > 1;\n  const { manualPagination } = table.options;\n  const { enablePreviousPage, enableNextPage } = paginationState;\n  const isServerSidePaginated =\n    enableNextPage !== undefined || enablePreviousPage !== undefined;\n  const isPrevPageDisabled = manualPagination\n    ? !enablePreviousPage\n    : !table.getCanPreviousPage();\n\n  const isNextPageDisabled = manualPagination\n    ? !enableNextPage\n    : !table.getCanNextPage();\n\n  const {\n    id,\n    'data-testid': dataTestId,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props;\n\n  return (\n    <Flex\n      id={id}\n      data-testid={dataTestId}\n      className={consumerClassName}\n      style={consumerStyle}\n      justifyContent={hasPageSizeOptions ? 'space-between' : 'flex-end'}\n      paddingTop={8}\n      role=\"navigation\"\n      flexWrap=\"wrap\"\n      {...remainingProps}\n    >\n      {hasPageSizeOptions && (\n        <Flex alignItems=\"center\">\n          <Select\n            id={pageSizeSelectId}\n            value={pageSize}\n            required\n            onChange={(newPageSize) =>\n              newPageSize !== null && onPageSizeChange?.(newPageSize)\n            }\n            aria-label={intl.formatMessage(dataTableMessages.selectPageSize)}\n            data-dt-name=\"PaginationPageSize\"\n          >\n            <Select.Content>\n              {pageSizeOptions.map((pageSize) => (\n                <Select.Option\n                  key={`${pageSize}`}\n                  id={pageSize}\n                  value={pageSize}\n                >\n                  {`${pageSize}`}\n                </Select.Option>\n              ))}\n            </Select.Content>\n          </Select>\n          <Text as=\"span\" style={{ whiteSpace: 'nowrap' }}>\n            {intl.formatMessage(dataTableMessages.paginationRowsPerPage)}\n          </Text>\n        </Flex>\n      )}\n\n      <PaginationNavigation\n        pageSize={pageSize}\n        pageCount={table.getPageCount()}\n        pageIndex={paginationState.pageIndex}\n        isPrevPageDisabled={isPrevPageDisabled}\n        isNextPageDisabled={isNextPageDisabled}\n        isServerSidePaginated={isServerSidePaginated}\n        totalRowsCount={paginationState.totalRowsCount}\n        onPageIndexChange={table.setPageIndex}\n      />\n    </Flex>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Breakpoints from '@dynatrace/strato-design-tokens/breakpoints-js';\nimport {\n  ChevronLeftSmallIcon,\n  ChevronRightSmallIcon,\n} from '@dynatrace/strato-icons';\n\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { Select } from '../../../../forms/select/Select.js';\nimport type { SelectSingleValue } from '../../../../forms/select/types.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useBreakpoint } from '../../../../layouts/hooks/useBreakpoint.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../messages.js';\n\n/**\n * DataTable internal pagination component that is actually rendering the pagination.\n * @internal\n */\ninterface DataTablePaginationInternalProps extends DataTestId, StylingProps {\n  /**\n   * The element's unique identifier.\n   *  @see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).\n   */\n  id?: string;\n}\n\ninterface PaginationControlsProps {\n  /**\n   * Number of rows per page.\n   */\n  pageSize: number;\n  /**\n   *  Number that represents the number of available pages. Will be -1 for server-side pagination.\n   */\n  pageCount: number;\n  /**\n   * Current page index in a controlled scenario.\n   */\n  pageIndex: number;\n  /**\n   * Whether the \"Go to previous page\" button is disabled.\n   */\n  isPrevPageDisabled: boolean;\n  /**\n   * Whether the \"Go to next page\" button is disabled.\n   */\n  isNextPageDisabled: boolean;\n  /**\n   * Whether pagination is server-side controlled, derived from enablePreviousPage or enableNextPage pagination state flags\n   */\n  isServerSidePaginated: boolean;\n  /**\n   * Called when the page index changes. Provides the changed page index along with the underlying trigger.\n   */\n  onPageIndexChange: (pageIndex: number, trigger: 'user' | 'internal') => void;\n  /**\n   * The total number of rows.\n   * Will be used to determine the total number of pages to display the indicator \"Page X of Y\" for server-side pagination.\n   */\n  totalRowsCount?: number;\n}\n\n/**\n * Page Select and next/prev buttons\n */\nconst PaginationNavigation = ({\n  pageSize,\n  pageCount,\n  pageIndex,\n  isPrevPageDisabled,\n  isNextPageDisabled,\n  isServerSidePaginated,\n  totalRowsCount,\n  onPageIndexChange,\n}: PaginationControlsProps) => {\n  const pageIndexSelectId = useId();\n  const intl = useIntl();\n  const smallScreen = useBreakpoint(`(max-width: ${Breakpoints.Max.Mobile}px)`);\n  const totalPages =\n    isServerSidePaginated && totalRowsCount !== undefined\n      ? Math.ceil(totalRowsCount / pageSize)\n      : pageCount;\n  // An array of zero-based index integers corresponding to available pages in the table\n  const pageCountArray: number[] = Array.from(\n    { length: totalPages },\n    (_, i) => i,\n  );\n  const hasMultiplePages = totalPages > 1;\n  const shouldShowPageInfo =\n    !isServerSidePaginated || (isServerSidePaginated && totalPages !== -1);\n\n  const totalPagesCountText = hasMultiplePages\n    ? intl.formatMessage(dataTableMessages.paginationTotalPages, { totalPages })\n    : intl.formatMessage(dataTableMessages.paginationSinglePageInfo);\n\n  const handlePageIndexSelect = (newPageIndex: SelectSingleValue<number>) =>\n    newPageIndex !== null && onPageIndexChange(newPageIndex, 'user');\n\n  const handlePreviousPage = () => {\n    const prevPageIndex = Math.max(0, pageIndex - 1);\n    onPageIndexChange(prevPageIndex, 'user');\n  };\n\n  const handleNextPage = () => onPageIndexChange(pageIndex + 1, 'user');\n\n  return (\n    <Flex gap={16} justifySelf=\"flex-end\">\n      {shouldShowPageInfo && (\n        <Flex flexWrap=\"nowrap\" alignItems=\"center\">\n          <Text as=\"p\">\n            {intl.formatMessage(dataTableMessages.paginationPageSelection)}\n          </Text>\n          {hasMultiplePages && (\n            <Select\n              id={pageIndexSelectId}\n              value={pageIndex}\n              onChange={handlePageIndexSelect}\n              aria-label={intl.formatMessage(dataTableMessages.selectPage)}\n              data-dt-children-name=\"PaginationPageIndex\"\n            >\n              <Select.Content>\n                {pageCountArray.length === 0 ? (\n                  <Select.Option key=\"pageIndex-0\" id={0} value={0}>\n                    {0}\n                  </Select.Option>\n                ) : (\n                  pageCountArray.map((pageIndexOption) => (\n                    <Select.Option\n                      key={`pageIndex-${pageIndexOption}`}\n                      id={pageIndexOption}\n                      value={pageIndexOption}\n                    >\n                      {pageIndexOption + 1}\n                    </Select.Option>\n                  ))\n                )}\n              </Select.Content>\n            </Select>\n          )}\n          {(!hasMultiplePages || !smallScreen) && (\n            <Text as=\"span\" textStyle=\"base\" style={{ whiteSpace: 'nowrap' }}>\n              {totalPagesCountText}\n            </Text>\n          )}\n        </Flex>\n      )}\n      {(!smallScreen || isServerSidePaginated) && (\n        <Flex gap={2}>\n          <Button\n            onClick={handlePreviousPage}\n            disabled={isPrevPageDisabled}\n            aria-label={intl.formatMessage(\n              dataTableMessages.paginationPrevPage,\n            )}\n            variant=\"default\"\n            data-dt-children-name=\"PaginationPreviousPage\"\n          >\n            <Button.Prefix>\n              <ChevronLeftSmallIcon />\n            </Button.Prefix>\n          </Button>\n          <Button\n            onClick={handleNextPage}\n            disabled={isNextPageDisabled}\n            aria-label={intl.formatMessage(\n              dataTableMessages.paginationNextPage,\n            )}\n            variant=\"default\"\n            data-dt-children-name=\"PaginationNextPage\"\n          >\n            <Button.Prefix>\n              <ChevronRightSmallIcon />\n            </Button.Prefix>\n          </Button>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n\n/**\n * Internal component that actually renders the pagination.\n * @internal\n */\nexport function DataTablePaginationInternal(\n  props: Readonly<DataTablePaginationInternalProps>,\n): JSX.Element {\n  const table = useDataTable();\n  const intl = useIntl();\n  const pageSizeSelectId = useId();\n  const paginationState = table.atoms.pagination?.get();\n  // Number of rows per page\n  const pageSize = paginationState.pageSize;\n  // handler that is called when the page size changes\n  const onPageSizeChange = table.setPageSize;\n  const pageSizeOptions = table.options.availablePaginationOptions ?? [];\n  // If there is only one entry in the pageSizeOptions, we do not render the select\n  const hasPageSizeOptions = pageSizeOptions.length > 1;\n  const { manualPagination } = table.options;\n  const { enablePreviousPage, enableNextPage } = paginationState;\n  const isServerSidePaginated =\n    enableNextPage !== undefined || enablePreviousPage !== undefined;\n  const isPrevPageDisabled = manualPagination\n    ? !enablePreviousPage\n    : !table.getCanPreviousPage();\n\n  const isNextPageDisabled = manualPagination\n    ? !enableNextPage\n    : !table.getCanNextPage();\n\n  const {\n    id,\n    'data-testid': dataTestId,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  } = props;\n\n  return (\n    <Flex\n      id={id}\n      data-testid={dataTestId}\n      className={consumerClassName}\n      style={consumerStyle}\n      justifyContent={hasPageSizeOptions ? 'space-between' : 'flex-end'}\n      paddingTop={8}\n      role=\"navigation\"\n      flexWrap=\"wrap\"\n      {...remainingProps}\n    >\n      {hasPageSizeOptions && (\n        <Flex alignItems=\"center\">\n          <Select\n            id={pageSizeSelectId}\n            value={pageSize}\n            required\n            onChange={(newPageSize) =>\n              newPageSize !== null && onPageSizeChange?.(newPageSize)\n            }\n            aria-label={intl.formatMessage(dataTableMessages.selectPageSize)}\n            data-dt-children-name=\"PaginationPageSize\"\n          >\n            <Select.Content>\n              {pageSizeOptions.map((pageSize) => (\n                <Select.Option\n                  key={`${pageSize}`}\n                  id={pageSize}\n                  value={pageSize}\n                >\n                  {`${pageSize}`}\n                </Select.Option>\n              ))}\n            </Select.Content>\n          </Select>\n          <Text as=\"span\" style={{ whiteSpace: 'nowrap' }}>\n            {intl.formatMessage(dataTableMessages.paginationRowsPerPage)}\n          </Text>\n        </Flex>\n      )}\n\n      <PaginationNavigation\n        pageSize={pageSize}\n        pageCount={table.getPageCount()}\n        pageIndex={paginationState.pageIndex}\n        isPrevPageDisabled={isPrevPageDisabled}\n        isNextPageDisabled={isNextPageDisabled}\n        isServerSidePaginated={isServerSidePaginated}\n        totalRowsCount={paginationState.totalRowsCount}\n        onPageIndexChange={table.setPageIndex}\n      />\n    </Flex>\n  );\n}\n"],
+  "mappings": "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",
   "names": ["pageSize"]
 }