@dynatrace/strato-components 3.10.1 → 3.11.0

package/esm/charts/histogram/components/axes/HistogramValueBottomAxisArea/HistogramValueBottomAxisArea.css

@@ -1,3 +1,3 @@
-._9phcbi0-3-10-1 {
+._9phcbi0-3-11-0 {
   position: relative;
 }

package/esm/charts/histogram/components/axes/HistogramValueBottomAxisArea/HistogramValueBottomAxisArea.sty.js

@@ -1,5 +1,5 @@
 import "./HistogramValueBottomAxisArea.css";
-var axisContainerStyle = "_9phcbi0-3-10-1";
+var axisContainerStyle = "_9phcbi0-3-11-0";
 export {
   axisContainerStyle
 };

package/esm/charts/histogram/components/axes/HistogramValueBottomAxisArea/HistogramValueBottomAxisArea.sty.js.map

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

package/esm/charts/histogram/components/overlays/HistogramExplore/HistogramTooltip.css

@@ -1,4 +1,4 @@
-._fzvydv0-3-10-1 {
+._fzvydv0-3-11-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
 }

package/esm/charts/histogram/components/overlays/HistogramExplore/HistogramTooltip.sty.js

@@ -1,5 +1,5 @@
 import "./HistogramTooltip.css";
-var wrapper = "_fzvydv0-3-10-1";
+var wrapper = "_fzvydv0-3-11-0";
 export {
   wrapper
 };

package/esm/charts/histogram/components/overlays/HistogramExplore/HistogramTooltip.sty.js.map

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

package/esm/charts/histogram/components/overlays/HistogramOverlays.css

@@ -1,4 +1,4 @@
-._drl8ns0-3-10-1 {
+._drl8ns0-3-11-0 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);
@@ -6,7 +6,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._drl8ns1-3-10-1 {
+._drl8ns1-3-11-0 {
   pointer-events: none;
   overflow: visible;
   z-index: 1;

package/esm/charts/histogram/components/overlays/HistogramOverlays.sty.js

@@ -1,7 +1,7 @@
 import "../../../core/components/chart-grid/ChartGrid.css";
 import "./HistogramOverlays.css";
-var crosshairLayout = "_drl8ns1-3-10-1 _13lzg4k0-3-10-1";
-var datapointLayout = "_drl8ns0-3-10-1 _13lzg4k0-3-10-1";
+var crosshairLayout = "_drl8ns1-3-11-0 _13lzg4k0-3-11-0";
+var datapointLayout = "_drl8ns0-3-11-0 _13lzg4k0-3-11-0";
 export {
   crosshairLayout,
   datapointLayout

package/esm/charts/histogram/components/overlays/HistogramOverlays.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/histogram/components/overlays/HistogramOverlays.css.ts"],
-  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './HistogramOverlays.css';\nexport var crosshairLayout = '_drl8ns1-3-10-1 _13lzg4k0-3-10-1';\nexport var datapointLayout = '_drl8ns0-3-10-1 _13lzg4k0-3-10-1';"],
+  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './HistogramOverlays.css';\nexport var crosshairLayout = '_drl8ns1-3-11-0 _13lzg4k0-3-11-0';\nexport var datapointLayout = '_drl8ns0-3-11-0 _13lzg4k0-3-11-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/histogram/components/toolbar/PanButton.js

@@ -1,12 +1,15 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { useIntl } from "react-intl";
 import { PanHorizontalIcon } from "@dynatrace/strato-icons";
+import { KeyboardShortcut } from "../../../../content/keyboard-shortcut/KeyboardShortcut.js";
 import { KeyboardControls } from "../../../core/components/interactions-overlay/constants.js";
 import { INTERACTION_MODE } from "../../../core/components/interactions-overlay/types.js";
 import { reduceExploreCancelAll } from "../../../core/components/interactions-state-helpers/reducers/explore-reducers.js";
 import { reduceInteractionMode } from "../../../core/components/interactions-state-helpers/reducers/mode-reducers.js";
 import { ChartToolbarRenderer } from "../../../core/components/toolbar/ChartToolbarRenderer.js";
+import { TOOLBAR_MESSAGES } from "../../../core/components/toolbar/messages.js";
+import { styledOrText } from "../../../core/components/toolbar/styles.sty.js";
 import { useA11yToolbarTabIndex } from "../../../core/hooks/useA11yToolbarTabIndex.js";
 import {
   useInteractionModeState,
@@ -40,13 +43,31 @@ const PanButton = () => {
       ref: panButtonRef,
       prefixIcon: /* @__PURE__ */ jsx(PanHorizontalIcon, {}),
       tooltipText: intl.formatMessage(HISTOGRAM_MESSAGES.zoomModePan),
-      tooltipKeyShortcut: KeyboardControls.KEYBOARD_PAN_MODE_SHORTCUT_ALTERNATIVE,
       selected: isSelected,
       onKeyDown: handleKeyDown,
       onClick: handleClick,
       tabIndex,
       disabled: !zoomOutEnabled,
-      placement: "menu"
+      placement: "menu",
+      menuShortcut: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          KeyboardShortcut,
+          {
+            keys: "alt",
+            variant: "minimal",
+            disabled: !zoomOutEnabled
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: styledOrText, children: ` ${intl.formatMessage(TOOLBAR_MESSAGES.or)} ` }),
+        /* @__PURE__ */ jsx(
+          KeyboardShortcut,
+          {
+            keys: KeyboardControls.KEYBOARD_PAN_MODE_SHORTCUT_ALTERNATIVE,
+            variant: "minimal",
+            disabled: !zoomOutEnabled
+          }
+        )
+      ] })
     }
   ) : null;
 };

package/esm/charts/histogram/components/toolbar/PanButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/histogram/components/toolbar/PanButton.tsx"],
-  "sourcesContent": ["import { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { PanHorizontalIcon } from '@dynatrace/strato-icons';\n\nimport { KeyboardControls } from '../../../core/components/interactions-overlay/constants.js';\nimport { INTERACTION_MODE } from '../../../core/components/interactions-overlay/types.js';\nimport { reduceExploreCancelAll } from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { reduceInteractionMode } from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport {\n  useInteractionModeState,\n  useZoomState,\n} from '../../hooks/store/selectors.js';\nimport { useSetState } from '../../hooks/store/state-setters.js';\nimport { useHistogramInteractions } from '../../hooks/useHistogramInteractions.js';\nimport { HISTOGRAM_MESSAGES } from '../../messages/tooltip-text.js';\n\nexport const PanButton = () => {\n  const { zoomOutEnabled } = useZoomState();\n  const panButtonRef = useRef<HTMLButtonElement>(null);\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Pan);\n  const { pan } = useHistogramInteractions();\n  const setState = useSetState();\n  const intl = useIntl();\n\n  const isPanEnabled = pan?.enabled;\n  const interactionMode = useInteractionModeState();\n  const isSelected = interactionMode === INTERACTION_MODE.Pan;\n\n  const handleClick = () => {\n    setState(reduceInteractionMode(INTERACTION_MODE.Pan));\n    setState(reduceExploreCancelAll);\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      handleClick();\n    }\n  };\n\n  return isPanEnabled ? (\n    <ChartToolbarRenderer.Control\n      ref={panButtonRef}\n      prefixIcon={<PanHorizontalIcon />}\n      tooltipText={intl.formatMessage(HISTOGRAM_MESSAGES.zoomModePan)}\n      tooltipKeyShortcut={\n        KeyboardControls.KEYBOARD_PAN_MODE_SHORTCUT_ALTERNATIVE\n      }\n      selected={isSelected}\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n      tabIndex={tabIndex}\n      disabled={!zoomOutEnabled}\n      placement=\"menu\"\n    />\n  ) : null;\n};\n\nPanButton['displayName'] = 'PanButton';\n"],
-  "mappings": "AA6CkB;AA7ClB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAElC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,0BAA0B;AAE5B,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,eAAe,IAAI,aAAa;AACxC,QAAM,eAAe,OAA0B,IAAI;AACnD,QAAM,WAAW,uBAAuB,iBAAiB,GAAG;AAC5D,QAAM,EAAE,IAAI,IAAI,yBAAyB;AACzC,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AAErB,QAAM,eAAe,KAAK;AAC1B,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,aAAa,oBAAoB,iBAAiB;AAExD,QAAM,cAAc,MAAM;AACxB,aAAS,sBAAsB,iBAAiB,GAAG,CAAC;AACpD,aAAS,sBAAsB;AAAA,EACjC;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,QAAQ,SAAS;AACzB,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,SAAO,eACL;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,qBAAkB;AAAA,MAC/B,aAAa,KAAK,cAAc,mBAAmB,WAAW;AAAA,MAC9D,oBACE,iBAAiB;AAAA,MAEnB,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,UAAU,CAAC;AAAA,MACX,WAAU;AAAA;AAAA,EACZ,IACE;AACN;AAEA,UAAU,aAAa,IAAI;",
+  "sourcesContent": ["import { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { PanHorizontalIcon } from '@dynatrace/strato-icons';\n\nimport { KeyboardShortcut } from '../../../../content/keyboard-shortcut/KeyboardShortcut.js';\nimport { KeyboardControls } from '../../../core/components/interactions-overlay/constants.js';\nimport { INTERACTION_MODE } from '../../../core/components/interactions-overlay/types.js';\nimport { reduceExploreCancelAll } from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { reduceInteractionMode } from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { TOOLBAR_MESSAGES } from '../../../core/components/toolbar/messages.js';\nimport { styledOrText } from '../../../core/components/toolbar/styles.sty.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport {\n  useInteractionModeState,\n  useZoomState,\n} from '../../hooks/store/selectors.js';\nimport { useSetState } from '../../hooks/store/state-setters.js';\nimport { useHistogramInteractions } from '../../hooks/useHistogramInteractions.js';\nimport { HISTOGRAM_MESSAGES } from '../../messages/tooltip-text.js';\n\nexport const PanButton = () => {\n  const { zoomOutEnabled } = useZoomState();\n  const panButtonRef = useRef<HTMLButtonElement>(null);\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Pan);\n  const { pan } = useHistogramInteractions();\n  const setState = useSetState();\n  const intl = useIntl();\n\n  const isPanEnabled = pan?.enabled;\n  const interactionMode = useInteractionModeState();\n  const isSelected = interactionMode === INTERACTION_MODE.Pan;\n\n  const handleClick = () => {\n    setState(reduceInteractionMode(INTERACTION_MODE.Pan));\n    setState(reduceExploreCancelAll);\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      handleClick();\n    }\n  };\n\n  return isPanEnabled ? (\n    <ChartToolbarRenderer.Control\n      ref={panButtonRef}\n      prefixIcon={<PanHorizontalIcon />}\n      tooltipText={intl.formatMessage(HISTOGRAM_MESSAGES.zoomModePan)}\n      selected={isSelected}\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n      tabIndex={tabIndex}\n      disabled={!zoomOutEnabled}\n      placement=\"menu\"\n      menuShortcut={\n        <>\n          <KeyboardShortcut\n            keys=\"alt\"\n            variant=\"minimal\"\n            disabled={!zoomOutEnabled}\n          />\n          <span className={styledOrText}>\n            {` ${intl.formatMessage(TOOLBAR_MESSAGES.or)} `}\n          </span>\n          <KeyboardShortcut\n            keys={KeyboardControls.KEYBOARD_PAN_MODE_SHORTCUT_ALTERNATIVE}\n            variant=\"minimal\"\n            disabled={!zoomOutEnabled}\n          />\n        </>\n      }\n    />\n  ) : null;\n};\n\nPanButton['displayName'] = 'PanButton';\n"],
+  "mappings": "AAgDkB,SASV,UATU,KASV,YATU;AAhDlB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAElC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,0BAA0B;AAE5B,MAAM,YAAY,MAAM;AAC7B,QAAM,EAAE,eAAe,IAAI,aAAa;AACxC,QAAM,eAAe,OAA0B,IAAI;AACnD,QAAM,WAAW,uBAAuB,iBAAiB,GAAG;AAC5D,QAAM,EAAE,IAAI,IAAI,yBAAyB;AACzC,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AAErB,QAAM,eAAe,KAAK;AAC1B,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,aAAa,oBAAoB,iBAAiB;AAExD,QAAM,cAAc,MAAM;AACxB,aAAS,sBAAsB,iBAAiB,GAAG,CAAC;AACpD,aAAS,sBAAsB;AAAA,EACjC;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,QAAQ,SAAS;AACzB,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,SAAO,eACL;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,qBAAkB;AAAA,MAC/B,aAAa,KAAK,cAAc,mBAAmB,WAAW;AAAA,MAC9D,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,UAAU,CAAC;AAAA,MACX,WAAU;AAAA,MACV,cACE,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,UAAU,CAAC;AAAA;AAAA,QACb;AAAA,QACA,oBAAC,UAAK,WAAW,cACd,cAAI,KAAK,cAAc,iBAAiB,EAAE,CAAC,KAC9C;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,iBAAiB;AAAA,YACvB,SAAQ;AAAA,YACR,UAAU,CAAC;AAAA;AAAA,QACb;AAAA,SACF;AAAA;AAAA,EAEJ,IACE;AACN;AAEA,UAAU,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/histogram/components/toolbar/ZoomInOutButtons.js

@@ -7,7 +7,7 @@ import { ChartToolbarRenderer } from "../../../core/components/toolbar/ChartTool
 import { useTriggerZoom } from "../../../core/components/zoom/hooks/useTriggerZoom.js";
 import { useA11yToolbarTabIndex } from "../../../core/hooks/useA11yToolbarTabIndex.js";
 import { ZOOM_ACTIONS, ZOOM_CHANGE_TYPE } from "../../../core/types/zoom.js";
-import { getKeyShortcutByAgent } from "../../../core/utils/get-key-shortcut-by-agent.js";
+import { getPrimaryModifierKey } from "../../../core/utils/get-primary-modifier-key.js";
 import { useZoomState } from "../../hooks/store/selectors.js";
 import { HISTOGRAM_MESSAGES } from "../../messages/tooltip-text.js";
 import { useApplyZoomDelta } from "../overlays/hooks/useApplyZoomDelta.js";
@@ -35,8 +35,12 @@ const ZoomInOutButtons = () => {
       triggerZoom(ZOOM_CHANGE_TYPE.ZoomOut);
     }
   };
-  const zoomInShortcut = getKeyShortcutByAgent("CONTROL") + `+${intl.formatMessage(HISTOGRAM_MESSAGES.zoomActionArrowUp)}`;
-  const zoomOutShortcut = getKeyShortcutByAgent("CONTROL") + `+${intl.formatMessage(HISTOGRAM_MESSAGES.zoomActionArrowDown)}`;
+  const zoomInShortcut = `${getPrimaryModifierKey()}+${intl.formatMessage(
+    HISTOGRAM_MESSAGES.zoomActionArrowUp
+  )}`;
+  const zoomOutShortcut = `${getPrimaryModifierKey()}+${intl.formatMessage(
+    HISTOGRAM_MESSAGES.zoomActionArrowDown
+  )}`;
   const controlStyle = { marginRight: Spacings.Size2 };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(

package/esm/charts/histogram/components/toolbar/ZoomInOutButtons.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/histogram/components/toolbar/ZoomInOutButtons.tsx"],
-  "sourcesContent": ["import { type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport { ZoomInIcon, ZoomOutIcon } from '@dynatrace/strato-icons';\n\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useTriggerZoom } from '../../../core/components/zoom/hooks/useTriggerZoom.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { ZOOM_ACTIONS, ZOOM_CHANGE_TYPE } from '../../../core/types/zoom.js';\nimport { getKeyShortcutByAgent } from '../../../core/utils/get-key-shortcut-by-agent.js';\nimport { useZoomState } from '../../hooks/store/selectors.js';\nimport { HISTOGRAM_MESSAGES } from '../../messages/tooltip-text.js';\nimport { useApplyZoomDelta } from '../overlays/hooks/useApplyZoomDelta.js';\n\nexport const ZoomInOutButtons = () => {\n  const tabIndexIn = useA11yToolbarTabIndex(ZOOM_ACTIONS.ZoomIn);\n  const tabIndexOut = useA11yToolbarTabIndex(ZOOM_ACTIONS.ZoomOut);\n  const { zoomInEnabled, zoomOutEnabled } = useZoomState();\n  const intl = useIntl();\n\n  const { width } = useGridPlotSize();\n  const applyZoom = useApplyZoomDelta();\n  const triggerZoom = useTriggerZoom(width, applyZoom);\n\n  const handleZoomInClick = () => {\n    triggerZoom(ZOOM_CHANGE_TYPE.ZoomIn);\n  };\n\n  const handleZoomInKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.code === 'Enter') {\n      triggerZoom(ZOOM_CHANGE_TYPE.ZoomIn);\n    }\n  };\n\n  const handleZoomOutClick = () => {\n    triggerZoom(ZOOM_CHANGE_TYPE.ZoomOut);\n  };\n\n  const handleZoomOutKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.code === 'Enter') {\n      triggerZoom(ZOOM_CHANGE_TYPE.ZoomOut);\n    }\n  };\n\n  const zoomInShortcut =\n    getKeyShortcutByAgent('CONTROL') +\n    `+${intl.formatMessage(HISTOGRAM_MESSAGES.zoomActionArrowUp)}`;\n  const zoomOutShortcut =\n    getKeyShortcutByAgent('CONTROL') +\n    `+${intl.formatMessage(HISTOGRAM_MESSAGES.zoomActionArrowDown)}`;\n\n  const controlStyle = { marginRight: Spacings.Size2 };\n\n  return (\n    <>\n      <ChartToolbarRenderer.Control\n        prefixIcon={<ZoomInIcon />}\n        tooltipText={intl.formatMessage(HISTOGRAM_MESSAGES.zoomIn)}\n        tooltipKeyShortcut={zoomInShortcut}\n        onKeyDown={handleZoomInKeyDown}\n        onClick={handleZoomInClick}\n        tabIndex={tabIndexIn}\n        disabled={!zoomInEnabled}\n        divider=\"left\"\n        style={controlStyle}\n      />\n      <ChartToolbarRenderer.Control\n        prefixIcon={<ZoomOutIcon />}\n        tooltipText={intl.formatMessage(HISTOGRAM_MESSAGES.zoomOut)}\n        tooltipKeyShortcut={zoomOutShortcut}\n        onKeyDown={handleZoomOutKeyDown}\n        onClick={handleZoomOutClick}\n        tabIndex={tabIndexOut}\n        disabled={!zoomOutEnabled}\n        style={controlStyle}\n      />\n    </>\n  );\n};\n\nZoomInOutButtons['displayName'] = 'ZoomInOutButtons';\n"],
-  "mappings": "AAwDI,mBAEgB,KAFhB;AAvDJ,SAAS,eAAe;AAExB,OAAO,cAAc;AACrB,SAAS,YAAY,mBAAmB;AAExC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,8BAA8B;AACvC,SAAS,cAAc,wBAAwB;AAC/C,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAE3B,MAAM,mBAAmB,MAAM;AACpC,QAAM,aAAa,uBAAuB,aAAa,MAAM;AAC7D,QAAM,cAAc,uBAAuB,aAAa,OAAO;AAC/D,QAAM,EAAE,eAAe,eAAe,IAAI,aAAa;AACvD,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,YAAY,kBAAkB;AACpC,QAAM,cAAc,eAAe,OAAO,SAAS;AAEnD,QAAM,oBAAoB,MAAM;AAC9B,gBAAY,iBAAiB,MAAM;AAAA,EACrC;AAEA,QAAM,sBAAsB,CAAC,UAA8B;AACzD,QAAI,MAAM,SAAS,SAAS;AAC1B,kBAAY,iBAAiB,MAAM;AAAA,IACrC;AAAA,EACF;AAEA,QAAM,qBAAqB,MAAM;AAC/B,gBAAY,iBAAiB,OAAO;AAAA,EACtC;AAEA,QAAM,uBAAuB,CAAC,UAA8B;AAC1D,QAAI,MAAM,SAAS,SAAS;AAC1B,kBAAY,iBAAiB,OAAO;AAAA,IACtC;AAAA,EACF;AAEA,QAAM,iBACJ,sBAAsB,SAAS,IAC/B,IAAI,KAAK,cAAc,mBAAmB,iBAAiB,CAAC;AAC9D,QAAM,kBACJ,sBAAsB,SAAS,IAC/B,IAAI,KAAK,cAAc,mBAAmB,mBAAmB,CAAC;AAEhE,QAAM,eAAe,EAAE,aAAa,SAAS,MAAM;AAEnD,SACE,iCACE;AAAA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,YAAY,oBAAC,cAAW;AAAA,QACxB,aAAa,KAAK,cAAc,mBAAmB,MAAM;AAAA,QACzD,oBAAoB;AAAA,QACpB,WAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU,CAAC;AAAA,QACX,SAAQ;AAAA,QACR,OAAO;AAAA;AAAA,IACT;AAAA,IACA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,YAAY,oBAAC,eAAY;AAAA,QACzB,aAAa,KAAK,cAAc,mBAAmB,OAAO;AAAA,QAC1D,oBAAoB;AAAA,QACpB,WAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU,CAAC;AAAA,QACX,OAAO;AAAA;AAAA,IACT;AAAA,KACF;AAEJ;AAEA,iBAAiB,aAAa,IAAI;",
+  "sourcesContent": ["import { type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport { ZoomInIcon, ZoomOutIcon } from '@dynatrace/strato-icons';\n\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useTriggerZoom } from '../../../core/components/zoom/hooks/useTriggerZoom.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { ZOOM_ACTIONS, ZOOM_CHANGE_TYPE } from '../../../core/types/zoom.js';\nimport { getPrimaryModifierKey } from '../../../core/utils/get-primary-modifier-key.js';\nimport { useZoomState } from '../../hooks/store/selectors.js';\nimport { HISTOGRAM_MESSAGES } from '../../messages/tooltip-text.js';\nimport { useApplyZoomDelta } from '../overlays/hooks/useApplyZoomDelta.js';\n\nexport const ZoomInOutButtons = () => {\n  const tabIndexIn = useA11yToolbarTabIndex(ZOOM_ACTIONS.ZoomIn);\n  const tabIndexOut = useA11yToolbarTabIndex(ZOOM_ACTIONS.ZoomOut);\n  const { zoomInEnabled, zoomOutEnabled } = useZoomState();\n  const intl = useIntl();\n\n  const { width } = useGridPlotSize();\n  const applyZoom = useApplyZoomDelta();\n  const triggerZoom = useTriggerZoom(width, applyZoom);\n\n  const handleZoomInClick = () => {\n    triggerZoom(ZOOM_CHANGE_TYPE.ZoomIn);\n  };\n\n  const handleZoomInKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.code === 'Enter') {\n      triggerZoom(ZOOM_CHANGE_TYPE.ZoomIn);\n    }\n  };\n\n  const handleZoomOutClick = () => {\n    triggerZoom(ZOOM_CHANGE_TYPE.ZoomOut);\n  };\n\n  const handleZoomOutKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.code === 'Enter') {\n      triggerZoom(ZOOM_CHANGE_TYPE.ZoomOut);\n    }\n  };\n\n  const zoomInShortcut = `${getPrimaryModifierKey()}+${intl.formatMessage(\n    HISTOGRAM_MESSAGES.zoomActionArrowUp,\n  )}`;\n  const zoomOutShortcut = `${getPrimaryModifierKey()}+${intl.formatMessage(\n    HISTOGRAM_MESSAGES.zoomActionArrowDown,\n  )}`;\n\n  const controlStyle = { marginRight: Spacings.Size2 };\n\n  return (\n    <>\n      <ChartToolbarRenderer.Control\n        prefixIcon={<ZoomInIcon />}\n        tooltipText={intl.formatMessage(HISTOGRAM_MESSAGES.zoomIn)}\n        tooltipKeyShortcut={zoomInShortcut}\n        onKeyDown={handleZoomInKeyDown}\n        onClick={handleZoomInClick}\n        tabIndex={tabIndexIn}\n        disabled={!zoomInEnabled}\n        divider=\"left\"\n        style={controlStyle}\n      />\n      <ChartToolbarRenderer.Control\n        prefixIcon={<ZoomOutIcon />}\n        tooltipText={intl.formatMessage(HISTOGRAM_MESSAGES.zoomOut)}\n        tooltipKeyShortcut={zoomOutShortcut}\n        onKeyDown={handleZoomOutKeyDown}\n        onClick={handleZoomOutClick}\n        tabIndex={tabIndexOut}\n        disabled={!zoomOutEnabled}\n        style={controlStyle}\n      />\n    </>\n  );\n};\n\nZoomInOutButtons['displayName'] = 'ZoomInOutButtons';\n"],
+  "mappings": "AAwDI,mBAEgB,KAFhB;AAvDJ,SAAS,eAAe;AAExB,OAAO,cAAc;AACrB,SAAS,YAAY,mBAAmB;AAExC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,8BAA8B;AACvC,SAAS,cAAc,wBAAwB;AAC/C,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAE3B,MAAM,mBAAmB,MAAM;AACpC,QAAM,aAAa,uBAAuB,aAAa,MAAM;AAC7D,QAAM,cAAc,uBAAuB,aAAa,OAAO;AAC/D,QAAM,EAAE,eAAe,eAAe,IAAI,aAAa;AACvD,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,YAAY,kBAAkB;AACpC,QAAM,cAAc,eAAe,OAAO,SAAS;AAEnD,QAAM,oBAAoB,MAAM;AAC9B,gBAAY,iBAAiB,MAAM;AAAA,EACrC;AAEA,QAAM,sBAAsB,CAAC,UAA8B;AACzD,QAAI,MAAM,SAAS,SAAS;AAC1B,kBAAY,iBAAiB,MAAM;AAAA,IACrC;AAAA,EACF;AAEA,QAAM,qBAAqB,MAAM;AAC/B,gBAAY,iBAAiB,OAAO;AAAA,EACtC;AAEA,QAAM,uBAAuB,CAAC,UAA8B;AAC1D,QAAI,MAAM,SAAS,SAAS;AAC1B,kBAAY,iBAAiB,OAAO;AAAA,IACtC;AAAA,EACF;AAEA,QAAM,iBAAiB,GAAG,sBAAsB,CAAC,IAAI,KAAK;AAAA,IACxD,mBAAmB;AAAA,EACrB,CAAC;AACD,QAAM,kBAAkB,GAAG,sBAAsB,CAAC,IAAI,KAAK;AAAA,IACzD,mBAAmB;AAAA,EACrB,CAAC;AAED,QAAM,eAAe,EAAE,aAAa,SAAS,MAAM;AAEnD,SACE,iCACE;AAAA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,YAAY,oBAAC,cAAW;AAAA,QACxB,aAAa,KAAK,cAAc,mBAAmB,MAAM;AAAA,QACzD,oBAAoB;AAAA,QACpB,WAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU,CAAC;AAAA,QACX,SAAQ;AAAA,QACR,OAAO;AAAA;AAAA,IACT;AAAA,IACA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,YAAY,oBAAC,eAAY;AAAA,QACzB,aAAa,KAAK,cAAc,mBAAmB,OAAO;AAAA,QAC1D,oBAAoB;AAAA,QACpB,WAAW;AAAA,QACX,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU,CAAC;AAAA,QACX,OAAO;AAAA;AAAA,IACT;AAAA,KACF;AAEJ;AAEA,iBAAiB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/histogram/components/toolbar/ZoomModeButton.js

@@ -1,7 +1,8 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isNil } from "lodash-es";
 import { useIntl } from "react-intl";
 import { ZoomToSelectionIcon } from "@dynatrace/strato-icons";
+import { KeyboardShortcut } from "../../../../content/keyboard-shortcut/KeyboardShortcut.js";
 import { useGridPlotSize } from "../../../core/components/chart-grid/hooks/useGridPlotSize.js";
 import { INTERACTION_MODE } from "../../../core/components/interactions-overlay/types.js";
 import { calculateInitialSelectionAreaPositions } from "../../../core/components/interactions-overlay/utils/calculate-initial-selection-area-positions.js";
@@ -16,9 +17,10 @@ import {
 import { ChartToolbarRenderer } from "../../../core/components/toolbar/ChartToolbarRenderer.js";
 import { useToolbarContext } from "../../../core/components/toolbar/hooks/useToolbarContext.js";
 import { TOOLBAR_MESSAGES } from "../../../core/components/toolbar/messages.js";
+import { styledOrText } from "../../../core/components/toolbar/styles.sty.js";
 import { useA11yToolbarTabIndex } from "../../../core/hooks/useA11yToolbarTabIndex.js";
-import { getKeyShortcutByAgent } from "../../../core/utils/get-key-shortcut-by-agent.js";
 import { getPercentageFromPixel } from "../../../core/utils/get-percentage-from-pixel.js";
+import { getPrimaryModifierKey } from "../../../core/utils/get-primary-modifier-key.js";
 import {
   useInteractionModeState,
   useSelectState
@@ -33,7 +35,6 @@ const ZoomModeButton = () => {
   const overlayRef = useHistogramChartOverlayRef();
   const { width } = useGridPlotSize();
   const intl = useIntl();
-  const tooltipShortcut = getKeyShortcutByAgent("CONTROL") + " " + intl.formatMessage(TOOLBAR_MESSAGES.or) + " Z";
   const { updateLastItemSelected } = useToolbarContext();
   const isSelected = interactionMode === INTERACTION_MODE.Zoom;
   const selectState = useSelectState();
@@ -81,7 +82,11 @@ const ZoomModeButton = () => {
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       tabIndex,
-      tooltipKeyShortcut: tooltipShortcut,
+      menuShortcut: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(KeyboardShortcut, { keys: getPrimaryModifierKey(), variant: "minimal" }),
+        /* @__PURE__ */ jsx("span", { className: styledOrText, children: ` ${intl.formatMessage(TOOLBAR_MESSAGES.or)} ` }),
+        /* @__PURE__ */ jsx(KeyboardShortcut, { keys: "Z", variant: "minimal" })
+      ] }),
       placement: "menu"
     }
   );

package/esm/charts/histogram/components/toolbar/ZoomModeButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/histogram/components/toolbar/ZoomModeButton.tsx"],
-  "sourcesContent": ["import { isNil } from 'lodash-es';\nimport { type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ZoomToSelectionIcon } from '@dynatrace/strato-icons';\n\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { INTERACTION_MODE } from '../../../core/components/interactions-overlay/types.js';\nimport { calculateInitialSelectionAreaPositions } from '../../../core/components/interactions-overlay/utils/calculate-initial-selection-area-positions.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreSelect,\n} from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport {\n  reduceInteractionMode,\n  reduceSelectionAreaVariant,\n} from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useToolbarContext } from '../../../core/components/toolbar/hooks/useToolbarContext.js';\nimport { TOOLBAR_MESSAGES } from '../../../core/components/toolbar/messages.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { getKeyShortcutByAgent } from '../../../core/utils/get-key-shortcut-by-agent.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n} from '../../hooks/store/selectors.js';\nimport { useSetState } from '../../hooks/store/state-setters.js';\nimport { useHistogramChartOverlayRef } from '../../hooks/useHistogramChartOverlayRef.js';\nimport { HISTOGRAM_MESSAGES } from '../../messages/tooltip-text.js';\n\nexport const ZoomModeButton = () => {\n  const setState = useSetState();\n  const interactionMode = useInteractionModeState();\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Zoom);\n  const overlayRef = useHistogramChartOverlayRef();\n  const { width } = useGridPlotSize();\n  const intl = useIntl();\n  const tooltipShortcut =\n    getKeyShortcutByAgent('CONTROL') +\n    ' ' +\n    intl.formatMessage(TOOLBAR_MESSAGES.or) +\n    ' Z';\n  const { updateLastItemSelected } = useToolbarContext();\n\n  const isSelected = interactionMode === INTERACTION_MODE.Zoom;\n\n  const selectState = useSelectState();\n\n  const createInitialZoomArea = () => {\n    if (!isNil(overlayRef.current)) {\n      const bounds = overlayRef.current.getBoundingClientRect();\n\n      const [start, end] = calculateInitialSelectionAreaPositions(bounds);\n\n      setState(\n        reduceExploreSelect({\n          start,\n          end,\n          finished: true,\n          accessible: true,\n          variant: 'zoom',\n          isKeyboardCreated: true,\n          selectionPercentage: getPercentageFromPixel([start, end], width),\n        }),\n      );\n    }\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      createInitialZoomArea();\n    }\n  };\n\n  const handleClick = () => {\n    if (interactionMode !== 'zoom') {\n      setState(reduceInteractionMode(INTERACTION_MODE.Zoom));\n    }\n\n    if (selectState?.start && selectState?.end) {\n      if (selectState?.isKeyboardCreated) {\n        reduceSelectionAreaVariant('zoom');\n      } else {\n        setState(reduceExploreCancelAll);\n      }\n    }\n\n    updateLastItemSelected(INTERACTION_MODE.Zoom);\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      prefixIcon={<ZoomToSelectionIcon />}\n      selected={isSelected}\n      tooltipText={intl.formatMessage(HISTOGRAM_MESSAGES.zoomModeZoom)}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      tabIndex={tabIndex}\n      tooltipKeyShortcut={tooltipShortcut}\n      placement=\"menu\"\n    />\n  );\n};\n"],
-  "mappings": "AA6FkB;AA7FlB,SAAS,aAAa;AAEtB,SAAS,eAAe;AAExB,SAAS,2BAA2B;AAEpC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,8CAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,mCAAmC;AAC5C,SAAS,0BAA0B;AAE5B,MAAM,iBAAiB,MAAM;AAClC,QAAM,WAAW,YAAY;AAC7B,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,WAAW,uBAAuB,iBAAiB,IAAI;AAC7D,QAAM,aAAa,4BAA4B;AAC/C,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,OAAO,QAAQ;AACrB,QAAM,kBACJ,sBAAsB,SAAS,IAC/B,MACA,KAAK,cAAc,iBAAiB,EAAE,IACtC;AACF,QAAM,EAAE,uBAAuB,IAAI,kBAAkB;AAErD,QAAM,aAAa,oBAAoB,iBAAiB;AAExD,QAAM,cAAc,eAAe;AAEnC,QAAM,wBAAwB,MAAM;AAClC,QAAI,CAAC,MAAM,WAAW,OAAO,GAAG;AAC9B,YAAM,SAAS,WAAW,QAAQ,sBAAsB;AAExD,YAAM,CAAC,OAAO,GAAG,IAAI,uCAAuC,MAAM;AAElE;AAAA,QACE,oBAAoB;AAAA,UAClB;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,mBAAmB;AAAA,UACnB,qBAAqB,uBAAuB,CAAC,OAAO,GAAG,GAAG,KAAK;AAAA,QACjE,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,QAAQ,SAAS;AACzB,4BAAsB;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,QAAI,oBAAoB,QAAQ;AAC9B,eAAS,sBAAsB,iBAAiB,IAAI,CAAC;AAAA,IACvD;AAEA,QAAI,aAAa,SAAS,aAAa,KAAK;AAC1C,UAAI,aAAa,mBAAmB;AAClC,mCAA2B,MAAM;AAAA,MACnC,OAAO;AACL,iBAAS,sBAAsB;AAAA,MACjC;AAAA,IACF;AAEA,2BAAuB,iBAAiB,IAAI;AAAA,EAC9C;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,YAAY,oBAAC,uBAAoB;AAAA,MACjC,UAAU;AAAA,MACV,aAAa,KAAK,cAAc,mBAAmB,YAAY;AAAA,MAC/D,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA,oBAAoB;AAAA,MACpB,WAAU;AAAA;AAAA,EACZ;AAEJ;",
+  "sourcesContent": ["import { isNil } from 'lodash-es';\nimport { type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ZoomToSelectionIcon } from '@dynatrace/strato-icons';\n\nimport { KeyboardShortcut } from '../../../../content/keyboard-shortcut/KeyboardShortcut.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { INTERACTION_MODE } from '../../../core/components/interactions-overlay/types.js';\nimport { calculateInitialSelectionAreaPositions } from '../../../core/components/interactions-overlay/utils/calculate-initial-selection-area-positions.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreSelect,\n} from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport {\n  reduceInteractionMode,\n  reduceSelectionAreaVariant,\n} from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useToolbarContext } from '../../../core/components/toolbar/hooks/useToolbarContext.js';\nimport { TOOLBAR_MESSAGES } from '../../../core/components/toolbar/messages.js';\nimport { styledOrText } from '../../../core/components/toolbar/styles.sty.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport { getPrimaryModifierKey } from '../../../core/utils/get-primary-modifier-key.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n} from '../../hooks/store/selectors.js';\nimport { useSetState } from '../../hooks/store/state-setters.js';\nimport { useHistogramChartOverlayRef } from '../../hooks/useHistogramChartOverlayRef.js';\nimport { HISTOGRAM_MESSAGES } from '../../messages/tooltip-text.js';\n\nexport const ZoomModeButton = () => {\n  const setState = useSetState();\n  const interactionMode = useInteractionModeState();\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Zoom);\n  const overlayRef = useHistogramChartOverlayRef();\n  const { width } = useGridPlotSize();\n  const intl = useIntl();\n  const { updateLastItemSelected } = useToolbarContext();\n\n  const isSelected = interactionMode === INTERACTION_MODE.Zoom;\n\n  const selectState = useSelectState();\n\n  const createInitialZoomArea = () => {\n    if (!isNil(overlayRef.current)) {\n      const bounds = overlayRef.current.getBoundingClientRect();\n\n      const [start, end] = calculateInitialSelectionAreaPositions(bounds);\n\n      setState(\n        reduceExploreSelect({\n          start,\n          end,\n          finished: true,\n          accessible: true,\n          variant: 'zoom',\n          isKeyboardCreated: true,\n          selectionPercentage: getPercentageFromPixel([start, end], width),\n        }),\n      );\n    }\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      createInitialZoomArea();\n    }\n  };\n\n  const handleClick = () => {\n    if (interactionMode !== 'zoom') {\n      setState(reduceInteractionMode(INTERACTION_MODE.Zoom));\n    }\n\n    if (selectState?.start && selectState?.end) {\n      if (selectState?.isKeyboardCreated) {\n        reduceSelectionAreaVariant('zoom');\n      } else {\n        setState(reduceExploreCancelAll);\n      }\n    }\n\n    updateLastItemSelected(INTERACTION_MODE.Zoom);\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      prefixIcon={<ZoomToSelectionIcon />}\n      selected={isSelected}\n      tooltipText={intl.formatMessage(HISTOGRAM_MESSAGES.zoomModeZoom)}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      tabIndex={tabIndex}\n      menuShortcut={\n        <>\n          <KeyboardShortcut keys={getPrimaryModifierKey()} variant=\"minimal\" />\n          <span className={styledOrText}>\n            {` ${intl.formatMessage(TOOLBAR_MESSAGES.or)} `}\n          </span>\n          <KeyboardShortcut keys=\"Z\" variant=\"minimal\" />\n        </>\n      }\n      placement=\"menu\"\n    />\n  );\n};\n"],
+  "mappings": "AA0FkB,SAOV,UAPU,KAOV,YAPU;AA1FlB,SAAS,aAAa;AAEtB,SAAS,eAAe;AAExB,SAAS,2BAA2B;AAEpC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,8CAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,mCAAmC;AAC5C,SAAS,0BAA0B;AAE5B,MAAM,iBAAiB,MAAM;AAClC,QAAM,WAAW,YAAY;AAC7B,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,WAAW,uBAAuB,iBAAiB,IAAI;AAC7D,QAAM,aAAa,4BAA4B;AAC/C,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,uBAAuB,IAAI,kBAAkB;AAErD,QAAM,aAAa,oBAAoB,iBAAiB;AAExD,QAAM,cAAc,eAAe;AAEnC,QAAM,wBAAwB,MAAM;AAClC,QAAI,CAAC,MAAM,WAAW,OAAO,GAAG;AAC9B,YAAM,SAAS,WAAW,QAAQ,sBAAsB;AAExD,YAAM,CAAC,OAAO,GAAG,IAAI,uCAAuC,MAAM;AAElE;AAAA,QACE,oBAAoB;AAAA,UAClB;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,mBAAmB;AAAA,UACnB,qBAAqB,uBAAuB,CAAC,OAAO,GAAG,GAAG,KAAK;AAAA,QACjE,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,QAAQ,SAAS;AACzB,4BAAsB;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,QAAI,oBAAoB,QAAQ;AAC9B,eAAS,sBAAsB,iBAAiB,IAAI,CAAC;AAAA,IACvD;AAEA,QAAI,aAAa,SAAS,aAAa,KAAK;AAC1C,UAAI,aAAa,mBAAmB;AAClC,mCAA2B,MAAM;AAAA,MACnC,OAAO;AACL,iBAAS,sBAAsB;AAAA,MACjC;AAAA,IACF;AAEA,2BAAuB,iBAAiB,IAAI;AAAA,EAC9C;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,YAAY,oBAAC,uBAAoB;AAAA,MACjC,UAAU;AAAA,MACV,aAAa,KAAK,cAAc,mBAAmB,YAAY;AAAA,MAC/D,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA,cACE,iCACE;AAAA,4BAAC,oBAAiB,MAAM,sBAAsB,GAAG,SAAQ,WAAU;AAAA,QACnE,oBAAC,UAAK,WAAW,cACd,cAAI,KAAK,cAAc,iBAAiB,EAAE,CAAC,KAC9C;AAAA,QACA,oBAAC,oBAAiB,MAAK,KAAI,SAAQ,WAAU;AAAA,SAC/C;AAAA,MAEF,WAAU;AAAA;AAAA,EACZ;AAEJ;",
   "names": []
 }

package/esm/charts/honeycomb/HoneycombChart.css

@@ -1,3 +1,3 @@
-._p8cogi0-3-10-1 {
+._p8cogi0-3-11-0 {
   position: relative;
 }

package/esm/charts/honeycomb/HoneycombChart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/honeycomb/HoneycombChart.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  type ReactElement,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { HoneycombChartLayout } from './components/HoneycombChartLayout.js';\nimport {\n  DEFAULT_HONEYCOMB_HEIGHT,\n  DISPLAY_NAME,\n  HONEYCOMB_CHART_ARIA_LABEL,\n} from './constants.js';\nimport { HoneycombColorSchemeContext } from './context/honeycomb-color-scheme.context.js';\nimport { HoneycombFormatterContext } from './context/honeycomb-formatter.context.js';\nimport { HoneycombLabelsDisplayContext } from './context/honeycomb-labels-display.context.js';\nimport { HoneycombLoadingContext } from './context/honeycomb-loading.context.js';\nimport { HoneycombShapeContext } from './context/honeycomb-shape.context.js';\nimport { HoneycombTextSizeContext } from './context/honeycomb-text-size.context.js';\nimport { HoneycombTruncationMode } from './context/honeycomb-truncation-mode.context.js';\nimport { useHoneycombChartConfig } from './hooks/use-honeycomb-chart-config.js';\nimport { HoneycombBaseScaleProvider } from './providers/honeycomb-base-scale.provider.js';\nimport { HoneycombConfigurationProvider } from './providers/honeycomb-configuration.provider.js';\nimport { HoneycombDatasetTypeProvider } from './providers/honeycomb-dataset-type.provider.js';\nimport { HoneycombFilteredDataProvider } from './providers/honeycomb-filtered-data.provider.js';\nimport { HoneycombMetadataProvider } from './providers/honeycomb-metadata.provider.js';\nimport { HoneycombStoreProvider } from './providers/honeycomb-store.provider.js';\nimport { HoneycombChartDownloadCSVSlot } from './slots/DownloadCSV.js';\nimport { HoneycombLegend } from './slots/HoneycombLegend.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { HoneycombConsumerExportedConfig } from './types/honeycomb-config-properties.js';\nimport { HoneycombRequiredConfigProps } from './types/honeycomb-internal.js';\nimport {\n  HoneycombChartProps,\n  HoneycombChartRef,\n  type HoneycombData,\n} from './types/honeycomb.js';\nimport { buildAndDownloadCsv } from './utils/build-and-download-csv.js';\nimport { isHoneycombChartAccessorDataProps } from './utils/build-honeycomb-config.js';\nimport { normalizeHoneycombChartData } from './utils/normalize-honeycomb-chart-data.js';\nimport { normalizeTilesData } from './utils/normalize-tiles-data.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { ChartSeriesActionContext } from '../core/components/series-action/ChartSeriesActionContext.js';\nimport { getToolbarConfigWithoutIntents } from '../core/components/toolbar/utils/get-toolbar-config-without-intents.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport type { ChartData } from '../core/types/chart-data.js';\nimport { ChartType } from '../core/types/chart-types.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\n\nconst COMPONENT_NAME = 'HoneycombChart';\n\nconst normalizeHoneycombConfig = (\n  config: HoneycombRequiredConfigProps,\n): HoneycombConsumerExportedConfig => {\n  const { toolbar: configuredToolbar, ...remainingConfig } = config;\n  const toolbar = configuredToolbar\n    ? getToolbarConfigWithoutIntents(configuredToolbar)\n    : undefined;\n\n  return { ...remainingConfig, toolbar };\n};\n\n/** The honeycomb component */\nexport const _HoneycombChart = forwardRef<\n  HoneycombChartRef,\n  PropsWithChildren<HoneycombChartProps>\n>((props, forwardedRef) => {\n  const {\n    data,\n    seriesActions,\n    width,\n    height,\n    style: costumerStyle,\n    className: customerClassNames,\n    loading,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId,\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const chartWidth = coerceSizeValue(width);\n  const chartHeight = coerceSizeValue(height) || DEFAULT_HONEYCOMB_HEIGHT;\n  const rootRef = useMergeRefs<HoneycombChartRef | HTMLDivElement>([\n    forwardedRef,\n    containerRef,\n  ]);\n\n  const sanitizedData = isHoneycombChartAccessorDataProps(props)\n    ? normalizeHoneycombChartData(data as ChartData, props.valueAccessor)\n    : normalizeTilesData(data as HoneycombData);\n\n  const config = useHoneycombChartConfig(props);\n\n  const formatterContext = {\n    formatter: config.formatter,\n    unit: config.unit,\n  };\n\n  useImperativeHandle(forwardedRef, () => {\n    const consumerConfig = normalizeHoneycombConfig(config);\n    return {\n      element: containerRef.current,\n      downloadData: () => {\n        buildAndDownloadCsv(sanitizedData);\n      },\n      getConfig: () => {\n        return JSON.stringify({\n          type: ChartType.Honeycomb,\n          ...consumerConfig,\n        });\n      },\n    };\n  });\n\n  return (\n    <div\n      {...behavioralTrackingProps}\n      ref={rootRef}\n      style={{ ...costumerStyle, width: chartWidth, height: chartHeight }}\n      className={clsx(defaultChartSize, customerClassNames)}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-dt-component={COMPONENT_NAME}\n      aria-label={HONEYCOMB_CHART_ARIA_LABEL}\n      role=\"img\"\n    >\n      <HoneycombLoadingContext.Provider value={loading}>\n        <HoneycombConfigurationProvider config={config}>\n          <HoneycombShapeContext.Provider value={config.shape}>\n            <HoneycombColorSchemeContext.Provider value={config.colorScheme}>\n              <HoneycombTruncationMode.Provider value={config.truncationMode}>\n                <HoneycombFormatterContext.Provider value={formatterContext}>\n                  <HoneycombLabelsDisplayContext.Provider\n                    value={config.labelsDisplay}\n                  >\n                    <HoneycombTextSizeContext.Provider value={config.textSize}>\n                      <HoneycombFilteredDataProvider\n                        data={sanitizedData}\n                        config={config}\n                      >\n                        <HoneycombDatasetTypeProvider>\n                          <HoneycombBaseScaleProvider>\n                            <ChartSeriesActionContext.Provider\n                              value={{\n                                // We need a cast here as the provider expects unknown and the\n                                // react context will not be able to carry the generic anyways.\n                                chartSeriesActions: seriesActions as (\n                                  series: unknown,\n                                ) => ReactElement<PropsWithChildren>,\n                              }}\n                            >\n                              <HoneycombStoreProvider>\n                                <HoneycombMetadataProvider>\n                                  <HoneycombChartLayout {...props} />\n                                </HoneycombMetadataProvider>\n                              </HoneycombStoreProvider>\n                            </ChartSeriesActionContext.Provider>\n                          </HoneycombBaseScaleProvider>\n                        </HoneycombDatasetTypeProvider>\n                      </HoneycombFilteredDataProvider>\n                    </HoneycombTextSizeContext.Provider>\n                  </HoneycombLabelsDisplayContext.Provider>\n                </HoneycombFormatterContext.Provider>\n              </HoneycombTruncationMode.Provider>\n            </HoneycombColorSchemeContext.Provider>\n          </HoneycombShapeContext.Provider>\n        </HoneycombConfigurationProvider>\n      </HoneycombLoadingContext.Provider>\n    </div>\n  );\n});\n\n(\n  _HoneycombChart as typeof _HoneycombChart & { displayName: string }\n).displayName = DISPLAY_NAME;\n\n/**\n * The `HoneycombChart` is used to display data in a grid using various shapes\n * for data points.\n * @public\n */\nexport const HoneycombChart = Object.assign(_HoneycombChart, {\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  Legend: HoneycombLegend,\n  Intent,\n  ColorRule,\n  Toolbar,\n  DownloadCSV: HoneycombChartDownloadCSVSlot,\n  Tooltip,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  type ReactElement,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { HoneycombChartLayout } from './components/HoneycombChartLayout.js';\nimport {\n  DEFAULT_HONEYCOMB_HEIGHT,\n  DISPLAY_NAME,\n  HONEYCOMB_CHART_ARIA_LABEL,\n} from './constants.js';\nimport { HoneycombColorSchemeContext } from './context/honeycomb-color-scheme.context.js';\nimport { HoneycombFormatterContext } from './context/honeycomb-formatter.context.js';\nimport { HoneycombLabelsDisplayContext } from './context/honeycomb-labels-display.context.js';\nimport { HoneycombLoadingContext } from './context/honeycomb-loading.context.js';\nimport { HoneycombShapeContext } from './context/honeycomb-shape.context.js';\nimport { HoneycombTextSizeContext } from './context/honeycomb-text-size.context.js';\nimport { HoneycombTruncationMode } from './context/honeycomb-truncation-mode.context.js';\nimport { useHoneycombChartConfig } from './hooks/use-honeycomb-chart-config.js';\nimport { HoneycombBaseScaleProvider } from './providers/honeycomb-base-scale.provider.js';\nimport { HoneycombConfigurationProvider } from './providers/honeycomb-configuration.provider.js';\nimport { HoneycombDatasetTypeProvider } from './providers/honeycomb-dataset-type.provider.js';\nimport { HoneycombFilteredDataProvider } from './providers/honeycomb-filtered-data.provider.js';\nimport { HoneycombMetadataProvider } from './providers/honeycomb-metadata.provider.js';\nimport { HoneycombStoreProvider } from './providers/honeycomb-store.provider.js';\nimport { HoneycombChartDownloadCSVSlot } from './slots/DownloadCSV.js';\nimport { HoneycombLegend } from './slots/HoneycombLegend.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { HoneycombConsumerExportedConfig } from './types/honeycomb-config-properties.js';\nimport { HoneycombRequiredConfigProps } from './types/honeycomb-internal.js';\nimport {\n  HoneycombChartProps,\n  HoneycombChartRef,\n  type HoneycombData,\n} from './types/honeycomb.js';\nimport { buildAndDownloadCsv } from './utils/build-and-download-csv.js';\nimport { isHoneycombChartAccessorDataProps } from './utils/build-honeycomb-config.js';\nimport { normalizeHoneycombChartData } from './utils/normalize-honeycomb-chart-data.js';\nimport { normalizeTilesData } from './utils/normalize-tiles-data.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { ChartSeriesActionContext } from '../core/components/series-action/ChartSeriesActionContext.js';\nimport { getToolbarConfigWithoutIntents } from '../core/components/toolbar/utils/get-toolbar-config-without-intents.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport type { ChartData } from '../core/types/chart-data.js';\nimport { ChartType } from '../core/types/chart-types.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\n\nconst COMPONENT_NAME = 'HoneycombChart';\n\nconst normalizeHoneycombConfig = (\n  config: HoneycombRequiredConfigProps,\n): HoneycombConsumerExportedConfig => {\n  const { toolbar: configuredToolbar, ...remainingConfig } = config;\n  const toolbar = configuredToolbar\n    ? getToolbarConfigWithoutIntents(configuredToolbar)\n    : undefined;\n\n  return { ...remainingConfig, toolbar };\n};\n\n/** The honeycomb component */\nexport const _HoneycombChart = forwardRef<\n  HoneycombChartRef,\n  PropsWithChildren<HoneycombChartProps>\n>((props, forwardedRef) => {\n  const {\n    data,\n    seriesActions,\n    width,\n    height,\n    style: costumerStyle,\n    className: customerClassNames,\n    loading,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId,\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const chartWidth = coerceSizeValue(width);\n  const chartHeight = coerceSizeValue(height) || DEFAULT_HONEYCOMB_HEIGHT;\n  const rootRef = useMergeRefs<HoneycombChartRef | HTMLDivElement>([\n    forwardedRef,\n    containerRef,\n  ]);\n\n  const sanitizedData = isHoneycombChartAccessorDataProps(props)\n    ? normalizeHoneycombChartData(data as ChartData, props.valueAccessor)\n    : normalizeTilesData(data as HoneycombData);\n\n  const config = useHoneycombChartConfig(props);\n\n  const formatterContext = {\n    formatter: config.formatter,\n    unit: config.unit,\n  };\n\n  useImperativeHandle(forwardedRef, () => {\n    const consumerConfig = normalizeHoneycombConfig(config);\n    return {\n      element: containerRef.current,\n      downloadData: () => {\n        buildAndDownloadCsv(sanitizedData);\n      },\n      getConfig: () => {\n        return JSON.stringify({\n          type: ChartType.Honeycomb,\n          ...consumerConfig,\n        });\n      },\n    };\n  });\n\n  return (\n    <div\n      {...behavioralTrackingProps}\n      ref={rootRef}\n      style={{ ...costumerStyle, width: chartWidth, height: chartHeight }}\n      className={clsx(defaultChartSize, customerClassNames)}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-dt-component={COMPONENT_NAME}\n      aria-label={HONEYCOMB_CHART_ARIA_LABEL}\n      role=\"img\"\n    >\n      <HoneycombLoadingContext.Provider value={loading}>\n        <HoneycombConfigurationProvider config={config}>\n          <HoneycombShapeContext.Provider value={config.shape}>\n            <HoneycombColorSchemeContext.Provider value={config.colorScheme}>\n              <HoneycombTruncationMode.Provider value={config.truncationMode}>\n                <HoneycombFormatterContext.Provider value={formatterContext}>\n                  <HoneycombLabelsDisplayContext.Provider\n                    value={config.labelsDisplay}\n                  >\n                    <HoneycombTextSizeContext.Provider value={config.textSize}>\n                      <HoneycombFilteredDataProvider\n                        data={sanitizedData}\n                        config={config}\n                      >\n                        <HoneycombDatasetTypeProvider>\n                          <HoneycombBaseScaleProvider>\n                            <ChartSeriesActionContext.Provider\n                              value={{\n                                // We need a cast here as the provider expects unknown and the\n                                // react context will not be able to carry the generic anyways.\n                                chartSeriesActions: seriesActions as (\n                                  series: unknown,\n                                ) => ReactElement<PropsWithChildren>,\n                              }}\n                            >\n                              <HoneycombStoreProvider>\n                                <HoneycombMetadataProvider>\n                                  <HoneycombChartLayout {...props} />\n                                </HoneycombMetadataProvider>\n                              </HoneycombStoreProvider>\n                            </ChartSeriesActionContext.Provider>\n                          </HoneycombBaseScaleProvider>\n                        </HoneycombDatasetTypeProvider>\n                      </HoneycombFilteredDataProvider>\n                    </HoneycombTextSizeContext.Provider>\n                  </HoneycombLabelsDisplayContext.Provider>\n                </HoneycombFormatterContext.Provider>\n              </HoneycombTruncationMode.Provider>\n            </HoneycombColorSchemeContext.Provider>\n          </HoneycombShapeContext.Provider>\n        </HoneycombConfigurationProvider>\n      </HoneycombLoadingContext.Provider>\n    </div>\n  );\n});\n\n(\n  _HoneycombChart as typeof _HoneycombChart & { displayName: string }\n).displayName = DISPLAY_NAME;\n\n/**\n * The `HoneycombChart` displays data in a grid of tiles (shaped as hexagons,\n * squares, or circles), one tile per datapoint.\n *\n * Provide `data` in the unified `ChartData` format \u2014 a flat array of objects.\n * The tile value is resolved through the `valueAccessor` prop, which defaults\n * to `\"value\"` and supports dot-notation for nested fields (e.g.\n * `\"metrics.responseTime\"`). Values can be numeric (numerical hive) or string\n * (categorical hive). Coloring is controlled with the `colorPalette` prop.\n *\n * @see {@link HoneycombChartAccessorDataProps}\n * @public\n */\nexport const HoneycombChart = Object.assign(_HoneycombChart, {\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  Legend: HoneycombLegend,\n  Intent,\n  ColorRule,\n  Toolbar,\n  DownloadCSV: HoneycombChartDownloadCSVSlot,\n  Tooltip,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/honeycomb/HoneycombChart.sty.js

@@ -1,5 +1,5 @@
 import "./HoneycombChart.css";
-var graphContainer = "_p8cogi0-3-10-1";
+var graphContainer = "_p8cogi0-3-11-0";
 export {
   graphContainer
 };

package/esm/charts/honeycomb/HoneycombChart.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/honeycomb/HoneycombChart.css.ts"],
-  "sourcesContent": ["import './HoneycombChart.css';\nexport var graphContainer = '_p8cogi0-3-10-1';"],
+  "sourcesContent": ["import './HoneycombChart.css';\nexport var graphContainer = '_p8cogi0-3-11-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iBAAiB;",
   "names": []
 }

package/esm/charts/honeycomb/components/HiveOverlay.css

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

package/esm/charts/honeycomb/components/HiveOverlay.sty.js

@@ -1,5 +1,5 @@
 import "./HiveOverlay.css";
-var overlay = "_lmrhfg0-3-10-1";
+var overlay = "_lmrhfg0-3-11-0";
 export {
   overlay
 };

package/esm/charts/honeycomb/components/HiveOverlay.sty.js.map

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

package/esm/charts/honeycomb/components/canvas/HiveCanvasLayout.css

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

package/esm/charts/honeycomb/components/canvas/HiveCanvasLayout.sty.js

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

package/esm/charts/honeycomb/components/canvas/HiveCanvasLayout.sty.js.map

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

package/esm/charts/index.js

@@ -114,6 +114,7 @@ import {
   DonutChartConfig,
   PieChartConfig
 } from "./pie/context/ChartConfigContext.js";
+import { SankeyChart } from "./sankey-chart/SankeyChartRoot.js";
 import { SingleValue } from "./single-value/SingleValue.js";
 import { SingleValueGrid } from "./single-value-grid/SingleValueGrid.js";
 import { SingleValueConfig } from "./single-value/hooks/use-single-value-config.js";
@@ -149,6 +150,8 @@ import { GaugeChart } from "./gauge/GaugeChart.js";
 import { GaugeChartConfig } from "./gauge/contexts/GaugeChartConfigContext.js";
 import { colorPaletteMap } from "./core/types/color-palettes-definitions.js";
 import { automaticColoringMap } from "./core/types/color-palettes-definitions.js";
+import { FlameChart } from "./flame/flame-chart/FlameChart.js";
+import { FlameGraph } from "./flame/flame-graph/FlameGraph.js";
 export {
   AnnotationsChart,
   AnnotationsChartConfig,
@@ -205,6 +208,8 @@ export {
   ErrorState as _ErrorState,
   EventItem as _EventItem,
   SIXTY_FPS as _FPS,
+  FlameChart as _FlameChart,
+  FlameGraph as _FlameGraph,
   GEO_DEFAULTS as _GEO_DEFAULTS,
   GeoItem as _GeoItem,
   InteractionsOverlay as _InteractionsOverlay,
@@ -216,6 +221,7 @@ export {
   OverlayTooltip as _OverlayTooltip,
   TooltipProvider as _OverlayTooltipProvider,
   RangeLegend as _RangeLegend,
+  SankeyChart as _SankeyChart,
   SeriesItem as _SeriesItem,
   TextHeader as _TextHeader,
   ThresholdBar as _ThresholdBar,