@dynatrace/strato-components 3.12.2 → 3.13.0

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

@@ -23,6 +23,6 @@ __export(ChartGrid_css_exports, {
 });
 module.exports = __toCommonJS(ChartGrid_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("./ChartGrid.css");
-var area = "_13lzg4k1-3-12-2";
-var plot = "_13lzg4k2-3-12-2";
-var plotLayout = "_13lzg4k0-3-12-2";
+var area = "_13lzg4k1-3-13-0";
+var plot = "_13lzg4k2-3-13-0";
+var plotLayout = "_13lzg4k0-3-13-0";

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

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

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

@@ -25,7 +25,7 @@ __export(styles_css_exports, {
 module.exports = __toCommonJS(styles_css_exports);
 var import_styles_css_ts_vanilla = require("./styles.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var graphContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj80-3-12-2", variantClassNames: { loading: { true: "_l1klj81-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
-var legendContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj86-3-12-2", variantClassNames: { orientation: { horizontal: "_l1klj87-3-12-2", vertical: "_l1klj88-3-12-2" }, loading: { true: "_l1klj89-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
-var legendResizeLine = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj8a-3-12-2", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-12-2", vertical: "_l1klj8c-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj82-3-12-2", variantClassNames: { orientation: { horizontal: "_l1klj83-3-12-2", vertical: "_l1klj84-3-12-2" }, loading: { true: "_l1klj85-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
+var graphContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj80-3-13-0", variantClassNames: { loading: { true: "_l1klj81-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj86-3-13-0", variantClassNames: { orientation: { horizontal: "_l1klj87-3-13-0", vertical: "_l1klj88-3-13-0" }, loading: { true: "_l1klj89-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendResizeLine = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj8a-3-13-0", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-13-0", vertical: "_l1klj8c-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj82-3-13-0", variantClassNames: { orientation: { horizontal: "_l1klj83-3-13-0", vertical: "_l1klj84-3-13-0" }, loading: { true: "_l1klj85-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/chart-layout/slots/Graph.js

@@ -21,7 +21,7 @@ __export(Graph_exports, {
 });
 module.exports = __toCommonJS(Graph_exports);
 var import_jsx_runtime = (
-  // eslint-disable-next-line react/jsx-no-useless-fragment
+  // oxlint-disable-next-line react/jsx-no-useless-fragment
   require("react/jsx-runtime")
 );
 const Graph = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });

package/charts/core/components/chart-layout/slots/Legend.js

@@ -21,7 +21,7 @@ __export(Legend_exports, {
 });
 module.exports = __toCommonJS(Legend_exports);
 var import_jsx_runtime = (
-  // eslint-disable-next-line react/jsx-no-useless-fragment
+  // oxlint-disable-next-line react/jsx-no-useless-fragment
   require("react/jsx-runtime")
 );
 const Legend = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });

package/charts/core/components/chart-layout/utils/get-chart-layout-settings.js

@@ -48,7 +48,7 @@ const getChartLayoutSettings = (containerSizes, children, isEmpty) => {
   }
   const {
     position,
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    // oxlint-disable-next-line typescript/no-deprecated
     ratio = import_constants.defaultRatio,
     initialRatio,
     onResize,

package/charts/core/components/chart-states/ChartState.css

@@ -1,16 +1,16 @@
-._4pqs4v0-3-12-2 {
+._4pqs4v0-3-13-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v1-3-12-2 {
+._4pqs4v1-3-13-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v2-3-12-2 {
+._4pqs4v2-3-13-0 {
   align-items: center;
   justify-content: center;
 }
-._4pqs4v3-3-12-2 {
+._4pqs4v3-3-13-0 {
   position: relative;
   width: 100%;
 }

package/charts/core/components/chart-states/ChartState.sty.js

@@ -24,7 +24,7 @@ __export(ChartState_css_exports, {
 });
 module.exports = __toCommonJS(ChartState_css_exports);
 var import_ChartState_css_ts_vanilla = require("./ChartState.css");
-var container = "_4pqs4v3-3-12-2";
-var emptyText = "_4pqs4v1-3-12-2";
-var errorText = "_4pqs4v0-3-12-2";
-var wrapper = "_4pqs4v2-3-12-2";
+var container = "_4pqs4v3-3-13-0";
+var emptyText = "_4pqs4v1-3-13-0";
+var errorText = "_4pqs4v0-3-13-0";
+var wrapper = "_4pqs4v2-3-13-0";

package/charts/core/components/crosshair/VerticalCrosshair.d.ts

@@ -10,8 +10,10 @@ type VerticalCrosshairProps = {
     width?: number;
     /** Top margin for crosshair line */
     top?: number;
-    /** Vertical offset */
+    /** Vertical offset for the bottom magnifier */
     offset?: number;
+    /** Vertical offset for the top magnifier */
+    topOffset?: number;
     /** Indicates wether the line needs to be dashed */
     dashed?: boolean;
     /** Makes the element accessible through keyboard */

package/charts/core/components/crosshair/VerticalCrosshair.js

@@ -44,6 +44,7 @@ const VerticalCrosshair = (0, import_react.forwardRef)((props, ref) => {
     width = Infinity,
     top = 0,
     offset = 0,
+    topOffset = 0,
     dashed = true,
     focusable,
     chartBounds,
@@ -100,7 +101,7 @@ const VerticalCrosshair = (0, import_react.forwardRef)((props, ref) => {
       {
         label: topLabel,
         mouseX: x,
-        offset,
+        offset: topOffset,
         color,
         chartBounds,
         isRotated: isTopLabelRotated

package/charts/core/components/crosshair/components/Magnifier.css

@@ -1,4 +1,4 @@
-._nm3s3e0-3-12-2 {
+._nm3s3e0-3-13-0 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-weight: var(--dt-typography-text-small-default-weight, 400);
@@ -13,24 +13,24 @@
   z-index: var(--dt-elevations-sticky, 10);
   padding: var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-4, 4px);
 }
-._nm3s3e1-3-12-2 {
+._nm3s3e1-3-13-0 {
   margin-left: -2px;
 }
-._nm3s3e2-3-12-2 {
+._nm3s3e2-3-13-0 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e3-3-12-2 {
+._nm3s3e3-3-13-0 {
   margin-top: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e4-3-12-2 {
+._nm3s3e4-3-13-0 {
   margin-top: -2px;
 }
-._nm3s3e5-3-12-2 {
+._nm3s3e5-3-13-0 {
   transform: rotate(-90deg);
   transform-origin: left bottom;
   margin-top: -2px;
 }
-._nm3s3e6-3-12-2 {
+._nm3s3e6-3-13-0 {
   transform: rotate(90deg) scaleX(-1) scaleY(-1) translateX(-100%) translateY(-100%);
   transform-origin: left top;
   margin-top: var(--dt-spacings-size-2, 2px);

package/charts/core/components/crosshair/components/Magnifier.sty.js

@@ -28,11 +28,11 @@ __export(Magnifier_css_exports, {
 });
 module.exports = __toCommonJS(Magnifier_css_exports);
 var import_Magnifier_css_ts_vanilla = require("./Magnifier.css");
-var bottom = "_nm3s3e3-3-12-2";
-var left = "_nm3s3e1-3-12-2";
-var magnifier = "_nm3s3e0-3-12-2";
+var bottom = "_nm3s3e3-3-13-0";
+var left = "_nm3s3e1-3-13-0";
+var magnifier = "_nm3s3e0-3-13-0";
 var magnifierFontStyles = { fontFamily: "var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)", fontSize: "var(--dt-typography-text-small-default-size, 12px)", fontWeight: "var(--dt-typography-text-small-default-weight, 400)", lineHeight: "var(--dt-typography-text-small-default-line-height, 1.333333333)" };
-var right = "_nm3s3e2-3-12-2";
-var rotatedBottomStyle = "_nm3s3e6-3-12-2";
-var rotatedTopStyle = "_nm3s3e5-3-12-2";
-var top = "_nm3s3e4-3-12-2";
+var right = "_nm3s3e2-3-13-0";
+var rotatedBottomStyle = "_nm3s3e6-3-13-0";
+var rotatedTopStyle = "_nm3s3e5-3-13-0";
+var top = "_nm3s3e4-3-13-0";

package/charts/core/components/crosshair/components/TopMagnifier.js

@@ -36,7 +36,7 @@ var import_Magnifier_css = require("./Magnifier.sty.js");
 var import_Magnifier = require("./Magnifier.js");
 var import_useMagnifierPosition = require("../hooks/useMagnifierPosition.js");
 function TopMagnifier(props) {
-  const { label, mouseX, color, chartBounds, isRotated } = props;
+  const { label, mouseX, offset, color, chartBounds, isRotated } = props;
   const { magnifierPosition: left, magnifierRef } = (0, import_useMagnifierPosition.useMagnifierPosition)(
     mouseX,
     chartBounds?.left ?? 0,
@@ -44,7 +44,7 @@ function TopMagnifier(props) {
     "horizontal",
     isRotated
   );
-  const top = (chartBounds?.top || 0) - (magnifierRef.current?.clientHeight || 0);
+  const top = (chartBounds?.top || 0) - (magnifierRef.current?.clientHeight || 0) - offset;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Magnifier.Magnifier,
     {

package/charts/core/components/interactions-overlay/InteractionsOverlay.css

@@ -1,4 +1,4 @@
-._nfahiq0-3-12-2 {
+._nfahiq0-3-13-0 {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -6,15 +6,15 @@
   left: 0;
   touch-action: none;
 }
-._nfahiq1-3-12-2 {
+._nfahiq1-3-13-0 {
   cursor: crosshair;
 }
-._nfahiq2-3-12-2 {
+._nfahiq2-3-13-0 {
   cursor: ew-resize;
 }
-._nfahiq3-3-12-2 {
+._nfahiq3-3-13-0 {
   cursor: zoom-in;
 }
-._nfahiq4-3-12-2 {
+._nfahiq4-3-13-0 {
   cursor: zoom-out;
 }

package/charts/core/components/interactions-overlay/InteractionsOverlay.js

@@ -102,6 +102,7 @@ const InteractionsOverlay = (0, import_react.forwardRef)((props, forwardedRef) =
   const overlappingInteractionsProps = {
     selectionArea,
     eventCancelled,
+    isPointerDownRef,
     onSelectEnd,
     lastMousePositionRef,
     pinned,
@@ -144,6 +145,7 @@ const InteractionsOverlay = (0, import_react.forwardRef)((props, forwardedRef) =
     panDeltaRef,
     selectionArea,
     eventCancelled,
+    isPointerDownRef,
     onSelectEnd,
     onModeChange,
     interaction: interactions[(0, import_get_active_mode.getActiveMode)(mode, event, zoomDisabled, isPanDisabled)]

package/charts/core/components/interactions-overlay/InteractionsOverlay.sty.js

@@ -23,5 +23,5 @@ __export(InteractionsOverlay_css_exports, {
 module.exports = __toCommonJS(InteractionsOverlay_css_exports);
 var import_InteractionsOverlay_css_ts_vanilla = require("./InteractionsOverlay.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var chartEventsWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_nfahiq0-3-12-2", variantClassNames: { mode: { explore: "_nfahiq1-3-12-2", pan: "_nfahiq2-3-12-2", zoom: "_nfahiq3-3-12-2", zoomOut: "_nfahiq4-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
-var interactionsOverlay = "_nfahiq5-3-12-2";
+var chartEventsWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_nfahiq0-3-13-0", variantClassNames: { mode: { explore: "_nfahiq1-3-13-0", pan: "_nfahiq2-3-13-0", zoom: "_nfahiq3-3-13-0", zoomOut: "_nfahiq4-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var interactionsOverlay = "_nfahiq5-3-13-0";

package/charts/core/components/interactions-overlay/interactions/explore/keyboardInteractions.d.ts

@@ -1,9 +1,10 @@
 import type { RefObject } from 'react';
 import type { RelativeAbsolutePosition } from '../../../../types/pointer-events.js';
 import type { InteractionMode, InteractionTriggers, ZoomBehavior } from '../../types.js';
-export declare const exploreKeyboardEscape: ({ selectionArea, eventCancelled, onSelectEnd, lastMousePositionRef, pinned, onHover, onTogglePin, onModeChange, }: {
+export declare const exploreKeyboardEscape: ({ selectionArea, eventCancelled, isPointerDownRef, onSelectEnd, lastMousePositionRef, pinned, onHover, onTogglePin, onModeChange, }: {
     pinned: boolean;
     eventCancelled: RefObject<boolean>;
+    isPointerDownRef: RefObject<boolean>;
     lastMousePositionRef: RefObject<RelativeAbsolutePosition | undefined>;
     selectionArea?: [RelativeAbsolutePosition, RelativeAbsolutePosition];
     onHover?: (event: {

package/charts/core/components/interactions-overlay/interactions/explore/keyboardInteractions.js

@@ -25,6 +25,7 @@ var import_lodash_es = require("lodash");
 const exploreKeyboardEscape = ({
   selectionArea,
   eventCancelled,
+  isPointerDownRef,
   onSelectEnd,
   lastMousePositionRef,
   pinned,
@@ -33,7 +34,9 @@ const exploreKeyboardEscape = ({
   onModeChange
 }) => {
   if (!(0, import_lodash_es.isUndefined)(selectionArea)) {
-    eventCancelled.current = true;
+    if (isPointerDownRef.current) {
+      eventCancelled.current = true;
+    }
     onSelectEnd?.({ cancelled: true });
     if (lastMousePositionRef.current) {
       onHover?.({

package/charts/core/components/interactions-overlay/interactions/pan/keyboardInteractions.d.ts

@@ -1,9 +1,10 @@
 import type { RefObject } from 'react';
 import type { RelativeAbsolutePosition } from '../../../../types/pointer-events.js';
 import type { InteractionMode, InteractionTriggers } from '../../types.js';
-export declare const panKeyboardEscape: ({ selectionArea, eventCancelled, onSelectEnd, lastMousePositionRef, pinned, onHover, onTogglePin, onModeChange, onPanEnd, }: {
+export declare const panKeyboardEscape: ({ selectionArea, eventCancelled, isPointerDownRef, onSelectEnd, lastMousePositionRef, pinned, onHover, onTogglePin, onModeChange, onPanEnd, }: {
     pinned: boolean;
     eventCancelled: RefObject<boolean>;
+    isPointerDownRef: RefObject<boolean>;
     lastMousePositionRef: RefObject<RelativeAbsolutePosition | undefined>;
     selectionArea?: [RelativeAbsolutePosition, RelativeAbsolutePosition];
     onHover?: (event: {

package/charts/core/components/interactions-overlay/interactions/pan/keyboardInteractions.js

@@ -27,6 +27,7 @@ var import_constants = require("../../constants.js");
 const panKeyboardEscape = ({
   selectionArea,
   eventCancelled,
+  isPointerDownRef,
   onSelectEnd,
   lastMousePositionRef,
   pinned,
@@ -37,7 +38,9 @@ const panKeyboardEscape = ({
 }) => {
   onPanEnd?.({ triggeredBy: "keyboard" });
   if (!(0, import_lodash_es.isUndefined)(selectionArea)) {
-    eventCancelled.current = true;
+    if (isPointerDownRef.current) {
+      eventCancelled.current = true;
+    }
     onSelectEnd?.({ cancelled: true });
     if (lastMousePositionRef.current) {
       onHover?.({

package/charts/core/components/interactions-overlay/interactions/zoom/keyboardInteractions.d.ts

@@ -1,9 +1,10 @@
 import type { RefObject } from 'react';
 import type { RelativeAbsolutePosition } from '../../../../types/pointer-events.js';
 import type { InteractionTriggers, ZoomBehavior } from '../../types.js';
-export declare const zoomKeyboardEscape: ({ selectionArea, eventCancelled, onSelectEnd, lastMousePositionRef, pinned, onHover, onTogglePin, }: {
+export declare const zoomKeyboardEscape: ({ selectionArea, eventCancelled, isPointerDownRef, onSelectEnd, lastMousePositionRef, pinned, onHover, onTogglePin, }: {
     pinned: boolean;
     eventCancelled: RefObject<boolean>;
+    isPointerDownRef: RefObject<boolean>;
     lastMousePositionRef: RefObject<RelativeAbsolutePosition | undefined>;
     selectionArea?: [RelativeAbsolutePosition, RelativeAbsolutePosition];
     onHover?: (event: {

package/charts/core/components/interactions-overlay/interactions/zoom/keyboardInteractions.js

@@ -28,6 +28,7 @@ var import_constants = require("../../constants.js");
 const zoomKeyboardEscape = ({
   selectionArea,
   eventCancelled,
+  isPointerDownRef,
   onSelectEnd,
   lastMousePositionRef,
   pinned,
@@ -35,7 +36,9 @@ const zoomKeyboardEscape = ({
   onTogglePin
 }) => {
   if (!(0, import_lodash_es.isUndefined)(selectionArea)) {
-    eventCancelled.current = true;
+    if (isPointerDownRef.current) {
+      eventCancelled.current = true;
+    }
     onSelectEnd?.({ cancelled: true });
     if (lastMousePositionRef.current) {
       onHover?.({

package/charts/core/components/interactions-overlay/types.d.ts

@@ -227,6 +227,7 @@ export declare const isSelectCancelled: (event: {
  */
 export type OverlappingInteractionsProps = Pick<InteractionsOverlayProps, 'pinned' | 'selectionArea' | 'onSelectEnd' | 'onHover' | 'onTogglePin' | 'height' | 'onReset' | 'width' | 'onZoomChange' | 'onPanStart' | 'onPanChange' | 'onPanEnd' | 'onModeChange'> & {
     eventCancelled: RefObject<boolean>;
+    isPointerDownRef: RefObject<boolean>;
     setCursorMode: Dispatch<SetStateAction<InteractionMode | 'zoomOut'>>;
     lastMousePositionRef: RefObject<RelativeAbsolutePosition | undefined>;
     panDeltaRef: RefObject<number | undefined>;

package/charts/core/components/interactions-overlay/utils/get-explore-interations.d.ts

@@ -1,3 +1,3 @@
 import type { exploreInteractions, InteractionsHandlers } from '../types.js';
-export declare const getExploreInteractions: ({ selectionArea, eventCancelled, onSelectEnd, lastMousePositionRef, pinned, onHover, onTogglePin, onModeChange, setCursorMode, height, onSelectChange, onSelectStart, onReset, width, onZoomChange, isZoomXDisabled, onPanChange, panDeltaRef, onPanStart, onPanEnd, }: exploreInteractions) => InteractionsHandlers;
+export declare const getExploreInteractions: ({ selectionArea, eventCancelled, isPointerDownRef, onSelectEnd, lastMousePositionRef, pinned, onHover, onTogglePin, onModeChange, setCursorMode, height, onSelectChange, onSelectStart, onReset, width, onZoomChange, isZoomXDisabled, onPanChange, panDeltaRef, onPanStart, onPanEnd, }: exploreInteractions) => InteractionsHandlers;
 //# sourceMappingURL=get-explore-interations.d.ts.map

package/charts/core/components/interactions-overlay/utils/get-explore-interations.js

@@ -29,6 +29,7 @@ var import_reset = require("./reset.js");
 const getExploreInteractions = ({
   selectionArea,
   eventCancelled,
+  isPointerDownRef,
   onSelectEnd,
   lastMousePositionRef,
   pinned,
@@ -89,6 +90,7 @@ const getExploreInteractions = ({
     onKeyEscape: () => (0, import_keyboardInteractions.exploreKeyboardEscape)({
       selectionArea,
       eventCancelled,
+      isPointerDownRef,
       onSelectEnd,
       lastMousePositionRef,
       pinned,

package/charts/core/components/interactions-overlay/utils/get-pan-interactions.d.ts

@@ -1,3 +1,3 @@
 import type { InteractionsHandlers, panInteractions } from '../types.js';
-export declare const getPanInteractions: ({ panDeltaRef, onPanStart, selectionArea, eventCancelled, onSelectEnd, lastMousePositionRef, pinned, onHover, onTogglePin, setCursorMode, height, onReset, width, onZoomChange, onModeChange, onPanEnd, onPanChange, cursorMode, }: panInteractions) => InteractionsHandlers;
+export declare const getPanInteractions: ({ panDeltaRef, onPanStart, selectionArea, eventCancelled, isPointerDownRef, onSelectEnd, lastMousePositionRef, pinned, onHover, onTogglePin, setCursorMode, height, onReset, width, onZoomChange, onModeChange, onPanEnd, onPanChange, cursorMode, }: panInteractions) => InteractionsHandlers;
 //# sourceMappingURL=get-pan-interactions.d.ts.map

package/charts/core/components/interactions-overlay/utils/get-pan-interactions.js

@@ -30,6 +30,7 @@ const getPanInteractions = ({
   onPanStart,
   selectionArea,
   eventCancelled,
+  isPointerDownRef,
   onSelectEnd,
   lastMousePositionRef,
   pinned,
@@ -76,6 +77,7 @@ const getPanInteractions = ({
     onKeyEscape: () => (0, import_keyboardInteractions.panKeyboardEscape)({
       selectionArea,
       eventCancelled,
+      isPointerDownRef,
       onSelectEnd,
       lastMousePositionRef,
       pinned,

package/charts/core/components/interactions-overlay/utils/get-zoom-interactions.d.ts

@@ -1,3 +1,3 @@
 import type { InteractionsHandlers, zoomInteractions } from '../types.js';
-export declare const getZoomInteractions: ({ cursorMode, selectionArea, eventCancelled, onSelectEnd, lastMousePositionRef, pinned, onHover, onTogglePin, setCursorMode, height, onSelectChange, onSelectStart, onReset, width, onZoomChange, onPanChange, panDeltaRef, onPanStart, onPanEnd, }: zoomInteractions) => InteractionsHandlers;
+export declare const getZoomInteractions: ({ cursorMode, selectionArea, eventCancelled, isPointerDownRef, onSelectEnd, lastMousePositionRef, pinned, onHover, onTogglePin, setCursorMode, height, onSelectChange, onSelectStart, onReset, width, onZoomChange, onPanChange, panDeltaRef, onPanStart, onPanEnd, }: zoomInteractions) => InteractionsHandlers;
 //# sourceMappingURL=get-zoom-interactions.d.ts.map

package/charts/core/components/interactions-overlay/utils/get-zoom-interactions.js

@@ -29,6 +29,7 @@ const getZoomInteractions = ({
   cursorMode,
   selectionArea,
   eventCancelled,
+  isPointerDownRef,
   onSelectEnd,
   lastMousePositionRef,
   pinned,
@@ -95,6 +96,7 @@ const getZoomInteractions = ({
     onKeyEscape: () => (0, import_keyboardInteractions.zoomKeyboardEscape)({
       selectionArea,
       eventCancelled,
+      isPointerDownRef,
       onSelectEnd,
       lastMousePositionRef,
       pinned,

package/charts/core/components/interactions-overlay/utils/handle-keydown.d.ts

@@ -5,9 +5,10 @@ type KeyboardInteractions = Pick<InteractionsOverlayProps, 'selectionArea' | 'on
     lastMousePositionRef: RefObject<RelativeAbsolutePosition | undefined>;
     panDeltaRef: RefObject<number | undefined>;
     eventCancelled: RefObject<boolean>;
+    isPointerDownRef: RefObject<boolean>;
     interaction: InteractionsHandlers;
     event: KeyboardEvent;
 };
-export declare const handleKeyDown: ({ event, selectionArea, eventCancelled, onSelectEnd, onModeChange, interaction, panDeltaRef, lastMousePositionRef, }: KeyboardInteractions) => void;
+export declare const handleKeyDown: ({ event, selectionArea, eventCancelled, isPointerDownRef, onSelectEnd, onModeChange, interaction, panDeltaRef, lastMousePositionRef, }: KeyboardInteractions) => void;
 export {};
 //# sourceMappingURL=handle-keydown.d.ts.map

package/charts/core/components/interactions-overlay/utils/handle-keydown.js

@@ -28,6 +28,7 @@ const handleKeyDown = ({
   event,
   selectionArea,
   eventCancelled,
+  isPointerDownRef,
   onSelectEnd,
   onModeChange,
   interaction,
@@ -39,7 +40,9 @@ const handleKeyDown = ({
     case import_constants.KeyboardControls.KEYBOARD_EXPLORE_MODE_SHORTCUT_ALTERNATIVE: {
       (0, import_reset.reset)(lastMousePositionRef, panDeltaRef);
       if (!(0, import_lodash_es.isUndefined)(selectionArea)) {
-        eventCancelled.current = true;
+        if (isPointerDownRef.current) {
+          eventCancelled.current = true;
+        }
         onSelectEnd?.({ cancelled: true });
       }
       onModeChange?.({ mode: "explore", keyboard: true });
@@ -55,7 +58,9 @@ const handleKeyDown = ({
     case import_constants.KeyboardControls.KEYBOARD_ZOOM_MODE_SHORTCUT_ALTERNATIVE: {
       (0, import_reset.reset)(lastMousePositionRef, panDeltaRef);
       if (!(0, import_lodash_es.isUndefined)(selectionArea)) {
-        eventCancelled.current = true;
+        if (isPointerDownRef.current) {
+          eventCancelled.current = true;
+        }
         onSelectEnd?.({ cancelled: true });
       }
       onModeChange?.({ mode: "zoom", keyboard: true });

package/charts/core/components/legend/categorical/ChartLegend.css

@@ -1,4 +1,4 @@
-._9x5f9b0-3-12-2 {
+._9x5f9b0-3-13-0 {
   display: flex;
   align-items: center;
   width: 100%;

package/charts/core/components/legend/categorical/ChartLegend.sty.js

@@ -21,4 +21,4 @@ __export(ChartLegend_css_exports, {
 });
 module.exports = __toCommonJS(ChartLegend_css_exports);
 var import_ChartLegend_css_ts_vanilla = require("./ChartLegend.css");
-var legendContainer = "_9x5f9b0-3-12-2";
+var legendContainer = "_9x5f9b0-3-13-0";

package/charts/core/components/legend/categorical/components/ChartLegendIcon/ChartLegendIcon.css

@@ -1,15 +1,16 @@
-._1wmibjy0-3-12-2 {
+._1wmibjy0-3-13-0 {
   font-size: var(--dt-spacings-size-8, 8px);
   display: block;
 }
-._1wmibjy1-3-12-2 {
+._1wmibjy1-3-13-0 {
   font-size: var(--dt-spacings-size-8, 8px);
   display: block;
 }
-._1wmibjy2-3-12-2 {
+._1wmibjy2-3-13-0 {
   width: var(--dt-spacings-size-8, 8px);
   height: var(--dt-spacings-size-8, 8px);
   border-radius: 100%;
-  margin: var(--dt-spacings-size-4, 4px);
+  margin-left: var(--dt-spacings-size-4, 4px);
+  margin-right: var(--dt-spacings-size-4, 4px);
   display: block;
 }

package/charts/core/components/legend/categorical/components/ChartLegendIcon/ChartLegendIcon.js

@@ -75,6 +75,7 @@ const ChartLegendIcon = (props) => {
     {
       ref: buttonRef,
       "aria-label": ariaLabel,
+      "aria-pressed": !visible,
       "data-testid": "chart-legend-item-icon",
       "data-dt-children-name": "LegendHideItem",
       "data-dt-properties": visible ? "state:hide" : "state:show",

package/charts/core/components/legend/categorical/components/ChartLegendIcon/ChartLegendIcon.sty.js

@@ -23,6 +23,6 @@ __export(ChartLegendIcon_css_exports, {
 });
 module.exports = __toCommonJS(ChartLegendIcon_css_exports);
 var import_ChartLegendIcon_css_ts_vanilla = require("./ChartLegendIcon.css");
-var coloredEyeOffIcon = "_1wmibjy1-3-12-2";
-var eyeIcon = "_1wmibjy0-3-12-2";
-var singleDimensionIcon = "_1wmibjy2-3-12-2";
+var coloredEyeOffIcon = "_1wmibjy1-3-13-0";
+var eyeIcon = "_1wmibjy0-3-13-0";
+var singleDimensionIcon = "_1wmibjy2-3-13-0";