@dynatrace/strato-components 3.13.2 → 3.14.0

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

@@ -1,4 +1,4 @@
-._xxg5xc0-3-13-2 {
+._xxg5xc0-3-14-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-13-2";
+var maxValue = "_xxg5xc0-3-14-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-13-2';"],
+  "sourcesContent": ["import './Max.css';\nexport var maxValue = '_xxg5xc0-3-14-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-13-2 {
+._16mgjbd0-3-14-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-13-2";
+var minValue = "_16mgjbd0-3-14-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-13-2';"],
+  "sourcesContent": ["import './Min.css';\nexport var minValue = '_16mgjbd0-3-14-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-13-2 {
+._1euwfb00-3-14-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-13-2";
+var valueStyle = "_1euwfb00-3-14-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-13-2';"],
+  "sourcesContent": ["import './Value.css';\nexport var valueStyle = '_1euwfb00-3-14-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-13-2 {
+._12md1g60-3-14-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-13-2";
+var svgElement = "_12md1g60-3-14-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-13-2';"],
+  "sourcesContent": ["import './MeterBarPlot.css';\nexport var svgElement = '_12md1g60-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,aAAa;",
   "names": []
 }

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

@@ -1,12 +1,12 @@
-._1ckoljy1-3-13-2 {
+._1ckoljy1-3-14-0 {
   height: 100%;
 }
-._1ckoljy2-3-13-2 {
+._1ckoljy2-3-14-0 {
   height: 16px;
 }
-._1ckoljy3-3-13-2 {
+._1ckoljy3-3-14-0 {
   height: 24px;
 }
-._1ckoljy4-3-13-2 {
+._1ckoljy4-3-14-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-13-2", variantClassNames: { size: { auto: "_1ckoljy1-3-13-2", size16: "_1ckoljy2-3-13-2", size24: "_1ckoljy3-3-13-2", size8: "_1ckoljy4-3-13-2" } }, defaultVariants: { size: "size16" }, compoundVariants: [] });
+var elementSize = _7a468({ defaultClassName: "_1ckoljy0-3-14-0", variantClassNames: { size: { auto: "_1ckoljy1-3-14-0", size16: "_1ckoljy2-3-14-0", size24: "_1ckoljy3-3-14-0", size8: "_1ckoljy4-3-14-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-13-2',variantClassNames:{size:{auto:'_1ckoljy1-3-13-2',size16:'_1ckoljy2-3-13-2',size24:'_1ckoljy3-3-13-2',size8:'_1ckoljy4-3-13-2'}},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-14-0',variantClassNames:{size:{auto:'_1ckoljy1-3-14-0',size16:'_1ckoljy2-3-14-0',size24:'_1ckoljy3-3-14-0',size8:'_1ckoljy4-3-14-0'}},defaultVariants:{size:'size16'},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,cAAc,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,MAAK,EAAC,MAAK,oBAAmB,QAAO,oBAAmB,QAAO,oBAAmB,OAAM,mBAAkB,EAAC,GAAE,iBAAgB,EAAC,MAAK,SAAQ,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

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

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

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

@@ -1,6 +1,6 @@
 import "./styles.css";
 var consumerLoadingStyle = { position: "absolute", top: 0, width: "100%", height: "100%", zIndex: 1, pointerEvents: "none", backgroundColor: "var(--dt-colors-background-base-default, #f9f9fa)", opacity: 0.4 };
-var container = "_16sdwow0-3-13-2";
+var container = "_16sdwow0-3-14-0";
 export {
   consumerLoadingStyle,
   container

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/meter-bar/shared/styles.css.ts"],
-  "sourcesContent": ["import './styles.css';\nexport var consumerLoadingStyle = {position:'absolute',top:0,width:'100%',height:'100%',zIndex:1,pointerEvents:'none',backgroundColor:'var(--dt-colors-background-base-default, #f9f9fa)',opacity:0.4};\nexport var container = '_16sdwow0-3-13-2';"],
+  "sourcesContent": ["import './styles.css';\nexport var consumerLoadingStyle = {position:'absolute',top:0,width:'100%',height:'100%',zIndex:1,pointerEvents:'none',backgroundColor:'var(--dt-colors-background-base-default, #f9f9fa)',opacity:0.4};\nexport var container = '_16sdwow0-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,uBAAuB,EAAC,UAAS,YAAW,KAAI,GAAE,OAAM,QAAO,QAAO,QAAO,QAAO,GAAE,eAAc,QAAO,iBAAgB,qDAAoD,SAAQ,IAAG;AAC9L,IAAI,YAAY;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/shared/types/meter-bar-toolbar.ts"],
-  "sourcesContent": ["import { IntentProps } from '../../../../core/slots/Intent/Intent.js';\nimport {\n  BaseToolbarProps,\n  InternalChartToolbarConfig,\n} from '../../../core/types/toolbar.js';\n\n/** Props for the ChartToolbar implementation in MeterBarChart\n * @public\n */\nexport type MeterBarToolbarSlotProps = BaseToolbarProps;\n\n/**\n * Properties configurable by MeterBarConfiguration Provider\n * @public\n */\nexport type MeterBarToolbarConfig = MeterBarToolbarSlotProps & {\n  intents?: Array<IntentProps>;\n};\n\nexport interface MeterBarToolbarInternalProps\n  extends InternalChartToolbarConfig {\n  /** Decides if the toolbar is visible or hidden\n   * @defaultValue false\n   */\n  hidden?: boolean;\n  intents?: Array<IntentProps>;\n}\n\nexport const defaultToolbarInternalConfig: MeterBarToolbarInternalProps = {\n  hidden: false,\n  intents: [],\n  placement: 'top-right',\n  collapsed: false,\n  draggable: false,\n};\n"],
-  "mappings": "AA4BO,MAAM,+BAA6D;AAAA,EACxE,QAAQ;AAAA,EACR,SAAS,CAAC;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AACb;",
+  "sourcesContent": ["import { IntentProps } from '../../../../core/slots/Intent/Intent.js';\nimport {\n  BaseToolbarProps,\n  InternalChartToolbarConfig,\n} from '../../../core/types/toolbar.js';\n\n/** Props for the ChartToolbar implementation in MeterBarChart\n * @public\n */\nexport type MeterBarToolbarSlotProps = BaseToolbarProps;\n\n/**\n * Properties configurable by MeterBarConfiguration Provider\n * @public\n */\nexport type MeterBarToolbarConfig = MeterBarToolbarSlotProps & {\n  intents?: Array<IntentProps>;\n};\n\nexport interface MeterBarToolbarInternalProps extends InternalChartToolbarConfig {\n  /** Decides if the toolbar is visible or hidden\n   * @defaultValue false\n   */\n  hidden?: boolean;\n  intents?: Array<IntentProps>;\n}\n\nexport const defaultToolbarInternalConfig: MeterBarToolbarInternalProps = {\n  hidden: false,\n  intents: [],\n  placement: 'top-right',\n  collapsed: false,\n  draggable: false,\n};\n"],
+  "mappings": "AA2BO,MAAM,+BAA6D;AAAA,EACxE,QAAQ;AAAA,EACR,SAAS,CAAC;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AACb;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._n2jd1m0-3-13-2 {
+._n2jd1m0-3-14-0 {
   display: block;
   width: 100%;
   overflow: visible;

package/esm/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholdIntervals/MeterBarChartThresholdIntervals.sty.js

@@ -1,5 +1,5 @@
 import "./MeterBarChartThresholdIntervals.css";
-var thresholdIntervals = "_n2jd1m0-3-13-2";
+var thresholdIntervals = "_n2jd1m0-3-14-0";
 export {
   thresholdIntervals
 };

package/esm/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholdIntervals/MeterBarChartThresholdIntervals.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholdIntervals/MeterBarChartThresholdIntervals.css.ts"],
-  "sourcesContent": ["import './MeterBarChartThresholdIntervals.css';\nexport var thresholdIntervals = '_n2jd1m0-3-13-2';"],
+  "sourcesContent": ["import './MeterBarChartThresholdIntervals.css';\nexport var thresholdIntervals = '_n2jd1m0-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

package/esm/charts/pie/components/InnerWrapper/components/InnerContainer/InnerContainer.css

@@ -1,3 +1,3 @@
-._1cob19w0-3-13-2 {
+._1cob19w0-3-14-0 {
   position: absolute;
 }

package/esm/charts/pie/components/InnerWrapper/components/InnerContainer/InnerContainer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/pie/components/InnerWrapper/components/InnerContainer/InnerContainer.tsx"],
-  "sourcesContent": ["import { type CSSProperties, type PropsWithChildren } from 'react';\n\nimport { container } from './InnerContainer.sty.js';\nimport { Flex } from '../../../../../../layouts/flex/Flex.js';\nimport type { InnerWrapperProps } from '../../../../types/internal/pie-chart.js';\n\ninterface InnerContainerProps\n  extends Pick<InnerWrapperProps, 'width' | 'height'> {\n  donutInner: number;\n}\n\nexport const InnerContainer = ({\n  donutInner,\n  height,\n  width,\n  children,\n}: PropsWithChildren<InnerContainerProps>) => {\n  const containerStyle: CSSProperties = {\n    top: `${height / 2 - donutInner / 2}px`,\n    left: `${width / 2 - donutInner / 2}px`,\n  };\n\n  return (\n    <Flex\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      style={containerStyle}\n      className={container}\n    >\n      {children}\n    </Flex>\n  );\n};\n"],
-  "mappings": "AAuBI;AArBJ,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAQd,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8C;AAC5C,QAAM,iBAAgC;AAAA,IACpC,KAAK,GAAG,SAAS,IAAI,aAAa,CAAC;AAAA,IACnC,MAAM,GAAG,QAAQ,IAAI,aAAa,CAAC;AAAA,EACrC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,OAAO;AAAA,MACP,WAAW;AAAA,MAEV;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import { type CSSProperties, type PropsWithChildren } from 'react';\n\nimport { container } from './InnerContainer.sty.js';\nimport { Flex } from '../../../../../../layouts/flex/Flex.js';\nimport type { InnerWrapperProps } from '../../../../types/internal/pie-chart.js';\n\ninterface InnerContainerProps extends Pick<\n  InnerWrapperProps,\n  'width' | 'height'\n> {\n  donutInner: number;\n}\n\nexport const InnerContainer = ({\n  donutInner,\n  height,\n  width,\n  children,\n}: PropsWithChildren<InnerContainerProps>) => {\n  const containerStyle: CSSProperties = {\n    top: `${height / 2 - donutInner / 2}px`,\n    left: `${width / 2 - donutInner / 2}px`,\n  };\n\n  return (\n    <Flex\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      style={containerStyle}\n      className={container}\n    >\n      {children}\n    </Flex>\n  );\n};\n"],
+  "mappings": "AAyBI;AAvBJ,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AAUd,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA8C;AAC5C,QAAM,iBAAgC;AAAA,IACpC,KAAK,GAAG,SAAS,IAAI,aAAa,CAAC;AAAA,IACnC,MAAM,GAAG,QAAQ,IAAI,aAAa,CAAC;AAAA,EACrC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,OAAO;AAAA,MACP,WAAW;AAAA,MAEV;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/esm/charts/pie/components/InnerWrapper/components/InnerContainer/InnerContainer.sty.js

@@ -1,5 +1,5 @@
 import "./InnerContainer.css";
-var container = "_1cob19w0-3-13-2";
+var container = "_1cob19w0-3-14-0";
 export {
   container
 };

package/esm/charts/pie/components/InnerWrapper/components/InnerContainer/InnerContainer.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/pie/components/InnerWrapper/components/InnerContainer/InnerContainer.css.ts"],
-  "sourcesContent": ["import './InnerContainer.css';\nexport var container = '_1cob19w0-3-13-2';"],
+  "sourcesContent": ["import './InnerContainer.css';\nexport var container = '_1cob19w0-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/pie/components/InnerWrapper/components/InnerDonut/InnerDonut.css

@@ -1,3 +1,3 @@
-._1gn0gqx0-3-13-2 {
+._1gn0gqx0-3-14-0 {
   overflow: hidden;
 }

package/esm/charts/pie/components/InnerWrapper/components/InnerDonut/InnerDonut.sty.js

@@ -1,5 +1,5 @@
 import "./InnerDonut.css";
-var container = "_1gn0gqx0-3-13-2";
+var container = "_1gn0gqx0-3-14-0";
 export {
   container
 };

package/esm/charts/pie/components/InnerWrapper/components/InnerDonut/InnerDonut.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/pie/components/InnerWrapper/components/InnerDonut/InnerDonut.css.ts"],
-  "sourcesContent": ["import './InnerDonut.css';\nexport var container = '_1gn0gqx0-3-13-2';"],
+  "sourcesContent": ["import './InnerDonut.css';\nexport var container = '_1gn0gqx0-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/pie/components/PieChartOverlays/PieChartOverlays.css

@@ -1,4 +1,4 @@
-._jxp4cr0-3-13-2 {
+._jxp4cr0-3-14-0 {
   position: relative;
   height: 100%;
   z-index: 1;

package/esm/charts/pie/components/PieChartOverlays/PieChartOverlays.js

@@ -11,7 +11,12 @@ import { PieChartTooltip } from "../PieChartTooltip/PieChartTooltip.js";
 const PieChartOverlays = ({ children }) => {
   const overlay = useOverlay();
   const loading = useChartLayoutLoading();
-  const { onPointerEnterHandler, onPointerLeaveHandler } = useOverlayHandlers();
+  const {
+    onPointerEnterHandler,
+    onPointerLeaveHandler,
+    onEmptyAreaTouchStart,
+    onEmptyAreaTouchEnd
+  } = useOverlayHandlers();
   const toolbarConfig = useToolbarConfig();
   const toolbarEnabled = isToolbarEnabled(toolbarConfig);
   return /* @__PURE__ */ jsxs(
@@ -24,6 +29,8 @@ const PieChartOverlays = ({ children }) => {
       className: container,
       onPointerEnter: loading ? void 0 : onPointerEnterHandler,
       onPointerLeave: loading ? void 0 : onPointerLeaveHandler,
+      onTouchStart: loading ? void 0 : onEmptyAreaTouchStart,
+      onTouchEnd: loading ? void 0 : onEmptyAreaTouchEnd,
       children: [
         !loading && /* @__PURE__ */ jsx(PieChartTooltip, {}),
         !loading && toolbarEnabled && /* @__PURE__ */ jsx(PieChartToolbar, {}),

package/esm/charts/pie/components/PieChartOverlays/PieChartOverlays.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/pie/components/PieChartOverlays/PieChartOverlays.tsx"],
-  "sourcesContent": ["import type { PropsWithChildren } from 'react';\n\nimport { container } from './PieChartOverlays.sty.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useChartLayoutLoading } from '../../../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { isToolbarEnabled } from '../../../core/utils/is-toolbar-enabled.js';\nimport { useToolbarConfig } from '../../context/ToolbarContext.js';\nimport { useOverlayHandlers } from '../../hooks/useOverlayHandlers.js';\nimport { PieChartToolbar } from '../PieChartToolbar/PieChartToolbar.js';\nimport { PieChartTooltip } from '../PieChartTooltip/PieChartTooltip.js';\n\nexport const PieChartOverlays = ({ children }: PropsWithChildren) => {\n  const overlay = useOverlay();\n  const loading = useChartLayoutLoading();\n  const { onPointerEnterHandler, onPointerLeaveHandler } = useOverlayHandlers();\n\n  const toolbarConfig = useToolbarConfig();\n\n  const toolbarEnabled = isToolbarEnabled(toolbarConfig);\n\n  return (\n    <Flex\n      ref={overlay.overlayRef}\n      data-testid=\"overlays-wrapper\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      className={container}\n      onPointerEnter={loading ? undefined : onPointerEnterHandler}\n      onPointerLeave={loading ? undefined : onPointerLeaveHandler}\n    >\n      {!loading && <PieChartTooltip />}\n      {!loading && toolbarEnabled && <PieChartToolbar />}\n      {children}\n    </Flex>\n  );\n};\n"],
-  "mappings": "AAsBI,SASe,KATf;AApBJ,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAEzB,MAAM,mBAAmB,CAAC,EAAE,SAAS,MAAyB;AACnE,QAAM,UAAU,WAAW;AAC3B,QAAM,UAAU,sBAAsB;AACtC,QAAM,EAAE,uBAAuB,sBAAsB,IAAI,mBAAmB;AAE5E,QAAM,gBAAgB,iBAAiB;AAEvC,QAAM,iBAAiB,iBAAiB,aAAa;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,QAAQ;AAAA,MACb,eAAY;AAAA,MACZ,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,WAAW;AAAA,MACX,gBAAgB,UAAU,SAAY;AAAA,MACtC,gBAAgB,UAAU,SAAY;AAAA,MAErC;AAAA,SAAC,WAAW,oBAAC,mBAAgB;AAAA,QAC7B,CAAC,WAAW,kBAAkB,oBAAC,mBAAgB;AAAA,QAC/C;AAAA;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import type { PropsWithChildren } from 'react';\n\nimport { container } from './PieChartOverlays.sty.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useChartLayoutLoading } from '../../../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { isToolbarEnabled } from '../../../core/utils/is-toolbar-enabled.js';\nimport { useToolbarConfig } from '../../context/ToolbarContext.js';\nimport { useOverlayHandlers } from '../../hooks/useOverlayHandlers.js';\nimport { PieChartToolbar } from '../PieChartToolbar/PieChartToolbar.js';\nimport { PieChartTooltip } from '../PieChartTooltip/PieChartTooltip.js';\n\nexport const PieChartOverlays = ({ children }: PropsWithChildren) => {\n  const overlay = useOverlay();\n  const loading = useChartLayoutLoading();\n  const {\n    onPointerEnterHandler,\n    onPointerLeaveHandler,\n    onEmptyAreaTouchStart,\n    onEmptyAreaTouchEnd,\n  } = useOverlayHandlers();\n\n  const toolbarConfig = useToolbarConfig();\n  const toolbarEnabled = isToolbarEnabled(toolbarConfig);\n\n  return (\n    <Flex\n      ref={overlay.overlayRef}\n      data-testid=\"overlays-wrapper\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      className={container}\n      onPointerEnter={loading ? undefined : onPointerEnterHandler}\n      onPointerLeave={loading ? undefined : onPointerLeaveHandler}\n      onTouchStart={loading ? undefined : onEmptyAreaTouchStart}\n      onTouchEnd={loading ? undefined : onEmptyAreaTouchEnd}\n    >\n      {!loading && <PieChartTooltip />}\n      {!loading && toolbarEnabled && <PieChartToolbar />}\n      {children}\n    </Flex>\n  );\n};\n"],
+  "mappings": "AA0BI,SAWe,KAXf;AAxBJ,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAEzB,MAAM,mBAAmB,CAAC,EAAE,SAAS,MAAyB;AACnE,QAAM,UAAU,WAAW;AAC3B,QAAM,UAAU,sBAAsB;AACtC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB;AAEvB,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,iBAAiB,iBAAiB,aAAa;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,QAAQ;AAAA,MACb,eAAY;AAAA,MACZ,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,WAAW;AAAA,MACX,gBAAgB,UAAU,SAAY;AAAA,MACtC,gBAAgB,UAAU,SAAY;AAAA,MACtC,cAAc,UAAU,SAAY;AAAA,MACpC,YAAY,UAAU,SAAY;AAAA,MAEjC;AAAA,SAAC,WAAW,oBAAC,mBAAgB;AAAA,QAC7B,CAAC,WAAW,kBAAkB,oBAAC,mBAAgB;AAAA,QAC/C;AAAA;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/esm/charts/pie/components/PieChartOverlays/PieChartOverlays.sty.js

@@ -1,5 +1,5 @@
 import "./PieChartOverlays.css";
-var container = "_jxp4cr0-3-13-2";
+var container = "_jxp4cr0-3-14-0";
 export {
   container
 };

package/esm/charts/pie/components/PieChartOverlays/PieChartOverlays.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/pie/components/PieChartOverlays/PieChartOverlays.css.ts"],
-  "sourcesContent": ["import './PieChartOverlays.css';\nexport var container = '_jxp4cr0-3-13-2';"],
+  "sourcesContent": ["import './PieChartOverlays.css';\nexport var container = '_jxp4cr0-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/pie/components/PieChartPlot/PieChartPlot.css

@@ -1,3 +1,3 @@
-._1iotdmn0-3-13-2 {
+._1iotdmn0-3-14-0 {
   position: relative;
 }

package/esm/charts/pie/components/PieChartPlot/PieChartPlot.sty.js

@@ -1,5 +1,5 @@
 import "./PieChartPlot.css";
-var container = "_1iotdmn0-3-13-2";
+var container = "_1iotdmn0-3-14-0";
 export {
   container
 };

package/esm/charts/pie/components/PieChartPlot/PieChartPlot.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/pie/components/PieChartPlot/PieChartPlot.css.ts"],
-  "sourcesContent": ["import './PieChartPlot.css';\nexport var container = '_1iotdmn0-3-13-2';"],
+  "sourcesContent": ["import './PieChartPlot.css';\nexport var container = '_1iotdmn0-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/pie/hooks/useOverlayHandlers.js

@@ -1,6 +1,15 @@
+import { useRef } from "react";
 import { useSetOverlayState } from "./store/use-set-overlay-state.js";
+import { useOverlay } from "../../core/components/overlay-tooltip/contexts/OverlayContext.js";
+import { useTooltip } from "../../core/components/overlay-tooltip/contexts/TooltipContext.js";
+import { useTooltipActions } from "../../core/components/overlay-tooltip/useTooltipActions.js";
+import { isTapGesture } from "../../core/components/overlay-tooltip/utils/tap-gesture.js";
 const useOverlayHandlers = () => {
   const { setOverlayStateInBounds } = useSetOverlayState();
+  const overlay = useOverlay();
+  const tooltipStore = useTooltip();
+  const { unpin } = useTooltipActions();
+  const touchStartPosRef = useRef(null);
   const onPointerEnterHandler = () => {
     setOverlayStateInBounds(true);
   };
@@ -9,9 +18,45 @@ const useOverlayHandlers = () => {
       setOverlayStateInBounds(false);
     }
   };
+  const onEmptyAreaTouchStart = (event) => {
+    if (!overlay.overlayRef.current?.contains(event.target)) {
+      touchStartPosRef.current = null;
+      return;
+    }
+    const touch = event.changedTouches[0];
+    if (!touch) {
+      return;
+    }
+    touchStartPosRef.current = { x: touch.clientX, y: touch.clientY };
+  };
+  const onEmptyAreaTouchEnd = (event) => {
+    if (!overlay.overlayRef.current?.contains(event.target)) {
+      return;
+    }
+    if (event.target instanceof Element && event.target.closest('button, a, [role="button"]') !== null) {
+      return;
+    }
+    const touch = event.changedTouches[0];
+    if (!touch) {
+      return;
+    }
+    const start = touchStartPosRef.current;
+    touchStartPosRef.current = null;
+    if (start !== null && !isTapGesture(start, touch)) {
+      return;
+    }
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+    if (tooltipStore.getState().pinned) {
+      unpin();
+    }
+  };
   return {
     onPointerEnterHandler,
-    onPointerLeaveHandler
+    onPointerLeaveHandler,
+    onEmptyAreaTouchStart,
+    onEmptyAreaTouchEnd
   };
 };
 export {

package/esm/charts/pie/hooks/useOverlayHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/hooks/useOverlayHandlers.ts"],
-  "sourcesContent": ["import type { PointerEvent as ReactPointerEvent } from 'react';\n\nimport { useSetOverlayState } from './store/use-set-overlay-state.js';\n\nexport const useOverlayHandlers = () => {\n  const { setOverlayStateInBounds } = useSetOverlayState();\n\n  const onPointerEnterHandler = () => {\n    setOverlayStateInBounds(true);\n  };\n\n  const onPointerLeaveHandler = (event: ReactPointerEvent) => {\n    if (event.pointerType !== 'touch') {\n      setOverlayStateInBounds(false);\n    }\n  };\n\n  return {\n    onPointerEnterHandler,\n    onPointerLeaveHandler,\n  };\n};\n"],
-  "mappings": "AAEA,SAAS,0BAA0B;AAE5B,MAAM,qBAAqB,MAAM;AACtC,QAAM,EAAE,wBAAwB,IAAI,mBAAmB;AAEvD,QAAM,wBAAwB,MAAM;AAClC,4BAAwB,IAAI;AAAA,EAC9B;AAEA,QAAM,wBAAwB,CAAC,UAA6B;AAC1D,QAAI,MAAM,gBAAgB,SAAS;AACjC,8BAAwB,KAAK;AAAA,IAC/B;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type {\n  PointerEvent as ReactPointerEvent,\n  TouchEvent as ReactTouchEvent,\n} from 'react';\nimport { useRef } from 'react';\n\nimport { useSetOverlayState } from './store/use-set-overlay-state.js';\nimport { useOverlay } from '../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { useTooltip } from '../../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport { useTooltipActions } from '../../core/components/overlay-tooltip/useTooltipActions.js';\nimport { isTapGesture } from '../../core/components/overlay-tooltip/utils/tap-gesture.js';\n\nexport const useOverlayHandlers = () => {\n  const { setOverlayStateInBounds } = useSetOverlayState();\n  const overlay = useOverlay();\n  const tooltipStore = useTooltip();\n  const { unpin } = useTooltipActions();\n  const touchStartPosRef = useRef<{ x: number; y: number } | null>(null);\n\n  const onPointerEnterHandler = () => {\n    setOverlayStateInBounds(true);\n  };\n\n  const onPointerLeaveHandler = (event: ReactPointerEvent) => {\n    if (event.pointerType !== 'touch') {\n      setOverlayStateInBounds(false);\n    }\n  };\n\n  const onEmptyAreaTouchStart = (event: ReactTouchEvent<HTMLDivElement>) => {\n    if (!overlay.overlayRef.current?.contains(event.target as Node)) {\n      touchStartPosRef.current = null;\n      return;\n    }\n    const touch = event.changedTouches[0];\n    if (!touch) {\n      return;\n    }\n    touchStartPosRef.current = { x: touch.clientX, y: touch.clientY };\n  };\n\n  const onEmptyAreaTouchEnd = (event: ReactTouchEvent<HTMLDivElement>) => {\n    if (!overlay.overlayRef.current?.contains(event.target as Node)) {\n      return;\n    }\n    if (\n      event.target instanceof Element &&\n      event.target.closest('button, a, [role=\"button\"]') !== null\n    ) {\n      return;\n    }\n    const touch = event.changedTouches[0];\n    if (!touch) {\n      return;\n    }\n    const start = touchStartPosRef.current;\n    touchStartPosRef.current = null;\n    if (start !== null && !isTapGesture(start, touch)) {\n      return;\n    }\n    if (event.cancelable) {\n      event.preventDefault();\n    }\n    if (tooltipStore.getState().pinned) {\n      unpin();\n    }\n  };\n\n  return {\n    onPointerEnterHandler,\n    onPointerLeaveHandler,\n    onEmptyAreaTouchStart,\n    onEmptyAreaTouchEnd,\n  };\n};\n"],
+  "mappings": "AAIA,SAAS,cAAc;AAEvB,SAAS,0BAA0B;AACnC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAEtB,MAAM,qBAAqB,MAAM;AACtC,QAAM,EAAE,wBAAwB,IAAI,mBAAmB;AACvD,QAAM,UAAU,WAAW;AAC3B,QAAM,eAAe,WAAW;AAChC,QAAM,EAAE,MAAM,IAAI,kBAAkB;AACpC,QAAM,mBAAmB,OAAwC,IAAI;AAErE,QAAM,wBAAwB,MAAM;AAClC,4BAAwB,IAAI;AAAA,EAC9B;AAEA,QAAM,wBAAwB,CAAC,UAA6B;AAC1D,QAAI,MAAM,gBAAgB,SAAS;AACjC,8BAAwB,KAAK;AAAA,IAC/B;AAAA,EACF;AAEA,QAAM,wBAAwB,CAAC,UAA2C;AACxE,QAAI,CAAC,QAAQ,WAAW,SAAS,SAAS,MAAM,MAAc,GAAG;AAC/D,uBAAiB,UAAU;AAC3B;AAAA,IACF;AACA,UAAM,QAAQ,MAAM,eAAe,CAAC;AACpC,QAAI,CAAC,OAAO;AACV;AAAA,IACF;AACA,qBAAiB,UAAU,EAAE,GAAG,MAAM,SAAS,GAAG,MAAM,QAAQ;AAAA,EAClE;AAEA,QAAM,sBAAsB,CAAC,UAA2C;AACtE,QAAI,CAAC,QAAQ,WAAW,SAAS,SAAS,MAAM,MAAc,GAAG;AAC/D;AAAA,IACF;AACA,QACE,MAAM,kBAAkB,WACxB,MAAM,OAAO,QAAQ,4BAA4B,MAAM,MACvD;AACA;AAAA,IACF;AACA,UAAM,QAAQ,MAAM,eAAe,CAAC;AACpC,QAAI,CAAC,OAAO;AACV;AAAA,IACF;AACA,UAAM,QAAQ,iBAAiB;AAC/B,qBAAiB,UAAU;AAC3B,QAAI,UAAU,QAAQ,CAAC,aAAa,OAAO,KAAK,GAAG;AACjD;AAAA,IACF;AACA,QAAI,MAAM,YAAY;AACpB,YAAM,eAAe;AAAA,IACvB;AACA,QAAI,aAAa,SAAS,EAAE,QAAQ;AAClC,YAAM;AAAA,IACR;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/pie/hooks/useSliceHandlers.js

@@ -66,6 +66,7 @@ function useSliceHandlers(sliceId, data, formatter) {
     }
   };
   const onTouchEndHandler = (event) => {
+    event.stopPropagation();
     if (event.cancelable) {
       event.preventDefault();
     }

package/esm/charts/pie/hooks/useSliceHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/hooks/useSliceHandlers.ts"],
-  "sourcesContent": ["import type {\n  MouseEvent as ReactMouseEvent,\n  TouchEvent as ReactTouchEvent,\n} from 'react';\n\nimport { useTooltip } from '../../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport type { Data } from '../../core/components/overlay-tooltip/types.js';\nimport { useTooltipActions } from '../../core/components/overlay-tooltip/useTooltipActions.js';\nimport { useEventErrorHandler } from '../../core/hooks/useEventErrorHandler.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport type { InternalSliceData } from '../types/internal/pie-chart.js';\nimport { getTooltipContent } from '../utils/get-tooltip-content.js';\n\nconst toTooltipSeries = (\n  sliceId: string,\n  data: InternalSliceData,\n  handlerCatch: (callback: unknown) => number,\n  formatter: Formatter,\n) => {\n  const tooltipContent = getTooltipContent(\n    sliceId,\n    data,\n    handlerCatch,\n    formatter,\n  );\n\n  return {\n    name: tooltipContent.name,\n    value: tooltipContent.absoluteValue,\n    color: tooltipContent.color,\n    relativeValue: tooltipContent.relativeValue,\n    relativeValueUnit: '%',\n  };\n};\n\nconst buildTooltipData = (\n  sliceId: string,\n  data: InternalSliceData,\n  handlerCatch: (callback: unknown) => number,\n  formatter: Formatter,\n): Data => {\n  const series = data.groupedSlices?.length\n    ? data.groupedSlices.map((groupedSlice) =>\n        toTooltipSeries(\n          `slice-${groupedSlice.id}`,\n          groupedSlice,\n          handlerCatch,\n          formatter,\n        ),\n      )\n    : [toTooltipSeries(sliceId, data, handlerCatch, formatter)];\n\n  return {\n    metadata: {\n      sliceId: data.id,\n    },\n    geometry: 'pie',\n    series,\n  };\n};\n\n/**\n * Hook that generates handlers for mouse and touch interactions.\n * @param sliceId - Id of the slice.\n * @param data - Slice data for this slice.\n * @param formatter - Formatter to be used.\n * @returns Handlers to perform mouse and touch interactions.\n */\nexport function useSliceHandlers(\n  sliceId: string,\n  data: InternalSliceData,\n  formatter: Formatter,\n) {\n  const handlerCatch = useEventErrorHandler();\n  const tooltipState = useTooltip();\n  const { hover, pin, unpin } = useTooltipActions();\n\n  const onPointerMoveHandler = (event: ReactMouseEvent) => {\n    if (tooltipState.getState().pinned) {\n      return;\n    }\n\n    const tooltipData = buildTooltipData(\n      sliceId,\n      data,\n      handlerCatch,\n      formatter,\n    );\n\n    hover(event, tooltipData);\n  };\n\n  const onMouseClickHandler = (event: ReactMouseEvent) => {\n    event.stopPropagation();\n\n    const tooltipData = buildTooltipData(\n      sliceId,\n      data,\n      handlerCatch,\n      formatter,\n    );\n\n    if (tooltipState.getState().pinned) {\n      unpin();\n      hover(event, tooltipData);\n    } else {\n      pin(event, tooltipData);\n    }\n  };\n\n  // Handles tooltip pin/unpin on touch. Fires before the browser's synthetic click\n  // so the pinned state is established before iOS can suppress that click event.\n  // Calling preventDefault() suppresses the subsequent synthetic click so onClick\n  // does not double-fire.\n  const onTouchEndHandler = (event: ReactTouchEvent) => {\n    if (event.cancelable) {\n      event.preventDefault();\n    }\n\n    const touch = event.changedTouches[0];\n    if (!touch) {\n      return;\n    }\n\n    const tooltipData = buildTooltipData(\n      sliceId,\n      data,\n      handlerCatch,\n      formatter,\n    );\n\n    if (tooltipState.getState().pinned) {\n      unpin();\n    } else {\n      pin({ clientX: touch.clientX, clientY: touch.clientY }, tooltipData);\n    }\n  };\n\n  return {\n    onPointerMoveHandler,\n    onMouseClickHandler,\n    onTouchEndHandler,\n  };\n}\n"],
-  "mappings": "AAKA,SAAS,kBAAkB;AAE3B,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AAGrC,SAAS,yBAAyB;AAElC,MAAM,kBAAkB,CACtB,SACA,MACA,cACA,cACG;AACH,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO;AAAA,IACL,MAAM,eAAe;AAAA,IACrB,OAAO,eAAe;AAAA,IACtB,OAAO,eAAe;AAAA,IACtB,eAAe,eAAe;AAAA,IAC9B,mBAAmB;AAAA,EACrB;AACF;AAEA,MAAM,mBAAmB,CACvB,SACA,MACA,cACA,cACS;AACT,QAAM,SAAS,KAAK,eAAe,SAC/B,KAAK,cAAc;AAAA,IAAI,CAAC,iBACtB;AAAA,MACE,SAAS,aAAa,EAAE;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IACA,CAAC,gBAAgB,SAAS,MAAM,cAAc,SAAS,CAAC;AAE5D,SAAO;AAAA,IACL,UAAU;AAAA,MACR,SAAS,KAAK;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EACF;AACF;AASO,SAAS,iBACd,SACA,MACA,WACA;AACA,QAAM,eAAe,qBAAqB;AAC1C,QAAM,eAAe,WAAW;AAChC,QAAM,EAAE,OAAO,KAAK,MAAM,IAAI,kBAAkB;AAEhD,QAAM,uBAAuB,CAAC,UAA2B;AACvD,QAAI,aAAa,SAAS,EAAE,QAAQ;AAClC;AAAA,IACF;AAEA,UAAM,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,OAAO,WAAW;AAAA,EAC1B;AAEA,QAAM,sBAAsB,CAAC,UAA2B;AACtD,UAAM,gBAAgB;AAEtB,UAAM,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,QAAI,aAAa,SAAS,EAAE,QAAQ;AAClC,YAAM;AACN,YAAM,OAAO,WAAW;AAAA,IAC1B,OAAO;AACL,UAAI,OAAO,WAAW;AAAA,IACxB;AAAA,EACF;AAMA,QAAM,oBAAoB,CAAC,UAA2B;AACpD,QAAI,MAAM,YAAY;AACpB,YAAM,eAAe;AAAA,IACvB;AAEA,UAAM,QAAQ,MAAM,eAAe,CAAC;AACpC,QAAI,CAAC,OAAO;AACV;AAAA,IACF;AAEA,UAAM,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,QAAI,aAAa,SAAS,EAAE,QAAQ;AAClC,YAAM;AAAA,IACR,OAAO;AACL,UAAI,EAAE,SAAS,MAAM,SAAS,SAAS,MAAM,QAAQ,GAAG,WAAW;AAAA,IACrE;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type {\n  MouseEvent as ReactMouseEvent,\n  TouchEvent as ReactTouchEvent,\n} from 'react';\n\nimport { useTooltip } from '../../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport type { Data } from '../../core/components/overlay-tooltip/types.js';\nimport { useTooltipActions } from '../../core/components/overlay-tooltip/useTooltipActions.js';\nimport { useEventErrorHandler } from '../../core/hooks/useEventErrorHandler.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport type { InternalSliceData } from '../types/internal/pie-chart.js';\nimport { getTooltipContent } from '../utils/get-tooltip-content.js';\n\nconst toTooltipSeries = (\n  sliceId: string,\n  data: InternalSliceData,\n  handlerCatch: (callback: unknown) => number,\n  formatter: Formatter,\n) => {\n  const tooltipContent = getTooltipContent(\n    sliceId,\n    data,\n    handlerCatch,\n    formatter,\n  );\n\n  return {\n    name: tooltipContent.name,\n    value: tooltipContent.absoluteValue,\n    color: tooltipContent.color,\n    relativeValue: tooltipContent.relativeValue,\n    relativeValueUnit: '%',\n  };\n};\n\nconst buildTooltipData = (\n  sliceId: string,\n  data: InternalSliceData,\n  handlerCatch: (callback: unknown) => number,\n  formatter: Formatter,\n): Data => {\n  const series = data.groupedSlices?.length\n    ? data.groupedSlices.map((groupedSlice) =>\n        toTooltipSeries(\n          `slice-${groupedSlice.id}`,\n          groupedSlice,\n          handlerCatch,\n          formatter,\n        ),\n      )\n    : [toTooltipSeries(sliceId, data, handlerCatch, formatter)];\n\n  return {\n    metadata: {\n      sliceId: data.id,\n    },\n    geometry: 'pie',\n    series,\n  };\n};\n\n/**\n * Hook that generates handlers for mouse and touch interactions.\n * @param sliceId - Id of the slice.\n * @param data - Slice data for this slice.\n * @param formatter - Formatter to be used.\n * @returns Handlers to perform mouse and touch interactions.\n */\nexport function useSliceHandlers(\n  sliceId: string,\n  data: InternalSliceData,\n  formatter: Formatter,\n) {\n  const handlerCatch = useEventErrorHandler();\n  const tooltipState = useTooltip();\n  const { hover, pin, unpin } = useTooltipActions();\n\n  const onPointerMoveHandler = (event: ReactMouseEvent) => {\n    if (tooltipState.getState().pinned) {\n      return;\n    }\n\n    const tooltipData = buildTooltipData(\n      sliceId,\n      data,\n      handlerCatch,\n      formatter,\n    );\n\n    hover(event, tooltipData);\n  };\n\n  const onMouseClickHandler = (event: ReactMouseEvent) => {\n    event.stopPropagation();\n\n    const tooltipData = buildTooltipData(\n      sliceId,\n      data,\n      handlerCatch,\n      formatter,\n    );\n\n    if (tooltipState.getState().pinned) {\n      unpin();\n      hover(event, tooltipData);\n    } else {\n      pin(event, tooltipData);\n    }\n  };\n\n  // Handles tooltip pin/unpin on touch.\n  // Calling preventDefault() suppresses the subsequent synthetic click so onClick\n  // does not double-fire.\n  const onTouchEndHandler = (event: ReactTouchEvent) => {\n    event.stopPropagation();\n    if (event.cancelable) {\n      event.preventDefault();\n    }\n\n    const touch = event.changedTouches[0];\n    if (!touch) {\n      return;\n    }\n\n    const tooltipData = buildTooltipData(\n      sliceId,\n      data,\n      handlerCatch,\n      formatter,\n    );\n\n    if (tooltipState.getState().pinned) {\n      unpin();\n    } else {\n      pin({ clientX: touch.clientX, clientY: touch.clientY }, tooltipData);\n    }\n  };\n\n  return {\n    onPointerMoveHandler,\n    onMouseClickHandler,\n    onTouchEndHandler,\n  };\n}\n"],
+  "mappings": "AAKA,SAAS,kBAAkB;AAE3B,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AAGrC,SAAS,yBAAyB;AAElC,MAAM,kBAAkB,CACtB,SACA,MACA,cACA,cACG;AACH,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO;AAAA,IACL,MAAM,eAAe;AAAA,IACrB,OAAO,eAAe;AAAA,IACtB,OAAO,eAAe;AAAA,IACtB,eAAe,eAAe;AAAA,IAC9B,mBAAmB;AAAA,EACrB;AACF;AAEA,MAAM,mBAAmB,CACvB,SACA,MACA,cACA,cACS;AACT,QAAM,SAAS,KAAK,eAAe,SAC/B,KAAK,cAAc;AAAA,IAAI,CAAC,iBACtB;AAAA,MACE,SAAS,aAAa,EAAE;AAAA,MACxB;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IACA,CAAC,gBAAgB,SAAS,MAAM,cAAc,SAAS,CAAC;AAE5D,SAAO;AAAA,IACL,UAAU;AAAA,MACR,SAAS,KAAK;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EACF;AACF;AASO,SAAS,iBACd,SACA,MACA,WACA;AACA,QAAM,eAAe,qBAAqB;AAC1C,QAAM,eAAe,WAAW;AAChC,QAAM,EAAE,OAAO,KAAK,MAAM,IAAI,kBAAkB;AAEhD,QAAM,uBAAuB,CAAC,UAA2B;AACvD,QAAI,aAAa,SAAS,EAAE,QAAQ;AAClC;AAAA,IACF;AAEA,UAAM,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,OAAO,WAAW;AAAA,EAC1B;AAEA,QAAM,sBAAsB,CAAC,UAA2B;AACtD,UAAM,gBAAgB;AAEtB,UAAM,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,QAAI,aAAa,SAAS,EAAE,QAAQ;AAClC,YAAM;AACN,YAAM,OAAO,WAAW;AAAA,IAC1B,OAAO;AACL,UAAI,OAAO,WAAW;AAAA,IACxB;AAAA,EACF;AAKA,QAAM,oBAAoB,CAAC,UAA2B;AACpD,UAAM,gBAAgB;AACtB,QAAI,MAAM,YAAY;AACpB,YAAM,eAAe;AAAA,IACvB;AAEA,UAAM,QAAQ,MAAM,eAAe,CAAC;AACpC,QAAI,CAAC,OAAO;AACV;AAAA,IACF;AAEA,UAAM,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,QAAI,aAAa,SAAS,EAAE,QAAQ;AAClC,YAAM;AAAA,IACR,OAAO;AACL,UAAI,EAAE,SAAS,MAAM,SAAS,SAAS,MAAM,QAAQ,GAAG,WAAW;AAAA,IACrE;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/pie/types/default.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/types/default.ts"],
-  "sourcesContent": ["import Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport {\n  ThresholdType,\n  RequiredPieChartConfiguration,\n  PieChartLegendConfig,\n} from './pie-chart.config.js';\nimport { DEFAULT_TRUNCATION_MODE, defaultRatio } from '../../core/constants.js';\n\nexport const DEFAULT_CONTAINER_PADDING = Spacings.Size6;\nexport const DEFAULT_SIZE = 300;\nexport const DONUT_INTERNAL_RADIUS = 0.75;\nexport const PIE_INTERNAL_RADIUS = 1;\nexport const LABEL_FONT_SIZE = 12;\nexport const LABEL_FONT_SIZE_MULTIPLIER = 1.5;\nexport const DEFAULT_LEGEND: PieChartLegendConfig = {\n  position: 'auto',\n  hidden: false,\n  ratio: defaultRatio,\n};\n\nexport const defaultConfig: RequiredPieChartConfiguration = {\n  height: DEFAULT_SIZE,\n  colorPalette: 'categorical',\n  labels: { hidden: false, valueType: 'relative' },\n  grouping: { threshold: { type: 'relative', value: 2 } },\n  legend: DEFAULT_LEGEND,\n  formatter: () => '',\n  truncationMode: DEFAULT_TRUNCATION_MODE,\n};\n\nexport const zIndicesPieAreas = {\n  toolbar: 2,\n  overlay: 1,\n};\n\nexport const THRESHOLD_TYPE: Record<string, ThresholdType> = {\n  ABSOLUTE: 'absolute',\n  RELATIVE: 'relative',\n  NUMBER_OF_SLICES: 'number-of-slices',\n};\n\nexport const PIE_CATEGORICAL_LEGEND_SIZES = {\n  minWidth: 0.1,\n  minHeight: 0.1,\n  maxWidth: 0.8,\n  maxHeight: 0.7,\n};\n\n"],
+  "sourcesContent": ["import Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport {\n  ThresholdType,\n  RequiredPieChartConfiguration,\n  PieChartLegendConfig,\n} from './pie-chart.config.js';\nimport { DEFAULT_TRUNCATION_MODE, defaultRatio } from '../../core/constants.js';\n\nexport const DEFAULT_CONTAINER_PADDING = Spacings.Size6;\nexport const DEFAULT_SIZE = 300;\nexport const DONUT_INTERNAL_RADIUS = 0.75;\nexport const PIE_INTERNAL_RADIUS = 1;\nexport const LABEL_FONT_SIZE = 12;\nexport const LABEL_FONT_SIZE_MULTIPLIER = 1.5;\nexport const DEFAULT_LEGEND: PieChartLegendConfig = {\n  position: 'auto',\n  hidden: false,\n  ratio: defaultRatio,\n};\n\nexport const defaultConfig: RequiredPieChartConfiguration = {\n  height: DEFAULT_SIZE,\n  colorPalette: 'categorical',\n  labels: { hidden: false, valueType: 'relative' },\n  grouping: { threshold: { type: 'relative', value: 2 } },\n  legend: DEFAULT_LEGEND,\n  formatter: () => '',\n  truncationMode: DEFAULT_TRUNCATION_MODE,\n};\n\nexport const zIndicesPieAreas = {\n  toolbar: 2,\n  overlay: 1,\n};\n\nexport const THRESHOLD_TYPE: Record<string, ThresholdType> = {\n  ABSOLUTE: 'absolute',\n  RELATIVE: 'relative',\n  NUMBER_OF_SLICES: 'number-of-slices',\n};\n\nexport const PIE_CATEGORICAL_LEGEND_SIZES = {\n  minWidth: 0.1,\n  minHeight: 0.1,\n  maxWidth: 0.8,\n  maxHeight: 0.7,\n};\n"],
   "mappings": "AAAA,OAAO,cAAc;AAOrB,SAAS,yBAAyB,oBAAoB;AAE/C,MAAM,4BAA4B,SAAS;AAC3C,MAAM,eAAe;AACrB,MAAM,wBAAwB;AAC9B,MAAM,sBAAsB;AAC5B,MAAM,kBAAkB;AACxB,MAAM,6BAA6B;AACnC,MAAM,iBAAuC;AAAA,EAClD,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,MAAM,gBAA+C;AAAA,EAC1D,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,QAAQ,EAAE,QAAQ,OAAO,WAAW,WAAW;AAAA,EAC/C,UAAU,EAAE,WAAW,EAAE,MAAM,YAAY,OAAO,EAAE,EAAE;AAAA,EACtD,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EACjB,gBAAgB;AAClB;AAEO,MAAM,mBAAmB;AAAA,EAC9B,SAAS;AAAA,EACT,SAAS;AACX;AAEO,MAAM,iBAAgD;AAAA,EAC3D,UAAU;AAAA,EACV,UAAU;AAAA,EACV,kBAAkB;AACpB;AAEO,MAAM,+BAA+B;AAAA,EAC1C,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,WAAW;AACb;",
   "names": []
 }

package/esm/charts/sankey-chart/SankeyChart.css

@@ -1,15 +1,30 @@
-._s3m3d0-3-13-2 {
+._s3m3d0-3-14-0 {
   position: relative;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
 }
-._s3m3d1-3-13-2 {
+._s3m3d1-3-14-0 {
   display: grid;
   grid-template-columns: minmax(0, auto) minmax(60%, 1fr) minmax(0, auto);
   width: 100%;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
+}
+._s3m3d2-3-14-0 {
+  position: relative;
+  overflow: hidden;
+}
+._s3m3d3-3-14-0 {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
-._s3m3d2-3-13-2 {
+._s3m3d4-3-14-0 {
   position: relative;
+  flex: 1;
+  min-height: 0;
   overflow: hidden;
 }

package/esm/charts/sankey-chart/SankeyChart.sty.js

@@ -1,8 +1,12 @@
 import "./SankeyChart.css";
-var graphAreaCell = "_s3m3d2-3-13-2";
-var graphAreaContainer = "_s3m3d1-3-13-2";
-var graphAreaWrapper = "_s3m3d0-3-13-2";
+var canvasAreaCell = "_s3m3d3-3-14-0";
+var canvasZone = "_s3m3d4-3-14-0";
+var graphAreaCell = "_s3m3d2-3-14-0";
+var graphAreaContainer = "_s3m3d1-3-14-0";
+var graphAreaWrapper = "_s3m3d0-3-14-0";
 export {
+  canvasAreaCell,
+  canvasZone,
   graphAreaCell,
   graphAreaContainer,
   graphAreaWrapper

package/esm/charts/sankey-chart/SankeyChart.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/sankey-chart/SankeyChart.css.ts"],
-  "sourcesContent": ["import './SankeyChart.css';\nexport var graphAreaCell = '_s3m3d2-3-13-2';\nexport var graphAreaContainer = '_s3m3d1-3-13-2';\nexport var graphAreaWrapper = '_s3m3d0-3-13-2';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,qBAAqB;AACzB,IAAI,mBAAmB;",
+  "sourcesContent": ["import './SankeyChart.css';\nexport var canvasAreaCell = '_s3m3d3-3-14-0';\nexport var canvasZone = '_s3m3d4-3-14-0';\nexport var graphAreaCell = '_s3m3d2-3-14-0';\nexport var graphAreaContainer = '_s3m3d1-3-14-0';\nexport var graphAreaWrapper = '_s3m3d0-3-14-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,aAAa;AACjB,IAAI,gBAAgB;AACpB,IAAI,qBAAqB;AACzB,IAAI,mBAAmB;",
   "names": []
 }