npm - @dynatrace/strato-components - Versions diffs - 3.4.1 → 3.5.2 - Mend

@dynatrace/strato-components 3.4.1 → 3.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2312) hide show

package/esm/charts/core/components/legend/range/components/RangeLegendMarkers/RangeLegendMarkers.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/legend/range/components/RangeLegendMarkers/RangeLegendMarkers.css.ts"],
-  "sourcesContent": ["import './RangeLegendMarkers.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var legendMarkersSvg = _7a468({defaultClassName:'_u32l830-3-4-1',variantClassNames:{isHorizontal:{true:'_u32l831-3-4-1',false:'_u32l832-3-4-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './RangeLegendMarkers.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var legendMarkersSvg = _7a468({defaultClassName:'_u32l830-3-5-2',variantClassNames:{isHorizontal:{true:'_u32l831-3-5-2',false:'_u32l832-3-5-2'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,cAAa,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.css CHANGED Viewed

@@ -1,21 +1,21 @@
-._6z9t250-3-4-1 {
+._6z9t250-3-5-2 {
   display: block;
   border-radius: 2px;
   overflow: hidden;
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._6z9t250-3-4-1:focus {
+._6z9t250-3-5-2:focus {
   outline: none;
 }
-._6z9t251-3-4-1 {
+._6z9t251-3-5-2 {
   margin: 0 auto;
   width: 100%;
   height: 10px;
 }
-._6z9t252-3-4-1 {
+._6z9t252-3-5-2 {
   height: 100%;
   width: 10px;
 }
-._6z9t250-3-4-1 rect:focus {
+._6z9t250-3-5-2 rect:focus {
   outline: none;
 }

package/esm/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
-import { ORIENTATION } from "../../../../chart-layout/types/constants.js";
+import { ORIENTATION } from "../../../../../constants.js";
 import { useOrientation } from "../../context/RangeLegendOrientationContext.js";
 import { useScale } from "../../context/RangeLegendScaleContext.js";
 import { useLegendFormattedLabels } from "../../hooks/use-legend-formatted-labels.js";

package/esm/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.tsx"],
-  "sourcesContent": ["import { useRef } from 'react';\n\nimport { ORIENTATION } from '../../../../chart-layout/types/constants.js';\nimport { useOrientation } from '../../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../../context/RangeLegendScaleContext.js';\nimport { useLegendFormattedLabels } from '../../hooks/use-legend-formatted-labels.js';\nimport type { InternalRangeItem } from '../../types/range-legend.internal.js';\nimport { RangeLegendSegmentsItem } from '../RangeLegendSegmentsItem.js';\nimport { legendSvg } from './RangeLegendSegments.sty.js';\n\ninterface RangeLegendSegmentsProps {\n  items: InternalRangeItem[];\n  minValue?: number;\n  maxValue?: number;\n}\n\nexport const RangeLegendSegments = (props: RangeLegendSegmentsProps) => {\n  const { items } = props;\n\n  const svgRef = useRef<SVGSVGElement>(null);\n\n  const { scale } = useScale();\n  const { orientation } = useOrientation();\n  const reversedScale = orientation === ORIENTATION.Vertical;\n  const internalRangeItems = useLegendFormattedLabels(items);\n\n  return (\n    <svg\n      ref={svgRef}\n      className={legendSvg({\n        isHorizontal: orientation === ORIENTATION.Horizontal,\n      })}\n      role=\"presentation\"\n      data-testid=\"range-legend-segments\"\n    >\n      {internalRangeItems.map((item) => {\n        const startPosition = scale(reversedScale ? item.to : item.from);\n        const endPosition = scale(reversedScale ? item.from : item.to);\n        const segmentSize = endPosition - startPosition;\n\n        return (\n          <RangeLegendSegmentsItem\n            key={`segment-'${item.from}-${item.to}`}\n            item={item}\n            segmentSize={segmentSize}\n            startPosition={startPosition}\n          />\n        );\n      })}\n    </svg>\n  );\n};\n"],
+  "sourcesContent": ["import { useRef } from 'react';\n\nimport { ORIENTATION } from '../../../../../constants.js';\nimport { useOrientation } from '../../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../../context/RangeLegendScaleContext.js';\nimport { useLegendFormattedLabels } from '../../hooks/use-legend-formatted-labels.js';\nimport type { InternalRangeItem } from '../../types/range-legend.internal.js';\nimport { RangeLegendSegmentsItem } from '../RangeLegendSegmentsItem.js';\nimport { legendSvg } from './RangeLegendSegments.sty.js';\n\ninterface RangeLegendSegmentsProps {\n  items: InternalRangeItem[];\n  minValue?: number;\n  maxValue?: number;\n}\n\nexport const RangeLegendSegments = (props: RangeLegendSegmentsProps) => {\n  const { items } = props;\n\n  const svgRef = useRef<SVGSVGElement>(null);\n\n  const { scale } = useScale();\n  const { orientation } = useOrientation();\n  const reversedScale = orientation === ORIENTATION.Vertical;\n  const internalRangeItems = useLegendFormattedLabels(items);\n\n  return (\n    <svg\n      ref={svgRef}\n      className={legendSvg({\n        isHorizontal: orientation === ORIENTATION.Horizontal,\n      })}\n      role=\"presentation\"\n      data-testid=\"range-legend-segments\"\n    >\n      {internalRangeItems.map((item) => {\n        const startPosition = scale(reversedScale ? item.to : item.from);\n        const endPosition = scale(reversedScale ? item.from : item.to);\n        const segmentSize = endPosition - startPosition;\n\n        return (\n          <RangeLegendSegmentsItem\n            key={`segment-'${item.from}-${item.to}`}\n            item={item}\n            segmentSize={segmentSize}\n            startPosition={startPosition}\n          />\n        );\n      })}\n    </svg>\n  );\n};\n"],
   "mappings": "AAyCU;AAzCV,SAAS,cAAc;AAEvB,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,gCAAgC;AAEzC,SAAS,+BAA+B;AACxC,SAAS,iBAAiB;AAQnB,MAAM,sBAAsB,CAAC,UAAoC;AACtE,QAAM,EAAE,MAAM,IAAI;AAElB,QAAM,SAAS,OAAsB,IAAI;AAEzC,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,gBAAgB,gBAAgB,YAAY;AAClD,QAAM,qBAAqB,yBAAyB,KAAK;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,UAAU;AAAA,QACnB,cAAc,gBAAgB,YAAY;AAAA,MAC5C,CAAC;AAAA,MACD,MAAK;AAAA,MACL,eAAY;AAAA,MAEX,6BAAmB,IAAI,CAAC,SAAS;AAChC,cAAM,gBAAgB,MAAM,gBAAgB,KAAK,KAAK,KAAK,IAAI;AAC/D,cAAM,cAAc,MAAM,gBAAgB,KAAK,OAAO,KAAK,EAAE;AAC7D,cAAM,cAAc,cAAc;AAElC,eACE;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA;AAAA,UAHK,YAAY,KAAK,IAAI,IAAI,KAAK,EAAE;AAAA,QAIvC;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.sty.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import "./RangeLegendSegments.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var legendSvg = _7a468({ defaultClassName: "_6z9t250-3-4-1", variantClassNames: { isHorizontal: { true: "_6z9t251-3-4-1", false: "_6z9t252-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendSvg = _7a468({ defaultClassName: "_6z9t250-3-5-2", variantClassNames: { isHorizontal: { true: "_6z9t251-3-5-2", false: "_6z9t252-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   legendSvg
 };

package/esm/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/legend/range/components/RangeLegendSegments/RangeLegendSegments.css.ts"],
-  "sourcesContent": ["import './RangeLegendSegments.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var legendSvg = _7a468({defaultClassName:'_6z9t250-3-4-1',variantClassNames:{isHorizontal:{true:'_6z9t251-3-4-1',false:'_6z9t252-3-4-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './RangeLegendSegments.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var legendSvg = _7a468({defaultClassName:'_6z9t250-3-5-2',variantClassNames:{isHorizontal:{true:'_6z9t251-3-5-2',false:'_6z9t252-3-5-2'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,cAAa,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/legend/range/components/RangeLegendSegmentsItem.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useRef } from "react";
 import Colors from "@dynatrace/strato-design-tokens/colors";
-import { ORIENTATION } from "../../../chart-layout/types/constants.js";
+import { ORIENTATION } from "../../../../constants.js";
 import { DEFAULT_GAP_THICKNESS, DEFAULT_SEGMENT_COLOR } from "../constants.js";
 import { useOrientation } from "../context/RangeLegendOrientationContext.js";
 import { useScale } from "../context/RangeLegendScaleContext.js";

package/esm/charts/core/components/legend/range/components/RangeLegendSegmentsItem.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/legend/range/components/RangeLegendSegmentsItem.tsx"],
-  "sourcesContent": ["import { useRef } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { ORIENTATION } from '../../../chart-layout/types/constants.js';\nimport { DEFAULT_GAP_THICKNESS, DEFAULT_SEGMENT_COLOR } from '../constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../context/RangeLegendScaleContext.js';\nimport { useLegendSegmentKeyboardHandler } from '../hooks/use-legend-segment-keyboard-handler.js';\nimport type { RangeItem } from '../types/range-legend.js';\nimport { getSegmentItemPositionAndSize } from '../utils/get-segment-item-position-and-size.js';\nimport { getStrokeDasharray } from '../utils/get-stroke-dasharray.js';\n\ninterface RangeLegendSegmentsItemProps {\n  item: RangeItem;\n  segmentSize: number;\n  startPosition: number;\n}\n\nexport const RangeLegendSegmentsItem = ({\n  item,\n  segmentSize,\n  startPosition,\n}: RangeLegendSegmentsItemProps) => {\n  const rectRef = useRef<SVGRectElement>(null);\n\n  const { orientation } = useOrientation();\n  const isVertical = orientation === ORIENTATION.Vertical;\n\n  const { scale } = useScale();\n  const [, endScalePosition] = scale.range();\n\n  const hasPreviousGap = startPosition > 0;\n  const hasNextGap = Math.ceil(startPosition + segmentSize) < endScalePosition;\n\n  const { itemHeight, itemWidth, itemX, itemY } = getSegmentItemPositionAndSize(\n    orientation,\n    startPosition,\n    segmentSize,\n  );\n\n  const strokeDashArray = getStrokeDasharray(\n    { height: itemHeight, width: itemWidth },\n    {\n      bottom: isVertical && hasNextGap,\n      left: !isVertical && hasPreviousGap,\n      right: !isVertical && hasNextGap,\n      top: isVertical && hasPreviousGap,\n    },\n  );\n\n  const { onBlurHandler, onFocusHandler, onKeyDownHandler } =\n    useLegendSegmentKeyboardHandler(\n      rectRef.current,\n      item.from,\n      item.to,\n      startPosition,\n    );\n\n  return (\n    <rect\n      ref={rectRef}\n      x={itemX}\n      y={itemY}\n      width={itemWidth}\n      height={itemHeight}\n      fill={item.color ?? DEFAULT_SEGMENT_COLOR}\n      stroke={Colors.Background.Base.Default}\n      strokeWidth={DEFAULT_GAP_THICKNESS}\n      strokeDasharray={strokeDashArray}\n      role=\"presentation\"\n      tabIndex={0}\n      onFocus={onFocusHandler}\n      onBlur={onBlurHandler}\n      onKeyDown={onKeyDownHandler}\n    />\n  );\n};\n"],
+  "sourcesContent": ["import { useRef } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { ORIENTATION } from '../../../../constants.js';\nimport { DEFAULT_GAP_THICKNESS, DEFAULT_SEGMENT_COLOR } from '../constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../context/RangeLegendScaleContext.js';\nimport { useLegendSegmentKeyboardHandler } from '../hooks/use-legend-segment-keyboard-handler.js';\nimport type { RangeItem } from '../types/range-legend.js';\nimport { getSegmentItemPositionAndSize } from '../utils/get-segment-item-position-and-size.js';\nimport { getStrokeDasharray } from '../utils/get-stroke-dasharray.js';\n\ninterface RangeLegendSegmentsItemProps {\n  item: RangeItem;\n  segmentSize: number;\n  startPosition: number;\n}\n\nexport const RangeLegendSegmentsItem = ({\n  item,\n  segmentSize,\n  startPosition,\n}: RangeLegendSegmentsItemProps) => {\n  const rectRef = useRef<SVGRectElement>(null);\n\n  const { orientation } = useOrientation();\n  const isVertical = orientation === ORIENTATION.Vertical;\n\n  const { scale } = useScale();\n  const [, endScalePosition] = scale.range();\n\n  const hasPreviousGap = startPosition > 0;\n  const hasNextGap = Math.ceil(startPosition + segmentSize) < endScalePosition;\n\n  const { itemHeight, itemWidth, itemX, itemY } = getSegmentItemPositionAndSize(\n    orientation,\n    startPosition,\n    segmentSize,\n  );\n\n  const strokeDashArray = getStrokeDasharray(\n    { height: itemHeight, width: itemWidth },\n    {\n      bottom: isVertical && hasNextGap,\n      left: !isVertical && hasPreviousGap,\n      right: !isVertical && hasNextGap,\n      top: isVertical && hasPreviousGap,\n    },\n  );\n\n  const { onBlurHandler, onFocusHandler, onKeyDownHandler } =\n    useLegendSegmentKeyboardHandler(\n      rectRef.current,\n      item.from,\n      item.to,\n      startPosition,\n    );\n\n  return (\n    <rect\n      ref={rectRef}\n      x={itemX}\n      y={itemY}\n      width={itemWidth}\n      height={itemHeight}\n      fill={item.color ?? DEFAULT_SEGMENT_COLOR}\n      stroke={Colors.Background.Base.Default}\n      strokeWidth={DEFAULT_GAP_THICKNESS}\n      strokeDasharray={strokeDashArray}\n      role=\"presentation\"\n      tabIndex={0}\n      onFocus={onFocusHandler}\n      onBlur={onBlurHandler}\n      onKeyDown={onKeyDownHandler}\n    />\n  );\n};\n"],
   "mappings": "AA4DI;AA5DJ,SAAS,cAAc;AAEvB,OAAO,YAAY;AAEnB,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB,6BAA6B;AAC7D,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,uCAAuC;AAEhD,SAAS,qCAAqC;AAC9C,SAAS,0BAA0B;AAQ5B,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,MAAoC;AAClC,QAAM,UAAU,OAAuB,IAAI;AAE3C,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,aAAa,gBAAgB,YAAY;AAE/C,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,CAAC,EAAE,gBAAgB,IAAI,MAAM,MAAM;AAEzC,QAAM,iBAAiB,gBAAgB;AACvC,QAAM,aAAa,KAAK,KAAK,gBAAgB,WAAW,IAAI;AAE5D,QAAM,EAAE,YAAY,WAAW,OAAO,MAAM,IAAI;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB;AAAA,IACtB,EAAE,QAAQ,YAAY,OAAO,UAAU;AAAA,IACvC;AAAA,MACE,QAAQ,cAAc;AAAA,MACtB,MAAM,CAAC,cAAc;AAAA,MACrB,OAAO,CAAC,cAAc;AAAA,MACtB,KAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAEA,QAAM,EAAE,eAAe,gBAAgB,iBAAiB,IACtD;AAAA,IACE,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AAAA,EACF;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM,KAAK,SAAS;AAAA,MACpB,QAAQ,OAAO,WAAW,KAAK;AAAA,MAC/B,aAAa;AAAA,MACb,iBAAiB;AAAA,MACjB,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,WAAW;AAAA;AAAA,EACb;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/legend/range/components/RangeLegendSegmentsOverlay.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef } from "react";
-import { ORIENTATION } from "../../../chart-layout/types/constants.js";
+import { ORIENTATION } from "../../../../constants.js";
 import { OVERLAY_ADDITIONAL_SIZE, OVERLAY_OFFSET } from "../constants.js";
 import { useOrientation } from "../context/RangeLegendOrientationContext.js";
 import { useLegendSegmentsOverlayHandlers } from "../hooks/use-legend-segments-overlay-handlers.js";

package/esm/charts/core/components/legend/range/components/RangeLegendSegmentsOverlay.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/legend/range/components/RangeLegendSegmentsOverlay.tsx"],
-  "sourcesContent": ["import { useCallback, useEffect, useRef } from 'react';\n\nimport { ORIENTATION } from '../../../chart-layout/types/constants.js';\nimport { OVERLAY_ADDITIONAL_SIZE, OVERLAY_OFFSET } from '../constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useLegendSegmentsOverlayHandlers } from '../hooks/use-legend-segments-overlay-handlers.js';\n\nexport const RangeLegendSegmentsOverlay = (props: {\n  itemMarkers: number[];\n}) => {\n  const { itemMarkers } = props;\n\n  const overlayRef = useRef<SVGRectElement>(null);\n\n  const { onMouseLeaveHandler, onMouseMoveHandler } =\n    useLegendSegmentsOverlayHandlers(itemMarkers);\n  const { orientation } = useOrientation();\n  const isVertical = orientation === ORIENTATION.Vertical;\n\n  const overlaySizeHandler = useCallback(\n    (legendBar: SVGSVGElement, overlayEl: SVGRectElement) => {\n      const { height: legendHeight, width: legendWidth } =\n        legendBar.getBoundingClientRect();\n\n      const overlayHeight =\n        legendHeight + (isVertical ? 0 : OVERLAY_ADDITIONAL_SIZE);\n      const overlayY = isVertical ? 0 : -OVERLAY_OFFSET;\n      const overlayWidth =\n        legendWidth + (isVertical ? OVERLAY_ADDITIONAL_SIZE : 0);\n      const overlayX = isVertical ? -OVERLAY_OFFSET : 0;\n\n      overlayEl.setAttribute('y', overlayY.toString());\n      overlayEl.setAttribute('x', overlayX.toString());\n      overlayEl.setAttribute('height', overlayHeight.toString());\n      overlayEl.setAttribute('width', overlayWidth.toString());\n    },\n    [isVertical],\n  );\n\n  useEffect(() => {\n    if (overlayRef.current) {\n      const legendBar = overlayRef.current.closest('svg')\n        ?.previousElementSibling as SVGSVGElement;\n\n      if (legendBar) {\n        overlaySizeHandler(legendBar, overlayRef.current);\n\n        const observer = new MutationObserver(() => {\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n          overlaySizeHandler(legendBar, overlayRef.current!);\n        });\n\n        observer.observe(legendBar, {\n          attributes: true,\n          childList: true,\n          subtree: true,\n          characterData: true,\n        });\n\n        return () => observer.disconnect();\n      }\n    }\n  }, [overlaySizeHandler]);\n\n  return (\n    <rect\n      ref={overlayRef}\n      role=\"presentation\"\n      id=\"segments-overlay\"\n      fill=\"transparent\"\n      onMouseMove={onMouseMoveHandler}\n      onMouseLeave={onMouseLeaveHandler}\n    />\n  );\n};\n"],
+  "sourcesContent": ["import { useCallback, useEffect, useRef } from 'react';\n\nimport { ORIENTATION } from '../../../../constants.js';\nimport { OVERLAY_ADDITIONAL_SIZE, OVERLAY_OFFSET } from '../constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useLegendSegmentsOverlayHandlers } from '../hooks/use-legend-segments-overlay-handlers.js';\n\nexport const RangeLegendSegmentsOverlay = (props: {\n  itemMarkers: number[];\n}) => {\n  const { itemMarkers } = props;\n\n  const overlayRef = useRef<SVGRectElement>(null);\n\n  const { onMouseLeaveHandler, onMouseMoveHandler } =\n    useLegendSegmentsOverlayHandlers(itemMarkers);\n  const { orientation } = useOrientation();\n  const isVertical = orientation === ORIENTATION.Vertical;\n\n  const overlaySizeHandler = useCallback(\n    (legendBar: SVGSVGElement, overlayEl: SVGRectElement) => {\n      const { height: legendHeight, width: legendWidth } =\n        legendBar.getBoundingClientRect();\n\n      const overlayHeight =\n        legendHeight + (isVertical ? 0 : OVERLAY_ADDITIONAL_SIZE);\n      const overlayY = isVertical ? 0 : -OVERLAY_OFFSET;\n      const overlayWidth =\n        legendWidth + (isVertical ? OVERLAY_ADDITIONAL_SIZE : 0);\n      const overlayX = isVertical ? -OVERLAY_OFFSET : 0;\n\n      overlayEl.setAttribute('y', overlayY.toString());\n      overlayEl.setAttribute('x', overlayX.toString());\n      overlayEl.setAttribute('height', overlayHeight.toString());\n      overlayEl.setAttribute('width', overlayWidth.toString());\n    },\n    [isVertical],\n  );\n\n  useEffect(() => {\n    if (overlayRef.current) {\n      const legendBar = overlayRef.current.closest('svg')\n        ?.previousElementSibling as SVGSVGElement;\n\n      if (legendBar) {\n        overlaySizeHandler(legendBar, overlayRef.current);\n\n        const observer = new MutationObserver(() => {\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n          overlaySizeHandler(legendBar, overlayRef.current!);\n        });\n\n        observer.observe(legendBar, {\n          attributes: true,\n          childList: true,\n          subtree: true,\n          characterData: true,\n        });\n\n        return () => observer.disconnect();\n      }\n    }\n  }, [overlaySizeHandler]);\n\n  return (\n    <rect\n      ref={overlayRef}\n      role=\"presentation\"\n      id=\"segments-overlay\"\n      fill=\"transparent\"\n      onMouseMove={onMouseMoveHandler}\n      onMouseLeave={onMouseLeaveHandler}\n    />\n  );\n};\n"],
   "mappings": "AAiEI;AAjEJ,SAAS,aAAa,WAAW,cAAc;AAE/C,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB,sBAAsB;AACxD,SAAS,sBAAsB;AAC/B,SAAS,wCAAwC;AAE1C,MAAM,6BAA6B,CAAC,UAErC;AACJ,QAAM,EAAE,YAAY,IAAI;AAExB,QAAM,aAAa,OAAuB,IAAI;AAE9C,QAAM,EAAE,qBAAqB,mBAAmB,IAC9C,iCAAiC,WAAW;AAC9C,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,aAAa,gBAAgB,YAAY;AAE/C,QAAM,qBAAqB;AAAA,IACzB,CAAC,WAA0B,cAA8B;AACvD,YAAM,EAAE,QAAQ,cAAc,OAAO,YAAY,IAC/C,UAAU,sBAAsB;AAElC,YAAM,gBACJ,gBAAgB,aAAa,IAAI;AACnC,YAAM,WAAW,aAAa,IAAI,CAAC;AACnC,YAAM,eACJ,eAAe,aAAa,0BAA0B;AACxD,YAAM,WAAW,aAAa,CAAC,iBAAiB;AAEhD,gBAAU,aAAa,KAAK,SAAS,SAAS,CAAC;AAC/C,gBAAU,aAAa,KAAK,SAAS,SAAS,CAAC;AAC/C,gBAAU,aAAa,UAAU,cAAc,SAAS,CAAC;AACzD,gBAAU,aAAa,SAAS,aAAa,SAAS,CAAC;AAAA,IACzD;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,YAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACtB,YAAM,YAAY,WAAW,QAAQ,QAAQ,KAAK,GAC9C;AAEJ,UAAI,WAAW;AACb,2BAAmB,WAAW,WAAW,OAAO;AAEhD,cAAM,WAAW,IAAI,iBAAiB,MAAM;AAE1C,6BAAmB,WAAW,WAAW,OAAQ;AAAA,QACnD,CAAC;AAED,iBAAS,QAAQ,WAAW;AAAA,UAC1B,YAAY;AAAA,UACZ,WAAW;AAAA,UACX,SAAS;AAAA,UACT,eAAe;AAAA,QACjB,CAAC;AAED,eAAO,MAAM,SAAS,WAAW;AAAA,MACnC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,kBAAkB,CAAC;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,IAAG;AAAA,MACH,MAAK;AAAA,MACL,aAAa;AAAA,MACb,cAAc;AAAA;AAAA,EAChB;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/legend/range/hooks/use-boundary-labels.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { isNumber } from "lodash-es";
-import { ORIENTATION } from "../../../chart-layout/types/constants.js";
+import { ORIENTATION } from "../../../../constants.js";
 import { useFormatter } from "../context/FormatterContext.js";
 import { useOrientation } from "../context/RangeLegendOrientationContext.js";
 import { useScale } from "../context/RangeLegendScaleContext.js";

package/esm/charts/core/components/legend/range/hooks/use-boundary-labels.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/legend/range/hooks/use-boundary-labels.ts"],
-  "sourcesContent": ["import { isNumber } from 'lodash-es';\n\nimport { ORIENTATION } from '../../../chart-layout/types/constants.js';\nimport { useFormatter } from '../context/FormatterContext.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../context/RangeLegendScaleContext.js';\nimport { InternalRangeItem } from '../types/range-legend.internal.js';\n\nexport const useBoundaryLabels = (\n  items: InternalRangeItem[],\n  rangeStartPosition: number,\n  rangeEndPosition: number,\n  min?: number,\n  max?: number,\n) => {\n  const { scale } = useScale();\n  const { formatter } = useFormatter();\n  const { orientation } = useOrientation();\n\n  const isReversed = orientation === ORIENTATION.Vertical;\n\n  const firstItem = items.find(\n    (item) => scale(isReversed ? item.to : item.from) === rangeStartPosition,\n  );\n  const lastItem = items.find(\n    (item) => scale(isReversed ? item.from : item.to) === rangeEndPosition,\n  );\n\n  const firstItemValue = firstItem?.labels[isReversed ? 'to' : 'from'] ?? '';\n  const lastItemValue = lastItem?.labels[isReversed ? 'from' : 'to'] ?? '';\n\n  if (isReversed) {\n    const formattedFirstValue = isNumber(max) ? formatter(max) : firstItemValue;\n\n    const formattedLastValue = isNumber(min) ? formatter(min) : lastItemValue;\n\n    return {\n      firstLabel: formattedFirstValue,\n      lastLabel: formattedLastValue,\n    };\n  }\n\n  const formattedFirstValue = isNumber(min) ? formatter(min) : firstItemValue;\n\n  const formattedLastValue = isNumber(max) ? formatter(max) : lastItemValue;\n\n  return {\n    firstLabel: formattedFirstValue,\n    lastLabel: formattedLastValue,\n  };\n};\n"],
+  "sourcesContent": ["import { isNumber } from 'lodash-es';\n\nimport { ORIENTATION } from '../../../../constants.js';\nimport { useFormatter } from '../context/FormatterContext.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../context/RangeLegendScaleContext.js';\nimport { InternalRangeItem } from '../types/range-legend.internal.js';\n\nexport const useBoundaryLabels = (\n  items: InternalRangeItem[],\n  rangeStartPosition: number,\n  rangeEndPosition: number,\n  min?: number,\n  max?: number,\n) => {\n  const { scale } = useScale();\n  const { formatter } = useFormatter();\n  const { orientation } = useOrientation();\n\n  const isReversed = orientation === ORIENTATION.Vertical;\n\n  const firstItem = items.find(\n    (item) => scale(isReversed ? item.to : item.from) === rangeStartPosition,\n  );\n  const lastItem = items.find(\n    (item) => scale(isReversed ? item.from : item.to) === rangeEndPosition,\n  );\n\n  const firstItemValue = firstItem?.labels[isReversed ? 'to' : 'from'] ?? '';\n  const lastItemValue = lastItem?.labels[isReversed ? 'from' : 'to'] ?? '';\n\n  if (isReversed) {\n    const formattedFirstValue = isNumber(max) ? formatter(max) : firstItemValue;\n\n    const formattedLastValue = isNumber(min) ? formatter(min) : lastItemValue;\n\n    return {\n      firstLabel: formattedFirstValue,\n      lastLabel: formattedLastValue,\n    };\n  }\n\n  const formattedFirstValue = isNumber(min) ? formatter(min) : firstItemValue;\n\n  const formattedLastValue = isNumber(max) ? formatter(max) : lastItemValue;\n\n  return {\n    firstLabel: formattedFirstValue,\n    lastLabel: formattedLastValue,\n  };\n};\n"],
   "mappings": "AAAA,SAAS,gBAAgB;AAEzB,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AAGlB,MAAM,oBAAoB,CAC/B,OACA,oBACA,kBACA,KACA,QACG;AACH,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,EAAE,UAAU,IAAI,aAAa;AACnC,QAAM,EAAE,YAAY,IAAI,eAAe;AAEvC,QAAM,aAAa,gBAAgB,YAAY;AAE/C,QAAM,YAAY,MAAM;AAAA,IACtB,CAAC,SAAS,MAAM,aAAa,KAAK,KAAK,KAAK,IAAI,MAAM;AAAA,EACxD;AACA,QAAM,WAAW,MAAM;AAAA,IACrB,CAAC,SAAS,MAAM,aAAa,KAAK,OAAO,KAAK,EAAE,MAAM;AAAA,EACxD;AAEA,QAAM,iBAAiB,WAAW,OAAO,aAAa,OAAO,MAAM,KAAK;AACxE,QAAM,gBAAgB,UAAU,OAAO,aAAa,SAAS,IAAI,KAAK;AAEtE,MAAI,YAAY;AACd,UAAMA,uBAAsB,SAAS,GAAG,IAAI,UAAU,GAAG,IAAI;AAE7D,UAAMC,sBAAqB,SAAS,GAAG,IAAI,UAAU,GAAG,IAAI;AAE5D,WAAO;AAAA,MACL,YAAYD;AAAA,MACZ,WAAWC;AAAA,IACb;AAAA,EACF;AAEA,QAAM,sBAAsB,SAAS,GAAG,IAAI,UAAU,GAAG,IAAI;AAE7D,QAAM,qBAAqB,SAAS,GAAG,IAAI,UAAU,GAAG,IAAI;AAE5D,SAAO;AAAA,IACL,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AACF;",
   "names": ["formattedFirstValue", "formattedLastValue"]
 }

package/esm/charts/core/components/legend/range/hooks/use-legend-boundary-label-collision-detector.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
-import { ORIENTATION } from "../../../chart-layout/types/constants.js";
+import { ORIENTATION } from "../../../../constants.js";
 import { useLegendSize } from "../../shared/context/LegendSizeContext.js";
 import {
   CONTAINER_PADDING,

package/esm/charts/core/components/legend/range/hooks/use-legend-boundary-label-collision-detector.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/legend/range/hooks/use-legend-boundary-label-collision-detector.ts"],
-  "sourcesContent": ["import { useCallback, useEffect, useState } from 'react';\n\nimport { Orientation } from '../../../../../../core/types/orientation.js';\nimport { ORIENTATION } from '../../../chart-layout/types/constants.js';\nimport { useLegendSize } from '../../shared/context/LegendSizeContext.js';\nimport {\n  CONTAINER_PADDING,\n  MAX_LEGEND_HEIGHT,\n  MAX_LEGEND_WIDTH,\n} from '../constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useRangeLegendTruncation } from '../context/RangeLegendTruncationContext.js';\nimport { handleCollisionInVerticalLayout } from '../utils/handle-collision-in-vertical-layout.js';\nimport { handleTwoLabelsCollisions } from '../utils/handle-two-labels-collisions.js';\nimport { getLabelsPosition } from '../utils/labels-collision.js';\n\n/**\n * Hook responsible to detect and resolve the collisions for the boundary labels\n * (only first and last).\n * In the case where a collision is detected, the labels will be modified by\n * adding the text truncation.\n */\nexport const useLegendBoundaryLabelCollisionDetector = (\n  startLabel: string,\n  endLabel: string,\n) => {\n  const [labels, setLabels] = useState({ startLabel, endLabel });\n  const truncationMode = useRangeLegendTruncation();\n  const { orientation } = useOrientation();\n  const { width: legendWidth, height: legendHeight } = useLegendSize();\n\n  const containerLegendHeight = legendHeight - CONTAINER_PADDING * 2;\n  const containerLegendWidth = legendWidth - CONTAINER_PADDING * 2;\n\n  const width = Math.min(containerLegendWidth, MAX_LEGEND_WIDTH);\n  const height = Math.max(containerLegendHeight, MAX_LEGEND_HEIGHT);\n\n  const handleLabelCollision = useCallback(\n    (\n      firstLabel: string,\n      lastLabel: string,\n      orientation: Orientation,\n      width: number,\n    ): { startLabel: string; endLabel: string } => {\n      if (orientation === ORIENTATION.Horizontal) {\n        return handleTwoLabelsCollisions(\n          firstLabel,\n          lastLabel,\n          truncationMode,\n          [0, width],\n        );\n      }\n      const { startLabel, endLabel } = getLabelsPosition(\n        firstLabel,\n        lastLabel,\n        [0, width],\n      );\n      const { text: startLabelTruncated } = handleCollisionInVerticalLayout(\n        firstLabel,\n        startLabel,\n        'start',\n        truncationMode,\n        [0, width],\n      );\n      const { text: endLabelTruncated } = handleCollisionInVerticalLayout(\n        lastLabel,\n        endLabel,\n        'end',\n        truncationMode,\n        [0, width],\n      );\n\n      return { startLabel: startLabelTruncated, endLabel: endLabelTruncated };\n    },\n    [truncationMode],\n  );\n\n  useEffect(() => {\n    if (width <= 0 || height <= 0) {\n      return;\n    }\n    const labelsWithTruncation = handleLabelCollision(\n      startLabel,\n      endLabel,\n      orientation,\n      width,\n    );\n    setLabels({\n      startLabel: labelsWithTruncation.startLabel,\n      endLabel: labelsWithTruncation.endLabel,\n    });\n  }, [handleLabelCollision, startLabel, endLabel, orientation, width, height]);\n\n  return labels;\n};\n"],
+  "sourcesContent": ["import { useCallback, useEffect, useState } from 'react';\n\nimport { Orientation } from '../../../../../../core/types/orientation.js';\nimport { ORIENTATION } from '../../../../constants.js';\nimport { useLegendSize } from '../../shared/context/LegendSizeContext.js';\nimport {\n  CONTAINER_PADDING,\n  MAX_LEGEND_HEIGHT,\n  MAX_LEGEND_WIDTH,\n} from '../constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useRangeLegendTruncation } from '../context/RangeLegendTruncationContext.js';\nimport { handleCollisionInVerticalLayout } from '../utils/handle-collision-in-vertical-layout.js';\nimport { handleTwoLabelsCollisions } from '../utils/handle-two-labels-collisions.js';\nimport { getLabelsPosition } from '../utils/labels-collision.js';\n\n/**\n * Hook responsible to detect and resolve the collisions for the boundary labels\n * (only first and last).\n * In the case where a collision is detected, the labels will be modified by\n * adding the text truncation.\n */\nexport const useLegendBoundaryLabelCollisionDetector = (\n  startLabel: string,\n  endLabel: string,\n) => {\n  const [labels, setLabels] = useState({ startLabel, endLabel });\n  const truncationMode = useRangeLegendTruncation();\n  const { orientation } = useOrientation();\n  const { width: legendWidth, height: legendHeight } = useLegendSize();\n\n  const containerLegendHeight = legendHeight - CONTAINER_PADDING * 2;\n  const containerLegendWidth = legendWidth - CONTAINER_PADDING * 2;\n\n  const width = Math.min(containerLegendWidth, MAX_LEGEND_WIDTH);\n  const height = Math.max(containerLegendHeight, MAX_LEGEND_HEIGHT);\n\n  const handleLabelCollision = useCallback(\n    (\n      firstLabel: string,\n      lastLabel: string,\n      orientation: Orientation,\n      width: number,\n    ): { startLabel: string; endLabel: string } => {\n      if (orientation === ORIENTATION.Horizontal) {\n        return handleTwoLabelsCollisions(\n          firstLabel,\n          lastLabel,\n          truncationMode,\n          [0, width],\n        );\n      }\n      const { startLabel, endLabel } = getLabelsPosition(\n        firstLabel,\n        lastLabel,\n        [0, width],\n      );\n      const { text: startLabelTruncated } = handleCollisionInVerticalLayout(\n        firstLabel,\n        startLabel,\n        'start',\n        truncationMode,\n        [0, width],\n      );\n      const { text: endLabelTruncated } = handleCollisionInVerticalLayout(\n        lastLabel,\n        endLabel,\n        'end',\n        truncationMode,\n        [0, width],\n      );\n\n      return { startLabel: startLabelTruncated, endLabel: endLabelTruncated };\n    },\n    [truncationMode],\n  );\n\n  useEffect(() => {\n    if (width <= 0 || height <= 0) {\n      return;\n    }\n    const labelsWithTruncation = handleLabelCollision(\n      startLabel,\n      endLabel,\n      orientation,\n      width,\n    );\n    setLabels({\n      startLabel: labelsWithTruncation.startLabel,\n      endLabel: labelsWithTruncation.endLabel,\n    });\n  }, [handleLabelCollision, startLabel, endLabel, orientation, width, height]);\n\n  return labels;\n};\n"],
   "mappings": "AAAA,SAAS,aAAa,WAAW,gBAAgB;AAGjD,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AACzC,SAAS,uCAAuC;AAChD,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAQ3B,MAAM,0CAA0C,CACrD,YACA,aACG;AACH,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE,YAAY,SAAS,CAAC;AAC7D,QAAM,iBAAiB,yBAAyB;AAChD,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,EAAE,OAAO,aAAa,QAAQ,aAAa,IAAI,cAAc;AAEnE,QAAM,wBAAwB,eAAe,oBAAoB;AACjE,QAAM,uBAAuB,cAAc,oBAAoB;AAE/D,QAAM,QAAQ,KAAK,IAAI,sBAAsB,gBAAgB;AAC7D,QAAM,SAAS,KAAK,IAAI,uBAAuB,iBAAiB;AAEhE,QAAM,uBAAuB;AAAA,IAC3B,CACE,YACA,WACAA,cACAC,WAC6C;AAC7C,UAAID,iBAAgB,YAAY,YAAY;AAC1C,eAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA,CAAC,GAAGC,MAAK;AAAA,QACX;AAAA,MACF;AACA,YAAM,EAAE,YAAAC,aAAY,UAAAC,UAAS,IAAI;AAAA,QAC/B;AAAA,QACA;AAAA,QACA,CAAC,GAAGF,MAAK;AAAA,MACX;AACA,YAAM,EAAE,MAAM,oBAAoB,IAAI;AAAA,QACpC;AAAA,QACAC;AAAA,QACA;AAAA,QACA;AAAA,QACA,CAAC,GAAGD,MAAK;AAAA,MACX;AACA,YAAM,EAAE,MAAM,kBAAkB,IAAI;AAAA,QAClC;AAAA,QACAE;AAAA,QACA;AAAA,QACA;AAAA,QACA,CAAC,GAAGF,MAAK;AAAA,MACX;AAEA,aAAO,EAAE,YAAY,qBAAqB,UAAU,kBAAkB;AAAA,IACxE;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,YAAU,MAAM;AACd,QAAI,SAAS,KAAK,UAAU,GAAG;AAC7B;AAAA,IACF;AACA,UAAM,uBAAuB;AAAA,MAC3B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,cAAU;AAAA,MACR,YAAY,qBAAqB;AAAA,MACjC,UAAU,qBAAqB;AAAA,IACjC,CAAC;AAAA,EACH,GAAG,CAAC,sBAAsB,YAAY,UAAU,aAAa,OAAO,MAAM,CAAC;AAE3E,SAAO;AACT;",
   "names": ["orientation", "width", "startLabel", "endLabel"]
 }

package/esm/charts/core/components/legend/range/hooks/use-legend-intermediate-label-collision-detector.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { ORIENTATION } from "../../../chart-layout/types/constants.js";
+import { ORIENTATION } from "../../../../constants.js";
 import { useLegendSize } from "../../shared/context/LegendSizeContext.js";
 import {
   MAX_LEGEND_WIDTH,

package/esm/charts/core/components/legend/range/hooks/use-legend-intermediate-label-collision-detector.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/legend/range/hooks/use-legend-intermediate-label-collision-detector.ts"],
-  "sourcesContent": ["import { useEffect, useState } from 'react';\n\nimport { ORIENTATION } from '../../../chart-layout/types/constants.js';\nimport { useLegendSize } from '../../shared/context/LegendSizeContext.js';\nimport {\n  MAX_LEGEND_WIDTH,\n  MAX_LEGEND_HEIGHT,\n  CONTAINER_PADDING,\n} from '../constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../context/RangeLegendScaleContext.js';\nimport { useRangeLegendTruncation } from '../context/RangeLegendTruncationContext.js';\nimport {\n  HorizontalCoords,\n  LabelAlignment,\n  RangeLabel,\n} from '../types/range-legend.internal.js';\nimport { handleCollisionInHorizontalLayout } from '../utils/handle-collision-in-horizontal-layout.js';\nimport { handleCollisionInVerticalLayout } from '../utils/handle-collision-in-vertical-layout.js';\n\n/**\n * Hook responsible to detect and resolve the collisions for the intermediate labels.\n * The collision is relative to the bounds of the legend, meaning that if a\n * label will overflow the start segment or the end segment position, text truncation\n * will be applied.\n */\nexport const useLegendIntermediateLabelCollisionDetector = (\n  labelText: string,\n  segmentStartPosition: number,\n  segmentEndPosition: number,\n  alignment: LabelAlignment,\n  skipCollisionDetector: boolean,\n): RangeLabel => {\n  const [label, setLabel] = useState<RangeLabel>({ text: labelText });\n\n  const truncationMode = useRangeLegendTruncation();\n  const { orientation } = useOrientation();\n  const { scale } = useScale();\n  const { width: legendWidth, height: legendHeight } = useLegendSize();\n\n  const containerLegendHeight = legendHeight - CONTAINER_PADDING * 2;\n  const containerLegendWidth = legendWidth - CONTAINER_PADDING * 2;\n\n  const width = Math.min(containerLegendWidth, MAX_LEGEND_WIDTH);\n  const height = Math.max(containerLegendHeight, MAX_LEGEND_HEIGHT);\n\n  useEffect(() => {\n    if (skipCollisionDetector || width <= 0 || height <= 0) {\n      return;\n    }\n\n    const labelPosition: HorizontalCoords = {\n      start: segmentStartPosition,\n      end: segmentEndPosition,\n    };\n\n    if (orientation === ORIENTATION.Horizontal) {\n      const newLabel = handleCollisionInHorizontalLayout(\n        labelText,\n        labelPosition,\n        alignment,\n        truncationMode,\n        scale.range(),\n      );\n\n      setLabel(newLabel);\n    } else {\n      const newLabel = handleCollisionInVerticalLayout(\n        labelText,\n        labelPosition,\n        alignment,\n        truncationMode,\n        scale.range(),\n      );\n      setLabel(newLabel);\n    }\n  }, [\n    width,\n    height,\n    alignment,\n    segmentStartPosition,\n    segmentEndPosition,\n    skipCollisionDetector,\n    orientation,\n    labelText,\n    truncationMode,\n    scale,\n  ]);\n\n  return label;\n};\n"],
+  "sourcesContent": ["import { useEffect, useState } from 'react';\n\nimport { ORIENTATION } from '../../../../constants.js';\nimport { useLegendSize } from '../../shared/context/LegendSizeContext.js';\nimport {\n  MAX_LEGEND_WIDTH,\n  MAX_LEGEND_HEIGHT,\n  CONTAINER_PADDING,\n} from '../constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../context/RangeLegendScaleContext.js';\nimport { useRangeLegendTruncation } from '../context/RangeLegendTruncationContext.js';\nimport {\n  HorizontalCoords,\n  LabelAlignment,\n  RangeLabel,\n} from '../types/range-legend.internal.js';\nimport { handleCollisionInHorizontalLayout } from '../utils/handle-collision-in-horizontal-layout.js';\nimport { handleCollisionInVerticalLayout } from '../utils/handle-collision-in-vertical-layout.js';\n\n/**\n * Hook responsible to detect and resolve the collisions for the intermediate labels.\n * The collision is relative to the bounds of the legend, meaning that if a\n * label will overflow the start segment or the end segment position, text truncation\n * will be applied.\n */\nexport const useLegendIntermediateLabelCollisionDetector = (\n  labelText: string,\n  segmentStartPosition: number,\n  segmentEndPosition: number,\n  alignment: LabelAlignment,\n  skipCollisionDetector: boolean,\n): RangeLabel => {\n  const [label, setLabel] = useState<RangeLabel>({ text: labelText });\n\n  const truncationMode = useRangeLegendTruncation();\n  const { orientation } = useOrientation();\n  const { scale } = useScale();\n  const { width: legendWidth, height: legendHeight } = useLegendSize();\n\n  const containerLegendHeight = legendHeight - CONTAINER_PADDING * 2;\n  const containerLegendWidth = legendWidth - CONTAINER_PADDING * 2;\n\n  const width = Math.min(containerLegendWidth, MAX_LEGEND_WIDTH);\n  const height = Math.max(containerLegendHeight, MAX_LEGEND_HEIGHT);\n\n  useEffect(() => {\n    if (skipCollisionDetector || width <= 0 || height <= 0) {\n      return;\n    }\n\n    const labelPosition: HorizontalCoords = {\n      start: segmentStartPosition,\n      end: segmentEndPosition,\n    };\n\n    if (orientation === ORIENTATION.Horizontal) {\n      const newLabel = handleCollisionInHorizontalLayout(\n        labelText,\n        labelPosition,\n        alignment,\n        truncationMode,\n        scale.range(),\n      );\n\n      setLabel(newLabel);\n    } else {\n      const newLabel = handleCollisionInVerticalLayout(\n        labelText,\n        labelPosition,\n        alignment,\n        truncationMode,\n        scale.range(),\n      );\n      setLabel(newLabel);\n    }\n  }, [\n    width,\n    height,\n    alignment,\n    segmentStartPosition,\n    segmentEndPosition,\n    skipCollisionDetector,\n    orientation,\n    labelText,\n    truncationMode,\n    scale,\n  ]);\n\n  return label;\n};\n"],
   "mappings": "AAAA,SAAS,WAAW,gBAAgB;AAEpC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,gCAAgC;AAMzC,SAAS,yCAAyC;AAClD,SAAS,uCAAuC;AAQzC,MAAM,8CAA8C,CACzD,WACA,sBACA,oBACA,WACA,0BACe;AACf,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAqB,EAAE,MAAM,UAAU,CAAC;AAElE,QAAM,iBAAiB,yBAAyB;AAChD,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,EAAE,OAAO,aAAa,QAAQ,aAAa,IAAI,cAAc;AAEnE,QAAM,wBAAwB,eAAe,oBAAoB;AACjE,QAAM,uBAAuB,cAAc,oBAAoB;AAE/D,QAAM,QAAQ,KAAK,IAAI,sBAAsB,gBAAgB;AAC7D,QAAM,SAAS,KAAK,IAAI,uBAAuB,iBAAiB;AAEhE,YAAU,MAAM;AACd,QAAI,yBAAyB,SAAS,KAAK,UAAU,GAAG;AACtD;AAAA,IACF;AAEA,UAAM,gBAAkC;AAAA,MACtC,OAAO;AAAA,MACP,KAAK;AAAA,IACP;AAEA,QAAI,gBAAgB,YAAY,YAAY;AAC1C,YAAM,WAAW;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,MAAM;AAAA,MACd;AAEA,eAAS,QAAQ;AAAA,IACnB,OAAO;AACL,YAAM,WAAW;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,MAAM;AAAA,MACd;AACA,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
   "names": []
 }

package/esm/charts/core/components/legend/range/hooks/use-legend-segment-keyboard-handler.js CHANGED Viewed

@@ -5,7 +5,7 @@ import {
   useRef
 } from "react";
 import { useSetHoveredMarkerId } from "./store/use-set-hovered-marker-id.js";
-import { ORIENTATION } from "../../../chart-layout/types/constants.js";
+import { ORIENTATION } from "../../../../constants.js";
 import { useOrientation } from "../context/RangeLegendOrientationContext.js";
 const useLegendSegmentKeyboardHandler = (rectEl, itemFrom, itemTo, startPosition) => {
   const isFirstSegment = startPosition === 0;

package/esm/charts/core/components/legend/range/hooks/use-legend-segment-keyboard-handler.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/legend/range/hooks/use-legend-segment-keyboard-handler.ts"],
-  "sourcesContent": ["import {\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  type KeyboardEvent,\n} from 'react';\n\nimport { useSetHoveredMarkerId } from './store/use-set-hovered-marker-id.js';\nimport { ORIENTATION } from '../../../chart-layout/types/constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\n\nexport const useLegendSegmentKeyboardHandler = (\n  rectEl: SVGRectElement | null,\n  itemFrom: number,\n  itemTo: number,\n  startPosition: number,\n) => {\n  const isFirstSegment = startPosition === 0;\n  const hoveredMarkerId = useRef<number>(isFirstSegment ? itemFrom : itemTo);\n\n  const { setHoveredMarkerId } = useSetHoveredMarkerId();\n  const { orientation } = useOrientation();\n\n  const moveFocusForward = useCallback(() => {\n    rectEl?.parentElement?.nextElementSibling?.querySelector('rect')?.focus();\n    rectEl?.blur();\n  }, [rectEl]);\n\n  const moveFocusBackward = useCallback(() => {\n    rectEl?.parentElement?.previousElementSibling\n      ?.querySelector('rect')\n      ?.focus();\n    rectEl?.blur();\n  }, [rectEl]);\n\n  const movePositionForward = useCallback(() => {\n    hoveredMarkerId.current = itemTo;\n    setHoveredMarkerId(hoveredMarkerId.current);\n  }, [itemTo, setHoveredMarkerId]);\n\n  const movePositionBackward = useCallback(() => {\n    hoveredMarkerId.current = itemFrom;\n    setHoveredMarkerId(hoveredMarkerId.current);\n  }, [itemFrom, setHoveredMarkerId]);\n\n  const KEYDOWN_HANDLERS: Record<string, Record<string, () => void>> = useMemo(\n    () => ({\n      [ORIENTATION.Horizontal]: {\n        ArrowRight: () => {\n          const isFirstPosition =\n            hoveredMarkerId.current === itemFrom && isFirstSegment;\n\n          if (isFirstPosition) {\n            movePositionForward();\n          } else {\n            moveFocusForward();\n          }\n        },\n        ArrowLeft: () => {\n          const isSecondPosition =\n            hoveredMarkerId.current === itemTo && isFirstSegment;\n\n          if (isSecondPosition) {\n            movePositionBackward();\n          } else {\n            moveFocusBackward();\n          }\n        },\n      },\n      [ORIENTATION.Vertical]: {\n        ArrowDown: () => {\n          const isFirstPosition =\n            hoveredMarkerId.current === itemFrom && isFirstSegment;\n\n          if (isFirstPosition) {\n            movePositionForward();\n          } else {\n            moveFocusForward();\n          }\n        },\n        ArrowUp: () => {\n          const isSecondPosition =\n            hoveredMarkerId.current === itemTo && isFirstSegment;\n\n          if (isSecondPosition) {\n            movePositionBackward();\n          } else {\n            moveFocusBackward();\n          }\n        },\n      },\n    }),\n    [\n      isFirstSegment,\n      itemFrom,\n      itemTo,\n      moveFocusBackward,\n      moveFocusForward,\n      movePositionBackward,\n      movePositionForward,\n    ],\n  );\n\n  const onFocusHandler = useCallback(\n    () => setHoveredMarkerId(hoveredMarkerId.current),\n    [setHoveredMarkerId],\n  );\n\n  const onBlurHandler = useCallback(\n    () => setHoveredMarkerId(null),\n    [setHoveredMarkerId],\n  );\n\n  const onKeyDownHandler = useCallback(\n    (event: KeyboardEvent<SVGRectElement>) => {\n      if (event.key === 'Tab') {\n        const isFirstPosition =\n          hoveredMarkerId.current === itemFrom && isFirstSegment;\n\n        if (isFirstPosition) {\n          event.preventDefault();\n          hoveredMarkerId.current = itemTo;\n          setHoveredMarkerId(hoveredMarkerId.current);\n        }\n      }\n\n      if (event.key in KEYDOWN_HANDLERS[orientation]) {\n        KEYDOWN_HANDLERS[orientation][event.key]();\n      }\n    },\n    [\n      KEYDOWN_HANDLERS,\n      isFirstSegment,\n      itemFrom,\n      itemTo,\n      orientation,\n      setHoveredMarkerId,\n    ],\n  );\n\n  useLayoutEffect(() => {\n    if (isFirstSegment) {\n      const parentSvg = rectEl?.closest('svg');\n\n      if (parentSvg) {\n        const eventListenerCallback = (event: FocusEvent) => {\n          event.preventDefault();\n          hoveredMarkerId.current = itemFrom;\n        };\n\n        parentSvg.addEventListener('blur', eventListenerCallback);\n\n        return () =>\n          parentSvg.removeEventListener('blur', eventListenerCallback);\n      }\n    }\n  }, [isFirstSegment, itemFrom, rectEl]);\n\n  return {\n    onBlurHandler,\n    onFocusHandler,\n    onKeyDownHandler,\n  };\n};\n"],
+  "sourcesContent": ["import {\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  type KeyboardEvent,\n} from 'react';\n\nimport { useSetHoveredMarkerId } from './store/use-set-hovered-marker-id.js';\nimport { ORIENTATION } from '../../../../constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\n\nexport const useLegendSegmentKeyboardHandler = (\n  rectEl: SVGRectElement | null,\n  itemFrom: number,\n  itemTo: number,\n  startPosition: number,\n) => {\n  const isFirstSegment = startPosition === 0;\n  const hoveredMarkerId = useRef<number>(isFirstSegment ? itemFrom : itemTo);\n\n  const { setHoveredMarkerId } = useSetHoveredMarkerId();\n  const { orientation } = useOrientation();\n\n  const moveFocusForward = useCallback(() => {\n    rectEl?.parentElement?.nextElementSibling?.querySelector('rect')?.focus();\n    rectEl?.blur();\n  }, [rectEl]);\n\n  const moveFocusBackward = useCallback(() => {\n    rectEl?.parentElement?.previousElementSibling\n      ?.querySelector('rect')\n      ?.focus();\n    rectEl?.blur();\n  }, [rectEl]);\n\n  const movePositionForward = useCallback(() => {\n    hoveredMarkerId.current = itemTo;\n    setHoveredMarkerId(hoveredMarkerId.current);\n  }, [itemTo, setHoveredMarkerId]);\n\n  const movePositionBackward = useCallback(() => {\n    hoveredMarkerId.current = itemFrom;\n    setHoveredMarkerId(hoveredMarkerId.current);\n  }, [itemFrom, setHoveredMarkerId]);\n\n  const KEYDOWN_HANDLERS: Record<string, Record<string, () => void>> = useMemo(\n    () => ({\n      [ORIENTATION.Horizontal]: {\n        ArrowRight: () => {\n          const isFirstPosition =\n            hoveredMarkerId.current === itemFrom && isFirstSegment;\n\n          if (isFirstPosition) {\n            movePositionForward();\n          } else {\n            moveFocusForward();\n          }\n        },\n        ArrowLeft: () => {\n          const isSecondPosition =\n            hoveredMarkerId.current === itemTo && isFirstSegment;\n\n          if (isSecondPosition) {\n            movePositionBackward();\n          } else {\n            moveFocusBackward();\n          }\n        },\n      },\n      [ORIENTATION.Vertical]: {\n        ArrowDown: () => {\n          const isFirstPosition =\n            hoveredMarkerId.current === itemFrom && isFirstSegment;\n\n          if (isFirstPosition) {\n            movePositionForward();\n          } else {\n            moveFocusForward();\n          }\n        },\n        ArrowUp: () => {\n          const isSecondPosition =\n            hoveredMarkerId.current === itemTo && isFirstSegment;\n\n          if (isSecondPosition) {\n            movePositionBackward();\n          } else {\n            moveFocusBackward();\n          }\n        },\n      },\n    }),\n    [\n      isFirstSegment,\n      itemFrom,\n      itemTo,\n      moveFocusBackward,\n      moveFocusForward,\n      movePositionBackward,\n      movePositionForward,\n    ],\n  );\n\n  const onFocusHandler = useCallback(\n    () => setHoveredMarkerId(hoveredMarkerId.current),\n    [setHoveredMarkerId],\n  );\n\n  const onBlurHandler = useCallback(\n    () => setHoveredMarkerId(null),\n    [setHoveredMarkerId],\n  );\n\n  const onKeyDownHandler = useCallback(\n    (event: KeyboardEvent<SVGRectElement>) => {\n      if (event.key === 'Tab') {\n        const isFirstPosition =\n          hoveredMarkerId.current === itemFrom && isFirstSegment;\n\n        if (isFirstPosition) {\n          event.preventDefault();\n          hoveredMarkerId.current = itemTo;\n          setHoveredMarkerId(hoveredMarkerId.current);\n        }\n      }\n\n      if (event.key in KEYDOWN_HANDLERS[orientation]) {\n        KEYDOWN_HANDLERS[orientation][event.key]();\n      }\n    },\n    [\n      KEYDOWN_HANDLERS,\n      isFirstSegment,\n      itemFrom,\n      itemTo,\n      orientation,\n      setHoveredMarkerId,\n    ],\n  );\n\n  useLayoutEffect(() => {\n    if (isFirstSegment) {\n      const parentSvg = rectEl?.closest('svg');\n\n      if (parentSvg) {\n        const eventListenerCallback = (event: FocusEvent) => {\n          event.preventDefault();\n          hoveredMarkerId.current = itemFrom;\n        };\n\n        parentSvg.addEventListener('blur', eventListenerCallback);\n\n        return () =>\n          parentSvg.removeEventListener('blur', eventListenerCallback);\n      }\n    }\n  }, [isFirstSegment, itemFrom, rectEl]);\n\n  return {\n    onBlurHandler,\n    onFocusHandler,\n    onKeyDownHandler,\n  };\n};\n"],
   "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAExB,MAAM,kCAAkC,CAC7C,QACA,UACA,QACA,kBACG;AACH,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,kBAAkB,OAAe,iBAAiB,WAAW,MAAM;AAEzE,QAAM,EAAE,mBAAmB,IAAI,sBAAsB;AACrD,QAAM,EAAE,YAAY,IAAI,eAAe;AAEvC,QAAM,mBAAmB,YAAY,MAAM;AACzC,YAAQ,eAAe,oBAAoB,cAAc,MAAM,GAAG,MAAM;AACxE,YAAQ,KAAK;AAAA,EACf,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,oBAAoB,YAAY,MAAM;AAC1C,YAAQ,eAAe,wBACnB,cAAc,MAAM,GACpB,MAAM;AACV,YAAQ,KAAK;AAAA,EACf,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,sBAAsB,YAAY,MAAM;AAC5C,oBAAgB,UAAU;AAC1B,uBAAmB,gBAAgB,OAAO;AAAA,EAC5C,GAAG,CAAC,QAAQ,kBAAkB,CAAC;AAE/B,QAAM,uBAAuB,YAAY,MAAM;AAC7C,oBAAgB,UAAU;AAC1B,uBAAmB,gBAAgB,OAAO;AAAA,EAC5C,GAAG,CAAC,UAAU,kBAAkB,CAAC;AAEjC,QAAM,mBAA+D;AAAA,IACnE,OAAO;AAAA,MACL,CAAC,YAAY,UAAU,GAAG;AAAA,QACxB,YAAY,MAAM;AAChB,gBAAM,kBACJ,gBAAgB,YAAY,YAAY;AAE1C,cAAI,iBAAiB;AACnB,gCAAoB;AAAA,UACtB,OAAO;AACL,6BAAiB;AAAA,UACnB;AAAA,QACF;AAAA,QACA,WAAW,MAAM;AACf,gBAAM,mBACJ,gBAAgB,YAAY,UAAU;AAExC,cAAI,kBAAkB;AACpB,iCAAqB;AAAA,UACvB,OAAO;AACL,8BAAkB;AAAA,UACpB;AAAA,QACF;AAAA,MACF;AAAA,MACA,CAAC,YAAY,QAAQ,GAAG;AAAA,QACtB,WAAW,MAAM;AACf,gBAAM,kBACJ,gBAAgB,YAAY,YAAY;AAE1C,cAAI,iBAAiB;AACnB,gCAAoB;AAAA,UACtB,OAAO;AACL,6BAAiB;AAAA,UACnB;AAAA,QACF;AAAA,QACA,SAAS,MAAM;AACb,gBAAM,mBACJ,gBAAgB,YAAY,UAAU;AAExC,cAAI,kBAAkB;AACpB,iCAAqB;AAAA,UACvB,OAAO;AACL,8BAAkB;AAAA,UACpB;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,iBAAiB;AAAA,IACrB,MAAM,mBAAmB,gBAAgB,OAAO;AAAA,IAChD,CAAC,kBAAkB;AAAA,EACrB;AAEA,QAAM,gBAAgB;AAAA,IACpB,MAAM,mBAAmB,IAAI;AAAA,IAC7B,CAAC,kBAAkB;AAAA,EACrB;AAEA,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAAyC;AACxC,UAAI,MAAM,QAAQ,OAAO;AACvB,cAAM,kBACJ,gBAAgB,YAAY,YAAY;AAE1C,YAAI,iBAAiB;AACnB,gBAAM,eAAe;AACrB,0BAAgB,UAAU;AAC1B,6BAAmB,gBAAgB,OAAO;AAAA,QAC5C;AAAA,MACF;AAEA,UAAI,MAAM,OAAO,iBAAiB,WAAW,GAAG;AAC9C,yBAAiB,WAAW,EAAE,MAAM,GAAG,EAAE;AAAA,MAC3C;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,kBAAgB,MAAM;AACpB,QAAI,gBAAgB;AAClB,YAAM,YAAY,QAAQ,QAAQ,KAAK;AAEvC,UAAI,WAAW;AACb,cAAM,wBAAwB,CAAC,UAAsB;AACnD,gBAAM,eAAe;AACrB,0BAAgB,UAAU;AAAA,QAC5B;AAEA,kBAAU,iBAAiB,QAAQ,qBAAqB;AAExD,eAAO,MACL,UAAU,oBAAoB,QAAQ,qBAAqB;AAAA,MAC/D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,gBAAgB,UAAU,MAAM,CAAC;AAErC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/core/components/legend/range/hooks/use-legend-segments-overlay-handlers.js CHANGED Viewed

@@ -1,5 +1,5 @@
+import { ORIENTATION } from "../../../../constants.js";
 import { useChartLayoutLoading } from "../../../chart-layout/hooks/useChartLayoutLoading.js";
-import { ORIENTATION } from "../../../chart-layout/types/constants.js";
 import { useOrientation } from "../context/RangeLegendOrientationContext.js";
 import { useScale } from "../context/RangeLegendScaleContext.js";
 import { useSetHoveredMarkerId } from "../hooks/store/use-set-hovered-marker-id.js";

package/esm/charts/core/components/legend/range/hooks/use-legend-segments-overlay-handlers.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/legend/range/hooks/use-legend-segments-overlay-handlers.ts"],
-  "sourcesContent": ["import { type MouseEvent } from 'react';\n\nimport { useChartLayoutLoading } from '../../../chart-layout/hooks/useChartLayoutLoading.js';\nimport { ORIENTATION } from '../../../chart-layout/types/constants.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../context/RangeLegendScaleContext.js';\nimport { useSetHoveredMarkerId } from '../hooks/store/use-set-hovered-marker-id.js';\n\n// https://en.wikipedia.org/wiki/Euclidean_distance\nconst distance = (point: number, pointToCheck: number) =>\n  Math.sqrt(Math.pow(point - pointToCheck, 2));\n\n/**\n * This hook is responsible for calculating the closest marker when\n * range legend overlay is hovered, using euclidian distance math,\n * setting the corresponding marker in order to show to the consumer the marker\n *\n * @param itemMarkers - a set of markers\n * @param overlayEl - the overlay element\n *\n * @returns Mouse movement handlers\n */\nexport const useLegendSegmentsOverlayHandlers = (itemMarkers: number[]) => {\n  const { setHoveredMarkerId } = useSetHoveredMarkerId();\n  const { scale } = useScale();\n  const { orientation } = useOrientation();\n  const isLoading = useChartLayoutLoading();\n  const isHorizontal = orientation === ORIENTATION.Horizontal;\n\n  const markersWithPosition = itemMarkers.map((marker) => ({\n    marker,\n    position: scale(marker),\n  }));\n\n  const onMouseMoveHandler = (event: MouseEvent<SVGRectElement>) => {\n    const { clientX, clientY } = event;\n    const { left, top } = event.currentTarget.getBoundingClientRect();\n    const mousePosition = isHorizontal ? clientX - left : clientY - top;\n\n    if (!isLoading) {\n      const closest = markersWithPosition.reduce(\n        (acc, cur) =>\n          distance(acc.position, mousePosition) <\n          distance(cur.position, mousePosition)\n            ? acc\n            : cur,\n        markersWithPosition[0],\n      );\n\n      setHoveredMarkerId(closest.marker);\n    }\n  };\n\n  const onMouseLeaveHandler = () => setHoveredMarkerId(null);\n\n  return {\n    onMouseMoveHandler,\n    onMouseLeaveHandler,\n  };\n};\n"],
-  "mappings": "AAEA,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,6BAA6B;AAGtC,MAAM,WAAW,CAAC,OAAe,iBAC/B,KAAK,KAAK,KAAK,IAAI,QAAQ,cAAc,CAAC,CAAC;AAYtC,MAAM,mCAAmC,CAAC,gBAA0B;AACzE,QAAM,EAAE,mBAAmB,IAAI,sBAAsB;AACrD,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,YAAY,sBAAsB;AACxC,QAAM,eAAe,gBAAgB,YAAY;AAEjD,QAAM,sBAAsB,YAAY,IAAI,CAAC,YAAY;AAAA,IACvD;AAAA,IACA,UAAU,MAAM,MAAM;AAAA,EACxB,EAAE;AAEF,QAAM,qBAAqB,CAAC,UAAsC;AAChE,UAAM,EAAE,SAAS,QAAQ,IAAI;AAC7B,UAAM,EAAE,MAAM,IAAI,IAAI,MAAM,cAAc,sBAAsB;AAChE,UAAM,gBAAgB,eAAe,UAAU,OAAO,UAAU;AAEhE,QAAI,CAAC,WAAW;AACd,YAAM,UAAU,oBAAoB;AAAA,QAClC,CAAC,KAAK,QACJ,SAAS,IAAI,UAAU,aAAa,IACpC,SAAS,IAAI,UAAU,aAAa,IAChC,MACA;AAAA,QACN,oBAAoB,CAAC;AAAA,MACvB;AAEA,yBAAmB,QAAQ,MAAM;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,sBAAsB,MAAM,mBAAmB,IAAI;AAEzD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { type MouseEvent } from 'react';\n\nimport { ORIENTATION } from '../../../../constants.js';\nimport { useChartLayoutLoading } from '../../../chart-layout/hooks/useChartLayoutLoading.js';\nimport { useOrientation } from '../context/RangeLegendOrientationContext.js';\nimport { useScale } from '../context/RangeLegendScaleContext.js';\nimport { useSetHoveredMarkerId } from '../hooks/store/use-set-hovered-marker-id.js';\n\n// https://en.wikipedia.org/wiki/Euclidean_distance\nconst distance = (point: number, pointToCheck: number) =>\n  Math.sqrt(Math.pow(point - pointToCheck, 2));\n\n/**\n * This hook is responsible for calculating the closest marker when\n * range legend overlay is hovered, using euclidian distance math,\n * setting the corresponding marker in order to show to the consumer the marker\n *\n * @param itemMarkers - a set of markers\n * @param overlayEl - the overlay element\n *\n * @returns Mouse movement handlers\n */\nexport const useLegendSegmentsOverlayHandlers = (itemMarkers: number[]) => {\n  const { setHoveredMarkerId } = useSetHoveredMarkerId();\n  const { scale } = useScale();\n  const { orientation } = useOrientation();\n  const isLoading = useChartLayoutLoading();\n  const isHorizontal = orientation === ORIENTATION.Horizontal;\n\n  const markersWithPosition = itemMarkers.map((marker) => ({\n    marker,\n    position: scale(marker),\n  }));\n\n  const onMouseMoveHandler = (event: MouseEvent<SVGRectElement>) => {\n    const { clientX, clientY } = event;\n    const { left, top } = event.currentTarget.getBoundingClientRect();\n    const mousePosition = isHorizontal ? clientX - left : clientY - top;\n\n    if (!isLoading) {\n      const closest = markersWithPosition.reduce(\n        (acc, cur) =>\n          distance(acc.position, mousePosition) <\n          distance(cur.position, mousePosition)\n            ? acc\n            : cur,\n        markersWithPosition[0],\n      );\n\n      setHoveredMarkerId(closest.marker);\n    }\n  };\n\n  const onMouseLeaveHandler = () => setHoveredMarkerId(null);\n\n  return {\n    onMouseMoveHandler,\n    onMouseLeaveHandler,\n  };\n};\n"],
+  "mappings": "AAEA,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,gBAAgB;AACzB,SAAS,6BAA6B;AAGtC,MAAM,WAAW,CAAC,OAAe,iBAC/B,KAAK,KAAK,KAAK,IAAI,QAAQ,cAAc,CAAC,CAAC;AAYtC,MAAM,mCAAmC,CAAC,gBAA0B;AACzE,QAAM,EAAE,mBAAmB,IAAI,sBAAsB;AACrD,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,EAAE,YAAY,IAAI,eAAe;AACvC,QAAM,YAAY,sBAAsB;AACxC,QAAM,eAAe,gBAAgB,YAAY;AAEjD,QAAM,sBAAsB,YAAY,IAAI,CAAC,YAAY;AAAA,IACvD;AAAA,IACA,UAAU,MAAM,MAAM;AAAA,EACxB,EAAE;AAEF,QAAM,qBAAqB,CAAC,UAAsC;AAChE,UAAM,EAAE,SAAS,QAAQ,IAAI;AAC7B,UAAM,EAAE,MAAM,IAAI,IAAI,MAAM,cAAc,sBAAsB;AAChE,UAAM,gBAAgB,eAAe,UAAU,OAAO,UAAU;AAEhE,QAAI,CAAC,WAAW;AACd,YAAM,UAAU,oBAAoB;AAAA,QAClC,CAAC,KAAK,QACJ,SAAS,IAAI,UAAU,aAAa,IACpC,SAAS,IAAI,UAAU,aAAa,IAChC,MACA;AAAA,QACN,oBAAoB,CAAC;AAAA,MACvB;AAEA,yBAAmB,QAAQ,MAAM;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,sBAAsB,MAAM,mBAAmB,IAAI;AAEzD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/core/components/legend/range/utils/get-segment-item-position-and-size.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ORIENTATION } from "../../../chart-layout/types/constants.js";
+import { ORIENTATION } from "../../../../constants.js";
 import { DEFAULT_ITEM_THICKNESS, DEFAULT_SEGMENT_SIZE } from "../constants.js";
 const getSegmentItemPositionAndSize = (orientation, startPosition, size) => {
   const itemPosition = size === 0 && startPosition > DEFAULT_SEGMENT_SIZE ? startPosition - DEFAULT_SEGMENT_SIZE : startPosition;

package/esm/charts/core/components/legend/range/utils/get-segment-item-position-and-size.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/legend/range/utils/get-segment-item-position-and-size.ts"],
-  "sourcesContent": ["import { ChartLegendOrientation } from '../../../../types/legend.js';\nimport { ORIENTATION } from '../../../chart-layout/types/constants.js';\nimport { DEFAULT_ITEM_THICKNESS, DEFAULT_SEGMENT_SIZE } from '../constants.js';\nimport { SegmentPositionAndSize } from '../types/range-legend.internal.js';\n\nexport const getSegmentItemPositionAndSize = (\n  orientation: ChartLegendOrientation,\n  startPosition: number,\n  size: number,\n): SegmentPositionAndSize => {\n  const itemPosition =\n    size === 0 && startPosition > DEFAULT_SEGMENT_SIZE\n      ? startPosition - DEFAULT_SEGMENT_SIZE\n      : startPosition;\n\n  if (orientation === ORIENTATION.Horizontal) {\n    return {\n      itemX: itemPosition,\n      itemY: 0,\n      itemHeight: DEFAULT_ITEM_THICKNESS,\n      itemWidth: size || DEFAULT_SEGMENT_SIZE,\n    };\n  }\n\n  return {\n    itemX: 0,\n    itemY: itemPosition,\n    itemHeight: size || DEFAULT_SEGMENT_SIZE,\n    itemWidth: DEFAULT_ITEM_THICKNESS,\n  };\n};\n"],
-  "mappings": "AACA,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB,4BAA4B;AAGtD,MAAM,gCAAgC,CAC3C,aACA,eACA,SAC2B;AAC3B,QAAM,eACJ,SAAS,KAAK,gBAAgB,uBAC1B,gBAAgB,uBAChB;AAEN,MAAI,gBAAgB,YAAY,YAAY;AAC1C,WAAO;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,WAAW,QAAQ;AAAA,IACrB;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY,QAAQ;AAAA,IACpB,WAAW;AAAA,EACb;AACF;",
+  "sourcesContent": ["import { ORIENTATION } from '../../../../constants.js';\nimport { ChartLegendOrientation } from '../../../../types/legend.js';\nimport { DEFAULT_ITEM_THICKNESS, DEFAULT_SEGMENT_SIZE } from '../constants.js';\nimport { SegmentPositionAndSize } from '../types/range-legend.internal.js';\n\nexport const getSegmentItemPositionAndSize = (\n  orientation: ChartLegendOrientation,\n  startPosition: number,\n  size: number,\n): SegmentPositionAndSize => {\n  const itemPosition =\n    size === 0 && startPosition > DEFAULT_SEGMENT_SIZE\n      ? startPosition - DEFAULT_SEGMENT_SIZE\n      : startPosition;\n\n  if (orientation === ORIENTATION.Horizontal) {\n    return {\n      itemX: itemPosition,\n      itemY: 0,\n      itemHeight: DEFAULT_ITEM_THICKNESS,\n      itemWidth: size || DEFAULT_SEGMENT_SIZE,\n    };\n  }\n\n  return {\n    itemX: 0,\n    itemY: itemPosition,\n    itemHeight: size || DEFAULT_SEGMENT_SIZE,\n    itemWidth: DEFAULT_ITEM_THICKNESS,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,wBAAwB,4BAA4B;AAGtD,MAAM,gCAAgC,CAC3C,aACA,eACA,SAC2B;AAC3B,QAAM,eACJ,SAAS,KAAK,gBAAgB,uBAC1B,gBAAgB,uBAChB;AAEN,MAAI,gBAAgB,YAAY,YAAY;AAC1C,WAAO;AAAA,MACL,OAAO;AAAA,MACP,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,WAAW,QAAQ;AAAA,IACrB;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY,QAAQ;AAAA,IACpB,WAAW;AAAA,EACb;AACF;",
   "names": []
 }

package/esm/charts/core/components/loader-overlay/LoaderOverlay.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._bs5vaz0-3-4-1 {
+._bs5vaz0-3-5-2 {
   position: absolute;
   top: 0;
   width: 100%;
@@ -6,7 +6,7 @@
   z-index: 1;
   pointer-events: none;
 }
-._bs5vaz1-3-4-1 {
+._bs5vaz1-3-5-2 {
   position: absolute;
   top: 0;
   width: 100%;

package/esm/charts/core/components/loader-overlay/LoaderOverlay.sty.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import "./LoaderOverlay.css";
-var loaderOverlay = "_bs5vaz0-3-4-1";
-var progressCircle = "_bs5vaz1-3-4-1";
+var loaderOverlay = "_bs5vaz0-3-5-2";
+var progressCircle = "_bs5vaz1-3-5-2";
 export {
   loaderOverlay,
   progressCircle

package/esm/charts/core/components/loader-overlay/LoaderOverlay.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/loader-overlay/LoaderOverlay.css.ts"],
-  "sourcesContent": ["import './LoaderOverlay.css';\nexport var loaderOverlay = '_bs5vaz0-3-4-1';\nexport var progressCircle = '_bs5vaz1-3-4-1';"],
+  "sourcesContent": ["import './LoaderOverlay.css';\nexport var loaderOverlay = '_bs5vaz0-3-5-2';\nexport var progressCircle = '_bs5vaz1-3-5-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;",
   "names": []
 }

package/esm/charts/core/components/overlay-tooltip/OverlayTooltip.js CHANGED Viewed

@@ -29,7 +29,18 @@ const OverlayTooltip = Object.assign(TooltipRoot, {
   SeriesHeader,
   SeriesItem
 });
+const Tooltip = () => null;
+Tooltip.displayName = "ChartTooltip";
+const ChartTooltip = Object.assign(Tooltip, {
+  Action,
+  ActionsPlaceholder,
+  Series,
+  SeriesHeader,
+  SeriesItem
+});
 export {
-  OverlayTooltip
+  ChartTooltip,
+  OverlayTooltip,
+  Tooltip
 };
 //# sourceMappingURL=OverlayTooltip.js.map

package/esm/charts/core/components/overlay-tooltip/OverlayTooltip.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/overlay-tooltip/OverlayTooltip.tsx"],
-  "sourcesContent": ["import type { PropsWithChildren } from 'react';\n\nimport { DynamicTooltipRenderer } from './components/DynamicTooltipRenderer.js';\nimport { Action } from './components/global-actions/Action.js';\nimport { ActionsPlaceholder } from './components/global-actions/ActionsPlaceholder.js';\nimport { Header } from './components/header/Header.js';\nimport { Series } from './components/series/Series.js';\nimport { SeriesHeader } from './components/series/SeriesHeader.js';\nimport { SeriesItem } from './components/series/SeriesItem.js';\nimport { TooltipPortal } from './components/TooltipPortal.js';\nimport type { OverlayTooltipProps } from './types.js';\n\n/**\n * Tooltip root component\n * @internal\n */\nconst TooltipRoot = (props: PropsWithChildren<OverlayTooltipProps>) => {\n  if (props.absoluteX !== undefined && props.absoluteY !== undefined) {\n    return (\n      <TooltipPortal\n        isInteractive={props.isInteractive ?? false}\n        absoluteX={props.absoluteX}\n        absoluteY={props.absoluteY}\n      >\n        {props.children}\n      </TooltipPortal>\n    );\n  }\n\n  return <DynamicTooltipRenderer {...props} />;\n};\n\n/**\n * OverlayTooltip WIP component\n * @internal\n */\nexport const OverlayTooltip = Object.assign(TooltipRoot, {\n  Action,\n  ActionsPlaceholder,\n  Header,\n  Series,\n  SeriesHeader,\n  SeriesItem,\n});\n"],
-  "mappings": "AAmBM;AAjBN,SAAS,8BAA8B;AACvC,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAO9B,MAAM,cAAc,CAAC,UAAkD;AACrE,MAAI,MAAM,cAAc,UAAa,MAAM,cAAc,QAAW;AAClE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAe,MAAM,iBAAiB;AAAA,QACtC,WAAW,MAAM;AAAA,QACjB,WAAW,MAAM;AAAA,QAEhB,gBAAM;AAAA;AAAA,IACT;AAAA,EAEJ;AAEA,SAAO,oBAAC,0BAAwB,GAAG,OAAO;AAC5C;AAMO,MAAM,iBAAiB,OAAO,OAAO,aAAa;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import type { PropsWithChildren } from 'react';\n\nimport { DynamicTooltipRenderer } from './components/DynamicTooltipRenderer.js';\nimport { Action } from './components/global-actions/Action.js';\nimport { ActionsPlaceholder } from './components/global-actions/ActionsPlaceholder.js';\nimport { Header } from './components/header/Header.js';\nimport { Series } from './components/series/Series.js';\nimport { SeriesHeader } from './components/series/SeriesHeader.js';\nimport { SeriesItem } from './components/series/SeriesItem.js';\nimport { TooltipPortal } from './components/TooltipPortal.js';\nimport type { OverlayTooltipProps } from './types.js';\n\n/**\n * Tooltip root component\n * @internal\n */\nconst TooltipRoot = (props: PropsWithChildren<OverlayTooltipProps>) => {\n  if (props.absoluteX !== undefined && props.absoluteY !== undefined) {\n    return (\n      <TooltipPortal\n        isInteractive={props.isInteractive ?? false}\n        absoluteX={props.absoluteX}\n        absoluteY={props.absoluteY}\n      >\n        {props.children}\n      </TooltipPortal>\n    );\n  }\n\n  return <DynamicTooltipRenderer {...props} />;\n};\n\n/**\n * OverlayTooltip WIP component\n * @internal\n */\nexport const OverlayTooltip = Object.assign(TooltipRoot, {\n  Action,\n  ActionsPlaceholder,\n  Header,\n  Series,\n  SeriesHeader,\n  SeriesItem,\n});\n\nexport const Tooltip = () => null;\nTooltip.displayName = 'ChartTooltip';\n/**\n * ChartTooltip Component\n * @public\n */\nexport const ChartTooltip = Object.assign(Tooltip, {\n  Action,\n  ActionsPlaceholder,\n  Series,\n  SeriesHeader,\n  SeriesItem,\n});\n"],
+  "mappings": "AAmBM;AAjBN,SAAS,8BAA8B;AACvC,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAO9B,MAAM,cAAc,CAAC,UAAkD;AACrE,MAAI,MAAM,cAAc,UAAa,MAAM,cAAc,QAAW;AAClE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAe,MAAM,iBAAiB;AAAA,QACtC,WAAW,MAAM;AAAA,QACjB,WAAW,MAAM;AAAA,QAEhB,gBAAM;AAAA;AAAA,IACT;AAAA,EAEJ;AAEA,SAAO,oBAAC,0BAAwB,GAAG,OAAO;AAC5C;AAMO,MAAM,iBAAiB,OAAO,OAAO,aAAa;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAEM,MAAM,UAAU,MAAM;AAC7B,QAAQ,cAAc;AAKf,MAAM,eAAe,OAAO,OAAO,SAAS;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
   "names": []
 }

package/esm/charts/core/components/overlay-tooltip/_to-be-removed/HeaderTestTooltip.js CHANGED Viewed

@@ -12,13 +12,36 @@ const HeaderTooltip = ({
       header1: data.header1,
       subheader: data.subheader,
       label,
-      showRangeDuration
+      showRangeDuration1: showRangeDuration
     }
   ) });
 };
 const DotTooltip = /* @__PURE__ */ jsx(HeaderTooltip, {});
 const NoGeometryTooltip = /* @__PURE__ */ jsx(HeaderTooltip, {});
 const DurationTooltip = (label) => /* @__PURE__ */ jsx(HeaderTooltip, { label, showRangeDuration: true });
+const DualHeaderTooltip = ({
+  header2,
+  label,
+  label2,
+  duration2,
+  showRangeDuration = false,
+  maxLines
+}) => {
+  const { data } = useTooltipData();
+  return /* @__PURE__ */ jsx(OverlayTooltip, { children: /* @__PURE__ */ jsx(
+    OverlayTooltip.Header,
+    {
+      header1: data.header1,
+      header2,
+      subheader: data.subheader,
+      label,
+      label2,
+      duration2,
+      showRangeDuration1: showRangeDuration,
+      maxLines
+    }
+  ) });
+};
 const baseSeries = [
   {
     name: "Series 1",
@@ -207,6 +230,59 @@ const HeaderTestData = [
     description: /* @__PURE__ */ jsx("h3", { children: "Duration: Same day range with subheader" }),
     data: createTestData("dot", DATE_RANGES.sameDay, ["Business Hours"]),
     template: DurationTooltip("Daily Operations")
+  },
+  {
+    description: /* @__PURE__ */ jsx("h3", { children: "Dual: Date range (X) + numeric range (Y)" }),
+    data: createTestData("dot", DATE_RANGES.janToJun),
+    template: /* @__PURE__ */ jsx(DualHeaderTooltip, { header2: [34.5, 96.6] })
+  },
+  {
+    description: /* @__PURE__ */ jsx("h3", { children: "Dual: With axis labels on both lines" }),
+    data: createTestData("dot", DATE_RANGES.hoursChanging),
+    template: /* @__PURE__ */ jsx(DualHeaderTooltip, { header2: [0, 100], label: "X Axis", label2: "Y Axis" })
+  },
+  {
+    description: /* @__PURE__ */ jsx("h3", { children: "Dual: With range duration on both lines" }),
+    data: createTestData("dot", DATE_RANGES.monthsChanging),
+    template: /* @__PURE__ */ jsx(DualHeaderTooltip, { header2: [1e4, 25e4], showRangeDuration: true })
+  },
+  {
+    description: /* @__PURE__ */ jsx("h3", { children: "Dual: With subheader \u2014 all three lines" }),
+    data: createTestData("dot", DATE_RANGES.fullYear, [
+      "18 data points across 2 series"
+    ]),
+    template: /* @__PURE__ */ jsx(
+      DualHeaderTooltip,
+      {
+        header2: [34.5, 96.6],
+        label2: "Y Axis",
+        showRangeDuration: true
+      }
+    )
+  },
+  {
+    description: /* @__PURE__ */ jsx("h3", { children: "Dual: Identical content" }),
+    data: createTestData("dot", [34.5, 96.6]),
+    template: /* @__PURE__ */ jsx(DualHeaderTooltip, { header2: [34.5, 96.6] })
+  },
+  {
+    description: /* @__PURE__ */ jsx("h3", { children: "Dual: Truncation" }),
+    data: createTestData(
+      "dot",
+      "This is a very long header value that might overflow the container"
+    ),
+    template: /* @__PURE__ */ jsx(
+      DualHeaderTooltip,
+      {
+        header2: [
+          "Beginning of extremely long categorical range",
+          "End of extremely long categorical range"
+        ],
+        label: "X Axis",
+        label2: "Y Axis",
+        maxLines: 1
+      }
+    )
   }
 ];
 export {