@dynatrace/strato-components 3.10.4 → 3.11.0

package/esm/charts/core/components/annotations/AnnotationsAtom.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/annotations/AnnotationsAtom.css.ts"],
-  "sourcesContent": ["import './AnnotationsAtom.css';\nexport var wrapper = '_145zb630-3-10-4';"],
+  "sourcesContent": ["import './AnnotationsAtom.css';\nexport var wrapper = '_145zb630-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css

@@ -1,4 +1,4 @@
-._1yc349j0-3-10-4 {
+._1yc349j0-3-11-0 {
   position: absolute;
   top: 0;
   left: 0;

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsCanvasLayout.css";
-var canvasContainer = "_1yc349j0-3-10-4";
+var canvasContainer = "_1yc349j0-3-11-0";
 export {
   canvasContainer
 };

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css.ts"],
-  "sourcesContent": ["import './AnnotationsCanvasLayout.css';\nexport var canvasContainer = '_1yc349j0-3-10-4';"],
+  "sourcesContent": ["import './AnnotationsCanvasLayout.css';\nexport var canvasContainer = '_1yc349j0-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.css

@@ -1,4 +1,4 @@
-._107efci0-3-10-4 {
+._107efci0-3-11-0 {
   position: absolute;
   top: 0;
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsOverlays.css";
-var annotationsOverlay = "_107efci0-3-10-4";
+var annotationsOverlay = "_107efci0-3-11-0";
 export {
   annotationsOverlay
 };

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/overlays/AnnotationsOverlays.css.ts"],
-  "sourcesContent": ["import './AnnotationsOverlays.css';\nexport var annotationsOverlay = '_107efci0-3-10-4';"],
+  "sourcesContent": ["import './AnnotationsOverlays.css';\nexport var annotationsOverlay = '_107efci0-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.css

@@ -1,4 +1,4 @@
-._uzgvu30-3-10-4 {
+._uzgvu30-3-11-0 {
   position: relative;
   overflow-x: hidden;
   overflow-y: auto;

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsScrollWrapper.css";
-var scrollWrapper = "_uzgvu30-3-10-4";
+var scrollWrapper = "_uzgvu30-3-11-0";
 export {
   scrollWrapper
 };

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.css.ts"],
-  "sourcesContent": ["import './AnnotationsScrollWrapper.css';\nexport var scrollWrapper = '_uzgvu30-3-10-4';"],
+  "sourcesContent": ["import './AnnotationsScrollWrapper.css';\nexport var scrollWrapper = '_uzgvu30-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/tooltip/AnnotationsDefaultTooltipContent.js

@@ -30,7 +30,6 @@ const buildExternalConfig = (truncationMode) => ({
   seriesHeader: null,
   displayHeaderDivider: false,
   symbolPosition: "left",
-  symbolVerticalAlignment: "start",
   truncationMode,
   defaultActionsConfig: BASE_ACTIONS_CONFIG,
   variant: "single"

package/esm/charts/core/components/annotations/components/tooltip/AnnotationsDefaultTooltipContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/tooltip/AnnotationsDefaultTooltipContent.tsx"],
-  "sourcesContent": ["import {\n  Fragment,\n  useState,\n  type KeyboardEvent,\n  type SyntheticEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { formatDate } from '@dynatrace-sdk/units';\n\nimport { useAnnotationsTooltipFormatter } from './hooks/useAnnotationsTooltipFormatter.js';\nimport { getAnnotationSeriesSymbolProps } from './utils/get-symbol.js';\nimport { Divider } from '../../../../../../layouts/divider/Divider.js';\nimport type { TruncationMode } from '../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { fitBetween } from '../../../../utils/fitBetween.js';\nimport { Footer } from '../../../overlay-tooltip/components/Footer.js';\nimport { Header } from '../../../overlay-tooltip/components/header/Header.js';\nimport { SeriesItem } from '../../../overlay-tooltip/components/series/SeriesItem.js';\nimport { ExternalConfigContext } from '../../../overlay-tooltip/contexts/ExternalConfigContext.js';\nimport { OVERLAY_TOOLTIP_MESSAGES } from '../../../overlay-tooltip/messages.js';\nimport { useSelector } from '../../../overlay-tooltip/selectors.js';\nimport {\n  annotationsGroupsScrollContainer,\n  divider,\n  seriesGridContainer,\n} from '../../../overlay-tooltip/tooltip.sty.js';\nimport type {\n  ExternalConfig,\n  HeaderData,\n} from '../../../overlay-tooltip/types.js';\nimport { useSetStateSelection } from '../../hooks/store/state-setters.js';\nimport { useAnnotationsActions } from '../../hooks/useAnnotationsActions.js';\nimport type {\n  AnnotationsActionsPayload,\n  AnnotationsMarkerGroup,\n} from '../../types/annotations.js';\nimport { deserializeMarkerRange } from '../../utils/serialize-marker-range.js';\n\nconst BASE_ACTIONS_CONFIG: ExternalConfig['defaultActionsConfig'] = new Map([\n  ['name', { field: 'valueLabel' }],\n]);\n\nconst buildExternalConfig = (\n  truncationMode: TruncationMode,\n): ExternalConfig => ({\n  seriesHeader: null,\n  displayHeaderDivider: false,\n  symbolPosition: 'left',\n  symbolVerticalAlignment: 'start',\n  truncationMode,\n  defaultActionsConfig: BASE_ACTIONS_CONFIG,\n  variant: 'single',\n});\n\ntype AnnotationsDefaultTooltipContentProps = {\n  data: AnnotationsMarkerGroup[];\n  tooltipType: 'time' | 'numerical';\n  truncationMode: TruncationMode;\n  maxLines: number;\n};\n\nconst X_VALUE_LABEL = 'X-value';\nconst GROUP_KEY_ATTRIBUTE = 'data-annotation-group-key';\nconst getGroupElementId = (groupKey: string) => `annotation-group-${groupKey}`;\nconst getWrapAroundStartIndex = (delta: number, length: number) =>\n  delta > 0 ? 0 : length - 1;\n\n/**\n * Default tooltip content for AnnotationsChart, rendered through\n * OverlayTooltip primitives. Supports multiple (Header, Series) pairs for\n * collided marker groups.\n *\n * @internal\n */\nexport const AnnotationsDefaultTooltipContent = (\n  props: AnnotationsDefaultTooltipContentProps,\n) => {\n  const { data, tooltipType, truncationMode, maxLines } = props;\n  const formatter = useAnnotationsTooltipFormatter();\n  const annotationsActions = useAnnotationsActions();\n  const updateAnnotationsSelectionState = useSetStateSelection();\n  const config = buildExternalConfig(truncationMode);\n  const intl = useIntl();\n  const unpinnedPlaceholderText = intl.formatMessage(\n    OVERLAY_TOOLTIP_MESSAGES.unpinnedPlaceholderMessage,\n  );\n  // Direct subscription needed: passed as stable template prop, so no parent re-render reaches this fiber when pinned changes.\n  const pinned = useSelector((state) => state.pinned);\n  const [hoveredGroupKey, setHoveredGroupKey] = useState<string | undefined>(\n    undefined,\n  );\n\n  const setHoveredGroup = (groupKey: string | undefined) => {\n    if (groupKey === hoveredGroupKey) {\n      return;\n    }\n    setHoveredGroupKey(groupKey);\n    updateAnnotationsSelectionState({\n      hoveredListItem: groupKey,\n      hoverGroupListKey: groupKey,\n    });\n  };\n\n  const resolveGroupKeyFromEvent = (\n    event: SyntheticEvent,\n  ): string | undefined => {\n    const target = event.target as Element;\n    return (\n      target\n        .closest(`[${GROUP_KEY_ATTRIBUTE}]`)\n        ?.getAttribute(GROUP_KEY_ATTRIBUTE) ?? undefined\n    );\n  };\n\n  const handleGroupsMouseMove = (event: SyntheticEvent) => {\n    if (!pinned) {\n      return;\n    }\n    setHoveredGroup(resolveGroupKeyFromEvent(event));\n  };\n\n  const handleGroupsMouseLeave = () => {\n    if (!pinned) {\n      return;\n    }\n    setHoveredGroup(undefined);\n  };\n\n  const handleGroupsFocus = (event: SyntheticEvent) => {\n    if (!pinned) {\n      return;\n    }\n    setHoveredGroup(resolveGroupKeyFromEvent(event));\n  };\n\n  const handleGroupsBlur = () => {\n    if (!pinned) {\n      return;\n    }\n    setHoveredGroup(undefined);\n  };\n\n  const handleGroupsTouchStart = (event: SyntheticEvent) => {\n    if (!pinned) {\n      return;\n    }\n    setHoveredGroup(resolveGroupKeyFromEvent(event));\n  };\n\n  const handleGroupsKeyDown = (event: KeyboardEvent) => {\n    if (!pinned || (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')) {\n      return;\n    }\n    event.preventDefault();\n    const delta = event.key === 'ArrowDown' ? 1 : -1;\n    const currentIndex = data.findIndex((g) => g.key === hoveredGroupKey);\n    const nextIndex =\n      currentIndex === -1\n        ? getWrapAroundStartIndex(delta, data.length)\n        : fitBetween(currentIndex + delta, 0, data.length - 1);\n    setHoveredGroup(data[nextIndex]?.key);\n  };\n\n  return (\n    <ExternalConfigContext.Provider value={config}>\n      <div\n        className={annotationsGroupsScrollContainer}\n        role=\"listbox\"\n        tabIndex={pinned ? 0 : -1}\n        aria-activedescendant={\n          pinned && hoveredGroupKey\n            ? getGroupElementId(hoveredGroupKey)\n            : undefined\n        }\n        onMouseMove={handleGroupsMouseMove}\n        onMouseLeave={handleGroupsMouseLeave}\n        onFocus={handleGroupsFocus}\n        onBlur={handleGroupsBlur}\n        onTouchStart={handleGroupsTouchStart}\n        onKeyDown={handleGroupsKeyDown}\n      >\n        {data.map((annotationGroup, groupIndex) => {\n          const [from, to] = deserializeMarkerRange(annotationGroup.key);\n          const isRange = to > from;\n\n          let header1: HeaderData;\n          let showRangeDuration = false;\n          let duration: string | undefined;\n\n          if (tooltipType === 'numerical' && isRange) {\n            header1 = [formatter(from), formatter(to)] as HeaderData;\n            duration = String(Math.abs(to - from));\n          } else if (tooltipType === 'numerical') {\n            header1 = formatter(from);\n          } else if (isRange) {\n            header1 = [new Date(from), new Date(to)] as HeaderData;\n            showRangeDuration = true;\n          } else {\n            header1 = formatDate(new Date(from), {\n              day: '2-digit',\n              month: 'short',\n              year: 'numeric',\n              hour: '2-digit',\n              minute: '2-digit',\n            });\n          }\n\n          return (\n            <Fragment key={annotationGroup.key}>\n              {groupIndex > 0 && (\n                <Divider orientation=\"horizontal\" className={divider} />\n              )}\n              <Header\n                header1={header1}\n                label={X_VALUE_LABEL}\n                showRangeDuration1={showRangeDuration}\n                duration1={duration}\n                maxLines={maxLines}\n              />\n              <div\n                className={seriesGridContainer}\n                role=\"option\"\n                id={getGroupElementId(annotationGroup.key)}\n                aria-selected={\n                  pinned && hoveredGroupKey === annotationGroup.key\n                }\n                {...{ [GROUP_KEY_ATTRIBUTE]: annotationGroup.key }}\n              >\n                {annotationGroup.markers.map((marker) => {\n                  const symbolProps = getAnnotationSeriesSymbolProps(marker);\n                  const {\n                    id,\n                    symbol,\n                    title: markerTitle,\n                    description: markerDescription,\n                    start,\n                    end,\n                    color,\n                    priority,\n                    hidden: markerHidden,\n                    ...extraFields\n                  } = marker;\n                  const payload: AnnotationsActionsPayload = {\n                    ...extraFields,\n                    start,\n                    end,\n                    title: markerTitle,\n                    description: markerDescription,\n                    symbol,\n                  };\n                  const actions = annotationsActions?.(payload);\n                  const truncationProps =\n                    maxLines > 1\n                      ? ({ multiLine: true } as const)\n                      : ({ multiLine: false, maxLines } as const);\n\n                  return (\n                    <SeriesItem\n                      key={id}\n                      name={markerTitle ?? ''}\n                      description={markerDescription}\n                      value=\"\"\n                      {...symbolProps}\n                      {...truncationProps}\n                      actions={actions ? () => actions : undefined}\n                    />\n                  );\n                })}\n              </div>\n            </Fragment>\n          );\n        })}\n      </div>\n      {!pinned && (\n        <Footer\n          actions={[]}\n          unpinnedPlaceholderText={unpinnedPlaceholderText}\n        />\n      )}\n    </ExternalConfigContext.Provider>\n  );\n};\n\nAnnotationsDefaultTooltipContent.displayName =\n  'AnnotationsDefaultTooltipContent';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  Fragment,\n  useState,\n  type KeyboardEvent,\n  type SyntheticEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { formatDate } from '@dynatrace-sdk/units';\n\nimport { useAnnotationsTooltipFormatter } from './hooks/useAnnotationsTooltipFormatter.js';\nimport { getAnnotationSeriesSymbolProps } from './utils/get-symbol.js';\nimport { Divider } from '../../../../../../layouts/divider/Divider.js';\nimport type { TruncationMode } from '../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { fitBetween } from '../../../../utils/fitBetween.js';\nimport { Footer } from '../../../overlay-tooltip/components/Footer.js';\nimport { Header } from '../../../overlay-tooltip/components/header/Header.js';\nimport { SeriesItem } from '../../../overlay-tooltip/components/series/SeriesItem.js';\nimport { ExternalConfigContext } from '../../../overlay-tooltip/contexts/ExternalConfigContext.js';\nimport { OVERLAY_TOOLTIP_MESSAGES } from '../../../overlay-tooltip/messages.js';\nimport { useSelector } from '../../../overlay-tooltip/selectors.js';\nimport {\n  annotationsGroupsScrollContainer,\n  divider,\n  seriesGridContainer,\n} from '../../../overlay-tooltip/tooltip.sty.js';\nimport type {\n  ExternalConfig,\n  HeaderData,\n} from '../../../overlay-tooltip/types.js';\nimport { useSetStateSelection } from '../../hooks/store/state-setters.js';\nimport { useAnnotationsActions } from '../../hooks/useAnnotationsActions.js';\nimport type {\n  AnnotationsActionsPayload,\n  AnnotationsMarkerGroup,\n} from '../../types/annotations.js';\nimport { deserializeMarkerRange } from '../../utils/serialize-marker-range.js';\n\nconst BASE_ACTIONS_CONFIG: ExternalConfig['defaultActionsConfig'] = new Map([\n  ['name', { field: 'valueLabel' }],\n]);\n\nconst buildExternalConfig = (\n  truncationMode: TruncationMode,\n): ExternalConfig => ({\n  seriesHeader: null,\n  displayHeaderDivider: false,\n  symbolPosition: 'left',\n  truncationMode,\n  defaultActionsConfig: BASE_ACTIONS_CONFIG,\n  variant: 'single',\n});\n\ntype AnnotationsDefaultTooltipContentProps = {\n  data: AnnotationsMarkerGroup[];\n  tooltipType: 'time' | 'numerical';\n  truncationMode: TruncationMode;\n  maxLines: number;\n};\n\nconst X_VALUE_LABEL = 'X-value';\nconst GROUP_KEY_ATTRIBUTE = 'data-annotation-group-key';\nconst getGroupElementId = (groupKey: string) => `annotation-group-${groupKey}`;\nconst getWrapAroundStartIndex = (delta: number, length: number) =>\n  delta > 0 ? 0 : length - 1;\n\n/**\n * Default tooltip content for AnnotationsChart, rendered through\n * OverlayTooltip primitives. Supports multiple (Header, Series) pairs for\n * collided marker groups.\n *\n * @internal\n */\nexport const AnnotationsDefaultTooltipContent = (\n  props: AnnotationsDefaultTooltipContentProps,\n) => {\n  const { data, tooltipType, truncationMode, maxLines } = props;\n  const formatter = useAnnotationsTooltipFormatter();\n  const annotationsActions = useAnnotationsActions();\n  const updateAnnotationsSelectionState = useSetStateSelection();\n  const config = buildExternalConfig(truncationMode);\n  const intl = useIntl();\n  const unpinnedPlaceholderText = intl.formatMessage(\n    OVERLAY_TOOLTIP_MESSAGES.unpinnedPlaceholderMessage,\n  );\n  // Direct subscription needed: passed as stable template prop, so no parent re-render reaches this fiber when pinned changes.\n  const pinned = useSelector((state) => state.pinned);\n  const [hoveredGroupKey, setHoveredGroupKey] = useState<string | undefined>(\n    undefined,\n  );\n\n  const setHoveredGroup = (groupKey: string | undefined) => {\n    if (groupKey === hoveredGroupKey) {\n      return;\n    }\n    setHoveredGroupKey(groupKey);\n    updateAnnotationsSelectionState({\n      hoveredListItem: groupKey,\n      hoverGroupListKey: groupKey,\n    });\n  };\n\n  const resolveGroupKeyFromEvent = (\n    event: SyntheticEvent,\n  ): string | undefined => {\n    const target = event.target as Element;\n    return (\n      target\n        .closest(`[${GROUP_KEY_ATTRIBUTE}]`)\n        ?.getAttribute(GROUP_KEY_ATTRIBUTE) ?? undefined\n    );\n  };\n\n  const handleGroupsMouseMove = (event: SyntheticEvent) => {\n    if (!pinned) {\n      return;\n    }\n    setHoveredGroup(resolveGroupKeyFromEvent(event));\n  };\n\n  const handleGroupsMouseLeave = () => {\n    if (!pinned) {\n      return;\n    }\n    setHoveredGroup(undefined);\n  };\n\n  const handleGroupsFocus = (event: SyntheticEvent) => {\n    if (!pinned) {\n      return;\n    }\n    setHoveredGroup(resolveGroupKeyFromEvent(event));\n  };\n\n  const handleGroupsBlur = () => {\n    if (!pinned) {\n      return;\n    }\n    setHoveredGroup(undefined);\n  };\n\n  const handleGroupsTouchStart = (event: SyntheticEvent) => {\n    if (!pinned) {\n      return;\n    }\n    setHoveredGroup(resolveGroupKeyFromEvent(event));\n  };\n\n  const handleGroupsKeyDown = (event: KeyboardEvent) => {\n    if (!pinned || (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')) {\n      return;\n    }\n    event.preventDefault();\n    const delta = event.key === 'ArrowDown' ? 1 : -1;\n    const currentIndex = data.findIndex((g) => g.key === hoveredGroupKey);\n    const nextIndex =\n      currentIndex === -1\n        ? getWrapAroundStartIndex(delta, data.length)\n        : fitBetween(currentIndex + delta, 0, data.length - 1);\n    setHoveredGroup(data[nextIndex]?.key);\n  };\n\n  return (\n    <ExternalConfigContext.Provider value={config}>\n      <div\n        className={annotationsGroupsScrollContainer}\n        role=\"listbox\"\n        tabIndex={pinned ? 0 : -1}\n        aria-activedescendant={\n          pinned && hoveredGroupKey\n            ? getGroupElementId(hoveredGroupKey)\n            : undefined\n        }\n        onMouseMove={handleGroupsMouseMove}\n        onMouseLeave={handleGroupsMouseLeave}\n        onFocus={handleGroupsFocus}\n        onBlur={handleGroupsBlur}\n        onTouchStart={handleGroupsTouchStart}\n        onKeyDown={handleGroupsKeyDown}\n      >\n        {data.map((annotationGroup, groupIndex) => {\n          const [from, to] = deserializeMarkerRange(annotationGroup.key);\n          const isRange = to > from;\n\n          let header1: HeaderData;\n          let showRangeDuration = false;\n          let duration: string | undefined;\n\n          if (tooltipType === 'numerical' && isRange) {\n            header1 = [formatter(from), formatter(to)] as HeaderData;\n            duration = String(Math.abs(to - from));\n          } else if (tooltipType === 'numerical') {\n            header1 = formatter(from);\n          } else if (isRange) {\n            header1 = [new Date(from), new Date(to)] as HeaderData;\n            showRangeDuration = true;\n          } else {\n            header1 = formatDate(new Date(from), {\n              day: '2-digit',\n              month: 'short',\n              year: 'numeric',\n              hour: '2-digit',\n              minute: '2-digit',\n            });\n          }\n\n          return (\n            <Fragment key={annotationGroup.key}>\n              {groupIndex > 0 && (\n                <Divider orientation=\"horizontal\" className={divider} />\n              )}\n              <Header\n                header1={header1}\n                label={X_VALUE_LABEL}\n                showRangeDuration1={showRangeDuration}\n                duration1={duration}\n                maxLines={maxLines}\n              />\n              <div\n                className={seriesGridContainer}\n                role=\"option\"\n                id={getGroupElementId(annotationGroup.key)}\n                aria-selected={\n                  pinned && hoveredGroupKey === annotationGroup.key\n                }\n                {...{ [GROUP_KEY_ATTRIBUTE]: annotationGroup.key }}\n              >\n                {annotationGroup.markers.map((marker) => {\n                  const symbolProps = getAnnotationSeriesSymbolProps(marker);\n                  const {\n                    id,\n                    symbol,\n                    title: markerTitle,\n                    description: markerDescription,\n                    start,\n                    end,\n                    color,\n                    priority,\n                    hidden: markerHidden,\n                    ...extraFields\n                  } = marker;\n                  const payload: AnnotationsActionsPayload = {\n                    ...extraFields,\n                    start,\n                    end,\n                    title: markerTitle,\n                    description: markerDescription,\n                    symbol,\n                  };\n                  const actions = annotationsActions?.(payload);\n                  const truncationProps =\n                    maxLines > 1\n                      ? ({ multiLine: true } as const)\n                      : ({ multiLine: false, maxLines } as const);\n\n                  return (\n                    <SeriesItem\n                      key={id}\n                      name={markerTitle ?? ''}\n                      description={markerDescription}\n                      value=\"\"\n                      {...symbolProps}\n                      {...truncationProps}\n                      actions={actions ? () => actions : undefined}\n                    />\n                  );\n                })}\n              </div>\n            </Fragment>\n          );\n        })}\n      </div>\n      {!pinned && (\n        <Footer\n          actions={[]}\n          unpinnedPlaceholderText={unpinnedPlaceholderText}\n        />\n      )}\n    </ExternalConfigContext.Provider>\n  );\n};\n\nAnnotationsDefaultTooltipContent.displayName =\n  'AnnotationsDefaultTooltipContent';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/core/components/axes/Axis.css

@@ -1,4 +1,4 @@
-._90oaxp0-3-10-4 {
+._90oaxp0-3-11-0 {
   display: block;
   overflow: visible;
 }

package/esm/charts/core/components/axes/Axis.sty.js

@@ -1,5 +1,5 @@
 import "./Axis.css";
-var axis = "_90oaxp0-3-10-4";
+var axis = "_90oaxp0-3-11-0";
 export {
   axis
 };

package/esm/charts/core/components/axes/Axis.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/axes/Axis.css.ts"],
-  "sourcesContent": ["import './Axis.css';\nexport var axis = '_90oaxp0-3-10-4';"],
+  "sourcesContent": ["import './Axis.css';\nexport var axis = '_90oaxp0-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

package/esm/charts/core/components/axes/components/PanningControls/PanningControls.css

@@ -1,4 +1,4 @@
-@keyframes _3rbllj2-3-10-4 {
+@keyframes _3rbllj2-3-11-0 {
   0% {
     transform: translateX(-4px);
     opacity: 0.2;
@@ -8,7 +8,7 @@
     opacity: 1;
   }
 }
-@keyframes _3rbllj3-3-10-4 {
+@keyframes _3rbllj3-3-11-0 {
   0% {
     transform: translateX(4px);
     opacity: 0.2;
@@ -18,7 +18,7 @@
     opacity: 1;
   }
 }
-._3rbllj4-3-10-4 {
+._3rbllj4-3-11-0 {
   opacity: 0;
   height: 100%;
   position: absolute;
@@ -34,29 +34,29 @@
   animation-delay: 0.2s;
   animation-fill-mode: forwards;
 }
-._3rbllj5-3-10-4 {
+._3rbllj5-3-11-0 {
   left: 0;
-  animation-name: _3rbllj2-3-10-4;
+  animation-name: _3rbllj2-3-11-0;
 }
-._3rbllj6-3-10-4 {
+._3rbllj6-3-11-0 {
   right: 0;
-  animation-name: _3rbllj3-3-10-4;
+  animation-name: _3rbllj3-3-11-0;
 }
-._3rbllj7-3-10-4 {
+._3rbllj7-3-11-0 {
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._3rbllj7-3-10-4:hover {
+._3rbllj7-3-11-0:hover {
   color: var(--dt-colors-icon-neutral-subdued-hover, #434465);
 }
-._3rbllj7-3-10-4:active {
+._3rbllj7-3-11-0:active {
   color: var(--dt-colors-icon-neutral-subdued-active, #2f2f4f);
 }
-._3rbllj5-3-10-4 ~ div {
-  --_3rbllj0-3-10-4: rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 1) 40px;
+._3rbllj5-3-11-0 ~ div {
+  --_3rbllj0-3-11-0: rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 1) 40px;
 }
-._3rbllj6-3-10-4 ~ div {
-  --_3rbllj1-3-10-4: rgba(0, 0, 0, 1) calc(100% - 40px), rgba(0, 0, 0, 0) calc(100% - 12px);
+._3rbllj6-3-11-0 ~ div {
+  --_3rbllj1-3-11-0: rgba(0, 0, 0, 1) calc(100% - 40px), rgba(0, 0, 0, 0) calc(100% - 12px);
 }
-._3rbllj4-3-10-4 ~ div {
-  mask: linear-gradient(90deg, var(--_3rbllj0-3-10-4, rgba(0,0,0,1) 0%), var(--_3rbllj1-3-10-4, rgba(0,0,0,1) 0%));
+._3rbllj4-3-11-0 ~ div {
+  mask: linear-gradient(90deg, var(--_3rbllj0-3-11-0, rgba(0,0,0,1) 0%), var(--_3rbllj1-3-11-0, rgba(0,0,0,1) 0%));
 }

package/esm/charts/core/components/axes/components/PanningControls/PanningControls.sty.js

@@ -1,7 +1,7 @@
 import "./PanningControls.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var panningArrow = "_3rbllj7-3-10-4";
-var panningButtons = _7a468({ defaultClassName: "_3rbllj4-3-10-4", variantClassNames: { direction: { toLeft: "_3rbllj5-3-10-4", toRight: "_3rbllj6-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var panningArrow = "_3rbllj7-3-11-0";
+var panningButtons = _7a468({ defaultClassName: "_3rbllj4-3-11-0", variantClassNames: { direction: { toLeft: "_3rbllj5-3-11-0", toRight: "_3rbllj6-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   panningArrow,
   panningButtons

package/esm/charts/core/components/axes/components/PanningControls/PanningControls.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/axes/components/PanningControls/PanningControls.css.ts"],
-  "sourcesContent": ["import './PanningControls.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var panningArrow = '_3rbllj7-3-10-4';\nexport var panningButtons = _7a468({defaultClassName:'_3rbllj4-3-10-4',variantClassNames:{direction:{toLeft:'_3rbllj5-3-10-4',toRight:'_3rbllj6-3-10-4'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './PanningControls.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var panningArrow = '_3rbllj7-3-11-0';\nexport var panningButtons = _7a468({defaultClassName:'_3rbllj4-3-11-0',variantClassNames:{direction:{toLeft:'_3rbllj5-3-11-0',toRight:'_3rbllj6-3-11-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe;AACnB,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,QAAO,mBAAkB,SAAQ,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/canvas/utils/canvas-color.js

@@ -13,7 +13,10 @@ const getCanvasColor = memoize(
       return getTokenComputedStyle(fallbackColor);
     }
     return transformedColor;
-  }
+  },
+  // Include the active theme in the cache key so a light→dark (or dark→light)
+  // switch doesn't return a stale resolved color from the previous theme.
+  (color, fallbackColor = SCALE_FALLBACK_COLOR) => `${document.documentElement.getAttribute("data-theme") ?? ""}::${color}::${fallbackColor}`
 );
 export {
   getCanvasColor

package/esm/charts/core/components/canvas/utils/canvas-color.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/canvas/utils/canvas-color.ts"],
-  "sourcesContent": ["import { memoize } from 'lodash-es';\n\nimport { SCALE_FALLBACK_COLOR } from '../../../constants.js';\nimport { getTokenComputedStyle } from '../../../utils/getTokenComputedStyle.js';\nimport { isValidCSSColor } from '../../../utils/getValidColor.js';\n\n/**\n * Transforms the color to be used in a canvas. If it's a token,\n * gets the HSL color, otherwise returns the color or the default one\n * if undefined.\n *\n * @internal\n * @param color - The color to be transformed.\n * @param fallbackColor - The color to be applied if transformation fails. Default: Colors.Background.Container.Neutral.Accent\n */\nexport const getCanvasColor: (\n  color: string | undefined,\n  fallbackColor?: string,\n) => string = memoize(\n  (color: string | undefined, fallbackColor = SCALE_FALLBACK_COLOR): string => {\n    let transformedColor = color || fallbackColor;\n\n    if (transformedColor.indexOf('var') >= 0) {\n      transformedColor = getTokenComputedStyle(transformedColor);\n\n      return transformedColor\n        ? transformedColor\n        : getTokenComputedStyle(fallbackColor);\n    }\n\n    if (!isValidCSSColor(transformedColor)) {\n      return getTokenComputedStyle(fallbackColor);\n    }\n\n    return transformedColor;\n  },\n);\n"],
-  "mappings": "AAAA,SAAS,eAAe;AAExB,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAWzB,MAAM,iBAGC;AAAA,EACZ,CAAC,OAA2B,gBAAgB,yBAAiC;AAC3E,QAAI,mBAAmB,SAAS;AAEhC,QAAI,iBAAiB,QAAQ,KAAK,KAAK,GAAG;AACxC,yBAAmB,sBAAsB,gBAAgB;AAEzD,aAAO,mBACH,mBACA,sBAAsB,aAAa;AAAA,IACzC;AAEA,QAAI,CAAC,gBAAgB,gBAAgB,GAAG;AACtC,aAAO,sBAAsB,aAAa;AAAA,IAC5C;AAEA,WAAO;AAAA,EACT;AACF;",
+  "sourcesContent": ["import { memoize } from 'lodash-es';\n\nimport { SCALE_FALLBACK_COLOR } from '../../../constants.js';\nimport { getTokenComputedStyle } from '../../../utils/getTokenComputedStyle.js';\nimport { isValidCSSColor } from '../../../utils/getValidColor.js';\n\n/**\n * Transforms the color to be used in a canvas. If it's a token,\n * gets the HSL color, otherwise returns the color or the default one\n * if undefined.\n *\n * @internal\n * @param color - The color to be transformed.\n * @param fallbackColor - The color to be applied if transformation fails. Default: Colors.Background.Container.Neutral.Accent\n */\nexport const getCanvasColor: (\n  color: string | undefined,\n  fallbackColor?: string,\n) => string = memoize(\n  (color: string | undefined, fallbackColor = SCALE_FALLBACK_COLOR): string => {\n    let transformedColor = color || fallbackColor;\n\n    if (transformedColor.indexOf('var') >= 0) {\n      transformedColor = getTokenComputedStyle(transformedColor);\n\n      return transformedColor\n        ? transformedColor\n        : getTokenComputedStyle(fallbackColor);\n    }\n\n    if (!isValidCSSColor(transformedColor)) {\n      return getTokenComputedStyle(fallbackColor);\n    }\n\n    return transformedColor;\n  },\n  // Include the active theme in the cache key so a light\u2192dark (or dark\u2192light)\n  // switch doesn't return a stale resolved color from the previous theme.\n  (color, fallbackColor = SCALE_FALLBACK_COLOR) =>\n    `${\n      document.documentElement.getAttribute('data-theme') ?? ''\n    }::${color}::${fallbackColor}`,\n);\n"],
+  "mappings": "AAAA,SAAS,eAAe;AAExB,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAWzB,MAAM,iBAGC;AAAA,EACZ,CAAC,OAA2B,gBAAgB,yBAAiC;AAC3E,QAAI,mBAAmB,SAAS;AAEhC,QAAI,iBAAiB,QAAQ,KAAK,KAAK,GAAG;AACxC,yBAAmB,sBAAsB,gBAAgB;AAEzD,aAAO,mBACH,mBACA,sBAAsB,aAAa;AAAA,IACzC;AAEA,QAAI,CAAC,gBAAgB,gBAAgB,GAAG;AACtC,aAAO,sBAAsB,aAAa;AAAA,IAC5C;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA,EAGA,CAAC,OAAO,gBAAgB,yBACtB,GACE,SAAS,gBAAgB,aAAa,YAAY,KAAK,EACzD,KAAK,KAAK,KAAK,aAAa;AAChC;",
   "names": []
 }

package/esm/charts/core/components/chart-grid/ChartGrid.css

@@ -1,13 +1,13 @@
-._13lzg4k0-3-10-4 {
+._13lzg4k0-3-11-0 {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
 }
-._13lzg4k1-3-10-4 {
+._13lzg4k1-3-11-0 {
   box-sizing: content-box;
 }
-._13lzg4k2-3-10-4 {
+._13lzg4k2-3-11-0 {
   position: relative;
 }

package/esm/charts/core/components/chart-grid/ChartGrid.sty.js

@@ -1,7 +1,7 @@
 import "./ChartGrid.css";
-var area = "_13lzg4k1-3-10-4";
-var plot = "_13lzg4k2-3-10-4";
-var plotLayout = "_13lzg4k0-3-10-4";
+var area = "_13lzg4k1-3-11-0";
+var plot = "_13lzg4k2-3-11-0";
+var plotLayout = "_13lzg4k0-3-11-0";
 export {
   area,
   plot,

package/esm/charts/core/components/chart-grid/ChartGrid.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/chart-grid/ChartGrid.css.ts"],
-  "sourcesContent": ["import './ChartGrid.css';\nexport var area = '_13lzg4k1-3-10-4';\nexport var plot = '_13lzg4k2-3-10-4';\nexport var plotLayout = '_13lzg4k0-3-10-4';"],
+  "sourcesContent": ["import './ChartGrid.css';\nexport var area = '_13lzg4k1-3-11-0';\nexport var plot = '_13lzg4k2-3-11-0';\nexport var plotLayout = '_13lzg4k0-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;AACX,IAAI,OAAO;AACX,IAAI,aAAa;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/ChartLayout.js

@@ -37,6 +37,9 @@ const ChartLayoutRoot = forwardRef((props, forwardedRef) => {
     "data-testid": dataTestId = "chart-layout",
     "data-dt-component": dataDtComponent,
     "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-details": ariaDetails,
     role
   } = props;
   const [behavioralTrackingProps] = useBehavioralTrackingProps(props);
@@ -124,6 +127,9 @@ const ChartLayoutRoot = forwardRef((props, forwardedRef) => {
               gridTemplateAreas: templateAreas,
               gap: 0,
               "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-describedby": ariaDescribedBy,
+              "aria-details": ariaDetails,
               role,
               style: {
                 position: "relative",

package/esm/charts/core/components/chart-layout/ChartLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/chart-layout/ChartLayout.tsx"],
-  "sourcesContent": ["import {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { LayoutStateHandler } from './components/LayoutStateHandler.js';\nimport { ResizableChartLayout } from './components/ResizableChartLayout.js';\nimport { ChartLayoutOrientationContext } from './context/ChartLayoutOrientation.context.js';\nimport { ChartLayoutRatioContext } from './context/ChartLayoutRatio.context.js';\nimport { ChartLayoutSizeContext } from './context/ChartLayoutSize.context.js';\nimport { ChartLayoutTemplateContext } from './context/ChartLayoutTemplate.context.js';\nimport { useAutomaticRatio } from './hooks/useAutomaticRatio.js';\nimport { Graph } from './slots/Graph.js';\nimport { Legend } from './slots/Legend.js';\nimport { Provider } from './slots/Provider.js';\nimport type { ChartLayoutProps } from './types/chart-layout.js';\nimport { ChartLayoutRef } from './types/chart-layout.js';\nimport { getChartLayoutSettings } from './utils/get-chart-layout-settings.js';\nimport { getLayoutGridSettings } from './utils/get-layout-grid-settings.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { DataDtrumContext } from '../../context/DataDtrumContext.js';\nimport { useObserveContainerSize } from '../../hooks/useObserveContainerSize.js';\nimport type { LegendRatio } from '../../types/legend.js';\n\nexport const ChartLayoutRoot = forwardRef<\n  ChartLayoutRef | null,\n  PropsWithChildren<ChartLayoutProps>\n>((props, forwardedRef) => {\n  const {\n    chartHeight,\n    chartWidth,\n    children,\n    isEmpty = false,\n    emptyState,\n    errorState,\n    showLoader = false,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'chart-layout',\n    'data-dt-component': dataDtComponent,\n    'aria-label': ariaLabel,\n    role,\n  } = props;\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n  const [containerSizes, gridContainer] = useObserveContainerSize();\n\n  const containerAvailableArea = {\n    width: containerSizes.width,\n    height: containerSizes.height,\n    wrapperHeight: containerSizes.wrapperHeight,\n  };\n\n  const chartLayoutRef = useRef<HTMLDivElement>(null);\n  const mergedRefs = useMergeRefs<HTMLDivElement>([\n    gridContainer,\n    chartLayoutRef,\n  ]);\n\n  const {\n    graphArea,\n    legendArea,\n    legendSettings,\n    provider: Provider,\n  } = getChartLayoutSettings(containerSizes, children, isEmpty);\n\n  const {\n    hidden,\n    orientation,\n    ratio,\n    initialRatio,\n    overrideRatio,\n    onResize,\n    showResizer,\n    ratioBoundaries,\n  } = legendSettings;\n\n  const internalRatioRef = useRef<LegendRatio | undefined>(undefined);\n\n  if (internalRatioRef.current === undefined && legendArea !== undefined) {\n    internalRatioRef.current = initialRatio ?? ratio;\n  }\n\n  const legendRatio = internalRatioRef.current ?? ratio;\n\n  const {\n    legendCandidateSize,\n    readyForAutoRatio,\n    legendRef,\n    refreshAutoRatio,\n  } = useAutomaticRatio(orientation, legendRatio, containerAvailableArea);\n\n  const { layoutWidth, layoutHeight, templateAreas, gridTemplate } =\n    getLayoutGridSettings(\n      chartWidth,\n      chartHeight,\n      containerSizes,\n      !hidden,\n      showResizer,\n    );\n\n  useImperativeHandle(\n    forwardedRef,\n    (): ChartLayoutRef => ({\n      element: chartLayoutRef?.current,\n      refreshLegendSize: refreshAutoRatio,\n    }),\n  );\n\n  return (\n    <ChartLayoutTemplateContext.Provider value={{ graphArea, legendArea }}>\n      <ChartLayoutOrientationContext.Provider value={{ orientation }}>\n        <ChartLayoutRatioContext.Provider\n          value={{\n            legendRef,\n            ratio: legendRatio,\n            ratioBoundaries,\n            overrideRatio,\n            readyForAutoRatio,\n            legendCandidateSize,\n          }}\n        >\n          <ChartLayoutSizeContext.Provider value={containerAvailableArea}>\n            <DataDtrumContext.Provider\n              value={{ dataDtrumAllow, dataDtrumMask }}\n            >\n              <Grid\n                {...behavioralTrackingProps}\n                data-testid={dataTestId}\n                data-dtrum-mask={dataDtrumMask}\n                data-dtrum-allow={dataDtrumAllow}\n                data-dt-component={dataDtComponent}\n                className={className}\n                width={layoutWidth}\n                height={layoutHeight}\n                ref={mergedRefs}\n                gridTemplateColumns={gridTemplate}\n                gridTemplateRows={gridTemplate}\n                gridTemplateAreas={templateAreas}\n                gap={0}\n                aria-label={ariaLabel}\n                role={role}\n                style={{\n                  position: 'relative',\n                  overflow: 'hidden',\n                  ...style,\n                }}\n              >\n                <LayoutStateHandler\n                  empty={isEmpty}\n                  height={layoutHeight}\n                  emptyState={emptyState}\n                  errorState={errorState}\n                  showLoader={showLoader}\n                >\n                  <Provider>\n                    <ResizableChartLayout\n                      onResize={onResize}\n                      showResizer={showResizer}\n                      showLegend={!hidden}\n                    />\n                  </Provider>\n                </LayoutStateHandler>\n              </Grid>\n            </DataDtrumContext.Provider>\n          </ChartLayoutSizeContext.Provider>\n        </ChartLayoutRatioContext.Provider>\n      </ChartLayoutOrientationContext.Provider>\n    </ChartLayoutTemplateContext.Provider>\n  );\n});\n\n(\n  ChartLayoutRoot as typeof ChartLayoutRoot & { displayName: string }\n).displayName = 'ChartLayoutRoot';\n\n/**\n * Slot component for Chart Layout\n * @internal\n */\nexport const ChartLayout = Object.assign(ChartLayoutRoot, {\n  Graph,\n  Legend,\n  Provider,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { LayoutStateHandler } from './components/LayoutStateHandler.js';\nimport { ResizableChartLayout } from './components/ResizableChartLayout.js';\nimport { ChartLayoutOrientationContext } from './context/ChartLayoutOrientation.context.js';\nimport { ChartLayoutRatioContext } from './context/ChartLayoutRatio.context.js';\nimport { ChartLayoutSizeContext } from './context/ChartLayoutSize.context.js';\nimport { ChartLayoutTemplateContext } from './context/ChartLayoutTemplate.context.js';\nimport { useAutomaticRatio } from './hooks/useAutomaticRatio.js';\nimport { Graph } from './slots/Graph.js';\nimport { Legend } from './slots/Legend.js';\nimport { Provider } from './slots/Provider.js';\nimport type { ChartLayoutProps } from './types/chart-layout.js';\nimport { ChartLayoutRef } from './types/chart-layout.js';\nimport { getChartLayoutSettings } from './utils/get-chart-layout-settings.js';\nimport { getLayoutGridSettings } from './utils/get-layout-grid-settings.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../../../core/hooks/useMergeRefs.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { DataDtrumContext } from '../../context/DataDtrumContext.js';\nimport { useObserveContainerSize } from '../../hooks/useObserveContainerSize.js';\nimport type { LegendRatio } from '../../types/legend.js';\n\nexport const ChartLayoutRoot = forwardRef<\n  ChartLayoutRef | null,\n  PropsWithChildren<ChartLayoutProps>\n>((props, forwardedRef) => {\n  const {\n    chartHeight,\n    chartWidth,\n    children,\n    isEmpty = false,\n    emptyState,\n    errorState,\n    showLoader = false,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'chart-layout',\n    'data-dt-component': dataDtComponent,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n    role,\n  } = props;\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n  const [containerSizes, gridContainer] = useObserveContainerSize();\n\n  const containerAvailableArea = {\n    width: containerSizes.width,\n    height: containerSizes.height,\n    wrapperHeight: containerSizes.wrapperHeight,\n  };\n\n  const chartLayoutRef = useRef<HTMLDivElement>(null);\n  const mergedRefs = useMergeRefs<HTMLDivElement>([\n    gridContainer,\n    chartLayoutRef,\n  ]);\n\n  const {\n    graphArea,\n    legendArea,\n    legendSettings,\n    provider: Provider,\n  } = getChartLayoutSettings(containerSizes, children, isEmpty);\n\n  const {\n    hidden,\n    orientation,\n    ratio,\n    initialRatio,\n    overrideRatio,\n    onResize,\n    showResizer,\n    ratioBoundaries,\n  } = legendSettings;\n\n  const internalRatioRef = useRef<LegendRatio | undefined>(undefined);\n\n  if (internalRatioRef.current === undefined && legendArea !== undefined) {\n    internalRatioRef.current = initialRatio ?? ratio;\n  }\n\n  const legendRatio = internalRatioRef.current ?? ratio;\n\n  const {\n    legendCandidateSize,\n    readyForAutoRatio,\n    legendRef,\n    refreshAutoRatio,\n  } = useAutomaticRatio(orientation, legendRatio, containerAvailableArea);\n\n  const { layoutWidth, layoutHeight, templateAreas, gridTemplate } =\n    getLayoutGridSettings(\n      chartWidth,\n      chartHeight,\n      containerSizes,\n      !hidden,\n      showResizer,\n    );\n\n  useImperativeHandle(\n    forwardedRef,\n    (): ChartLayoutRef => ({\n      element: chartLayoutRef?.current,\n      refreshLegendSize: refreshAutoRatio,\n    }),\n  );\n\n  return (\n    <ChartLayoutTemplateContext.Provider value={{ graphArea, legendArea }}>\n      <ChartLayoutOrientationContext.Provider value={{ orientation }}>\n        <ChartLayoutRatioContext.Provider\n          value={{\n            legendRef,\n            ratio: legendRatio,\n            ratioBoundaries,\n            overrideRatio,\n            readyForAutoRatio,\n            legendCandidateSize,\n          }}\n        >\n          <ChartLayoutSizeContext.Provider value={containerAvailableArea}>\n            <DataDtrumContext.Provider\n              value={{ dataDtrumAllow, dataDtrumMask }}\n            >\n              <Grid\n                {...behavioralTrackingProps}\n                data-testid={dataTestId}\n                data-dtrum-mask={dataDtrumMask}\n                data-dtrum-allow={dataDtrumAllow}\n                data-dt-component={dataDtComponent}\n                className={className}\n                width={layoutWidth}\n                height={layoutHeight}\n                ref={mergedRefs}\n                gridTemplateColumns={gridTemplate}\n                gridTemplateRows={gridTemplate}\n                gridTemplateAreas={templateAreas}\n                gap={0}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-details={ariaDetails}\n                role={role}\n                style={{\n                  position: 'relative',\n                  overflow: 'hidden',\n                  ...style,\n                }}\n              >\n                <LayoutStateHandler\n                  empty={isEmpty}\n                  height={layoutHeight}\n                  emptyState={emptyState}\n                  errorState={errorState}\n                  showLoader={showLoader}\n                >\n                  <Provider>\n                    <ResizableChartLayout\n                      onResize={onResize}\n                      showResizer={showResizer}\n                      showLegend={!hidden}\n                    />\n                  </Provider>\n                </LayoutStateHandler>\n              </Grid>\n            </DataDtrumContext.Provider>\n          </ChartLayoutSizeContext.Provider>\n        </ChartLayoutRatioContext.Provider>\n      </ChartLayoutOrientationContext.Provider>\n    </ChartLayoutTemplateContext.Provider>\n  );\n});\n\n(\n  ChartLayoutRoot as typeof ChartLayoutRoot & { displayName: string }\n).displayName = 'ChartLayoutRoot';\n\n/**\n * Slot component for Chart Layout\n * @internal\n */\nexport const ChartLayout = Object.assign(ChartLayoutRoot, {\n  Graph,\n  Legend,\n  Provider,\n});\n"],
+  "mappings": "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",
   "names": ["Provider"]
 }

package/esm/charts/core/components/chart-layout/components/styles.css

@@ -1,46 +1,46 @@
-._l1klj80-3-10-4 {
+._l1klj80-3-11-0 {
   min-width: 0;
   grid-area: graphArea;
 }
-._l1klj81-3-10-4 {
+._l1klj81-3-11-0 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj83-3-10-4 {
+._l1klj83-3-11-0 {
   height: inherit;
   grid-area: horizontalResize;
 }
-._l1klj84-3-10-4 {
+._l1klj84-3-11-0 {
   width: 100%;
   grid-area: verticalResize;
 }
-._l1klj85-3-10-4 {
+._l1klj85-3-11-0 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj86-3-10-4 {
+._l1klj86-3-11-0 {
   height: 100%;
 }
-._l1klj87-3-10-4 {
+._l1klj87-3-11-0 {
   grid-area: verticalLegend;
 }
-._l1klj88-3-10-4 {
+._l1klj88-3-11-0 {
   grid-area: horizontalLegend;
 }
-._l1klj89-3-10-4 {
+._l1klj89-3-11-0 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj8a-3-10-4 {
+._l1klj8a-3-11-0 {
   background: var(--dt-colors-border-neutral-default, #dadbe4);
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border-radius: var(--dt-spacings-size-8, 8px);
   touch-action: none;
 }
-._l1klj8a-3-10-4:hover {
+._l1klj8a-3-11-0:hover {
   background: var(--dt-colors-border-primary-accent, #464cce);
 }
-._l1klj8b-3-10-4 {
+._l1klj8b-3-11-0 {
   transition: height var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   height: 36px;
   width: 2px;
@@ -49,11 +49,11 @@
   grid-area: horizontalResize;
   align-self: center;
 }
-._l1klj8b-3-10-4:hover {
+._l1klj8b-3-11-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._l1klj8c-3-10-4 {
+._l1klj8c-3-11-0 {
   transition: width var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   height: 2px;
   width: 36px;
@@ -62,7 +62,7 @@
   grid-area: verticalResize;
   align-self: flex-end;
 }
-._l1klj8c-3-10-4:hover {
+._l1klj8c-3-11-0:hover {
   width: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }

package/esm/charts/core/components/chart-layout/components/styles.sty.js

@@ -1,9 +1,9 @@
 import "./styles.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var graphContainer = _7a468({ defaultClassName: "_l1klj80-3-10-4", variantClassNames: { loading: { true: "_l1klj81-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var legendContainer = _7a468({ defaultClassName: "_l1klj86-3-10-4", variantClassNames: { orientation: { horizontal: "_l1klj87-3-10-4", vertical: "_l1klj88-3-10-4" }, loading: { true: "_l1klj89-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var legendResizeLine = _7a468({ defaultClassName: "_l1klj8a-3-10-4", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-10-4", vertical: "_l1klj8c-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeContainer = _7a468({ defaultClassName: "_l1klj82-3-10-4", variantClassNames: { orientation: { horizontal: "_l1klj83-3-10-4", vertical: "_l1klj84-3-10-4" }, loading: { true: "_l1klj85-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var graphContainer = _7a468({ defaultClassName: "_l1klj80-3-11-0", variantClassNames: { loading: { true: "_l1klj81-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendContainer = _7a468({ defaultClassName: "_l1klj86-3-11-0", variantClassNames: { orientation: { horizontal: "_l1klj87-3-11-0", vertical: "_l1klj88-3-11-0" }, loading: { true: "_l1klj89-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendResizeLine = _7a468({ defaultClassName: "_l1klj8a-3-11-0", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-11-0", vertical: "_l1klj8c-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeContainer = _7a468({ defaultClassName: "_l1klj82-3-11-0", variantClassNames: { orientation: { horizontal: "_l1klj83-3-11-0", vertical: "_l1klj84-3-11-0" }, loading: { true: "_l1klj85-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   graphContainer,
   legendContainer,

package/esm/charts/core/components/chart-layout/components/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/components/styles.css.ts"],
-  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var graphContainer = _7a468({defaultClassName:'_l1klj80-3-10-4',variantClassNames:{loading:{true:'_l1klj81-3-10-4'}},defaultVariants:{},compoundVariants:[]});\nexport var legendContainer = _7a468({defaultClassName:'_l1klj86-3-10-4',variantClassNames:{orientation:{horizontal:'_l1klj87-3-10-4',vertical:'_l1klj88-3-10-4'},loading:{true:'_l1klj89-3-10-4'}},defaultVariants:{},compoundVariants:[]});\nexport var legendResizeLine = _7a468({defaultClassName:'_l1klj8a-3-10-4',variantClassNames:{orientation:{horizontal:'_l1klj8b-3-10-4',vertical:'_l1klj8c-3-10-4'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeContainer = _7a468({defaultClassName:'_l1klj82-3-10-4',variantClassNames:{orientation:{horizontal:'_l1klj83-3-10-4',vertical:'_l1klj84-3-10-4'},loading:{true:'_l1klj85-3-10-4'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var graphContainer = _7a468({defaultClassName:'_l1klj80-3-11-0',variantClassNames:{loading:{true:'_l1klj81-3-11-0'}},defaultVariants:{},compoundVariants:[]});\nexport var legendContainer = _7a468({defaultClassName:'_l1klj86-3-11-0',variantClassNames:{orientation:{horizontal:'_l1klj87-3-11-0',vertical:'_l1klj88-3-11-0'},loading:{true:'_l1klj89-3-11-0'}},defaultVariants:{},compoundVariants:[]});\nexport var legendResizeLine = _7a468({defaultClassName:'_l1klj8a-3-11-0',variantClassNames:{orientation:{horizontal:'_l1klj8b-3-11-0',vertical:'_l1klj8c-3-11-0'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeContainer = _7a468({defaultClassName:'_l1klj82-3-11-0',variantClassNames:{orientation:{horizontal:'_l1klj83-3-11-0',vertical:'_l1klj84-3-11-0'},loading:{true:'_l1klj85-3-11-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC5J,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,YAAW,mBAAkB,UAAS,kBAAiB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACnO,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,YAAW,mBAAkB,UAAS,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACnM,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,aAAY,EAAC,YAAW,mBAAkB,UAAS,kBAAiB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/chart-layout/hooks/useAutomaticRatio.js

@@ -16,13 +16,18 @@ const useAutomaticRatio = (orientation, ratio, containerAvailableArea) => {
   const [idealLegendSize, setIdealLegendSize] = useState(
     void 0
   );
-  const resetAutoRatio = () => {
+  const readyForAutoRatioRef = useRef(readyForAutoRatio);
+  readyForAutoRatioRef.current = readyForAutoRatio;
+  const resetAutoRatio = useCallback(() => {
+    if (!readyForAutoRatioRef.current) {
+      return;
+    }
     setReadyForAutoRatio(false);
     setIdealLegendSize(void 0);
-  };
+  }, []);
   useEffect(() => {
     resetAutoRatio();
-  }, [orientation]);
+  }, [orientation, resetAutoRatio]);
   const legendNodeRef = useRef(null);
   const legendRef = useCallback((node) => {
     legendNodeRef.current = node;

package/esm/charts/core/components/chart-layout/hooks/useAutomaticRatio.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/hooks/useAutomaticRatio.tsx"],
-  "sourcesContent": ["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { ORIENTATION } from '../../../constants.js';\nimport { Dimensions } from '../../../types/dimensions.js';\nimport { ChartLegendOrientation, LegendRatio } from '../../../types/legend.js';\nimport {\n  CATEGORICAL_LEGEND_CLASS,\n  MIN_ITEM_WIDTH,\n} from '../../legend/categorical/constants.js';\nimport { RANGE_LEGEND_CLASS } from '../../legend/range/constants.js';\nimport {\n  getLabelsHeightForRangeBottom,\n  getMaxItemSizeForCategoricalHorizontal,\n  getMaxLabelForRangeHorizontal,\n  getSizeForCategoricaVertical,\n} from '../utils/automatic-ratio.js';\n\ninterface AutomaticRatioParams {\n  legendCandidateSize?: number;\n  legendRef: (node: HTMLDivElement | null) => void;\n  readyForAutoRatio: boolean;\n  refreshAutoRatio: () => void;\n}\n\n/**\n * Hook responsible of determining the best ratio to apply to the chart in order\n * to fully display the content of the legend.\n * @param orientation -\n * @param ratio -\n * @param containerAvailableArea -\n */\nexport const useAutomaticRatio = (\n  orientation: ChartLegendOrientation,\n  ratio: LegendRatio,\n  containerAvailableArea: Dimensions,\n): AutomaticRatioParams => {\n  const [readyForAutoRatio, setReadyForAutoRatio] = useState(false);\n  const [idealLegendSize, setIdealLegendSize] = useState<number | undefined>(\n    undefined,\n  );\n  const resetAutoRatio = () => {\n    setReadyForAutoRatio(false);\n    setIdealLegendSize(undefined);\n  };\n\n  useEffect(() => {\n    // eslint-disable-next-line react-hooks/set-state-in-effect\n    resetAutoRatio();\n  }, [orientation]);\n\n  const legendNodeRef = useRef<HTMLDivElement | null>(null);\n\n  const legendRef = useCallback((node: HTMLDivElement | null) => {\n    legendNodeRef.current = node;\n  }, []);\n\n  const { height: containerHeight } = containerAvailableArea;\n  const hasAutoRatioEnabled = !ratio || ratio === 'auto';\n\n  useEffect(() => {\n    if (!hasAutoRatioEnabled) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setReadyForAutoRatio(true);\n      return;\n    }\n\n    const node = legendNodeRef.current;\n\n    if (!node || containerHeight === 0 || readyForAutoRatio) {\n      return;\n    }\n\n    let longestSeries;\n\n    const isCategoricalLegend = Array.from(node.classList).includes(\n      CATEGORICAL_LEGEND_CLASS,\n    );\n    const isRangeLegend = Array.from(node.classList).includes(\n      RANGE_LEGEND_CLASS,\n    );\n\n    if (isCategoricalLegend) {\n      longestSeries =\n        orientation === ORIENTATION.Horizontal\n          ? getMaxItemSizeForCategoricalHorizontal(node, containerHeight)\n          : getSizeForCategoricaVertical();\n    }\n    if (isRangeLegend) {\n      const hasLoadedLabels = node.getElementsByTagName('g').length !== 0;\n      if (!hasLoadedLabels) {\n        return;\n      }\n\n      longestSeries =\n        orientation === ORIENTATION.Horizontal\n          ? getMaxLabelForRangeHorizontal(node)\n          : getLabelsHeightForRangeBottom(node);\n    }\n\n    setIdealLegendSize(\n      longestSeries !== undefined && longestSeries > 0\n        ? longestSeries\n        : MIN_ITEM_WIDTH,\n    );\n    setReadyForAutoRatio(true);\n  }, [containerHeight, readyForAutoRatio, hasAutoRatioEnabled, orientation]);\n\n  return {\n    legendCandidateSize: idealLegendSize,\n    legendRef,\n    readyForAutoRatio,\n    refreshAutoRatio: resetAutoRatio,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAEzD,SAAS,mBAAmB;AAG5B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAgBA,MAAM,oBAAoB,CAC/B,aACA,OACA,2BACyB;AACzB,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,QAAM,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C;AAAA,EACF;AACA,QAAM,iBAAiB,MAAM;AAC3B,yBAAqB,KAAK;AAC1B,uBAAmB,MAAS;AAAA,EAC9B;AAEA,YAAU,MAAM;AAEd,mBAAe;AAAA,EACjB,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,gBAAgB,OAA8B,IAAI;AAExD,QAAM,YAAY,YAAY,CAAC,SAAgC;AAC7D,kBAAc,UAAU;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,QAAQ,gBAAgB,IAAI;AACpC,QAAM,sBAAsB,CAAC,SAAS,UAAU;AAEhD,YAAU,MAAM;AACd,QAAI,CAAC,qBAAqB;AAExB,2BAAqB,IAAI;AACzB;AAAA,IACF;AAEA,UAAM,OAAO,cAAc;AAE3B,QAAI,CAAC,QAAQ,oBAAoB,KAAK,mBAAmB;AACvD;AAAA,IACF;AAEA,QAAI;AAEJ,UAAM,sBAAsB,MAAM,KAAK,KAAK,SAAS,EAAE;AAAA,MACrD;AAAA,IACF;AACA,UAAM,gBAAgB,MAAM,KAAK,KAAK,SAAS,EAAE;AAAA,MAC/C;AAAA,IACF;AAEA,QAAI,qBAAqB;AACvB,sBACE,gBAAgB,YAAY,aACxB,uCAAuC,MAAM,eAAe,IAC5D,6BAA6B;AAAA,IACrC;AACA,QAAI,eAAe;AACjB,YAAM,kBAAkB,KAAK,qBAAqB,GAAG,EAAE,WAAW;AAClE,UAAI,CAAC,iBAAiB;AACpB;AAAA,MACF;AAEA,sBACE,gBAAgB,YAAY,aACxB,8BAA8B,IAAI,IAClC,8BAA8B,IAAI;AAAA,IAC1C;AAEA;AAAA,MACE,kBAAkB,UAAa,gBAAgB,IAC3C,gBACA;AAAA,IACN;AACA,yBAAqB,IAAI;AAAA,EAC3B,GAAG,CAAC,iBAAiB,mBAAmB,qBAAqB,WAAW,CAAC;AAEzE,SAAO;AAAA,IACL,qBAAqB;AAAA,IACrB;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,EACpB;AACF;",
+  "sourcesContent": ["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { ORIENTATION } from '../../../constants.js';\nimport { Dimensions } from '../../../types/dimensions.js';\nimport { ChartLegendOrientation, LegendRatio } from '../../../types/legend.js';\nimport {\n  CATEGORICAL_LEGEND_CLASS,\n  MIN_ITEM_WIDTH,\n} from '../../legend/categorical/constants.js';\nimport { RANGE_LEGEND_CLASS } from '../../legend/range/constants.js';\nimport {\n  getLabelsHeightForRangeBottom,\n  getMaxItemSizeForCategoricalHorizontal,\n  getMaxLabelForRangeHorizontal,\n  getSizeForCategoricaVertical,\n} from '../utils/automatic-ratio.js';\n\ninterface AutomaticRatioParams {\n  legendCandidateSize?: number;\n  legendRef: (node: HTMLDivElement | null) => void;\n  readyForAutoRatio: boolean;\n  refreshAutoRatio: () => void;\n}\n\n/**\n * Hook responsible of determining the best ratio to apply to the chart in order\n * to fully display the content of the legend.\n * @param orientation -\n * @param ratio -\n * @param containerAvailableArea -\n */\nexport const useAutomaticRatio = (\n  orientation: ChartLegendOrientation,\n  ratio: LegendRatio,\n  containerAvailableArea: Dimensions,\n): AutomaticRatioParams => {\n  const [readyForAutoRatio, setReadyForAutoRatio] = useState(false);\n  const [idealLegendSize, setIdealLegendSize] = useState<number | undefined>(\n    undefined,\n  );\n  const readyForAutoRatioRef = useRef(readyForAutoRatio);\n  readyForAutoRatioRef.current = readyForAutoRatio;\n\n  const resetAutoRatio = useCallback(() => {\n    if (!readyForAutoRatioRef.current) {\n      return;\n    }\n    setReadyForAutoRatio(false);\n    setIdealLegendSize(undefined);\n  }, []);\n\n  useEffect(() => {\n    resetAutoRatio();\n  }, [orientation, resetAutoRatio]);\n\n  const legendNodeRef = useRef<HTMLDivElement | null>(null);\n\n  const legendRef = useCallback((node: HTMLDivElement | null) => {\n    legendNodeRef.current = node;\n  }, []);\n\n  const { height: containerHeight } = containerAvailableArea;\n  const hasAutoRatioEnabled = !ratio || ratio === 'auto';\n\n  useEffect(() => {\n    if (!hasAutoRatioEnabled) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setReadyForAutoRatio(true);\n      return;\n    }\n\n    const node = legendNodeRef.current;\n\n    if (!node || containerHeight === 0 || readyForAutoRatio) {\n      return;\n    }\n\n    let longestSeries;\n\n    const isCategoricalLegend = Array.from(node.classList).includes(\n      CATEGORICAL_LEGEND_CLASS,\n    );\n    const isRangeLegend = Array.from(node.classList).includes(\n      RANGE_LEGEND_CLASS,\n    );\n\n    if (isCategoricalLegend) {\n      longestSeries =\n        orientation === ORIENTATION.Horizontal\n          ? getMaxItemSizeForCategoricalHorizontal(node, containerHeight)\n          : getSizeForCategoricaVertical();\n    }\n    if (isRangeLegend) {\n      const hasLoadedLabels = node.getElementsByTagName('g').length !== 0;\n      if (!hasLoadedLabels) {\n        return;\n      }\n\n      longestSeries =\n        orientation === ORIENTATION.Horizontal\n          ? getMaxLabelForRangeHorizontal(node)\n          : getLabelsHeightForRangeBottom(node);\n    }\n\n    setIdealLegendSize(\n      longestSeries !== undefined && longestSeries > 0\n        ? longestSeries\n        : MIN_ITEM_WIDTH,\n    );\n    setReadyForAutoRatio(true);\n  }, [containerHeight, readyForAutoRatio, hasAutoRatioEnabled, orientation]);\n\n  return {\n    legendCandidateSize: idealLegendSize,\n    legendRef,\n    readyForAutoRatio,\n    refreshAutoRatio: resetAutoRatio,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAEzD,SAAS,mBAAmB;AAG5B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAgBA,MAAM,oBAAoB,CAC/B,aACA,OACA,2BACyB;AACzB,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAChE,QAAM,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAC5C;AAAA,EACF;AACA,QAAM,uBAAuB,OAAO,iBAAiB;AACrD,uBAAqB,UAAU;AAE/B,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,CAAC,qBAAqB,SAAS;AACjC;AAAA,IACF;AACA,yBAAqB,KAAK;AAC1B,uBAAmB,MAAS;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,mBAAe;AAAA,EACjB,GAAG,CAAC,aAAa,cAAc,CAAC;AAEhC,QAAM,gBAAgB,OAA8B,IAAI;AAExD,QAAM,YAAY,YAAY,CAAC,SAAgC;AAC7D,kBAAc,UAAU;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,QAAQ,gBAAgB,IAAI;AACpC,QAAM,sBAAsB,CAAC,SAAS,UAAU;AAEhD,YAAU,MAAM;AACd,QAAI,CAAC,qBAAqB;AAExB,2BAAqB,IAAI;AACzB;AAAA,IACF;AAEA,UAAM,OAAO,cAAc;AAE3B,QAAI,CAAC,QAAQ,oBAAoB,KAAK,mBAAmB;AACvD;AAAA,IACF;AAEA,QAAI;AAEJ,UAAM,sBAAsB,MAAM,KAAK,KAAK,SAAS,EAAE;AAAA,MACrD;AAAA,IACF;AACA,UAAM,gBAAgB,MAAM,KAAK,KAAK,SAAS,EAAE;AAAA,MAC/C;AAAA,IACF;AAEA,QAAI,qBAAqB;AACvB,sBACE,gBAAgB,YAAY,aACxB,uCAAuC,MAAM,eAAe,IAC5D,6BAA6B;AAAA,IACrC;AACA,QAAI,eAAe;AACjB,YAAM,kBAAkB,KAAK,qBAAqB,GAAG,EAAE,WAAW;AAClE,UAAI,CAAC,iBAAiB;AACpB;AAAA,MACF;AAEA,sBACE,gBAAgB,YAAY,aACxB,8BAA8B,IAAI,IAClC,8BAA8B,IAAI;AAAA,IAC1C;AAEA;AAAA,MACE,kBAAkB,UAAa,gBAAgB,IAC3C,gBACA;AAAA,IACN;AACA,yBAAqB,IAAI;AAAA,EAC3B,GAAG,CAAC,iBAAiB,mBAAmB,qBAAqB,WAAW,CAAC;AAEzE,SAAO;AAAA,IACL,qBAAqB;AAAA,IACrB;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,EACpB;AACF;",
   "names": []
 }