@dynatrace/strato-components 3.10.4 → 3.11.1

package/esm/charts/xy-chart/components/toolbar/PanButton.js

@@ -1,15 +1,16 @@
-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 { allowWhenKeyIsEnter } from "./utils.js";
+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 { useSynchronizedSelection } from "../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.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 { getKeyShortcutByAgent } from "../../../core/utils/get-key-shortcut-by-agent.js";
 import { XYCHART_MESSAGES } from "../../messages/messages.js";
 import { reduceInteractionMode } from "../../store/reduce-interaction-mode.js";
 import { reduceExploreCancelAll } from "../../store/reducer-explorer.js";
@@ -32,16 +33,31 @@ const PanButton = () => {
     setState(reduceExploreCancelAll);
     setState(reduceInteractionMode(INTERACTION_MODE.Pan));
   };
-  const tooltipKeyShortcut = `${getKeyShortcutByAgent(
-    "ALT"
-  )} ${intl.formatMessage(TOOLBAR_MESSAGES.or)} ${KeyboardControls.KEYBOARD_PAN_MODE_SHORTCUT_ALTERNATIVE}`;
   return /* @__PURE__ */ jsx(
     ChartToolbarRenderer.Control,
     {
       ref: panButtonRef,
       prefixIcon: /* @__PURE__ */ jsx(PanHorizontalIcon, {}),
       tooltipText: intl.formatMessage(XYCHART_MESSAGES.zoomModePan),
-      tooltipKeyShortcut,
+      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
+          }
+        )
+      ] }),
       selected: isSelected,
       onKeyDown: allowWhenKeyIsEnter(action),
       onClick: action,

package/esm/charts/xy-chart/components/toolbar/PanButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/toolbar/PanButton.tsx"],
-  "sourcesContent": ["import { useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { PanHorizontalIcon } from '@dynatrace/strato-icons';\n\nimport { allowWhenKeyIsEnter } from './utils.js';\nimport { KeyboardControls } from '../../../core/components/interactions-overlay/constants.js';\nimport { INTERACTION_MODE } from '../../../core/components/interactions-overlay/types.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.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 { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { reduceInteractionMode } from '../../store/reduce-interaction-mode.js';\nimport { reduceExploreCancelAll } from '../../store/reducer-explorer.js';\nimport {\n  useInteractionModeState,\n  useSetState,\n  useZoomState,\n} from '../../store/selectors.js';\n\nexport const PanButton = () => {\n  const setState = useSetState();\n  const panButtonRef = useRef<HTMLButtonElement>(null);\n  const intl = useIntl();\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Pan);\n  const { zoomOutEnabled } = useZoomState();\n  const interactionMode = useInteractionModeState();\n  const { resetSelectionState } = useSynchronizedSelection();\n\n  const isSelected = interactionMode === INTERACTION_MODE.Pan;\n\n  const action = () => {\n    resetSelectionState?.();\n    setState(reduceExploreCancelAll);\n    setState(reduceInteractionMode(INTERACTION_MODE.Pan));\n  };\n\n  const tooltipKeyShortcut = `${getKeyShortcutByAgent(\n    'ALT',\n  )} ${intl.formatMessage(TOOLBAR_MESSAGES.or)} ${\n    KeyboardControls.KEYBOARD_PAN_MODE_SHORTCUT_ALTERNATIVE\n  }`;\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={panButtonRef}\n      prefixIcon={<PanHorizontalIcon />}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomModePan)}\n      tooltipKeyShortcut={tooltipKeyShortcut}\n      selected={isSelected}\n      onKeyDown={allowWhenKeyIsEnter(action)}\n      onClick={action}\n      tabIndex={tabIndex}\n      disabled={!zoomOutEnabled}\n      placement=\"menu\"\n      data-dt-name=\"ToolbarPanMode\"\n    />\n  );\n};\n\nPanButton['displayName'] = 'PanButton';\n"],
-  "mappings": "AAgDkB;AAhDlB,SAAS,cAAc;AACvB,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAElC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,YAAY,MAAM;AAC7B,QAAM,WAAW,YAAY;AAC7B,QAAM,eAAe,OAA0B,IAAI;AACnD,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,uBAAuB,iBAAiB,GAAG;AAC5D,QAAM,EAAE,eAAe,IAAI,aAAa;AACxC,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AAEzD,QAAM,aAAa,oBAAoB,iBAAiB;AAExD,QAAM,SAAS,MAAM;AACnB,0BAAsB;AACtB,aAAS,sBAAsB;AAC/B,aAAS,sBAAsB,iBAAiB,GAAG,CAAC;AAAA,EACtD;AAEA,QAAM,qBAAqB,GAAG;AAAA,IAC5B;AAAA,EACF,CAAC,IAAI,KAAK,cAAc,iBAAiB,EAAE,CAAC,IAC1C,iBAAiB,sCACnB;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,qBAAkB;AAAA,MAC/B,aAAa,KAAK,cAAc,iBAAiB,WAAW;AAAA,MAC5D;AAAA,MACA,UAAU;AAAA,MACV,WAAW,oBAAoB,MAAM;AAAA,MACrC,SAAS;AAAA,MACT;AAAA,MACA,UAAU,CAAC;AAAA,MACX,WAAU;AAAA,MACV,gBAAa;AAAA;AAAA,EACf;AAEJ;AAEA,UAAU,aAAa,IAAI;",
+  "sourcesContent": ["import { useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { PanHorizontalIcon } from '@dynatrace/strato-icons';\n\nimport { allowWhenKeyIsEnter } from './utils.js';\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 { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.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 { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { reduceInteractionMode } from '../../store/reduce-interaction-mode.js';\nimport { reduceExploreCancelAll } from '../../store/reducer-explorer.js';\nimport {\n  useInteractionModeState,\n  useSetState,\n  useZoomState,\n} from '../../store/selectors.js';\n\nexport const PanButton = () => {\n  const setState = useSetState();\n  const panButtonRef = useRef<HTMLButtonElement>(null);\n  const intl = useIntl();\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Pan);\n  const { zoomOutEnabled } = useZoomState();\n  const interactionMode = useInteractionModeState();\n  const { resetSelectionState } = useSynchronizedSelection();\n\n  const isSelected = interactionMode === INTERACTION_MODE.Pan;\n\n  const action = () => {\n    resetSelectionState?.();\n    setState(reduceExploreCancelAll);\n    setState(reduceInteractionMode(INTERACTION_MODE.Pan));\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={panButtonRef}\n      prefixIcon={<PanHorizontalIcon />}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomModePan)}\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      selected={isSelected}\n      onKeyDown={allowWhenKeyIsEnter(action)}\n      onClick={action}\n      tabIndex={tabIndex}\n      disabled={!zoomOutEnabled}\n      placement=\"menu\"\n      data-dt-name=\"ToolbarPanMode\"\n    />\n  );\n};\n\nPanButton['displayName'] = 'PanButton';\n"],
+  "mappings": "AA2CkB,SAGV,UAHU,KAGV,YAHU;AA3ClB,SAAS,cAAc;AACvB,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAElC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,YAAY,MAAM;AAC7B,QAAM,WAAW,YAAY;AAC7B,QAAM,eAAe,OAA0B,IAAI;AACnD,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,uBAAuB,iBAAiB,GAAG;AAC5D,QAAM,EAAE,eAAe,IAAI,aAAa;AACxC,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AAEzD,QAAM,aAAa,oBAAoB,iBAAiB;AAExD,QAAM,SAAS,MAAM;AACnB,0BAAsB;AACtB,aAAS,sBAAsB;AAC/B,aAAS,sBAAsB,iBAAiB,GAAG,CAAC;AAAA,EACtD;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,qBAAkB;AAAA,MAC/B,aAAa,KAAK,cAAc,iBAAiB,WAAW;AAAA,MAC5D,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,MAEF,UAAU;AAAA,MACV,WAAW,oBAAoB,MAAM;AAAA,MACrC,SAAS;AAAA,MACT;AAAA,MACA,UAAU,CAAC;AAAA,MACX,WAAU;AAAA,MACV,gBAAa;AAAA;AAAA,EACf;AAEJ;AAEA,UAAU,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/toolbar/XYChartToolbar.js

@@ -34,6 +34,7 @@ const XYChartToolbar = ({
   const selectionAreaRef = useXYChartSelectionAreaRef();
   const isZoomEnabled = axesMetadata.isZoomEnabled;
   const isPanEnabled = axesMetadata.isPanEnabled;
+  const shouldHideInteractionControls = !isZoomEnabled && !isPanEnabled;
   const exploreBtnPlace = isZoomEnabled || isPanEnabled ? "menu" : "auto";
   const isDownloadEnabled = true;
   const initialA11yState = getA11yToolbarConfig({
@@ -44,7 +45,7 @@ const XYChartToolbar = ({
   });
   const menuIcon = getMenuTriggerIcon(interactionMode, isZoomEnabled);
   const menuLabel = !isPanEnabled && !isZoomEnabled ? intl.formatMessage(XYCHART_MESSAGES.zoomModeExplore) : void 0;
-  const menuDisplayMode = getMenuTriggerDisplayMode({
+  const menuDisplayMode = shouldHideInteractionControls ? "never" : getMenuTriggerDisplayMode({
     isPanEnabled,
     isZoomEnabled,
     isDownloadEnabled
@@ -69,12 +70,14 @@ const XYChartToolbar = ({
       handlerRef,
       placement: placement ?? defaultToolbar.placement,
       draggable: true,
+      removeDragHandle: shouldHideInteractionControls,
       collapsed,
       initialA11yState,
       zIndex: ChartOverlaysElevation.toolbar,
       onMouseEnter,
       onMouseLeave,
       menuIcon,
+      showMenuDivider: !shouldHideInteractionControls,
       menuTriggerLabel: menuLabel,
       menuDisplayMode,
       isDownloadEnabled: showMenuToolbarButton,
@@ -84,13 +87,18 @@ const XYChartToolbar = ({
       ...behaviorTrackingProps,
       children: [
         /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(ExploreButton, { placement: exploreBtnPlace }),
+          !shouldHideInteractionControls && /* @__PURE__ */ jsx(ExploreButton, { placement: exploreBtnPlace }),
           isZoomEnabled && /* @__PURE__ */ jsx(ZoomModeButton, {}),
           isPanEnabled && /* @__PURE__ */ jsx(PanButton, {})
         ] }),
         isZoomEnabled && /* @__PURE__ */ jsx(ZoomInOutButtons, {}),
         isZoomEnabled && /* @__PURE__ */ jsx(ResetButton, {}),
-        showDefaultToolbarDownloadButton && /* @__PURE__ */ jsx(DownloadDataButton, {})
+        showDefaultToolbarDownloadButton && /* @__PURE__ */ jsx(
+          DownloadDataButton,
+          {
+            divider: shouldHideInteractionControls ? void 0 : "left"
+          }
+        )
       ]
     }
   ) : null;

package/esm/charts/xy-chart/components/toolbar/XYChartToolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/toolbar/XYChartToolbar.tsx"],
-  "sourcesContent": ["import type { MouseEvent as ReactMouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DownloadDataButton } from './DownloadDataButton.js';\nimport { ExploreButton } from './ExploreButton.js';\nimport { PanButton } from './PanButton.js';\nimport { ResetButton } from './ResetButton.js';\nimport { ZoomInOutButtons } from './ZoomInOutButtons.js';\nimport { ZoomModeButton } from './ZoomModeButton.js';\nimport { useBehavioralTrackingProps as _useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport type { ChartToolbarRendererProps } from '../../../core/components/toolbar/types.js';\nimport { getMenuTriggerDisplayMode } from '../../../core/components/toolbar/utils/get-menu-trigger-display-mode.js';\nimport { getMenuTriggerIcon } from '../../../core/components/toolbar/utils/get-menu-trigger-icon.js';\nimport { ChartOverlaysElevation } from '../../../core/constants.js';\nimport type { ToolbarPlacement } from '../../../core/types/toolbar.js';\nimport { getA11yToolbarConfig } from '../../../core/utils/zoom.js';\nimport { defaultToolbar } from '../../constants/defaults.js';\nimport { useDownload } from '../../hooks/useDownload.js';\nimport { useToolbar } from '../../hooks/useToolbar.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartSelectionAreaRef } from '../../hooks/useXYChartSelectionAreaRef.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { useInteractionModeState } from '../../store/selectors.js';\nimport { buildAndDownloadCsv } from '../../utils/build-and-download-csv.js';\n\ntype XYChartToolbarProps = {\n  onMouseEnter?: (event?: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n  onMouseLeave?: (react?: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n  handlerRef?: ChartToolbarRendererProps['handlerRef'];\n};\n\nexport const XYChartToolbar = ({\n  onMouseEnter,\n  onMouseLeave,\n  handlerRef,\n}: XYChartToolbarProps) => {\n  const toolbarContext = useToolbar();\n  const { collapsed, placement, hidden, intents } = toolbarContext;\n  const { downloadDataCallback } = useDownload();\n  const interactionMode = useInteractionModeState();\n  const { axesMetadata } = useXYChartData();\n  const intl = useIntl();\n  const selectionAreaRef = useXYChartSelectionAreaRef();\n\n  const isZoomEnabled = axesMetadata.isZoomEnabled;\n  const isPanEnabled = axesMetadata.isPanEnabled;\n  const exploreBtnPlace = isZoomEnabled || isPanEnabled ? 'menu' : 'auto';\n  const isDownloadEnabled = true;\n\n  const initialA11yState = getA11yToolbarConfig({\n    zoom: { enabled: isZoomEnabled },\n    pan: { enabled: isPanEnabled },\n    download: { enabled: isDownloadEnabled },\n    intent: !!intents,\n  });\n\n  const menuIcon = getMenuTriggerIcon(interactionMode, isZoomEnabled);\n\n  const menuLabel =\n    !isPanEnabled && !isZoomEnabled\n      ? intl.formatMessage(XYCHART_MESSAGES.zoomModeExplore)\n      : undefined;\n\n  const menuDisplayMode = getMenuTriggerDisplayMode({\n    isPanEnabled,\n    isZoomEnabled,\n    isDownloadEnabled,\n  });\n\n  const { seriesWithDatapoints, datapointMetadataMap, seriesToMetadata } =\n    useXYChartData();\n\n  const handleDownloadDataToolbar = () => {\n    buildAndDownloadCsv(\n      seriesWithDatapoints,\n      seriesToMetadata,\n      datapointMetadataMap,\n      downloadDataCallback,\n    );\n  };\n\n  const showDefaultToolbarDownloadButton = isDownloadEnabled && !intents;\n  const showMenuToolbarButton = isDownloadEnabled && !!intents?.length;\n\n  const onClose = () =>\n    selectionAreaRef ? selectionAreaRef.current?.focus() : undefined;\n\n  const behaviorTrackingProps = _useBehavioralTrackingProps(toolbarContext)[0];\n\n  return !hidden ? (\n    <ChartToolbarRenderer\n      visibleWhenMouseInBounds\n      handlerRef={handlerRef}\n      placement={placement ?? (defaultToolbar.placement as ToolbarPlacement)}\n      draggable={true}\n      collapsed={collapsed}\n      initialA11yState={initialA11yState}\n      zIndex={ChartOverlaysElevation.toolbar}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      menuIcon={menuIcon}\n      menuTriggerLabel={menuLabel}\n      menuDisplayMode={menuDisplayMode}\n      isDownloadEnabled={showMenuToolbarButton}\n      intents={intents}\n      handleDownloadDataToolbar={handleDownloadDataToolbar}\n      onClose={onClose}\n      {...behaviorTrackingProps}\n    >\n      <>\n        <ExploreButton placement={exploreBtnPlace} />\n        {isZoomEnabled && <ZoomModeButton />}\n        {isPanEnabled && <PanButton />}\n      </>\n      {isZoomEnabled && <ZoomInOutButtons />}\n      {isZoomEnabled && <ResetButton />}\n      {showDefaultToolbarDownloadButton && <DownloadDataButton />}\n    </ChartToolbarRenderer>\n  ) : null;\n};\n\nXYChartToolbar['displayName'] = 'XYChartToolbar';\n"],
-  "mappings": "AA8GM,mBACE,KADF;AA7GN,SAAS,eAAe;AAExB,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,8BAA8B,mCAAmC;AAC1E,SAAS,4BAA4B;AAErC,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;AAEvC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,kCAAkC;AAC3C,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AAQ7B,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,iBAAiB,WAAW;AAClC,QAAM,EAAE,WAAW,WAAW,QAAQ,QAAQ,IAAI;AAClD,QAAM,EAAE,qBAAqB,IAAI,YAAY;AAC7C,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,EAAE,aAAa,IAAI,eAAe;AACxC,QAAM,OAAO,QAAQ;AACrB,QAAM,mBAAmB,2BAA2B;AAEpD,QAAM,gBAAgB,aAAa;AACnC,QAAM,eAAe,aAAa;AAClC,QAAM,kBAAkB,iBAAiB,eAAe,SAAS;AACjE,QAAM,oBAAoB;AAE1B,QAAM,mBAAmB,qBAAqB;AAAA,IAC5C,MAAM,EAAE,SAAS,cAAc;AAAA,IAC/B,KAAK,EAAE,SAAS,aAAa;AAAA,IAC7B,UAAU,EAAE,SAAS,kBAAkB;AAAA,IACvC,QAAQ,CAAC,CAAC;AAAA,EACZ,CAAC;AAED,QAAM,WAAW,mBAAmB,iBAAiB,aAAa;AAElE,QAAM,YACJ,CAAC,gBAAgB,CAAC,gBACd,KAAK,cAAc,iBAAiB,eAAe,IACnD;AAEN,QAAM,kBAAkB,0BAA0B;AAAA,IAChD;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,sBAAsB,sBAAsB,iBAAiB,IACnE,eAAe;AAEjB,QAAM,4BAA4B,MAAM;AACtC;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,mCAAmC,qBAAqB,CAAC;AAC/D,QAAM,wBAAwB,qBAAqB,CAAC,CAAC,SAAS;AAE9D,QAAM,UAAU,MACd,mBAAmB,iBAAiB,SAAS,MAAM,IAAI;AAEzD,QAAM,wBAAwB,4BAA4B,cAAc,EAAE,CAAC;AAE3E,SAAO,CAAC,SACN;AAAA,IAAC;AAAA;AAAA,MACC,0BAAwB;AAAA,MACxB;AAAA,MACA,WAAW,aAAc,eAAe;AAAA,MACxC,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,QAAQ,uBAAuB;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,MAClB;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,yCACE;AAAA,8BAAC,iBAAc,WAAW,iBAAiB;AAAA,UAC1C,iBAAiB,oBAAC,kBAAe;AAAA,UACjC,gBAAgB,oBAAC,aAAU;AAAA,WAC9B;AAAA,QACC,iBAAiB,oBAAC,oBAAiB;AAAA,QACnC,iBAAiB,oBAAC,eAAY;AAAA,QAC9B,oCAAoC,oBAAC,sBAAmB;AAAA;AAAA;AAAA,EAC3D,IACE;AACN;AAEA,eAAe,aAAa,IAAI;",
+  "sourcesContent": ["import type { MouseEvent as ReactMouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DownloadDataButton } from './DownloadDataButton.js';\nimport { ExploreButton } from './ExploreButton.js';\nimport { PanButton } from './PanButton.js';\nimport { ResetButton } from './ResetButton.js';\nimport { ZoomInOutButtons } from './ZoomInOutButtons.js';\nimport { ZoomModeButton } from './ZoomModeButton.js';\nimport { useBehavioralTrackingProps as _useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport type { ChartToolbarRendererProps } from '../../../core/components/toolbar/types.js';\nimport { getMenuTriggerDisplayMode } from '../../../core/components/toolbar/utils/get-menu-trigger-display-mode.js';\nimport { getMenuTriggerIcon } from '../../../core/components/toolbar/utils/get-menu-trigger-icon.js';\nimport { ChartOverlaysElevation } from '../../../core/constants.js';\nimport type { ToolbarPlacement } from '../../../core/types/toolbar.js';\nimport { getA11yToolbarConfig } from '../../../core/utils/zoom.js';\nimport { defaultToolbar } from '../../constants/defaults.js';\nimport { useDownload } from '../../hooks/useDownload.js';\nimport { useToolbar } from '../../hooks/useToolbar.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartSelectionAreaRef } from '../../hooks/useXYChartSelectionAreaRef.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { useInteractionModeState } from '../../store/selectors.js';\nimport { buildAndDownloadCsv } from '../../utils/build-and-download-csv.js';\n\ntype XYChartToolbarProps = {\n  onMouseEnter?: (event?: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n  onMouseLeave?: (react?: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n  handlerRef?: ChartToolbarRendererProps['handlerRef'];\n};\n\nexport const XYChartToolbar = ({\n  onMouseEnter,\n  onMouseLeave,\n  handlerRef,\n}: XYChartToolbarProps) => {\n  const toolbarContext = useToolbar();\n  const { collapsed, placement, hidden, intents } = toolbarContext;\n  const { downloadDataCallback } = useDownload();\n  const interactionMode = useInteractionModeState();\n  const { axesMetadata } = useXYChartData();\n  const intl = useIntl();\n  const selectionAreaRef = useXYChartSelectionAreaRef();\n\n  const isZoomEnabled = axesMetadata.isZoomEnabled;\n  const isPanEnabled = axesMetadata.isPanEnabled;\n  const shouldHideInteractionControls = !isZoomEnabled && !isPanEnabled;\n  const exploreBtnPlace = isZoomEnabled || isPanEnabled ? 'menu' : 'auto';\n  const isDownloadEnabled = true;\n\n  const initialA11yState = getA11yToolbarConfig({\n    zoom: { enabled: isZoomEnabled },\n    pan: { enabled: isPanEnabled },\n    download: { enabled: isDownloadEnabled },\n    intent: !!intents,\n  });\n\n  const menuIcon = getMenuTriggerIcon(interactionMode, isZoomEnabled);\n\n  const menuLabel =\n    !isPanEnabled && !isZoomEnabled\n      ? intl.formatMessage(XYCHART_MESSAGES.zoomModeExplore)\n      : undefined;\n\n  const menuDisplayMode = shouldHideInteractionControls\n    ? 'never'\n    : getMenuTriggerDisplayMode({\n        isPanEnabled,\n        isZoomEnabled,\n        isDownloadEnabled,\n      });\n\n  const { seriesWithDatapoints, datapointMetadataMap, seriesToMetadata } =\n    useXYChartData();\n\n  const handleDownloadDataToolbar = () => {\n    buildAndDownloadCsv(\n      seriesWithDatapoints,\n      seriesToMetadata,\n      datapointMetadataMap,\n      downloadDataCallback,\n    );\n  };\n\n  const showDefaultToolbarDownloadButton = isDownloadEnabled && !intents;\n  const showMenuToolbarButton = isDownloadEnabled && !!intents?.length;\n\n  const onClose = () =>\n    selectionAreaRef ? selectionAreaRef.current?.focus() : undefined;\n\n  const behaviorTrackingProps = _useBehavioralTrackingProps(toolbarContext)[0];\n\n  return !hidden ? (\n    <ChartToolbarRenderer\n      visibleWhenMouseInBounds\n      handlerRef={handlerRef}\n      placement={placement ?? (defaultToolbar.placement as ToolbarPlacement)}\n      draggable={true}\n      removeDragHandle={shouldHideInteractionControls}\n      collapsed={collapsed}\n      initialA11yState={initialA11yState}\n      zIndex={ChartOverlaysElevation.toolbar}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      menuIcon={menuIcon}\n      showMenuDivider={!shouldHideInteractionControls}\n      menuTriggerLabel={menuLabel}\n      menuDisplayMode={menuDisplayMode}\n      isDownloadEnabled={showMenuToolbarButton}\n      intents={intents}\n      handleDownloadDataToolbar={handleDownloadDataToolbar}\n      onClose={onClose}\n      {...behaviorTrackingProps}\n    >\n      <>\n        {!shouldHideInteractionControls && (\n          <ExploreButton placement={exploreBtnPlace} />\n        )}\n        {isZoomEnabled && <ZoomModeButton />}\n        {isPanEnabled && <PanButton />}\n      </>\n      {isZoomEnabled && <ZoomInOutButtons />}\n      {isZoomEnabled && <ResetButton />}\n      {showDefaultToolbarDownloadButton && (\n        <DownloadDataButton\n          divider={shouldHideInteractionControls ? undefined : 'left'}\n        />\n      )}\n    </ChartToolbarRenderer>\n  ) : null;\n};\n\nXYChartToolbar['displayName'] = 'XYChartToolbar';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/xy-chart/components/toolbar/ZoomInOutButtons.js

@@ -8,7 +8,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 { useXYChartData } from "../../hooks/useXYChartData.js";
 import { XYCHART_MESSAGES } from "../../messages/messages.js";
 import { useZoomState } from "../../store/selectors.js";
@@ -29,8 +29,12 @@ const ZoomInOutButtons = () => {
   const zoomOutAction = () => {
     triggerZoom(ZOOM_CHANGE_TYPE.ZoomOut);
   };
-  const zoomInShortcut = getKeyShortcutByAgent("CONTROL") + `+${intl.formatMessage(XYCHART_MESSAGES.zoomActionArrowUp)}`;
-  const zoomOutShortcut = getKeyShortcutByAgent("CONTROL") + `+${intl.formatMessage(XYCHART_MESSAGES.zoomActionArrowDown)}`;
+  const zoomInShortcut = `${getPrimaryModifierKey()}+${intl.formatMessage(
+    XYCHART_MESSAGES.zoomActionArrowUp
+  )}`;
+  const zoomOutShortcut = `${getPrimaryModifierKey()}+${intl.formatMessage(
+    XYCHART_MESSAGES.zoomActionArrowDown
+  )}`;
   const controlStyle = { marginRight: Spacings.Size2 };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(

package/esm/charts/xy-chart/components/toolbar/ZoomInOutButtons.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/toolbar/ZoomInOutButtons.tsx"],
-  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport { ZoomInIcon, ZoomOutIcon } from '@dynatrace/strato-icons';\n\nimport { allowWhenKeyIsEnter } from './utils.js';\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 { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { useZoomState } from '../../store/selectors.js';\nimport { useApplyZoomDelta } from '../overlay/hooks/useApplyZoomDelta.js';\n\nexport const ZoomInOutButtons = () => {\n  const tabIndexIn = useA11yToolbarTabIndex(ZOOM_ACTIONS.ZoomIn);\n  const tabIndexOut = useA11yToolbarTabIndex(ZOOM_ACTIONS.ZoomOut);\n  const { zoomInEnabled: zoomInState, zoomOutEnabled: zoomOutState } =\n    useZoomState();\n  const { axesMetadata } = useXYChartData();\n\n  const [zoomInEnabled, zoomOutEnabled] = axesMetadata.isZoomEnabled\n    ? [zoomInState, zoomOutState]\n    : [false, false];\n\n  const intl = useIntl();\n\n  const { width } = useGridPlotSize();\n  const applyZoom = useApplyZoomDelta();\n  const triggerZoom = useTriggerZoom(width, applyZoom);\n\n  const zoomInAction = () => {\n    triggerZoom(ZOOM_CHANGE_TYPE.ZoomIn);\n  };\n  const zoomOutAction = () => {\n    triggerZoom(ZOOM_CHANGE_TYPE.ZoomOut);\n  };\n\n  const zoomInShortcut =\n    getKeyShortcutByAgent('CONTROL') +\n    `+${intl.formatMessage(XYCHART_MESSAGES.zoomActionArrowUp)}`;\n  const zoomOutShortcut =\n    getKeyShortcutByAgent('CONTROL') +\n    `+${intl.formatMessage(XYCHART_MESSAGES.zoomActionArrowDown)}`;\n\n  const controlStyle = { marginRight: Spacings.Size2 };\n\n  return (\n    <>\n      <ChartToolbarRenderer.Control\n        tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomIn)}\n        prefixIcon={<ZoomInIcon />}\n        tooltipKeyShortcut={zoomInShortcut}\n        onKeyDown={allowWhenKeyIsEnter(zoomInAction)}\n        onClick={zoomInAction}\n        tabIndex={tabIndexIn}\n        disabled={!zoomInEnabled}\n        divider=\"left\"\n        style={controlStyle}\n        data-dt-name=\"ToolbarZoomIn\"\n      />\n      <ChartToolbarRenderer.Control\n        prefixIcon={<ZoomOutIcon />}\n        tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomOut)}\n        tooltipKeyShortcut={zoomOutShortcut}\n        onKeyDown={allowWhenKeyIsEnter(zoomOutAction)}\n        onClick={zoomOutAction}\n        tabIndex={tabIndexOut}\n        disabled={!zoomOutEnabled}\n        style={controlStyle}\n        data-dt-name=\"ToolbarZoomOut\"\n      />\n    </>\n  );\n};\n\nZoomInOutButtons['displayName'] = 'ZoomInOutButtons';\n"],
-  "mappings": "AAmDI,mBAGgB,KAHhB;AAnDJ,SAAS,eAAe;AAExB,OAAO,cAAc;AACrB,SAAS,YAAY,mBAAmB;AAExC,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,8BAA8B;AACvC,SAAS,cAAc,wBAAwB;AAC/C,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAE3B,MAAM,mBAAmB,MAAM;AACpC,QAAM,aAAa,uBAAuB,aAAa,MAAM;AAC7D,QAAM,cAAc,uBAAuB,aAAa,OAAO;AAC/D,QAAM,EAAE,eAAe,aAAa,gBAAgB,aAAa,IAC/D,aAAa;AACf,QAAM,EAAE,aAAa,IAAI,eAAe;AAExC,QAAM,CAAC,eAAe,cAAc,IAAI,aAAa,gBACjD,CAAC,aAAa,YAAY,IAC1B,CAAC,OAAO,KAAK;AAEjB,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,YAAY,kBAAkB;AACpC,QAAM,cAAc,eAAe,OAAO,SAAS;AAEnD,QAAM,eAAe,MAAM;AACzB,gBAAY,iBAAiB,MAAM;AAAA,EACrC;AACA,QAAM,gBAAgB,MAAM;AAC1B,gBAAY,iBAAiB,OAAO;AAAA,EACtC;AAEA,QAAM,iBACJ,sBAAsB,SAAS,IAC/B,IAAI,KAAK,cAAc,iBAAiB,iBAAiB,CAAC;AAC5D,QAAM,kBACJ,sBAAsB,SAAS,IAC/B,IAAI,KAAK,cAAc,iBAAiB,mBAAmB,CAAC;AAE9D,QAAM,eAAe,EAAE,aAAa,SAAS,MAAM;AAEnD,SACE,iCACE;AAAA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,aAAa,KAAK,cAAc,iBAAiB,MAAM;AAAA,QACvD,YAAY,oBAAC,cAAW;AAAA,QACxB,oBAAoB;AAAA,QACpB,WAAW,oBAAoB,YAAY;AAAA,QAC3C,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU,CAAC;AAAA,QACX,SAAQ;AAAA,QACR,OAAO;AAAA,QACP,gBAAa;AAAA;AAAA,IACf;AAAA,IACA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,YAAY,oBAAC,eAAY;AAAA,QACzB,aAAa,KAAK,cAAc,iBAAiB,OAAO;AAAA,QACxD,oBAAoB;AAAA,QACpB,WAAW,oBAAoB,aAAa;AAAA,QAC5C,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU,CAAC;AAAA,QACX,OAAO;AAAA,QACP,gBAAa;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;AAEA,iBAAiB,aAAa,IAAI;",
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport { ZoomInIcon, ZoomOutIcon } from '@dynatrace/strato-icons';\n\nimport { allowWhenKeyIsEnter } from './utils.js';\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 { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { useZoomState } from '../../store/selectors.js';\nimport { useApplyZoomDelta } from '../overlay/hooks/useApplyZoomDelta.js';\n\nexport const ZoomInOutButtons = () => {\n  const tabIndexIn = useA11yToolbarTabIndex(ZOOM_ACTIONS.ZoomIn);\n  const tabIndexOut = useA11yToolbarTabIndex(ZOOM_ACTIONS.ZoomOut);\n  const { zoomInEnabled: zoomInState, zoomOutEnabled: zoomOutState } =\n    useZoomState();\n  const { axesMetadata } = useXYChartData();\n\n  const [zoomInEnabled, zoomOutEnabled] = axesMetadata.isZoomEnabled\n    ? [zoomInState, zoomOutState]\n    : [false, false];\n\n  const intl = useIntl();\n\n  const { width } = useGridPlotSize();\n  const applyZoom = useApplyZoomDelta();\n  const triggerZoom = useTriggerZoom(width, applyZoom);\n\n  const zoomInAction = () => {\n    triggerZoom(ZOOM_CHANGE_TYPE.ZoomIn);\n  };\n  const zoomOutAction = () => {\n    triggerZoom(ZOOM_CHANGE_TYPE.ZoomOut);\n  };\n\n  const zoomInShortcut = `${getPrimaryModifierKey()}+${intl.formatMessage(\n    XYCHART_MESSAGES.zoomActionArrowUp,\n  )}`;\n  const zoomOutShortcut = `${getPrimaryModifierKey()}+${intl.formatMessage(\n    XYCHART_MESSAGES.zoomActionArrowDown,\n  )}`;\n\n  const controlStyle = { marginRight: Spacings.Size2 };\n\n  return (\n    <>\n      <ChartToolbarRenderer.Control\n        tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomIn)}\n        prefixIcon={<ZoomInIcon />}\n        tooltipKeyShortcut={zoomInShortcut}\n        onKeyDown={allowWhenKeyIsEnter(zoomInAction)}\n        onClick={zoomInAction}\n        tabIndex={tabIndexIn}\n        disabled={!zoomInEnabled}\n        divider=\"left\"\n        style={controlStyle}\n        data-dt-name=\"ToolbarZoomIn\"\n      />\n      <ChartToolbarRenderer.Control\n        prefixIcon={<ZoomOutIcon />}\n        tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomOut)}\n        tooltipKeyShortcut={zoomOutShortcut}\n        onKeyDown={allowWhenKeyIsEnter(zoomOutAction)}\n        onClick={zoomOutAction}\n        tabIndex={tabIndexOut}\n        disabled={!zoomOutEnabled}\n        style={controlStyle}\n        data-dt-name=\"ToolbarZoomOut\"\n      />\n    </>\n  );\n};\n\nZoomInOutButtons['displayName'] = 'ZoomInOutButtons';\n"],
+  "mappings": "AAmDI,mBAGgB,KAHhB;AAnDJ,SAAS,eAAe;AAExB,OAAO,cAAc;AACrB,SAAS,YAAY,mBAAmB;AAExC,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,8BAA8B;AACvC,SAAS,cAAc,wBAAwB;AAC/C,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAE3B,MAAM,mBAAmB,MAAM;AACpC,QAAM,aAAa,uBAAuB,aAAa,MAAM;AAC7D,QAAM,cAAc,uBAAuB,aAAa,OAAO;AAC/D,QAAM,EAAE,eAAe,aAAa,gBAAgB,aAAa,IAC/D,aAAa;AACf,QAAM,EAAE,aAAa,IAAI,eAAe;AAExC,QAAM,CAAC,eAAe,cAAc,IAAI,aAAa,gBACjD,CAAC,aAAa,YAAY,IAC1B,CAAC,OAAO,KAAK;AAEjB,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,YAAY,kBAAkB;AACpC,QAAM,cAAc,eAAe,OAAO,SAAS;AAEnD,QAAM,eAAe,MAAM;AACzB,gBAAY,iBAAiB,MAAM;AAAA,EACrC;AACA,QAAM,gBAAgB,MAAM;AAC1B,gBAAY,iBAAiB,OAAO;AAAA,EACtC;AAEA,QAAM,iBAAiB,GAAG,sBAAsB,CAAC,IAAI,KAAK;AAAA,IACxD,iBAAiB;AAAA,EACnB,CAAC;AACD,QAAM,kBAAkB,GAAG,sBAAsB,CAAC,IAAI,KAAK;AAAA,IACzD,iBAAiB;AAAA,EACnB,CAAC;AAED,QAAM,eAAe,EAAE,aAAa,SAAS,MAAM;AAEnD,SACE,iCACE;AAAA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,aAAa,KAAK,cAAc,iBAAiB,MAAM;AAAA,QACvD,YAAY,oBAAC,cAAW;AAAA,QACxB,oBAAoB;AAAA,QACpB,WAAW,oBAAoB,YAAY;AAAA,QAC3C,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU,CAAC;AAAA,QACX,SAAQ;AAAA,QACR,OAAO;AAAA,QACP,gBAAa;AAAA;AAAA,IACf;AAAA,IACA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,YAAY,oBAAC,eAAY;AAAA,QACzB,aAAa,KAAK,cAAc,iBAAiB,OAAO;AAAA,QACxD,oBAAoB;AAAA,QACpB,WAAW,oBAAoB,aAAa;AAAA,QAC5C,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU,CAAC;AAAA,QACX,OAAO;AAAA,QACP,gBAAa;AAAA;AAAA,IACf;AAAA,KACF;AAEJ;AAEA,iBAAiB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/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 { KeyboardControls } from "../../../core/components/interactions-overlay/constants.js";
 import { INTERACTION_MODE } from "../../../core/components/interactions-overlay/types.js";
@@ -11,9 +12,10 @@ import { useOverlay } from "../../../core/components/overlay-tooltip/contexts/Ov
 import { useSynchronizedSelection } from "../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.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 { 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 { XYCHART_MESSAGES } from "../../messages/messages.js";
 import { reduceInteractionMode } from "../../store/reduce-interaction-mode.js";
 import {
@@ -70,9 +72,6 @@ const ZoomModeButton = () => {
       }
     }
   };
-  const tooltipKeyShortcut = `${getKeyShortcutByAgent(
-    "CONTROL"
-  )} ${intl.formatMessage(TOOLBAR_MESSAGES.or)} ${KeyboardControls.KEYBOARD_ZOOM_MODE_SHORTCUT_ALTERNATIVE}`;
   return /* @__PURE__ */ jsx(
     ChartToolbarRenderer.Control,
     {
@@ -82,7 +81,17 @@ const ZoomModeButton = () => {
       onClick: handleZoomMode,
       onKeyDown: handleKeyDown,
       tabIndex,
-      tooltipKeyShortcut,
+      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: KeyboardControls.KEYBOARD_ZOOM_MODE_SHORTCUT_ALTERNATIVE,
+            variant: "minimal"
+          }
+        )
+      ] }),
       placement: "menu",
       "data-dt-name": "ToolbarZoomMode"
     }

package/esm/charts/xy-chart/components/toolbar/ZoomModeButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/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 { KeyboardControls } from '../../../core/components/interactions-overlay/constants.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 { reduceSelectionAreaVariant } from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.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 { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { reduceInteractionMode } from '../../store/reduce-interaction-mode.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreSelect,\n} from '../../store/reducer-explorer.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n} from '../../store/selectors.js';\n\nexport const ZoomModeButton = () => {\n  const setState = useSetState();\n  const interactionMode = useInteractionModeState();\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Zoom);\n  const { overlayRef } = useOverlay();\n  const intl = useIntl();\n  const selectState = useSelectState();\n  const { width } = useGridPlotSize();\n\n  const isSelected = interactionMode === INTERACTION_MODE.Zoom;\n  const { resetSelectionState } = useSynchronizedSelection();\n\n  const handleZoomMode = () => {\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        resetSelectionState?.();\n        setState(reduceExploreCancelAll);\n      }\n    }\n\n    setState(reduceInteractionMode(INTERACTION_MODE.Zoom));\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      if (!isNil(overlayRef.current)) {\n        const bounds = overlayRef.current.getBoundingClientRect();\n\n        const [start, end] = calculateInitialSelectionAreaPositions(bounds);\n\n        if (interactionMode !== INTERACTION_MODE.Explore) {\n          setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n        }\n\n        setState(\n          reduceExploreSelect({\n            start,\n            end,\n            finished: true,\n            accessible: true,\n            variant: 'zoom',\n            selectionPercentage: getPercentageFromPixel([start, end], width),\n          }),\n        );\n      }\n    }\n  };\n\n  const tooltipKeyShortcut = `${getKeyShortcutByAgent(\n    'CONTROL',\n  )} ${intl.formatMessage(TOOLBAR_MESSAGES.or)} ${\n    KeyboardControls.KEYBOARD_ZOOM_MODE_SHORTCUT_ALTERNATIVE\n  }`;\n\n  return (\n    <ChartToolbarRenderer.Control\n      prefixIcon={<ZoomToSelectionIcon />}\n      selected={isSelected}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomModeZoom)}\n      onClick={handleZoomMode}\n      onKeyDown={handleKeyDown}\n      tabIndex={tabIndex}\n      tooltipKeyShortcut={tooltipKeyShortcut}\n      placement=\"menu\"\n      data-dt-name=\"ToolbarZoomMode\"\n    />\n  );\n};\n"],
-  "mappings": "AA4FkB;AA5FlB,SAAS,aAAa;AAEtB,SAAS,eAAe;AAExB,SAAS,2BAA2B;AAEpC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,8CAA8C;AACvD,SAAS,kCAAkC;AAC3C,SAAS,kBAAkB;AAC3B,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,iBAAiB,MAAM;AAClC,QAAM,WAAW,YAAY;AAC7B,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,WAAW,uBAAuB,iBAAiB,IAAI;AAC7D,QAAM,EAAE,WAAW,IAAI,WAAW;AAClC,QAAM,OAAO,QAAQ;AACrB,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,QAAM,aAAa,oBAAoB,iBAAiB;AACxD,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AAEzD,QAAM,iBAAiB,MAAM;AAC3B,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,8BAAsB;AACtB,iBAAS,sBAAsB;AAAA,MACjC;AAAA,IACF;AAEA,aAAS,sBAAsB,iBAAiB,IAAI,CAAC;AAAA,EACvD;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,QAAQ,SAAS;AACzB,UAAI,CAAC,MAAM,WAAW,OAAO,GAAG;AAC9B,cAAM,SAAS,WAAW,QAAQ,sBAAsB;AAExD,cAAM,CAAC,OAAO,GAAG,IAAI,uCAAuC,MAAM;AAElE,YAAI,oBAAoB,iBAAiB,SAAS;AAChD,mBAAS,sBAAsB,iBAAiB,OAAO,CAAC;AAAA,QAC1D;AAEA;AAAA,UACE,oBAAoB;AAAA,YAClB;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,SAAS;AAAA,YACT,qBAAqB,uBAAuB,CAAC,OAAO,GAAG,GAAG,KAAK;AAAA,UACjE,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,qBAAqB,GAAG;AAAA,IAC5B;AAAA,EACF,CAAC,IAAI,KAAK,cAAc,iBAAiB,EAAE,CAAC,IAC1C,iBAAiB,uCACnB;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,YAAY,oBAAC,uBAAoB;AAAA,MACjC,UAAU;AAAA,MACV,aAAa,KAAK,cAAc,iBAAiB,YAAY;AAAA,MAC7D,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,gBAAa;AAAA;AAAA,EACf;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 { KeyboardControls } from '../../../core/components/interactions-overlay/constants.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 { reduceSelectionAreaVariant } from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.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 { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport { getPrimaryModifierKey } from '../../../core/utils/get-primary-modifier-key.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { reduceInteractionMode } from '../../store/reduce-interaction-mode.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreSelect,\n} from '../../store/reducer-explorer.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n} from '../../store/selectors.js';\n\nexport const ZoomModeButton = () => {\n  const setState = useSetState();\n  const interactionMode = useInteractionModeState();\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Zoom);\n  const { overlayRef } = useOverlay();\n  const intl = useIntl();\n  const selectState = useSelectState();\n  const { width } = useGridPlotSize();\n\n  const isSelected = interactionMode === INTERACTION_MODE.Zoom;\n  const { resetSelectionState } = useSynchronizedSelection();\n\n  const handleZoomMode = () => {\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        resetSelectionState?.();\n        setState(reduceExploreCancelAll);\n      }\n    }\n\n    setState(reduceInteractionMode(INTERACTION_MODE.Zoom));\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      if (!isNil(overlayRef.current)) {\n        const bounds = overlayRef.current.getBoundingClientRect();\n\n        const [start, end] = calculateInitialSelectionAreaPositions(bounds);\n\n        if (interactionMode !== INTERACTION_MODE.Explore) {\n          setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n        }\n\n        setState(\n          reduceExploreSelect({\n            start,\n            end,\n            finished: true,\n            accessible: true,\n            variant: 'zoom',\n            selectionPercentage: getPercentageFromPixel([start, end], width),\n          }),\n        );\n      }\n    }\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      prefixIcon={<ZoomToSelectionIcon />}\n      selected={isSelected}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomModeZoom)}\n      onClick={handleZoomMode}\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\n            keys={KeyboardControls.KEYBOARD_ZOOM_MODE_SHORTCUT_ALTERNATIVE}\n            variant=\"minimal\"\n          />\n        </>\n      }\n      placement=\"menu\"\n      data-dt-name=\"ToolbarZoomMode\"\n    />\n  );\n};\n"],
+  "mappings": "AAwFkB,SAOV,UAPU,KAOV,YAPU;AAxFlB,SAAS,aAAa;AAEtB,SAAS,eAAe;AAExB,SAAS,2BAA2B;AAEpC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,8CAA8C;AACvD,SAAS,kCAAkC;AAC3C,SAAS,kBAAkB;AAC3B,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,iBAAiB,MAAM;AAClC,QAAM,WAAW,YAAY;AAC7B,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,WAAW,uBAAuB,iBAAiB,IAAI;AAC7D,QAAM,EAAE,WAAW,IAAI,WAAW;AAClC,QAAM,OAAO,QAAQ;AACrB,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,QAAM,aAAa,oBAAoB,iBAAiB;AACxD,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AAEzD,QAAM,iBAAiB,MAAM;AAC3B,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,8BAAsB;AACtB,iBAAS,sBAAsB;AAAA,MACjC;AAAA,IACF;AAEA,aAAS,sBAAsB,iBAAiB,IAAI,CAAC;AAAA,EACvD;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,QAAQ,SAAS;AACzB,UAAI,CAAC,MAAM,WAAW,OAAO,GAAG;AAC9B,cAAM,SAAS,WAAW,QAAQ,sBAAsB;AAExD,cAAM,CAAC,OAAO,GAAG,IAAI,uCAAuC,MAAM;AAElE,YAAI,oBAAoB,iBAAiB,SAAS;AAChD,mBAAS,sBAAsB,iBAAiB,OAAO,CAAC;AAAA,QAC1D;AAEA;AAAA,UACE,oBAAoB;AAAA,YAClB;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,SAAS;AAAA,YACT,qBAAqB,uBAAuB,CAAC,OAAO,GAAG,GAAG,KAAK;AAAA,UACjE,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,YAAY,oBAAC,uBAAoB;AAAA,MACjC,UAAU;AAAA,MACV,aAAa,KAAK,cAAc,iBAAiB,YAAY;AAAA,MAC7D,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;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,iBAAiB;AAAA,YACvB,SAAQ;AAAA;AAAA,QACV;AAAA,SACF;AAAA,MAEF,WAAU;AAAA,MACV,gBAAa;AAAA;AAAA,EACf;AAEJ;",
   "names": []
 }

package/esm/charts/xy-chart/components/tooltip/utils/tooltip-styles.css

@@ -1,23 +1,23 @@
-._1u58xor0-3-10-4 {
+._1u58xor0-3-11-1 {
   display: flex;
   flex-wrap: wrap;
   overflow-wrap: anywhere;
   margin-left: var(--dt-spacings-size-4, 4px);
   margin-right: var(--dt-spacings-size-4, 4px);
 }
-._1u58xor1-3-10-4 {
+._1u58xor1-3-11-1 {
   font-weight: var(--dt-typography-text-small-emphasized-weight, 500);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1u58xor1-3-10-4::after {
+._1u58xor1-3-11-1::after {
   content: " ";
   white-space: pre;
 }
-._1u58xor2-3-10-4 {
+._1u58xor2-3-11-1 {
   flex: 0 1 auto;
   font-weight: var(--dt-typography-text-small-default-weight, 400);
 }
-._1u58xor3-3-10-4 {
+._1u58xor3-3-11-1 {
   flex: 1 1 auto;
   font-weight: var(--dt-typography-text-small-default-weight, 400);
 }

package/esm/charts/xy-chart/components/tooltip/utils/tooltip-styles.sty.js

@@ -1,8 +1,8 @@
 import "./tooltip-styles.css";
-var axisName = "_1u58xor1-3-10-4";
-var axisValue = "_1u58xor2-3-10-4";
-var duration = "_1u58xor3-3-10-4";
-var wrapper = "_1u58xor0-3-10-4";
+var axisName = "_1u58xor1-3-11-1";
+var axisValue = "_1u58xor2-3-11-1";
+var duration = "_1u58xor3-3-11-1";
+var wrapper = "_1u58xor0-3-11-1";
 export {
   axisName,
   axisValue,

package/esm/charts/xy-chart/components/tooltip/utils/tooltip-styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/utils/tooltip-styles.css.ts"],
-  "sourcesContent": ["import './tooltip-styles.css';\nexport var axisName = '_1u58xor1-3-10-4';\nexport var axisValue = '_1u58xor2-3-10-4';\nexport var duration = '_1u58xor3-3-10-4';\nexport var wrapper = '_1u58xor0-3-10-4';"],
+  "sourcesContent": ["import './tooltip-styles.css';\nexport var axisName = '_1u58xor1-3-11-1';\nexport var axisValue = '_1u58xor2-3-11-1';\nexport var duration = '_1u58xor3-3-11-1';\nexport var wrapper = '_1u58xor0-3-11-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,YAAY;AAChB,IAAI,WAAW;AACf,IAAI,UAAU;",
   "names": []
 }

package/esm/charts/xy-chart/constants/defaults.js

@@ -53,6 +53,8 @@ const XY_CHART_BOTTOM_AXIS_LABEL = "Bottom axis";
 const XY_CHART_TOP_AXIS_LABEL = "Top axis";
 const DISPLAY_NAME = "XYChart";
 const MIN_LABELED_BAR_SIZE = 25;
+const MIN_BAR_HIGHLIGHT_SIZE_PX = 4;
+const MIN_BAR_HIT_TARGET_PX = 6;
 export {
   BAR_STROKE_WIDTH,
   DEFAULT_AXIS_CONFIG,
@@ -62,6 +64,8 @@ export {
   DEFAULT_LOADING_STATE,
   DEFAULT_POINTS_DISPLAY,
   DISPLAY_NAME,
+  MIN_BAR_HIGHLIGHT_SIZE_PX,
+  MIN_BAR_HIT_TARGET_PX,
   MIN_LABELED_BAR_SIZE,
   RECT_STROKE_WIDTH,
   XY_CHART_ARIA_LABEL,

package/esm/charts/xy-chart/constants/defaults.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/xy-chart/constants/defaults.ts"],
-  "sourcesContent": ["import { initialSelectionState } from '../../core/components/annotations/providers/AnnotationsDataInitialState.js';\nimport type { PointsDisplay } from '../../core/components/canvas/types/canvas-shape.js';\nimport { TRUNCATION_MODE } from '../../core/components/legend/range/constants.js';\nimport { defaultRatio } from '../../core/constants.js';\nimport type { XYChartState } from '../types/state.js';\nimport {\n  XYChartAxisProps,\n  XYChartChartLegendProps,\n  XYChartConfigProperties,\n  XYChartNumericalAxisProps,\n  XYChartToolbarConfigProps,\n} from '../types/xy-chart-props.js';\n\nexport const DEFAULT_CHART_HEIGHT = 300;\n\nexport const DEFAULT_COLOR_PALETTE = 'categorical';\nexport const DEFAULT_COLOR_PALETTE_RECT = 'blue';\n\nexport const DEFAULT_LOADING_STATE = false;\n\ntype XYChartAxisDefaults = Pick<XYChartAxisProps, 'hidden' | 'reversed'> &\n  Pick<XYChartNumericalAxisProps, 'min' | 'max'>;\n\nexport const DEFAULT_AXIS_CONFIG: XYChartAxisDefaults = {\n  hidden: false,\n  min: 'auto',\n  max: 'auto',\n  reversed: false,\n};\n\nexport const initialState: XYChartState = {\n  zoom: {\n    zoomInEnabled: true,\n    zoomOutEnabled: false,\n  },\n  currentDomain: undefined,\n  select: undefined,\n  interactionMode: 'explore',\n  thresholds: { hoveredThresholdId: undefined },\n  highlightedSeriesId: undefined,\n  filteredSeriesIds: undefined,\n  annotations: initialSelectionState,\n};\n\nexport const defaultLegend: XYChartChartLegendProps = {\n  hidden: false,\n  position: 'auto',\n  ratio: defaultRatio,\n} as const;\n\nexport const defaultToolbar: XYChartToolbarConfigProps = {\n  hidden: false,\n  placement: 'top-right',\n  collapsed: false,\n  draggable: true,\n} as const;\n\nexport const defaultConfig: XYChartConfigProperties = {\n  legend: defaultLegend,\n  toolbar: defaultToolbar,\n  colorPalette: undefined,\n  truncationMode: TRUNCATION_MODE.Middle,\n  thresholdIndicators: [],\n  yAxes: [],\n  xAxes: [],\n  colorRules: [],\n};\n\nexport const XY_CHART_ARIA_LABEL = 'XY Chart';\n\nexport const DEFAULT_POINTS_DISPLAY = 'auto' as PointsDisplay;\n\nexport const RECT_STROKE_WIDTH = 1;\n\nexport const BAR_STROKE_WIDTH = 5;\n\nexport const XY_CHART_BOTTOM_AXIS_LABEL = 'Bottom axis';\n\nexport const XY_CHART_TOP_AXIS_LABEL = 'Top axis';\n\nexport const DISPLAY_NAME = 'XYChart';\n\nexport const MIN_LABELED_BAR_SIZE = 25;\n"],
-  "mappings": "AAAA,SAAS,6BAA6B;AAEtC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAUtB,MAAM,uBAAuB;AAE7B,MAAM,wBAAwB;AAC9B,MAAM,6BAA6B;AAEnC,MAAM,wBAAwB;AAK9B,MAAM,sBAA2C;AAAA,EACtD,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,KAAK;AAAA,EACL,UAAU;AACZ;AAEO,MAAM,eAA6B;AAAA,EACxC,MAAM;AAAA,IACJ,eAAe;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,YAAY,EAAE,oBAAoB,OAAU;AAAA,EAC5C,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,aAAa;AACf;AAEO,MAAM,gBAAyC;AAAA,EACpD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AACT;AAEO,MAAM,iBAA4C;AAAA,EACvD,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AACb;AAEO,MAAM,gBAAyC;AAAA,EACpD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,cAAc;AAAA,EACd,gBAAgB,gBAAgB;AAAA,EAChC,qBAAqB,CAAC;AAAA,EACtB,OAAO,CAAC;AAAA,EACR,OAAO,CAAC;AAAA,EACR,YAAY,CAAC;AACf;AAEO,MAAM,sBAAsB;AAE5B,MAAM,yBAAyB;AAE/B,MAAM,oBAAoB;AAE1B,MAAM,mBAAmB;AAEzB,MAAM,6BAA6B;AAEnC,MAAM,0BAA0B;AAEhC,MAAM,eAAe;AAErB,MAAM,uBAAuB;",
+  "sourcesContent": ["import { initialSelectionState } from '../../core/components/annotations/providers/AnnotationsDataInitialState.js';\nimport type { PointsDisplay } from '../../core/components/canvas/types/canvas-shape.js';\nimport { TRUNCATION_MODE } from '../../core/components/legend/range/constants.js';\nimport { defaultRatio } from '../../core/constants.js';\nimport type { XYChartState } from '../types/state.js';\nimport {\n  XYChartAxisProps,\n  XYChartChartLegendProps,\n  XYChartConfigProperties,\n  XYChartNumericalAxisProps,\n  XYChartToolbarConfigProps,\n} from '../types/xy-chart-props.js';\n\nexport const DEFAULT_CHART_HEIGHT = 300;\n\nexport const DEFAULT_COLOR_PALETTE = 'categorical';\nexport const DEFAULT_COLOR_PALETTE_RECT = 'blue';\n\nexport const DEFAULT_LOADING_STATE = false;\n\ntype XYChartAxisDefaults = Pick<XYChartAxisProps, 'hidden' | 'reversed'> &\n  Pick<XYChartNumericalAxisProps, 'min' | 'max'>;\n\nexport const DEFAULT_AXIS_CONFIG: XYChartAxisDefaults = {\n  hidden: false,\n  min: 'auto',\n  max: 'auto',\n  reversed: false,\n};\n\nexport const initialState: XYChartState = {\n  zoom: {\n    zoomInEnabled: true,\n    zoomOutEnabled: false,\n  },\n  currentDomain: undefined,\n  select: undefined,\n  interactionMode: 'explore',\n  thresholds: { hoveredThresholdId: undefined },\n  highlightedSeriesId: undefined,\n  filteredSeriesIds: undefined,\n  annotations: initialSelectionState,\n};\n\nexport const defaultLegend: XYChartChartLegendProps = {\n  hidden: false,\n  position: 'auto',\n  ratio: defaultRatio,\n} as const;\n\nexport const defaultToolbar: XYChartToolbarConfigProps = {\n  hidden: false,\n  placement: 'top-right',\n  collapsed: false,\n  draggable: true,\n} as const;\n\nexport const defaultConfig: XYChartConfigProperties = {\n  legend: defaultLegend,\n  toolbar: defaultToolbar,\n  colorPalette: undefined,\n  truncationMode: TRUNCATION_MODE.Middle,\n  thresholdIndicators: [],\n  yAxes: [],\n  xAxes: [],\n  colorRules: [],\n};\n\nexport const XY_CHART_ARIA_LABEL = 'XY Chart';\n\nexport const DEFAULT_POINTS_DISPLAY = 'auto' as PointsDisplay;\n\nexport const RECT_STROKE_WIDTH = 1;\n\nexport const BAR_STROKE_WIDTH = 5;\n\nexport const XY_CHART_BOTTOM_AXIS_LABEL = 'Bottom axis';\n\nexport const XY_CHART_TOP_AXIS_LABEL = 'Top axis';\n\nexport const DISPLAY_NAME = 'XYChart';\n\nexport const MIN_LABELED_BAR_SIZE = 25;\n\nexport const MIN_BAR_HIGHLIGHT_SIZE_PX = 4;\n\nexport const MIN_BAR_HIT_TARGET_PX = 6;\n"],
+  "mappings": "AAAA,SAAS,6BAA6B;AAEtC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAUtB,MAAM,uBAAuB;AAE7B,MAAM,wBAAwB;AAC9B,MAAM,6BAA6B;AAEnC,MAAM,wBAAwB;AAK9B,MAAM,sBAA2C;AAAA,EACtD,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,KAAK;AAAA,EACL,UAAU;AACZ;AAEO,MAAM,eAA6B;AAAA,EACxC,MAAM;AAAA,IACJ,eAAe;AAAA,IACf,gBAAgB;AAAA,EAClB;AAAA,EACA,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,YAAY,EAAE,oBAAoB,OAAU;AAAA,EAC5C,qBAAqB;AAAA,EACrB,mBAAmB;AAAA,EACnB,aAAa;AACf;AAEO,MAAM,gBAAyC;AAAA,EACpD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AACT;AAEO,MAAM,iBAA4C;AAAA,EACvD,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AACb;AAEO,MAAM,gBAAyC;AAAA,EACpD,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,cAAc;AAAA,EACd,gBAAgB,gBAAgB;AAAA,EAChC,qBAAqB,CAAC;AAAA,EACtB,OAAO,CAAC;AAAA,EACR,OAAO,CAAC;AAAA,EACR,YAAY,CAAC;AACf;AAEO,MAAM,sBAAsB;AAE5B,MAAM,yBAAyB;AAE/B,MAAM,oBAAoB;AAE1B,MAAM,mBAAmB;AAEzB,MAAM,6BAA6B;AAEnC,MAAM,0BAA0B;AAEhC,MAAM,eAAe;AAErB,MAAM,uBAAuB;AAE7B,MAAM,4BAA4B;AAElC,MAAM,wBAAwB;",
   "names": []
 }

package/esm/charts/xy-chart/hooks/useColorRule.js

@@ -45,7 +45,8 @@ const useColorRule = ({
         isValid,
         datapointMetadataMap,
         seriesToMetadata,
-        seriesMetadata
+        seriesMetadata,
+        index
       );
     } else {
       const validColorRule = reversedRules.find(

package/esm/charts/xy-chart/hooks/useColorRule.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/xy-chart/hooks/useColorRule.ts"],
-  "sourcesContent": ["import { useColorRuleConfig } from '../../core/context/ColorRuleContext.js';\nimport { safeGet } from '../../core/utils/safe-get.js';\nimport { buildValidator, VALUE_MATCHERS } from '../../core/utils/validators.js';\nimport {\n  BAR_VARIANT,\n  MapDatapoints,\n  RECT_VARIANT,\n  type SeriesToMetadata,\n  type XYChartSeriesWithDatapoints,\n} from '../types/xy-chart-internals.js';\nimport { applyColorRuleToBarSeries } from '../utils/coloring/apply-color-rule-to-bar-series.js';\nimport { applyColorRuleToRectSeries } from '../utils/coloring/apply-color-rule-to-rect-series.js';\nimport { applyColorRuleToSeriesMetadata } from '../utils/coloring/apply-color-rule-to-series-metadata.js';\nimport { hasSeriesMatchingDatapoint } from '../utils/coloring/has-series-matching-datapoint.js';\n\ntype UseColorRule = (args: {\n  seriesWithDatapoints: XYChartSeriesWithDatapoints[];\n  seriesToMetadata: SeriesToMetadata;\n  datapointMetadataMap: MapDatapoints;\n}) => SeriesToMetadata;\n\nexport const useColorRule: UseColorRule = ({\n  seriesWithDatapoints,\n  seriesToMetadata,\n  datapointMetadataMap,\n}) => {\n  const colorRules = useColorRuleConfig();\n\n  if (!colorRules.length) {\n    return seriesToMetadata;\n  }\n\n  const reversedRules = colorRules.toReversed();\n  const isValid = buildValidator(VALUE_MATCHERS);\n\n  seriesWithDatapoints.forEach((series, index) => {\n    const seriesMetadata = safeGet(seriesToMetadata, series);\n\n    if (seriesMetadata.colorIsFromSlot) {\n      return;\n    }\n\n    if (series.type === RECT_VARIANT) {\n      const categoricalColorOverrides = applyColorRuleToRectSeries(\n        series,\n        reversedRules,\n        isValid,\n        datapointMetadataMap,\n      );\n\n      if (categoricalColorOverrides) {\n        seriesToMetadata.set(series, {\n          ...seriesMetadata,\n          categoricalColorOverrides,\n        });\n      }\n    } else if (series.type === BAR_VARIANT) {\n      applyColorRuleToBarSeries(\n        series,\n        reversedRules,\n        isValid,\n        datapointMetadataMap,\n        seriesToMetadata,\n        seriesMetadata,\n      );\n    } else {\n      const validColorRule = reversedRules.find((rule) =>\n        hasSeriesMatchingDatapoint(series, rule, isValid),\n      );\n\n      if (validColorRule) {\n        applyColorRuleToSeriesMetadata(\n          seriesToMetadata,\n          series,\n          seriesMetadata,\n          validColorRule,\n          index,\n        );\n      }\n    }\n  });\n\n  return seriesToMetadata;\n};\n"],
-  "mappings": "AAAA,SAAS,0BAA0B;AACnC,SAAS,eAAe;AACxB,SAAS,gBAAgB,sBAAsB;AAC/C;AAAA,EACE;AAAA,EAEA;AAAA,OAGK;AACP,SAAS,iCAAiC;AAC1C,SAAS,kCAAkC;AAC3C,SAAS,sCAAsC;AAC/C,SAAS,kCAAkC;AAQpC,MAAM,eAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAa,mBAAmB;AAEtC,MAAI,CAAC,WAAW,QAAQ;AACtB,WAAO;AAAA,EACT;AAEA,QAAM,gBAAgB,WAAW,WAAW;AAC5C,QAAM,UAAU,eAAe,cAAc;AAE7C,uBAAqB,QAAQ,CAAC,QAAQ,UAAU;AAC9C,UAAM,iBAAiB,QAAQ,kBAAkB,MAAM;AAEvD,QAAI,eAAe,iBAAiB;AAClC;AAAA,IACF;AAEA,QAAI,OAAO,SAAS,cAAc;AAChC,YAAM,4BAA4B;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,UAAI,2BAA2B;AAC7B,yBAAiB,IAAI,QAAQ;AAAA,UAC3B,GAAG;AAAA,UACH;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,WAAW,OAAO,SAAS,aAAa;AACtC;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF,OAAO;AACL,YAAM,iBAAiB,cAAc;AAAA,QAAK,CAAC,SACzC,2BAA2B,QAAQ,MAAM,OAAO;AAAA,MAClD;AAEA,UAAI,gBAAgB;AAClB;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
+  "sourcesContent": ["import { useColorRuleConfig } from '../../core/context/ColorRuleContext.js';\nimport { safeGet } from '../../core/utils/safe-get.js';\nimport { buildValidator, VALUE_MATCHERS } from '../../core/utils/validators.js';\nimport {\n  BAR_VARIANT,\n  MapDatapoints,\n  RECT_VARIANT,\n  type SeriesToMetadata,\n  type XYChartSeriesWithDatapoints,\n} from '../types/xy-chart-internals.js';\nimport { applyColorRuleToBarSeries } from '../utils/coloring/apply-color-rule-to-bar-series.js';\nimport { applyColorRuleToRectSeries } from '../utils/coloring/apply-color-rule-to-rect-series.js';\nimport { applyColorRuleToSeriesMetadata } from '../utils/coloring/apply-color-rule-to-series-metadata.js';\nimport { hasSeriesMatchingDatapoint } from '../utils/coloring/has-series-matching-datapoint.js';\n\ntype UseColorRule = (args: {\n  seriesWithDatapoints: XYChartSeriesWithDatapoints[];\n  seriesToMetadata: SeriesToMetadata;\n  datapointMetadataMap: MapDatapoints;\n}) => SeriesToMetadata;\n\nexport const useColorRule: UseColorRule = ({\n  seriesWithDatapoints,\n  seriesToMetadata,\n  datapointMetadataMap,\n}) => {\n  const colorRules = useColorRuleConfig();\n\n  if (!colorRules.length) {\n    return seriesToMetadata;\n  }\n\n  const reversedRules = colorRules.toReversed();\n  const isValid = buildValidator(VALUE_MATCHERS);\n\n  seriesWithDatapoints.forEach((series, index) => {\n    const seriesMetadata = safeGet(seriesToMetadata, series);\n\n    if (seriesMetadata.colorIsFromSlot) {\n      return;\n    }\n\n    if (series.type === RECT_VARIANT) {\n      const categoricalColorOverrides = applyColorRuleToRectSeries(\n        series,\n        reversedRules,\n        isValid,\n        datapointMetadataMap,\n      );\n\n      if (categoricalColorOverrides) {\n        seriesToMetadata.set(series, {\n          ...seriesMetadata,\n          categoricalColorOverrides,\n        });\n      }\n    } else if (series.type === BAR_VARIANT) {\n      applyColorRuleToBarSeries(\n        series,\n        reversedRules,\n        isValid,\n        datapointMetadataMap,\n        seriesToMetadata,\n        seriesMetadata,\n        index,\n      );\n    } else {\n      const validColorRule = reversedRules.find((rule) =>\n        hasSeriesMatchingDatapoint(series, rule, isValid),\n      );\n\n      if (validColorRule) {\n        applyColorRuleToSeriesMetadata(\n          seriesToMetadata,\n          series,\n          seriesMetadata,\n          validColorRule,\n          index,\n        );\n      }\n    }\n  });\n\n  return seriesToMetadata;\n};\n"],
+  "mappings": "AAAA,SAAS,0BAA0B;AACnC,SAAS,eAAe;AACxB,SAAS,gBAAgB,sBAAsB;AAC/C;AAAA,EACE;AAAA,EAEA;AAAA,OAGK;AACP,SAAS,iCAAiC;AAC1C,SAAS,kCAAkC;AAC3C,SAAS,sCAAsC;AAC/C,SAAS,kCAAkC;AAQpC,MAAM,eAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAa,mBAAmB;AAEtC,MAAI,CAAC,WAAW,QAAQ;AACtB,WAAO;AAAA,EACT;AAEA,QAAM,gBAAgB,WAAW,WAAW;AAC5C,QAAM,UAAU,eAAe,cAAc;AAE7C,uBAAqB,QAAQ,CAAC,QAAQ,UAAU;AAC9C,UAAM,iBAAiB,QAAQ,kBAAkB,MAAM;AAEvD,QAAI,eAAe,iBAAiB;AAClC;AAAA,IACF;AAEA,QAAI,OAAO,SAAS,cAAc;AAChC,YAAM,4BAA4B;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,UAAI,2BAA2B;AAC7B,yBAAiB,IAAI,QAAQ;AAAA,UAC3B,GAAG;AAAA,UACH;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF,WAAW,OAAO,SAAS,aAAa;AACtC;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF,OAAO;AACL,YAAM,iBAAiB,cAAc;AAAA,QAAK,CAAC,SACzC,2BAA2B,QAAQ,MAAM,OAAO;AAAA,MAClD;AAEA,UAAI,gBAAgB;AAClB;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
   "names": []
 }

package/esm/charts/xy-chart/layout/XYChartLayout.css

@@ -1,10 +1,10 @@
-._1ru1qe70-3-10-4 {
+._1ru1qe70-3-11-1 {
   pointer-events: none;
   width: 100%;
   height: 100%;
   z-index: 1;
 }
-._1ru1qe71-3-10-4 {
+._1ru1qe71-3-11-1 {
   top: -5.5px;
   left: -5.5px;
   width: calc(100% + 11px);

package/esm/charts/xy-chart/layout/XYChartLayout.sty.js

@@ -1,7 +1,7 @@
 import "../../core/components/chart-grid/ChartGrid.css";
 import "./XYChartLayout.css";
-var datapointCanvasPlot = "_1ru1qe71-3-10-4 _13lzg4k0-3-10-4 _1ru1qe70-3-10-4";
-var rectangleCanvasPlot = "_13lzg4k0-3-10-4 _1ru1qe70-3-10-4";
+var datapointCanvasPlot = "_1ru1qe71-3-11-1 _13lzg4k0-3-11-1 _1ru1qe70-3-11-1";
+var rectangleCanvasPlot = "_13lzg4k0-3-11-1 _1ru1qe70-3-11-1";
 export {
   datapointCanvasPlot,
   rectangleCanvasPlot

package/esm/charts/xy-chart/layout/XYChartLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/xy-chart/layout/XYChartLayout.css.ts"],
-  "sourcesContent": ["import '../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartLayout.css';\nexport var datapointCanvasPlot = '_1ru1qe71-3-10-4 _13lzg4k0-3-10-4 _1ru1qe70-3-10-4';\nexport var rectangleCanvasPlot = '_13lzg4k0-3-10-4 _1ru1qe70-3-10-4';"],
+  "sourcesContent": ["import '../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartLayout.css';\nexport var datapointCanvasPlot = '_1ru1qe71-3-11-1 _13lzg4k0-3-11-1 _1ru1qe70-3-11-1';\nexport var rectangleCanvasPlot = '_13lzg4k0-3-11-1 _1ru1qe70-3-11-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,sBAAsB;AAC1B,IAAI,sBAAsB;",
   "names": []
 }

package/esm/charts/xy-chart/processing-strategies/strategies/rect-series.js

@@ -32,7 +32,8 @@ class RectSeriesStrategy extends SeriesBaseStrategy {
       data: [],
       filteredData: [],
       xAxisId: xAxis.id,
-      yAxisId: yAxis.id
+      yAxisId: yAxis.id,
+      labelAccessor: seriesProps._labelAccessor
     };
   }
   createSeriesMetadata(_datum, seriesProps, xAxis, yAxis, seriesId, context) {
@@ -93,6 +94,9 @@ class RectSeriesStrategy extends SeriesBaseStrategy {
       datapointMetadata.isVisible = isDatapointVisible;
       tempSeriesMetadata.isVisible ||= isDatapointVisible;
     }
+    if (datapoint.label) {
+      currentSeries.hasLabels = true;
+    }
     this.registerDatapoint(
       datapoint,
       datapointMetadata,

package/esm/charts/xy-chart/processing-strategies/strategies/rect-series.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/processing-strategies/strategies/rect-series.ts"],
-  "sourcesContent": ["import { SeriesBaseStrategy } from './base-series.js';\nimport { safeGet } from '../../../core/utils/safe-get.js';\nimport { singleLineName } from '../../../core/utils/single-line-name.js';\nimport { DEFAULT_COLOR_PALETTE_RECT } from '../../constants/defaults.js';\nimport type { XYChartSelectionRectangleMetadata } from '../../hooks/useSortRectangleDatapoints.js';\nimport {\n  RANGE_LEGEND_TYPE,\n  type DatapointMetadata,\n  type RectDatapointInternal,\n  type RectMetadata,\n  type RectSeriesIdToValueScaleDomain,\n  type RectSeriesWithDatapoints,\n  type XYChartAxisInternal,\n  type XYChartRectSeriesInternal,\n  type XYChartVariantsInternal,\n} from '../../types/xy-chart-internals.js';\nimport type { XYChartColorPalette, XYChartData } from '../../types/xy-chart.js';\nimport {\n  isRectSeries,\n  isStringOrValidNumber,\n} from '../../utils/type-guards.js';\nimport type {\n  MutableProcessingContext,\n  RectSeriesConstructor,\n} from '../types/processing-types.js';\nimport { getRectDatapoint } from '../utils/access-datapoint/get-datapoints.js';\nimport { getLegendType } from '../utils/cast-data/get-legend-type.js';\nimport { getValidColorPalette } from '../utils/coloring/get-valid-color-palette.js';\nimport { getValueScaleDomain } from '../utils/scale/get-value-scale-domain.js';\n\nexport class RectSeriesStrategy extends SeriesBaseStrategy<XYChartSelectionRectangleMetadata> {\n  public seriesIdToValueScaleDomain: RectSeriesIdToValueScaleDomain;\n\n  constructor(initializer: RectSeriesConstructor) {\n    super(initializer);\n    this.seriesIdToValueScaleDomain = new Map();\n  }\n\n  canHandle(\n    seriesProps: XYChartVariantsInternal,\n  ): seriesProps is XYChartRectSeriesInternal {\n    return isRectSeries(seriesProps);\n  }\n\n  protected getSeriesId(\n    _datum: XYChartData,\n    seriesProps: XYChartRectSeriesInternal,\n  ): string {\n    return seriesProps.id;\n  }\n\n  protected createSeries(\n    seriesId: string,\n    seriesProps: XYChartRectSeriesInternal,\n    xAxis: XYChartAxisInternal,\n    yAxis: XYChartAxisInternal,\n  ) {\n    return {\n      id: seriesId,\n      type: seriesProps.type,\n      data: [],\n      filteredData: [],\n      xAxisId: xAxis.id,\n      yAxisId: yAxis.id,\n    };\n  }\n\n  protected createSeriesMetadata(\n    _datum: XYChartData,\n    seriesProps: XYChartRectSeriesInternal,\n    xAxis: XYChartAxisInternal,\n    yAxis: XYChartAxisInternal,\n    seriesId: string,\n    context: MutableProcessingContext,\n  ) {\n    const { intl, seriesIndexes } = context;\n\n    const color = this.getColor(seriesProps.colorPalette, context.colorPalette);\n    const seriesIndex = this.getOrCreateSeriesIndex(seriesId, seriesIndexes);\n    const seriesName = this.getSeriesName(intl, seriesIndex, undefined);\n    const name = singleLineName(seriesName);\n\n    return {\n      name,\n      nameSegments: Array.isArray(seriesName) ? seriesName : undefined,\n      xAxis,\n      yAxis,\n      actions: seriesProps.actions,\n      valueFormatter: seriesProps.valueFormatter,\n      valueUnit: seriesProps.valueUnit,\n      colorPalette: color.colorPalette,\n      valueAccessor: seriesProps.valueAccessor,\n      colorIsFromSlot: color.colorIsFromSlot,\n      valueType: undefined,\n      valueAccessorLabel: seriesProps.valueAccessorLabel,\n      valueMin: seriesProps.valueMin,\n      valueMax: seriesProps.valueMax,\n    };\n  }\n\n  protected processImpl(\n    datum: XYChartData,\n    seriesProps: XYChartRectSeriesInternal,\n    xAxis: XYChartAxisInternal,\n    yAxis: XYChartAxisInternal,\n    datapoint: RectDatapointInternal,\n    context: MutableProcessingContext,\n  ) {\n    const { seriesMap, seriesToMetadata } = context;\n\n    const seriesId = this.getSeriesId(datum, seriesProps);\n\n    let currentSeries: RectSeriesWithDatapoints | undefined =\n      seriesMap.get(seriesId);\n\n    if (!currentSeries) {\n      currentSeries = this.createSeries(seriesId, seriesProps, xAxis, yAxis);\n\n      this.registerSeries(currentSeries, seriesId, context);\n\n      const metadata = this.createSeriesMetadata(\n        datum,\n        seriesProps,\n        xAxis,\n        yAxis,\n        seriesId,\n        context,\n      );\n      // When filtering is active, isVisible starts as false and is set to true\n      // once any visible datapoint (category) is encountered.\n      // When no filtering, isVisible stays undefined (all visible).\n      seriesToMetadata.set(currentSeries, {\n        ...metadata,\n        isVisible: context.filteredSeriesIds !== undefined ? false : undefined,\n      });\n    }\n\n    const datapointMetadata: DatapointMetadata = { isGap: true };\n\n    // Value domain logic (unique to RectSeriesStrategy)\n    if (isStringOrValidNumber(datapoint.value)) {\n      const valueDomain = getValueScaleDomain(\n        datapoint.value,\n        seriesProps.id,\n        this.seriesIdToValueScaleDomain,\n      );\n\n      this.seriesIdToValueScaleDomain.set(seriesProps.id, valueDomain);\n\n      datapointMetadata.isGap = false;\n\n      const tempSeriesMetadata = safeGet<\n        RectSeriesWithDatapoints,\n        RectMetadata\n      >(seriesToMetadata, currentSeries);\n\n      tempSeriesMetadata.valueType ??= getLegendType(datapoint.value);\n\n      // Range Legend (number values) associated datapoints are always visible.\n      const isDatapointVisible =\n        tempSeriesMetadata.valueType === RANGE_LEGEND_TYPE ||\n        context.filteredSeriesIds === undefined ||\n        context.filteredSeriesIds.has(`${seriesId}--${datapoint.value}`);\n\n      datapointMetadata.isVisible = isDatapointVisible;\n      tempSeriesMetadata.isVisible ||= isDatapointVisible;\n    }\n\n    this.registerDatapoint(\n      datapoint,\n      datapointMetadata,\n      currentSeries,\n      context,\n    );\n\n    const datapointIsVisible =\n      datapointMetadata.isVisible === undefined ||\n      datapointMetadata.isVisible === true;\n\n    if (datapointIsVisible) {\n      context.axisWithSeries.add(xAxis.id);\n      context.axisWithSeries.add(yAxis.id);\n      if (!datapointMetadata.isGap) {\n        this.addValue({\n          series: currentSeries,\n          datapoint,\n        });\n      }\n    }\n\n    this.updateAxisDomains(\n      datapoint,\n      xAxis,\n      yAxis,\n      context.axisIdToScaleDomain,\n      datapointIsVisible,\n    );\n  }\n\n  getColor(\n    colorPalette: XYChartColorPalette | undefined,\n    fallbackColorPalette: XYChartColorPalette | undefined,\n  ) {\n    const validColorPalette = getValidColorPalette(\n      colorPalette,\n      fallbackColorPalette ?? DEFAULT_COLOR_PALETTE_RECT,\n    );\n    return {\n      colorPalette: validColorPalette,\n      colorIsFromSlot: validColorPalette === colorPalette,\n    };\n  }\n\n  getDatapoint(\n    datum: XYChartData,\n    seriesProps: XYChartRectSeriesInternal,\n    xAxis: XYChartAxisInternal,\n    yAxis: XYChartAxisInternal,\n  ) {\n    return getRectDatapoint(datum, seriesProps, xAxis, yAxis);\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { SeriesBaseStrategy } from './base-series.js';\nimport { safeGet } from '../../../core/utils/safe-get.js';\nimport { singleLineName } from '../../../core/utils/single-line-name.js';\nimport { DEFAULT_COLOR_PALETTE_RECT } from '../../constants/defaults.js';\nimport type { XYChartSelectionRectangleMetadata } from '../../hooks/useSortRectangleDatapoints.js';\nimport {\n  RANGE_LEGEND_TYPE,\n  type DatapointMetadata,\n  type RectDatapointInternal,\n  type RectMetadata,\n  type RectSeriesIdToValueScaleDomain,\n  type RectSeriesWithDatapoints,\n  type XYChartAxisInternal,\n  type XYChartRectSeriesInternal,\n  type XYChartVariantsInternal,\n} from '../../types/xy-chart-internals.js';\nimport type { XYChartColorPalette, XYChartData } from '../../types/xy-chart.js';\nimport {\n  isRectSeries,\n  isStringOrValidNumber,\n} from '../../utils/type-guards.js';\nimport type {\n  MutableProcessingContext,\n  RectSeriesConstructor,\n} from '../types/processing-types.js';\nimport { getRectDatapoint } from '../utils/access-datapoint/get-datapoints.js';\nimport { getLegendType } from '../utils/cast-data/get-legend-type.js';\nimport { getValidColorPalette } from '../utils/coloring/get-valid-color-palette.js';\nimport { getValueScaleDomain } from '../utils/scale/get-value-scale-domain.js';\n\nexport class RectSeriesStrategy extends SeriesBaseStrategy<XYChartSelectionRectangleMetadata> {\n  public seriesIdToValueScaleDomain: RectSeriesIdToValueScaleDomain;\n\n  constructor(initializer: RectSeriesConstructor) {\n    super(initializer);\n    this.seriesIdToValueScaleDomain = new Map();\n  }\n\n  canHandle(\n    seriesProps: XYChartVariantsInternal,\n  ): seriesProps is XYChartRectSeriesInternal {\n    return isRectSeries(seriesProps);\n  }\n\n  protected getSeriesId(\n    _datum: XYChartData,\n    seriesProps: XYChartRectSeriesInternal,\n  ): string {\n    return seriesProps.id;\n  }\n\n  protected createSeries(\n    seriesId: string,\n    seriesProps: XYChartRectSeriesInternal,\n    xAxis: XYChartAxisInternal,\n    yAxis: XYChartAxisInternal,\n  ) {\n    return {\n      id: seriesId,\n      type: seriesProps.type,\n      data: [],\n      filteredData: [],\n      xAxisId: xAxis.id,\n      yAxisId: yAxis.id,\n      labelAccessor: seriesProps._labelAccessor,\n    };\n  }\n\n  protected createSeriesMetadata(\n    _datum: XYChartData,\n    seriesProps: XYChartRectSeriesInternal,\n    xAxis: XYChartAxisInternal,\n    yAxis: XYChartAxisInternal,\n    seriesId: string,\n    context: MutableProcessingContext,\n  ) {\n    const { intl, seriesIndexes } = context;\n\n    const color = this.getColor(seriesProps.colorPalette, context.colorPalette);\n    const seriesIndex = this.getOrCreateSeriesIndex(seriesId, seriesIndexes);\n    const seriesName = this.getSeriesName(intl, seriesIndex, undefined);\n    const name = singleLineName(seriesName);\n\n    return {\n      name,\n      nameSegments: Array.isArray(seriesName) ? seriesName : undefined,\n      xAxis,\n      yAxis,\n      actions: seriesProps.actions,\n      valueFormatter: seriesProps.valueFormatter,\n      valueUnit: seriesProps.valueUnit,\n      colorPalette: color.colorPalette,\n      valueAccessor: seriesProps.valueAccessor,\n      colorIsFromSlot: color.colorIsFromSlot,\n      valueType: undefined,\n      valueAccessorLabel: seriesProps.valueAccessorLabel,\n      valueMin: seriesProps.valueMin,\n      valueMax: seriesProps.valueMax,\n    };\n  }\n\n  protected processImpl(\n    datum: XYChartData,\n    seriesProps: XYChartRectSeriesInternal,\n    xAxis: XYChartAxisInternal,\n    yAxis: XYChartAxisInternal,\n    datapoint: RectDatapointInternal,\n    context: MutableProcessingContext,\n  ) {\n    const { seriesMap, seriesToMetadata } = context;\n\n    const seriesId = this.getSeriesId(datum, seriesProps);\n\n    let currentSeries: RectSeriesWithDatapoints | undefined =\n      seriesMap.get(seriesId);\n\n    if (!currentSeries) {\n      currentSeries = this.createSeries(seriesId, seriesProps, xAxis, yAxis);\n\n      this.registerSeries(currentSeries, seriesId, context);\n\n      const metadata = this.createSeriesMetadata(\n        datum,\n        seriesProps,\n        xAxis,\n        yAxis,\n        seriesId,\n        context,\n      );\n      // When filtering is active, isVisible starts as false and is set to true\n      // once any visible datapoint (category) is encountered.\n      // When no filtering, isVisible stays undefined (all visible).\n      seriesToMetadata.set(currentSeries, {\n        ...metadata,\n        isVisible: context.filteredSeriesIds !== undefined ? false : undefined,\n      });\n    }\n\n    const datapointMetadata: DatapointMetadata = { isGap: true };\n\n    // Value domain logic (unique to RectSeriesStrategy)\n    if (isStringOrValidNumber(datapoint.value)) {\n      const valueDomain = getValueScaleDomain(\n        datapoint.value,\n        seriesProps.id,\n        this.seriesIdToValueScaleDomain,\n      );\n\n      this.seriesIdToValueScaleDomain.set(seriesProps.id, valueDomain);\n\n      datapointMetadata.isGap = false;\n\n      const tempSeriesMetadata = safeGet<\n        RectSeriesWithDatapoints,\n        RectMetadata\n      >(seriesToMetadata, currentSeries);\n\n      tempSeriesMetadata.valueType ??= getLegendType(datapoint.value);\n\n      // Range Legend (number values) associated datapoints are always visible.\n      const isDatapointVisible =\n        tempSeriesMetadata.valueType === RANGE_LEGEND_TYPE ||\n        context.filteredSeriesIds === undefined ||\n        context.filteredSeriesIds.has(`${seriesId}--${datapoint.value}`);\n\n      datapointMetadata.isVisible = isDatapointVisible;\n      tempSeriesMetadata.isVisible ||= isDatapointVisible;\n    }\n\n    if (datapoint.label) {\n      currentSeries.hasLabels = true;\n    }\n\n    this.registerDatapoint(\n      datapoint,\n      datapointMetadata,\n      currentSeries,\n      context,\n    );\n\n    const datapointIsVisible =\n      datapointMetadata.isVisible === undefined ||\n      datapointMetadata.isVisible === true;\n\n    if (datapointIsVisible) {\n      context.axisWithSeries.add(xAxis.id);\n      context.axisWithSeries.add(yAxis.id);\n      if (!datapointMetadata.isGap) {\n        this.addValue({\n          series: currentSeries,\n          datapoint,\n        });\n      }\n    }\n\n    this.updateAxisDomains(\n      datapoint,\n      xAxis,\n      yAxis,\n      context.axisIdToScaleDomain,\n      datapointIsVisible,\n    );\n  }\n\n  getColor(\n    colorPalette: XYChartColorPalette | undefined,\n    fallbackColorPalette: XYChartColorPalette | undefined,\n  ) {\n    const validColorPalette = getValidColorPalette(\n      colorPalette,\n      fallbackColorPalette ?? DEFAULT_COLOR_PALETTE_RECT,\n    );\n    return {\n      colorPalette: validColorPalette,\n      colorIsFromSlot: validColorPalette === colorPalette,\n    };\n  }\n\n  getDatapoint(\n    datum: XYChartData,\n    seriesProps: XYChartRectSeriesInternal,\n    xAxis: XYChartAxisInternal,\n    yAxis: XYChartAxisInternal,\n  ) {\n    return getRectDatapoint(datum, seriesProps, xAxis, yAxis);\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/xy-chart/processing-strategies/utils/access-datapoint/get-datapoints.js

@@ -73,7 +73,7 @@ function getRectDatapoint(datum, seriesProps, xAxis, yAxis) {
     datum,
     seriesProps.valueAccessor
   );
-  return {
+  const datapoint = {
     ...datum,
     value,
     x0,
@@ -81,6 +81,16 @@ function getRectDatapoint(datum, seriesProps, xAxis, yAxis) {
     y0,
     y1
   };
+  if (seriesProps._labelAccessor !== void 0) {
+    const rawLabel = getDatumValue(datum, seriesProps._labelAccessor);
+    if (rawLabel !== void 0 && rawLabel !== null) {
+      const label = String(rawLabel);
+      if (label.length > 0) {
+        datapoint.label = label;
+      }
+    }
+  }
+  return datapoint;
 }
 function getLineDatapoint(datum, seriesProps, xAxis, yAxis) {
   return getBaseDatapoint(datum, seriesProps, xAxis, yAxis);