@dynatrace/strato-components 3.2.0 → 3.3.0

package/esm/charts/meter-bar/shared/components/meter-bar-layout/MeterBarLayout.js

@@ -1,6 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { forwardRef, Fragment, useRef } from "react";
+import {
+  forwardRef,
+  Fragment,
+  useImperativeHandle,
+  useRef
+} from "react";
 import { MeterBarLayoutTopRightSlot } from "./components/MeterBarLayoutTopRightSlot.js";
 import { useComputedSegmentSize } from "./hooks/useComputedSegmentSize.js";
 import {
@@ -16,6 +21,7 @@ import { useBehavioralTrackingProps } from "../../../../../core/hooks/useBehavio
 import { useMergeRefs } from "../../../../../core/hooks/useMergeRefs.js";
 import { Flex } from "../../../../../layouts/flex/Flex.js";
 import { Grid } from "../../../../../layouts/grid/Grid.js";
+import { useTooltipImperativeHandle } from "../../../../core/components/overlay-tooltip/hooks/useTooltipImperativeHandle.js";
 import { coerceSizeValue } from "../../../../core/utils/coerceSizeValue.js";
 import {
   DEFAULT_HEIGHT,
@@ -45,7 +51,9 @@ const MeterBarLayoutRoot = forwardRef((props, forwardedRef) => {
     "data-dtrum-allow": dataDtrumAllow,
     "data-testid": dataTestId,
     "data-dt-component": dataDtComponent,
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    userRef,
+    consumerConfig = {}
   } = props;
   const [behavioralTrackingProps] = useBehavioralTrackingProps(props);
   const { label, min, max, value, chart, icon, legend, providers } = extractSlots(children);
@@ -54,6 +62,14 @@ const MeterBarLayoutRoot = forwardRef((props, forwardedRef) => {
   const containerRef = useRef(null);
   const toolbarRef = useRef(null);
   const ref = useMergeRefs([containerRef, forwardedRef]);
+  const tooltipActions = useTooltipImperativeHandle();
+  useImperativeHandle(userRef, () => {
+    return {
+      element: containerRef.current,
+      getConfig: () => JSON.stringify(consumerConfig),
+      ...tooltipActions
+    };
+  });
   const hasAutoSize = size === METER_BAR_SIZE.Auto;
   const gridTemplateRows = hasAutoSize ? "auto 1fr auto auto" : "auto";
   const {

package/esm/charts/meter-bar/shared/components/meter-bar-layout/MeterBarLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/shared/components/meter-bar-layout/MeterBarLayout.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, Fragment, type PropsWithChildren, useRef } from 'react';\n\nimport { MeterBarLayoutTopRightSlot } from './components/MeterBarLayoutTopRightSlot.js';\nimport { useComputedSegmentSize } from './hooks/useComputedSegmentSize.js';\nimport {\n  chartContainer,\n  container,\n  containerWrapper,\n  labelContainer,\n  legendContainer,\n  maxContainer,\n  minContainer,\n} from './MeterBarLayout.sty.js';\nimport { useBehavioralTrackingProps } from '../../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../../../../core/hooks/useMergeRefs.js';\nimport type { BehaviorTrackingProps } from '../../../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../../../core/types/data-props.js';\nimport { MaskingProps } from '../../../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../../../core/types/styling-props.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { Grid } from '../../../../../layouts/grid/Grid.js';\nimport type { AriaLabel } from '../../../../core/types/aria-label.js';\nimport type { ComponentWithName } from '../../../../core/types/component-with-name.js';\nimport { coerceSizeValue } from '../../../../core/utils/coerceSizeValue.js';\nimport {\n  DEFAULT_HEIGHT,\n  DEFAULT_WIDTH,\n  METER_BAR_SIZE,\n} from '../../constants.js';\nimport { useMeterBarToolbarConfig } from '../../context/MeterBarToolbarConfig.context.js';\nimport { MeterBarSize } from '../../types/meter-bars.js';\nimport { MeterBarSizeProviders } from '../meter-bar-providers/MeterBarSizeProviders.js';\nimport { Chart } from './slots/Chart.js';\nimport { Icon } from './slots/Icon/Icon.js';\nimport { Label } from './slots/Label/Label.js';\nimport { Legend } from './slots/Legend.js';\nimport { Max } from './slots/Max/Max.js';\nimport { Min } from './slots/Min/Min.js';\nimport { Providers } from './slots/Providers.js';\nimport { Value } from './slots/Value/Value.js';\nimport { extractSlots } from './utils/extract-slots.js';\n\nexport interface MeterBarLayoutProps\n  extends StylingProps,\n    MaskingProps,\n    DataTestId,\n    AriaLabel,\n    BehaviorTrackingProps {\n  /**\n   * The size that applies to the value, icon, and label.\n   * @defaultvalue 'size16'\n   */\n  size: MeterBarSize;\n  /**\n   * The chart width. A valid CSS width is expected.\n   * @defaultValue 100%\n   */\n  width?: number | string;\n  /**\n   * The chart height. A valid CSS height is expected.\n   * @defaultValue 300px\n   */\n  height?: number | string;\n  'data-dt-component': string;\n}\n\n/**\n * Component responsible for defining the layout of the meter bars.\n * The layout is divided in the labels area (icon, label and value), chart area and legend area.\n */\nexport const MeterBarLayoutRoot = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<MeterBarLayoutProps>\n>((props, forwardedRef) => {\n  const {\n    width,\n    height,\n    size,\n    children,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId,\n    'data-dt-component': dataDtComponent,\n    'aria-label': ariaLabel,\n  } = props;\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n  const { label, min, max, value, chart, icon, legend, providers } =\n    extractSlots(children);\n  const toolbarConfig = useMeterBarToolbarConfig();\n  const isToolbarEnabled =\n    !toolbarConfig?.hidden && !!toolbarConfig?.intents?.length;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const toolbarRef = useRef<HTMLDivElement>(null);\n  const ref = useMergeRefs([containerRef, forwardedRef]);\n\n  const hasAutoSize = size === METER_BAR_SIZE.Auto;\n  const gridTemplateRows = hasAutoSize ? 'auto 1fr auto auto' : 'auto';\n\n  const {\n    segmentSize: { height: segmentHeight, width: segmentWidth },\n    labelRef,\n    minLabelRef,\n    maxLabelRef,\n    plotAreaRef,\n    legendRef,\n  } = useComputedSegmentSize();\n\n  const modifyHoverState = (hoverState: boolean) => {\n    if (isToolbarEnabled) {\n      if (hoverState) {\n        toolbarRef.current?.showPopover();\n      } else {\n        toolbarRef.current?.hidePopover();\n      }\n    }\n  };\n  const chartWidth = coerceSizeValue(width) ?? DEFAULT_WIDTH;\n  const chartHeight = coerceSizeValue(height) ?? DEFAULT_HEIGHT;\n  const ExternalProviders = providers ? providers.Component : Fragment;\n  const externalProvidersProps = providers ? providers.props : {};\n\n  return (\n    <div\n      {...behavioralTrackingProps}\n      className={clsx(className, containerWrapper)}\n      style={{\n        width: chartWidth,\n        height: chartHeight,\n        ...style,\n      }}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-dt-component={dataDtComponent}\n      ref={ref}\n    >\n      <Grid\n        className={container({ autoSize: hasAutoSize })}\n        gridTemplateAreas=\"\n            'label label label value'\n            'chart chart chart chart'\n            'min min max max'\n            'legend legend legend legend'\"\n        gridTemplateColumns=\"25% 25% 25% 25%\"\n        gridTemplateRows={gridTemplateRows}\n        rowGap={0}\n        columnGap={0}\n        aria-label={ariaLabel}\n        role=\"img\"\n        onMouseEnter={() => modifyHoverState(true)}\n        onMouseLeave={() => modifyHoverState(false)}\n        onFocus={() => modifyHoverState(true)}\n        onBlur={() => modifyHoverState(false)}\n      >\n        <MeterBarSizeProviders\n          size={size}\n          chartWidth={containerRef.current?.clientWidth ?? 0}\n          chartHeight={containerRef.current?.clientHeight ?? 0}\n          segmentWidth={segmentWidth}\n          segmentHeight={segmentHeight}\n          data-dtrum-allow={dataDtrumAllow}\n          data-dtrum-mask={dataDtrumMask}\n        >\n          <ExternalProviders {...externalProvidersProps}>\n            {(label || icon) && (\n              <Flex\n                ref={labelRef}\n                alignItems=\"center\"\n                alignSelf=\"center\"\n                className={labelContainer}\n              >\n                {icon}\n                {label}\n              </Flex>\n            )}\n            {(value || isToolbarEnabled) && (\n              <MeterBarLayoutTopRightSlot\n                value={value}\n                isToolbarEnabled={isToolbarEnabled}\n                ref={toolbarRef}\n              />\n            )}\n            <div className={chartContainer} ref={plotAreaRef}>\n              {chart}\n            </div>\n            {min && (\n              <div ref={minLabelRef} className={minContainer}>\n                {min}\n              </div>\n            )}\n            {max && (\n              <div ref={maxLabelRef} className={maxContainer}>\n                {max}\n              </div>\n            )}\n            {legend && (\n              <div ref={legendRef} className={legendContainer}>\n                {legend}\n              </div>\n            )}\n          </ExternalProviders>\n        </MeterBarSizeProviders>\n      </Grid>\n    </div>\n  );\n});\n\n(\n  MeterBarLayoutRoot as ComponentWithName<typeof MeterBarLayoutRoot>\n).displayName = 'MeterBarLayoutRoot';\n\n/** Slot component for meter bar */\nexport const MeterBarLayout = Object.assign(MeterBarLayoutRoot, {\n  Label,\n  Min,\n  Max,\n  Chart,\n  Value,\n  Icon,\n  Providers,\n  Legend,\n});\n"],
-  "mappings": "AAwKc,SAWA,KAXA;AAxKd,OAAO,UAAU;AACjB,SAAS,YAAY,UAAkC,cAAc;AAErE,SAAS,kCAAkC;AAC3C,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAK7B,SAAS,YAAY;AACrB,SAAS,YAAY;AAGrB,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AAEzC,SAAS,6BAA6B;AACtC,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,WAAW;AACpB,SAAS,WAAW;AACpB,SAAS,iBAAiB;AAC1B,SAAS,aAAa;AACtB,SAAS,oBAAoB;AA8BtB,MAAM,qBAAqB,WAGhC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,eAAe;AAAA,IACf,qBAAqB;AAAA,IACrB,cAAc;AAAA,EAChB,IAAI;AACJ,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAClE,QAAM,EAAE,OAAO,KAAK,KAAK,OAAO,OAAO,MAAM,QAAQ,UAAU,IAC7D,aAAa,QAAQ;AACvB,QAAM,gBAAgB,yBAAyB;AAC/C,QAAM,mBACJ,CAAC,eAAe,UAAU,CAAC,CAAC,eAAe,SAAS;AACtD,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,MAAM,aAAa,CAAC,cAAc,YAAY,CAAC;AAErD,QAAM,cAAc,SAAS,eAAe;AAC5C,QAAM,mBAAmB,cAAc,uBAAuB;AAE9D,QAAM;AAAA,IACJ,aAAa,EAAE,QAAQ,eAAe,OAAO,aAAa;AAAA,IAC1D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,uBAAuB;AAE3B,QAAM,mBAAmB,CAAC,eAAwB;AAChD,QAAI,kBAAkB;AACpB,UAAI,YAAY;AACd,mBAAW,SAAS,YAAY;AAAA,MAClC,OAAO;AACL,mBAAW,SAAS,YAAY;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AACA,QAAM,aAAa,gBAAgB,KAAK,KAAK;AAC7C,QAAM,cAAc,gBAAgB,MAAM,KAAK;AAC/C,QAAM,oBAAoB,YAAY,UAAU,YAAY;AAC5D,QAAM,yBAAyB,YAAY,UAAU,QAAQ,CAAC;AAE9D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,KAAK,WAAW,gBAAgB;AAAA,MAC3C,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,GAAG;AAAA,MACL;AAAA,MACA,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,qBAAmB;AAAA,MACnB;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,UAAU,EAAE,UAAU,YAAY,CAAC;AAAA,UAC9C,mBAAkB;AAAA,UAKlB,qBAAoB;AAAA,UACpB;AAAA,UACA,QAAQ;AAAA,UACR,WAAW;AAAA,UACX,cAAY;AAAA,UACZ,MAAK;AAAA,UACL,cAAc,MAAM,iBAAiB,IAAI;AAAA,UACzC,cAAc,MAAM,iBAAiB,KAAK;AAAA,UAC1C,SAAS,MAAM,iBAAiB,IAAI;AAAA,UACpC,QAAQ,MAAM,iBAAiB,KAAK;AAAA,UAEpC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,YAAY,aAAa,SAAS,eAAe;AAAA,cACjD,aAAa,aAAa,SAAS,gBAAgB;AAAA,cACnD;AAAA,cACA;AAAA,cACA,oBAAkB;AAAA,cAClB,mBAAiB;AAAA,cAEjB,+BAAC,qBAAmB,GAAG,wBACnB;AAAA,0BAAS,SACT;AAAA,kBAAC;AAAA;AAAA,oBACC,KAAK;AAAA,oBACL,YAAW;AAAA,oBACX,WAAU;AAAA,oBACV,WAAW;AAAA,oBAEV;AAAA;AAAA,sBACA;AAAA;AAAA;AAAA,gBACH;AAAA,iBAEA,SAAS,qBACT;AAAA,kBAAC;AAAA;AAAA,oBACC;AAAA,oBACA;AAAA,oBACA,KAAK;AAAA;AAAA,gBACP;AAAA,gBAEF,oBAAC,SAAI,WAAW,gBAAgB,KAAK,aAClC,iBACH;AAAA,gBACC,OACC,oBAAC,SAAI,KAAK,aAAa,WAAW,cAC/B,eACH;AAAA,gBAED,OACC,oBAAC,SAAI,KAAK,aAAa,WAAW,cAC/B,eACH;AAAA,gBAED,UACC,oBAAC,SAAI,KAAK,WAAW,WAAW,iBAC7B,kBACH;AAAA,iBAEJ;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAGC,mBACA,cAAc;AAGT,MAAM,iBAAiB,OAAO,OAAO,oBAAoB;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  Fragment,\n  type PropsWithChildren,\n  type Ref,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { MeterBarLayoutTopRightSlot } from './components/MeterBarLayoutTopRightSlot.js';\nimport { useComputedSegmentSize } from './hooks/useComputedSegmentSize.js';\nimport {\n  chartContainer,\n  container,\n  containerWrapper,\n  labelContainer,\n  legendContainer,\n  maxContainer,\n  minContainer,\n} from './MeterBarLayout.sty.js';\nimport { useBehavioralTrackingProps } from '../../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../../../../core/hooks/useMergeRefs.js';\nimport type { BehaviorTrackingProps } from '../../../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../../../core/types/data-props.js';\nimport { MaskingProps } from '../../../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../../../core/types/styling-props.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { Grid } from '../../../../../layouts/grid/Grid.js';\nimport { useTooltipImperativeHandle } from '../../../../core/components/overlay-tooltip/hooks/useTooltipImperativeHandle.js';\nimport type { AriaLabel } from '../../../../core/types/aria-label.js';\nimport type { ComponentWithName } from '../../../../core/types/component-with-name.js';\nimport { coerceSizeValue } from '../../../../core/utils/coerceSizeValue.js';\nimport {\n  DEFAULT_HEIGHT,\n  DEFAULT_WIDTH,\n  METER_BAR_SIZE,\n} from '../../constants.js';\nimport { useMeterBarToolbarConfig } from '../../context/MeterBarToolbarConfig.context.js';\nimport {\n  MeterBarChartElementRef,\n  MeterBarSize,\n} from '../../types/meter-bars.js';\nimport { MeterBarSizeProviders } from '../meter-bar-providers/MeterBarSizeProviders.js';\nimport { Chart } from './slots/Chart.js';\nimport { Icon } from './slots/Icon/Icon.js';\nimport { Label } from './slots/Label/Label.js';\nimport { Legend } from './slots/Legend.js';\nimport { Max } from './slots/Max/Max.js';\nimport { Min } from './slots/Min/Min.js';\nimport { Providers } from './slots/Providers.js';\nimport { Value } from './slots/Value/Value.js';\nimport { extractSlots } from './utils/extract-slots.js';\nimport { MultiMeterBarChartConsumerConfig } from '../../../multi-meter-bar/types/multi-meter-bar-chart-config.js';\nimport { MeterBarChartConsumerConfig } from '../../../single-meter-bar/types/meter-bar-chart-config.js';\n\nexport interface MeterBarLayoutProps\n  extends StylingProps,\n    MaskingProps,\n    DataTestId,\n    AriaLabel,\n    BehaviorTrackingProps {\n  /**\n   * The size that applies to the value, icon, and label.\n   * @defaultvalue 'size16'\n   */\n  size: MeterBarSize;\n  /**\n   * The chart width. A valid CSS width is expected.\n   * @defaultValue 100%\n   */\n  width?: number | string;\n  /**\n   * The chart height. A valid CSS height is expected.\n   * @defaultValue 300px\n   */\n  height?: number | string;\n  /**\n   * The component name used for internal tracking purposes.\n   */\n  'data-dt-component': string;\n  /**\n   * A ref object that exposes imperative methods for the meter bar chart element.\n   */\n  userRef?: Ref<MeterBarChartElementRef>;\n  /**\n   * Configuration passed from the consumer chart component (e.g. MeterBarChart or MultiMeterBarChart).\n   */\n  consumerConfig?:\n    | MeterBarChartConsumerConfig\n    | MultiMeterBarChartConsumerConfig;\n}\n\n/**\n * Component responsible for defining the layout of the meter bars.\n * The layout is divided in the labels area (icon, label and value), chart area and legend area.\n */\nexport const MeterBarLayoutRoot = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<MeterBarLayoutProps>\n>((props, forwardedRef) => {\n  const {\n    width,\n    height,\n    size,\n    children,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId,\n    'data-dt-component': dataDtComponent,\n    'aria-label': ariaLabel,\n    userRef,\n    consumerConfig = {},\n  } = props;\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n  const { label, min, max, value, chart, icon, legend, providers } =\n    extractSlots(children);\n  const toolbarConfig = useMeterBarToolbarConfig();\n  const isToolbarEnabled =\n    !toolbarConfig?.hidden && !!toolbarConfig?.intents?.length;\n  const containerRef = useRef<HTMLDivElement>(null);\n  const toolbarRef = useRef<HTMLDivElement>(null);\n  const ref = useMergeRefs([containerRef, forwardedRef]);\n  const tooltipActions = useTooltipImperativeHandle();\n\n  useImperativeHandle(userRef, () => {\n    return {\n      element: containerRef.current,\n      getConfig: () => JSON.stringify(consumerConfig),\n      ...tooltipActions,\n    };\n  });\n\n  const hasAutoSize = size === METER_BAR_SIZE.Auto;\n  const gridTemplateRows = hasAutoSize ? 'auto 1fr auto auto' : 'auto';\n\n  const {\n    segmentSize: { height: segmentHeight, width: segmentWidth },\n    labelRef,\n    minLabelRef,\n    maxLabelRef,\n    plotAreaRef,\n    legendRef,\n  } = useComputedSegmentSize();\n\n  const modifyHoverState = (hoverState: boolean) => {\n    if (isToolbarEnabled) {\n      if (hoverState) {\n        toolbarRef.current?.showPopover();\n      } else {\n        toolbarRef.current?.hidePopover();\n      }\n    }\n  };\n  const chartWidth = coerceSizeValue(width) ?? DEFAULT_WIDTH;\n  const chartHeight = coerceSizeValue(height) ?? DEFAULT_HEIGHT;\n  const ExternalProviders = providers ? providers.Component : Fragment;\n  const externalProvidersProps = providers ? providers.props : {};\n\n  return (\n    <div\n      {...behavioralTrackingProps}\n      className={clsx(className, containerWrapper)}\n      style={{\n        width: chartWidth,\n        height: chartHeight,\n        ...style,\n      }}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-dt-component={dataDtComponent}\n      ref={ref}\n    >\n      <Grid\n        className={container({ autoSize: hasAutoSize })}\n        gridTemplateAreas=\"\n            'label label label value'\n            'chart chart chart chart'\n            'min min max max'\n            'legend legend legend legend'\"\n        gridTemplateColumns=\"25% 25% 25% 25%\"\n        gridTemplateRows={gridTemplateRows}\n        rowGap={0}\n        columnGap={0}\n        aria-label={ariaLabel}\n        role=\"img\"\n        onMouseEnter={() => modifyHoverState(true)}\n        onMouseLeave={() => modifyHoverState(false)}\n        onFocus={() => modifyHoverState(true)}\n        onBlur={() => modifyHoverState(false)}\n      >\n        <MeterBarSizeProviders\n          size={size}\n          // eslint-disable-next-line react-hooks/refs\n          chartWidth={containerRef.current?.clientWidth ?? 0}\n          // eslint-disable-next-line react-hooks/refs\n          chartHeight={containerRef.current?.clientHeight ?? 0}\n          segmentWidth={segmentWidth}\n          segmentHeight={segmentHeight}\n          data-dtrum-allow={dataDtrumAllow}\n          data-dtrum-mask={dataDtrumMask}\n        >\n          <ExternalProviders {...externalProvidersProps}>\n            {(label || icon) && (\n              <Flex\n                ref={labelRef}\n                alignItems=\"center\"\n                alignSelf=\"center\"\n                className={labelContainer}\n              >\n                {icon}\n                {label}\n              </Flex>\n            )}\n            {(value || isToolbarEnabled) && (\n              <MeterBarLayoutTopRightSlot\n                value={value}\n                isToolbarEnabled={isToolbarEnabled}\n                ref={toolbarRef}\n              />\n            )}\n            <div className={chartContainer} ref={plotAreaRef}>\n              {chart}\n            </div>\n            {min && (\n              <div ref={minLabelRef} className={minContainer}>\n                {min}\n              </div>\n            )}\n            {max && (\n              <div ref={maxLabelRef} className={maxContainer}>\n                {max}\n              </div>\n            )}\n            {legend && (\n              <div ref={legendRef} className={legendContainer}>\n                {legend}\n              </div>\n            )}\n          </ExternalProviders>\n        </MeterBarSizeProviders>\n      </Grid>\n    </div>\n  );\n});\n\n(\n  MeterBarLayoutRoot as ComponentWithName<typeof MeterBarLayoutRoot>\n).displayName = 'MeterBarLayoutRoot';\n\n/** Slot component for meter bar */\nexport const MeterBarLayout = Object.assign(MeterBarLayoutRoot, {\n  Label,\n  Min,\n  Max,\n  Chart,\n  Value,\n  Icon,\n  Providers,\n  Legend,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/meter-bar/shared/components/meter-bar-layout/MeterBarLayout.sty.js

@@ -1,15 +1,15 @@
 import "./MeterBarLayout.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var chartContainer = "_1m3udw19-3-2-0";
-var container = _7a468({ defaultClassName: "_1m3udw1a-3-2-0", variantClassNames: { autoSize: { true: "_1m3udw1b-3-2-0", false: "_1m3udw1c-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
-var containerWrapper = "_1m3udw1d-3-2-0";
-var labelContainer = "_1m3udw18-3-2-0";
-var legendContainer = "_1m3udw17-3-2-0";
-var maxContainer = "_1m3udw16-3-2-0";
-var minContainer = "_1m3udw15-3-2-0";
-var toolbarAnimatedContainer = "_1m3udw14-3-2-0";
-var valueAnimatedContainer = "_1m3udw13-3-2-0";
-var valueContainer = _7a468({ defaultClassName: "_1m3udw10-3-2-0", variantClassNames: { inline: { true: "_1m3udw11-3-2-0", false: "_1m3udw12-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var chartContainer = "_1m3udw19-3-3-0";
+var container = _7a468({ defaultClassName: "_1m3udw1a-3-3-0", variantClassNames: { autoSize: { true: "_1m3udw1b-3-3-0", false: "_1m3udw1c-3-3-0" } }, defaultVariants: {}, compoundVariants: [] });
+var containerWrapper = "_1m3udw1d-3-3-0";
+var labelContainer = "_1m3udw18-3-3-0";
+var legendContainer = "_1m3udw17-3-3-0";
+var maxContainer = "_1m3udw16-3-3-0";
+var minContainer = "_1m3udw15-3-3-0";
+var toolbarAnimatedContainer = "_1m3udw14-3-3-0";
+var valueAnimatedContainer = "_1m3udw13-3-3-0";
+var valueContainer = _7a468({ defaultClassName: "_1m3udw10-3-3-0", variantClassNames: { inline: { true: "_1m3udw11-3-3-0", false: "_1m3udw12-3-3-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   chartContainer,
   container,

package/esm/charts/meter-bar/shared/components/meter-bar-layout/MeterBarLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/shared/components/meter-bar-layout/MeterBarLayout.css.ts"],
-  "sourcesContent": ["import './MeterBarLayout.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chartContainer = '_1m3udw19-3-2-0';\nexport var container = _7a468({defaultClassName:'_1m3udw1a-3-2-0',variantClassNames:{autoSize:{true:'_1m3udw1b-3-2-0',false:'_1m3udw1c-3-2-0'}},defaultVariants:{},compoundVariants:[]});\nexport var containerWrapper = '_1m3udw1d-3-2-0';\nexport var labelContainer = '_1m3udw18-3-2-0';\nexport var legendContainer = '_1m3udw17-3-2-0';\nexport var maxContainer = '_1m3udw16-3-2-0';\nexport var minContainer = '_1m3udw15-3-2-0';\nexport var toolbarAnimatedContainer = '_1m3udw14-3-2-0';\nexport var valueAnimatedContainer = '_1m3udw13-3-2-0';\nexport var valueContainer = _7a468({defaultClassName:'_1m3udw10-3-2-0',variantClassNames:{inline:{true:'_1m3udw11-3-2-0',false:'_1m3udw12-3-2-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './MeterBarLayout.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chartContainer = '_1m3udw19-3-3-0';\nexport var container = _7a468({defaultClassName:'_1m3udw1a-3-3-0',variantClassNames:{autoSize:{true:'_1m3udw1b-3-3-0',false:'_1m3udw1c-3-3-0'}},defaultVariants:{},compoundVariants:[]});\nexport var containerWrapper = '_1m3udw1d-3-3-0';\nexport var labelContainer = '_1m3udw18-3-3-0';\nexport var legendContainer = '_1m3udw17-3-3-0';\nexport var maxContainer = '_1m3udw16-3-3-0';\nexport var minContainer = '_1m3udw15-3-3-0';\nexport var toolbarAnimatedContainer = '_1m3udw14-3-3-0';\nexport var valueAnimatedContainer = '_1m3udw13-3-3-0';\nexport var valueContainer = _7a468({defaultClassName:'_1m3udw10-3-3-0',variantClassNames:{inline:{true:'_1m3udw11-3-3-0',false:'_1m3udw12-3-3-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,iBAAiB;AACrB,IAAI,YAAY,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAChL,IAAI,mBAAmB;AACvB,IAAI,iBAAiB;AACrB,IAAI,kBAAkB;AACtB,IAAI,eAAe;AACnB,IAAI,eAAe;AACnB,IAAI,2BAA2B;AAC/B,IAAI,yBAAyB;AAC7B,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Icon/Icon.css

@@ -1,9 +1,9 @@
-._18riimf0-3-2-0 {
+._18riimf0-3-3-0 {
   width: 20px;
   height: 20px;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._18riimf0-3-2-0 > svg {
+._18riimf0-3-3-0 > svg {
   width: 100%;
   height: 100%;
 }

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Icon/Icon.sty.js

@@ -1,5 +1,5 @@
 import "./Icon.css";
-var container = "_18riimf0-3-2-0";
+var container = "_18riimf0-3-3-0";
 export {
   container
 };

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Icon/Icon.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/meter-bar/shared/components/meter-bar-layout/slots/Icon/Icon.css.ts"],
-  "sourcesContent": ["import './Icon.css';\nexport var container = '_18riimf0-3-2-0';"],
+  "sourcesContent": ["import './Icon.css';\nexport var container = '_18riimf0-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Label/Label.css

@@ -1,4 +1,4 @@
-._bh277f0-3-2-0 {
+._bh277f0-3-3-0 {
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Label/Label.sty.js

@@ -1,5 +1,5 @@
 import "./Label.css";
-var labelStyle = "_bh277f0-3-2-0";
+var labelStyle = "_bh277f0-3-3-0";
 export {
   labelStyle
 };

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Label/Label.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/meter-bar/shared/components/meter-bar-layout/slots/Label/Label.css.ts"],
-  "sourcesContent": ["import './Label.css';\nexport var labelStyle = '_bh277f0-3-2-0';"],
+  "sourcesContent": ["import './Label.css';\nexport var labelStyle = '_bh277f0-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;",
   "names": []
 }

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Max/Max.css

@@ -1,4 +1,4 @@
-._xxg5xc0-3-2-0 {
+._xxg5xc0-3-3-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Max/Max.sty.js

@@ -1,5 +1,5 @@
 import "./Max.css";
-var maxValue = "_xxg5xc0-3-2-0";
+var maxValue = "_xxg5xc0-3-3-0";
 export {
   maxValue
 };

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Max/Max.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/meter-bar/shared/components/meter-bar-layout/slots/Max/Max.css.ts"],
-  "sourcesContent": ["import './Max.css';\nexport var maxValue = '_xxg5xc0-3-2-0';"],
+  "sourcesContent": ["import './Max.css';\nexport var maxValue = '_xxg5xc0-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;",
   "names": []
 }

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Min/Min.css

@@ -1,4 +1,4 @@
-._16mgjbd0-3-2-0 {
+._16mgjbd0-3-3-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Min/Min.sty.js

@@ -1,5 +1,5 @@
 import "./Min.css";
-var minValue = "_16mgjbd0-3-2-0";
+var minValue = "_16mgjbd0-3-3-0";
 export {
   minValue
 };

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Min/Min.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/meter-bar/shared/components/meter-bar-layout/slots/Min/Min.css.ts"],
-  "sourcesContent": ["import './Min.css';\nexport var minValue = '_16mgjbd0-3-2-0';"],
+  "sourcesContent": ["import './Min.css';\nexport var minValue = '_16mgjbd0-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;",
   "names": []
 }

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Value/Value.css

@@ -1,4 +1,4 @@
-._1euwfb00-3-2-0 {
+._1euwfb00-3-3-0 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-weight: var(--dt-typography-text-small-default-weight, 400);

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Value/Value.sty.js

@@ -1,5 +1,5 @@
 import "./Value.css";
-var valueStyle = "_1euwfb00-3-2-0";
+var valueStyle = "_1euwfb00-3-3-0";
 export {
   valueStyle
 };

package/esm/charts/meter-bar/shared/components/meter-bar-layout/slots/Value/Value.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/meter-bar/shared/components/meter-bar-layout/slots/Value/Value.css.ts"],
-  "sourcesContent": ["import './Value.css';\nexport var valueStyle = '_1euwfb00-3-2-0';"],
+  "sourcesContent": ["import './Value.css';\nexport var valueStyle = '_1euwfb00-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;",
   "names": []
 }

package/esm/charts/meter-bar/shared/components/meter-bar-plot/MeterBarPlot.css

@@ -1,4 +1,4 @@
-._12md1g60-3-2-0 {
+._12md1g60-3-3-0 {
   background-color: var(--dt-colors-theme-neutral-40, #dadbe4);
   width: 100%;
   display: block;

package/esm/charts/meter-bar/shared/components/meter-bar-plot/MeterBarPlot.sty.js

@@ -1,5 +1,5 @@
 import "./MeterBarPlot.css";
-var svgElement = "_12md1g60-3-2-0";
+var svgElement = "_12md1g60-3-3-0";
 export {
   svgElement
 };

package/esm/charts/meter-bar/shared/components/meter-bar-plot/MeterBarPlot.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/shared/components/meter-bar-plot/MeterBarPlot.css.ts"],
-  "sourcesContent": ["import './MeterBarPlot.css';\nexport var svgElement = '_12md1g60-3-2-0';"],
+  "sourcesContent": ["import './MeterBarPlot.css';\nexport var svgElement = '_12md1g60-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;",
   "names": []
 }

package/esm/charts/meter-bar/shared/components/meter-bar-toolbar/MeterBarToolbar.js

@@ -1,5 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useBehavioralTrackingProps as _useBehavioralTrackingProps } from "../../../../../core/hooks/useBehavioralTrackingProps.js";
+import { useTooltipReducer } from "../../../../core/components/overlay-tooltip/useTooltipReducer.js";
 import { ChartToolbarRenderer } from "../../../../core/components/toolbar/ChartToolbarRenderer.js";
 import { getA11yToolbarConfig } from "../../../../core/utils/zoom.js";
 import { useMeterBarToolbarConfig } from "../../context/MeterBarToolbarConfig.context.js";
@@ -9,6 +10,7 @@ const MeterBarChartToolbar = () => {
   const behaviorTrackingProps = _useBehavioralTrackingProps(
     toolbarConfig ?? {}
   )[0];
+  const dispatch = useTooltipReducer();
   if (!isToolbarEnabled) {
     return null;
   }
@@ -27,6 +29,11 @@ const MeterBarChartToolbar = () => {
       isDownloadEnabled: false,
       toolbarDisplayMode: "inline",
       overlayClassName: "",
+      onToggleMenu: (isOpen) => {
+        if (isOpen) {
+          dispatch({ type: "RESET_TOOLTIP" })();
+        }
+      },
       ...behaviorTrackingProps
     }
   );

package/esm/charts/meter-bar/shared/components/meter-bar-toolbar/MeterBarToolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/shared/components/meter-bar-toolbar/MeterBarToolbar.tsx"],
-  "sourcesContent": ["import { useBehavioralTrackingProps as _useBehavioralTrackingProps } from '../../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { ChartToolbarRenderer } from '../../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { getA11yToolbarConfig } from '../../../../core/utils/zoom.js';\nimport { useMeterBarToolbarConfig } from '../../context/MeterBarToolbarConfig.context.js';\n\nexport const MeterBarChartToolbar = () => {\n  const toolbarConfig = useMeterBarToolbarConfig();\n  const isToolbarEnabled =\n    !toolbarConfig?.hidden && !!toolbarConfig?.intents?.length;\n  const behaviorTrackingProps = _useBehavioralTrackingProps(\n    toolbarConfig ?? {},\n  )[0];\n\n  if (!isToolbarEnabled) {\n    return null;\n  }\n\n  return (\n    <ChartToolbarRenderer\n      visible={isToolbarEnabled}\n      placement={toolbarConfig.placement}\n      collapsed={toolbarConfig.collapsed}\n      draggable={false}\n      initialA11yState={getA11yToolbarConfig({\n        intent: !!toolbarConfig.intents,\n      })}\n      menuDisplayMode=\"never\"\n      intents={toolbarConfig.intents}\n      isDownloadEnabled={false}\n      toolbarDisplayMode=\"inline\"\n      overlayClassName=\"\"\n      {...behaviorTrackingProps}\n    />\n  );\n};\n\nMeterBarChartToolbar['displayName'] = 'MeterBarChartToolbar';\n"],
-  "mappings": "AAkBI;AAlBJ,SAAS,8BAA8B,mCAAmC;AAC1E,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,gCAAgC;AAElC,MAAM,uBAAuB,MAAM;AACxC,QAAM,gBAAgB,yBAAyB;AAC/C,QAAM,mBACJ,CAAC,eAAe,UAAU,CAAC,CAAC,eAAe,SAAS;AACtD,QAAM,wBAAwB;AAAA,IAC5B,iBAAiB,CAAC;AAAA,EACpB,EAAE,CAAC;AAEH,MAAI,CAAC,kBAAkB;AACrB,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW,cAAc;AAAA,MACzB,WAAW,cAAc;AAAA,MACzB,WAAW;AAAA,MACX,kBAAkB,qBAAqB;AAAA,QACrC,QAAQ,CAAC,CAAC,cAAc;AAAA,MAC1B,CAAC;AAAA,MACD,iBAAgB;AAAA,MAChB,SAAS,cAAc;AAAA,MACvB,mBAAmB;AAAA,MACnB,oBAAmB;AAAA,MACnB,kBAAiB;AAAA,MAChB,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,qBAAqB,aAAa,IAAI;",
+  "sourcesContent": ["import { useBehavioralTrackingProps as _useBehavioralTrackingProps } from '../../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useTooltipReducer } from '../../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { ChartToolbarRenderer } from '../../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { getA11yToolbarConfig } from '../../../../core/utils/zoom.js';\nimport { useMeterBarToolbarConfig } from '../../context/MeterBarToolbarConfig.context.js';\n\nexport const MeterBarChartToolbar = () => {\n  const toolbarConfig = useMeterBarToolbarConfig();\n  const isToolbarEnabled =\n    !toolbarConfig?.hidden && !!toolbarConfig?.intents?.length;\n  const behaviorTrackingProps = _useBehavioralTrackingProps(\n    toolbarConfig ?? {},\n  )[0];\n  const dispatch = useTooltipReducer();\n\n  if (!isToolbarEnabled) {\n    return null;\n  }\n\n  return (\n    <ChartToolbarRenderer\n      visible={isToolbarEnabled}\n      placement={toolbarConfig.placement}\n      collapsed={toolbarConfig.collapsed}\n      draggable={false}\n      initialA11yState={getA11yToolbarConfig({\n        intent: !!toolbarConfig.intents,\n      })}\n      menuDisplayMode=\"never\"\n      intents={toolbarConfig.intents}\n      isDownloadEnabled={false}\n      toolbarDisplayMode=\"inline\"\n      overlayClassName=\"\"\n      onToggleMenu={(isOpen) => {\n        if (isOpen) {\n          dispatch({ type: 'RESET_TOOLTIP' })();\n        }\n      }}\n      {...behaviorTrackingProps}\n    />\n  );\n};\n\nMeterBarChartToolbar['displayName'] = 'MeterBarChartToolbar';\n"],
+  "mappings": "AAoBI;AApBJ,SAAS,8BAA8B,mCAAmC;AAC1E,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,gCAAgC;AAElC,MAAM,uBAAuB,MAAM;AACxC,QAAM,gBAAgB,yBAAyB;AAC/C,QAAM,mBACJ,CAAC,eAAe,UAAU,CAAC,CAAC,eAAe,SAAS;AACtD,QAAM,wBAAwB;AAAA,IAC5B,iBAAiB,CAAC;AAAA,EACpB,EAAE,CAAC;AACH,QAAM,WAAW,kBAAkB;AAEnC,MAAI,CAAC,kBAAkB;AACrB,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW,cAAc;AAAA,MACzB,WAAW,cAAc;AAAA,MACzB,WAAW;AAAA,MACX,kBAAkB,qBAAqB;AAAA,QACrC,QAAQ,CAAC,CAAC,cAAc;AAAA,MAC1B,CAAC;AAAA,MACD,iBAAgB;AAAA,MAChB,SAAS,cAAc;AAAA,MACvB,mBAAmB;AAAA,MACnB,oBAAmB;AAAA,MACnB,kBAAiB;AAAA,MACjB,cAAc,CAAC,WAAW;AACxB,YAAI,QAAQ;AACV,mBAAS,EAAE,MAAM,gBAAgB,CAAC,EAAE;AAAA,QACtC;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,qBAAqB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/meter-bar/shared/components/meter-bar-tooltip/MeterBarChartTooltip.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { useTooltipData } from "../../../../core/components/overlay-tooltip/_to-be-removed/utils.js";
+import { Series } from "../../../../core/components/overlay-tooltip/components/series/Series.js";
+import { SeriesItem } from "../../../../core/components/overlay-tooltip/components/series/SeriesItem.js";
+import { OverlayTooltip } from "../../../../core/components/overlay-tooltip/OverlayTooltip.js";
+import { isTooltipDataEmpty } from "../../../../core/components/overlay-tooltip/utils.js";
+const MeterBarChartTooltip = ({
+  activeItem,
+  variant,
+  actionsForItem
+}) => {
+  const data = useTooltipData().data;
+  if (isTooltipDataEmpty(data)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(OverlayTooltip, { children: /* @__PURE__ */ jsx(
+    Series,
+    {
+      data: data.series,
+      variant,
+      activeItem,
+      seriesItemTemplate: (item) => /* @__PURE__ */ jsx(SeriesItem, { ...item, actions: actionsForItem?.(item) })
+    }
+  ) });
+};
+export {
+  MeterBarChartTooltip
+};
+//# sourceMappingURL=MeterBarChartTooltip.js.map

package/esm/charts/meter-bar/shared/components/meter-bar-tooltip/MeterBarChartTooltip.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/meter-bar/shared/components/meter-bar-tooltip/MeterBarChartTooltip.tsx"],
+  "sourcesContent": ["import { useTooltipData } from '../../../../core/components/overlay-tooltip/_to-be-removed/utils.js';\nimport { Series } from '../../../../core/components/overlay-tooltip/components/series/Series.js';\nimport { SeriesItem } from '../../../../core/components/overlay-tooltip/components/series/SeriesItem.js';\nimport { OverlayTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { Data } from '../../../../core/components/overlay-tooltip/types.js';\nimport { isTooltipDataEmpty } from '../../../../core/components/overlay-tooltip/utils.js';\nimport type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\n\ntype SeriesData = Data['series'][number];\n\ninterface MeterBarTooltipContentProps {\n  activeItem?: number;\n  variant?: 'shared' | 'single';\n  actionsForItem?: (\n    item: SeriesData,\n  ) => (() => SeriesActionsTemplate) | undefined;\n}\n\nexport const MeterBarChartTooltip = ({\n  activeItem,\n  variant,\n  actionsForItem,\n}: MeterBarTooltipContentProps) => {\n  const data = useTooltipData().data;\n\n  if (isTooltipDataEmpty(data)) {\n    return null;\n  }\n\n  return (\n    <OverlayTooltip>\n      <Series\n        data={data.series}\n        variant={variant}\n        activeItem={activeItem}\n        seriesItemTemplate={(item) => (\n          <SeriesItem {...item} actions={actionsForItem?.(item)} />\n        )}\n      />\n    </OverlayTooltip>\n  );\n};\n"],
+  "mappings": "AAoCU;AApCV,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AAa5B,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,MAAmC;AACjC,QAAM,OAAO,eAAe,EAAE;AAE9B,MAAI,mBAAmB,IAAI,GAAG;AAC5B,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,kBACC;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,KAAK;AAAA,MACX;AAAA,MACA;AAAA,MACA,oBAAoB,CAAC,SACnB,oBAAC,cAAY,GAAG,MAAM,SAAS,iBAAiB,IAAI,GAAG;AAAA;AAAA,EAE3D,GACF;AAEJ;",
+  "names": []
+}

package/esm/charts/meter-bar/shared/components/meter-bar-tooltip/MeterBarTooltipItem/MeterBarTooltipItem.css

@@ -1,4 +1,4 @@
-._r5xi4l0-3-2-0 {
+._r5xi4l0-3-3-0 {
   min-width: unset;
   border-radius: var(--dt-borders-radius-field-default, 6px);
   padding: 0 var(--dt-spacings-size-4, 4px);

package/esm/charts/meter-bar/shared/components/meter-bar-tooltip/MeterBarTooltipItem/MeterBarTooltipItem.sty.js

@@ -1,5 +1,5 @@
 import "./MeterBarTooltipItem.css";
-var valueContent = "_r5xi4l0-3-2-0";
+var valueContent = "_r5xi4l0-3-3-0";
 export {
   valueContent
 };

package/esm/charts/meter-bar/shared/components/meter-bar-tooltip/MeterBarTooltipItem/MeterBarTooltipItem.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/meter-bar/shared/components/meter-bar-tooltip/MeterBarTooltipItem/MeterBarTooltipItem.css.ts"],
-  "sourcesContent": ["import './MeterBarTooltipItem.css';\nexport var valueContent = '_r5xi4l0-3-2-0';"],
+  "sourcesContent": ["import './MeterBarTooltipItem.css';\nexport var valueContent = '_r5xi4l0-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,eAAe;",
   "names": []
 }

package/esm/charts/meter-bar/shared/styles/element-size.css

@@ -1,12 +1,12 @@
-._1ckoljy1-3-2-0 {
+._1ckoljy1-3-3-0 {
   height: 100%;
 }
-._1ckoljy2-3-2-0 {
+._1ckoljy2-3-3-0 {
   height: 16px;
 }
-._1ckoljy3-3-2-0 {
+._1ckoljy3-3-3-0 {
   height: 24px;
 }
-._1ckoljy4-3-2-0 {
+._1ckoljy4-3-3-0 {
   height: 8px;
 }

package/esm/charts/meter-bar/shared/styles/element-size.sty.js

@@ -1,6 +1,6 @@
 import "./element-size.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var elementSize = _7a468({ defaultClassName: "_1ckoljy0-3-2-0", variantClassNames: { size: { auto: "_1ckoljy1-3-2-0", size16: "_1ckoljy2-3-2-0", size24: "_1ckoljy3-3-2-0", size8: "_1ckoljy4-3-2-0" } }, defaultVariants: { size: "size16" }, compoundVariants: [] });
+var elementSize = _7a468({ defaultClassName: "_1ckoljy0-3-3-0", variantClassNames: { size: { auto: "_1ckoljy1-3-3-0", size16: "_1ckoljy2-3-3-0", size24: "_1ckoljy3-3-3-0", size8: "_1ckoljy4-3-3-0" } }, defaultVariants: { size: "size16" }, compoundVariants: [] });
 export {
   elementSize
 };

package/esm/charts/meter-bar/shared/styles/element-size.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/shared/styles/element-size.css.ts"],
-  "sourcesContent": ["import './element-size.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var elementSize = _7a468({defaultClassName:'_1ckoljy0-3-2-0',variantClassNames:{size:{auto:'_1ckoljy1-3-2-0',size16:'_1ckoljy2-3-2-0',size24:'_1ckoljy3-3-2-0',size8:'_1ckoljy4-3-2-0'}},defaultVariants:{size:'size16'},compoundVariants:[]});"],
+  "sourcesContent": ["import './element-size.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var elementSize = _7a468({defaultClassName:'_1ckoljy0-3-3-0',variantClassNames:{size:{auto:'_1ckoljy1-3-3-0',size16:'_1ckoljy2-3-3-0',size24:'_1ckoljy3-3-3-0',size8:'_1ckoljy4-3-3-0'}},defaultVariants:{size:'size16'},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,cAAc,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,MAAK,mBAAkB,QAAO,mBAAkB,QAAO,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,SAAQ,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/meter-bar/single-meter-bar/MeterBarChart.js

@@ -1,10 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import {
-  forwardRef,
-  useImperativeHandle,
-  useRef
-} from "react";
+import { forwardRef, useRef } from "react";
 import { MeterBarChartPlotArea } from "./components/MeterBarChartPlotArea.js";
 import { MeterBarChartThresholdLegend } from "./components/MeterBarChartThresholdLegend/MeterBarChartThresholdLegend.js";
 import { METER_BAR_CHART_ARIA_LABEL } from "./constants.js";
@@ -62,25 +58,16 @@ const MeterBarChartRoot = forwardRef((props, forwardedRef) => {
   } = config;
   const meterBarChartRef = useRef(null);
   const hasLegend = thresholds.legend ?? thresholdsIndicators.legend;
-  useImperativeHandle(forwardedRef, () => {
-    let exposedRef = {};
-    if (meterBarChartRef.current) {
-      const consumerConfig = {
-        thresholdsIndicators,
-        size,
-        min,
-        max,
-        formatter,
-        unit,
-        tooltip
-      };
-      exposedRef = {
-        element: meterBarChartRef.current,
-        getConfig: () => JSON.stringify({ type: ChartType.SingleMeterBar, ...consumerConfig })
-      };
-    }
-    return exposedRef;
-  });
+  const consumerConfig = {
+    type: ChartType.SingleMeterBar,
+    thresholdsIndicators,
+    size,
+    min,
+    max,
+    formatter,
+    unit,
+    tooltip
+  };
   const displayValue = getNumericValue(
     value,
     valueAccessor ?? DEFAULT_VALUE_ACCESSOR
@@ -107,6 +94,8 @@ const MeterBarChartRoot = forwardRef((props, forwardedRef) => {
       "data-testid": dataTestId,
       "data-dt-component": COMPONENT_NAME,
       "aria-label": METER_BAR_CHART_ARIA_LABEL,
+      consumerConfig,
+      userRef: forwardedRef,
       children: [
         /* @__PURE__ */ jsx(
           MeterBarLayout.Providers,

package/esm/charts/meter-bar/single-meter-bar/MeterBarChart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/meter-bar/single-meter-bar/MeterBarChart.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { MeterBarChartPlotArea } from './components/MeterBarChartPlotArea.js';\nimport { MeterBarChartThresholdLegend } from './components/MeterBarChartThresholdLegend/MeterBarChartThresholdLegend.js';\nimport { METER_BAR_CHART_ARIA_LABEL } from './constants.js';\nimport { useMeterBarChartConfig } from './hooks/useMeterBarChartConfig.js';\nimport { MeterBarChartInternalDataProviders } from './providers/MeterBarChartInternalDataProviders.js';\nimport { MeterBarChartProviders } from './providers/MeterBarChartProviders.js';\nimport { Label } from './slots/Label.js';\nimport { Max } from './slots/Max.js';\nimport { Min } from './slots/Min.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { ThresholdLegend } from './slots/ThresholdLegend.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { Value } from './slots/Value.js';\nimport type { MeterBarChartConsumerConfig } from './types/meter-bar-chart-config.js';\nimport { type MeterBarChartProps } from './types/meter-bar-chart.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { Intent } from '../../../core/slots/Intent/Intent.js';\nimport { defaultChartSize } from '../../../core/styles/defaultChartValues.sty.js';\nimport { DEFAULT_VALUE_ACCESSOR } from '../../core/constants.js';\nimport { ColorRule } from '../../core/slots/ColorRule.js';\nimport { ChartType } from '../../core/types/chart-types.js';\nimport type { ComponentWithName } from '../../core/types/component-with-name.js';\nimport { MeterBarChartFormattedValue } from '../shared/components/formatted-value/MeterBarChartFormattedValue.js';\nimport { MeterBarLayout } from '../shared/components/meter-bar-layout/MeterBarLayout.js';\nimport { Toolbar } from '../shared/slots/Toolbar.js';\nimport type { MeterBarChartElementRef } from '../shared/types/meter-bars.js';\nimport { getNumericValue } from '../shared/utils/get-numeric-value.js';\n\nconst COMPONENT_NAME = 'SingleMeterBarChart';\n/**\n * Single meter bar chart component */\nconst MeterBarChartRoot = forwardRef<\n  MeterBarChartElementRef,\n  PropsWithChildren<MeterBarChartProps>\n>((props, forwardedRef) => {\n  const {\n    width,\n    height,\n    value,\n    name,\n    color,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'single-meter-bar-chart-root',\n    prefixIcon,\n    valueAccessor,\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const config = useMeterBarChartConfig(props);\n  const {\n    size,\n    thresholds,\n    thresholdsIndicators,\n    min,\n    max,\n    minSlot,\n    maxSlot,\n    valueSlot,\n    labelSlot,\n    tooltip,\n    formatter,\n    unit,\n  } = config;\n\n  const meterBarChartRef = useRef<HTMLDivElement>(null);\n\n  const hasLegend = thresholds.legend ?? thresholdsIndicators.legend;\n\n  useImperativeHandle(forwardedRef, () => {\n    let exposedRef = {} as MeterBarChartElementRef;\n\n    if (meterBarChartRef.current) {\n      const consumerConfig: MeterBarChartConsumerConfig = {\n        thresholdsIndicators,\n        size,\n        min,\n        max,\n        formatter,\n        unit,\n        tooltip,\n      };\n\n      exposedRef = {\n        element: meterBarChartRef.current,\n        getConfig: () =>\n          JSON.stringify({ type: ChartType.SingleMeterBar, ...consumerConfig }),\n      };\n    }\n\n    return exposedRef;\n  });\n\n  const displayValue = getNumericValue(\n    value,\n    valueAccessor ?? DEFAULT_VALUE_ACCESSOR,\n  );\n  const internalDataProvidersProps = {\n    value,\n    displayValue,\n    valueAccessor,\n    name,\n    color,\n  };\n\n  return (\n    <MeterBarChartProviders config={config} seriesActions={props.seriesActions}>\n      <MeterBarLayout\n        {...behavioralTrackingProps}\n        ref={meterBarChartRef}\n        size={size}\n        width={width}\n        height={height}\n        className={clsx(defaultChartSize, className)}\n        style={style}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        data-testid={dataTestId}\n        data-dt-component={COMPONENT_NAME}\n        aria-label={METER_BAR_CHART_ARIA_LABEL}\n      >\n        <MeterBarLayout.Providers\n          providerName={MeterBarChartInternalDataProviders}\n          providerProps={internalDataProvidersProps}\n        />\n\n        {prefixIcon && <MeterBarLayout.Icon>{prefixIcon}</MeterBarLayout.Icon>}\n        {labelSlot && <MeterBarLayout.Label>{labelSlot}</MeterBarLayout.Label>}\n        {valueSlot && (\n          <MeterBarLayout.Value>\n            <MeterBarChartFormattedValue\n              value={displayValue}\n              total={max}\n              auto={valueSlot?.auto}\n            >\n              {valueSlot?.value}\n            </MeterBarChartFormattedValue>\n          </MeterBarLayout.Value>\n        )}\n        <MeterBarLayout.Chart>\n          <MeterBarChartPlotArea />\n        </MeterBarLayout.Chart>\n        {minSlot && (\n          <MeterBarLayout.Min>\n            <MeterBarChartFormattedValue value={min} auto={minSlot?.auto}>\n              {minSlot?.value}\n            </MeterBarChartFormattedValue>\n          </MeterBarLayout.Min>\n        )}\n        {maxSlot && (\n          <MeterBarLayout.Max>\n            <MeterBarChartFormattedValue value={max} auto={maxSlot?.auto}>\n              {maxSlot?.value}\n            </MeterBarChartFormattedValue>\n          </MeterBarLayout.Max>\n        )}\n        {hasLegend && (\n          <MeterBarLayout.Legend>\n            <MeterBarChartThresholdLegend />\n          </MeterBarLayout.Legend>\n        )}\n      </MeterBarLayout>\n    </MeterBarChartProviders>\n  );\n});\n\n(MeterBarChartRoot as ComponentWithName<typeof MeterBarChartRoot>).displayName =\n  'MeterBarChart';\n\n/**\n * The `MeterBarChart` provides a lightweight and simple visualization progress\n * toward a completion, consumption of a total, etc.  It consists of a horizontal\n * bar that gradually fills up with color or shading as it approaches the max value.\n * @public\n */\nexport const MeterBarChart = Object.assign(MeterBarChartRoot, {\n  Value,\n  Label,\n  Min,\n  Max,\n  ThresholdIndicator,\n  ThresholdLegend,\n  Tooltip,\n  ColorRule,\n  Intent,\n  Toolbar,\n});\n"],
-  "mappings": "AAsHM,SAcE,KAdF;AAtHN,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,6BAA6B;AACtC,SAAS,oCAAoC;AAC7C,SAAS,kCAAkC;AAC3C,SAAS,8BAA8B;AACvC,SAAS,0CAA0C;AACnD,SAAS,8BAA8B;AACvC,SAAS,aAAa;AACtB,SAAS,WAAW;AACpB,SAAS,WAAW;AACpB,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,eAAe;AACxB,SAAS,aAAa;AAGtB,SAAS,kCAAkC;AAC3C,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAE1B,SAAS,mCAAmC;AAC5C,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAExB,SAAS,uBAAuB;AAEhC,MAAM,iBAAiB;AAGvB,MAAM,oBAAoB,WAGxB,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,eAAe,aAAa;AAAA,IAC5B;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM,SAAS,uBAAuB,KAAK;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,mBAAmB,OAAuB,IAAI;AAEpD,QAAM,YAAY,WAAW,UAAU,qBAAqB;AAE5D,sBAAoB,cAAc,MAAM;AACtC,QAAI,aAAa,CAAC;AAElB,QAAI,iBAAiB,SAAS;AAC5B,YAAM,iBAA8C;AAAA,QAClD;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,mBAAa;AAAA,QACX,SAAS,iBAAiB;AAAA,QAC1B,WAAW,MACT,KAAK,UAAU,EAAE,MAAM,UAAU,gBAAgB,GAAG,eAAe,CAAC;AAAA,MACxE;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AAED,QAAM,eAAe;AAAA,IACnB;AAAA,IACA,iBAAiB;AAAA,EACnB;AACA,QAAM,6BAA6B;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE,oBAAC,0BAAuB,QAAgB,eAAe,MAAM,eAC3D;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,KAAK,kBAAkB,SAAS;AAAA,MAC3C;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,qBAAmB;AAAA,MACnB,cAAY;AAAA,MAEZ;AAAA;AAAA,UAAC,eAAe;AAAA,UAAf;AAAA,YACC,cAAc;AAAA,YACd,eAAe;AAAA;AAAA,QACjB;AAAA,QAEC,cAAc,oBAAC,eAAe,MAAf,EAAqB,sBAAW;AAAA,QAC/C,aAAa,oBAAC,eAAe,OAAf,EAAsB,qBAAU;AAAA,QAC9C,aACC,oBAAC,eAAe,OAAf,EACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,OAAO;AAAA,YACP,MAAM,WAAW;AAAA,YAEhB,qBAAW;AAAA;AAAA,QACd,GACF;AAAA,QAEF,oBAAC,eAAe,OAAf,EACC,8BAAC,yBAAsB,GACzB;AAAA,QACC,WACC,oBAAC,eAAe,KAAf,EACC,8BAAC,+BAA4B,OAAO,KAAK,MAAM,SAAS,MACrD,mBAAS,OACZ,GACF;AAAA,QAED,WACC,oBAAC,eAAe,KAAf,EACC,8BAAC,+BAA4B,OAAO,KAAK,MAAM,SAAS,MACrD,mBAAS,OACZ,GACF;AAAA,QAED,aACC,oBAAC,eAAe,QAAf,EACC,8BAAC,gCAA6B,GAChC;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ,CAAC;AAEA,kBAAkE,cACjE;AAQK,MAAM,gBAAgB,OAAO,OAAO,mBAAmB;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, type PropsWithChildren, useRef } from 'react';\n\nimport { MeterBarChartPlotArea } from './components/MeterBarChartPlotArea.js';\nimport { MeterBarChartThresholdLegend } from './components/MeterBarChartThresholdLegend/MeterBarChartThresholdLegend.js';\nimport { METER_BAR_CHART_ARIA_LABEL } from './constants.js';\nimport { useMeterBarChartConfig } from './hooks/useMeterBarChartConfig.js';\nimport { MeterBarChartInternalDataProviders } from './providers/MeterBarChartInternalDataProviders.js';\nimport { MeterBarChartProviders } from './providers/MeterBarChartProviders.js';\nimport { Label } from './slots/Label.js';\nimport { Max } from './slots/Max.js';\nimport { Min } from './slots/Min.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { ThresholdLegend } from './slots/ThresholdLegend.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { Value } from './slots/Value.js';\nimport type { MeterBarChartConsumerConfig } from './types/meter-bar-chart-config.js';\nimport { type MeterBarChartProps } from './types/meter-bar-chart.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { Intent } from '../../../core/slots/Intent/Intent.js';\nimport { defaultChartSize } from '../../../core/styles/defaultChartValues.sty.js';\nimport { DEFAULT_VALUE_ACCESSOR } from '../../core/constants.js';\nimport { ColorRule } from '../../core/slots/ColorRule.js';\nimport { ChartType } from '../../core/types/chart-types.js';\nimport type { ComponentWithName } from '../../core/types/component-with-name.js';\nimport { MeterBarChartFormattedValue } from '../shared/components/formatted-value/MeterBarChartFormattedValue.js';\nimport { MeterBarLayout } from '../shared/components/meter-bar-layout/MeterBarLayout.js';\nimport { Toolbar } from '../shared/slots/Toolbar.js';\nimport type { MeterBarChartElementRef } from '../shared/types/meter-bars.js';\nimport { getNumericValue } from '../shared/utils/get-numeric-value.js';\n\nconst COMPONENT_NAME = 'SingleMeterBarChart';\n/**\n * Single meter bar chart component */\nconst MeterBarChartRoot = forwardRef<\n  MeterBarChartElementRef,\n  PropsWithChildren<MeterBarChartProps>\n>((props, forwardedRef) => {\n  const {\n    width,\n    height,\n    value,\n    name,\n    color,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'single-meter-bar-chart-root',\n    prefixIcon,\n    valueAccessor,\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const config = useMeterBarChartConfig(props);\n  const {\n    size,\n    thresholds,\n    thresholdsIndicators,\n    min,\n    max,\n    minSlot,\n    maxSlot,\n    valueSlot,\n    labelSlot,\n    tooltip,\n    formatter,\n    unit,\n  } = config;\n\n  const meterBarChartRef = useRef<HTMLDivElement>(null);\n\n  const hasLegend = thresholds.legend ?? thresholdsIndicators.legend;\n\n  const consumerConfig: MeterBarChartConsumerConfig & {\n    type: ChartType.SingleMeterBar;\n  } = {\n    type: ChartType.SingleMeterBar,\n    thresholdsIndicators,\n    size,\n    min,\n    max,\n    formatter,\n    unit,\n    tooltip,\n  };\n\n  const displayValue = getNumericValue(\n    value,\n    valueAccessor ?? DEFAULT_VALUE_ACCESSOR,\n  );\n  const internalDataProvidersProps = {\n    value,\n    displayValue,\n    valueAccessor,\n    name,\n    color,\n  };\n\n  return (\n    <MeterBarChartProviders config={config} seriesActions={props.seriesActions}>\n      <MeterBarLayout\n        {...behavioralTrackingProps}\n        ref={meterBarChartRef}\n        size={size}\n        width={width}\n        height={height}\n        className={clsx(defaultChartSize, className)}\n        style={style}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        data-testid={dataTestId}\n        data-dt-component={COMPONENT_NAME}\n        aria-label={METER_BAR_CHART_ARIA_LABEL}\n        consumerConfig={consumerConfig}\n        userRef={forwardedRef}\n      >\n        <MeterBarLayout.Providers\n          providerName={MeterBarChartInternalDataProviders}\n          providerProps={internalDataProvidersProps}\n        />\n\n        {prefixIcon && <MeterBarLayout.Icon>{prefixIcon}</MeterBarLayout.Icon>}\n        {labelSlot && <MeterBarLayout.Label>{labelSlot}</MeterBarLayout.Label>}\n        {valueSlot && (\n          <MeterBarLayout.Value>\n            <MeterBarChartFormattedValue\n              value={displayValue}\n              total={max}\n              auto={valueSlot?.auto}\n            >\n              {valueSlot?.value}\n            </MeterBarChartFormattedValue>\n          </MeterBarLayout.Value>\n        )}\n        <MeterBarLayout.Chart>\n          <MeterBarChartPlotArea />\n        </MeterBarLayout.Chart>\n        {minSlot && (\n          <MeterBarLayout.Min>\n            <MeterBarChartFormattedValue value={min} auto={minSlot?.auto}>\n              {minSlot?.value}\n            </MeterBarChartFormattedValue>\n          </MeterBarLayout.Min>\n        )}\n        {maxSlot && (\n          <MeterBarLayout.Max>\n            <MeterBarChartFormattedValue value={max} auto={maxSlot?.auto}>\n              {maxSlot?.value}\n            </MeterBarChartFormattedValue>\n          </MeterBarLayout.Max>\n        )}\n        {hasLegend && (\n          <MeterBarLayout.Legend>\n            <MeterBarChartThresholdLegend />\n          </MeterBarLayout.Legend>\n        )}\n      </MeterBarLayout>\n    </MeterBarChartProviders>\n  );\n});\n\n(MeterBarChartRoot as ComponentWithName<typeof MeterBarChartRoot>).displayName =\n  'MeterBarChart';\n\n/**\n * The `MeterBarChart` provides a lightweight and simple visualization progress\n * toward a completion, consumption of a total, etc.  It consists of a horizontal\n * bar that gradually fills up with color or shading as it approaches the max value.\n * @public\n */\nexport const MeterBarChart = Object.assign(MeterBarChartRoot, {\n  Value,\n  Label,\n  Min,\n  Max,\n  ThresholdIndicator,\n  ThresholdLegend,\n  Tooltip,\n  ColorRule,\n  Intent,\n  Toolbar,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/meter-bar/single-meter-bar/components/MeterBarChartOverlay/MeterBarChartOverlay.css

@@ -1,4 +1,4 @@
-._s444hp0-3-2-0 {
+._s444hp0-3-3-0 {
   position: relative;
   z-index: 1;
 }