@dynatrace/strato-components 3.11.3 → 3.12.1

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

@@ -21,4 +21,4 @@ __export(AnnotationsOverlays_css_exports, {
 });
 module.exports = __toCommonJS(AnnotationsOverlays_css_exports);
 var import_AnnotationsOverlays_css_ts_vanilla = require("./AnnotationsOverlays.css");
-var annotationsOverlay = "_107efci0-3-11-3";
+var annotationsOverlay = "_107efci0-3-12-1";

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

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

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

@@ -21,4 +21,4 @@ __export(AnnotationsScrollWrapper_css_exports, {
 });
 module.exports = __toCommonJS(AnnotationsScrollWrapper_css_exports);
 var import_AnnotationsScrollWrapper_css_ts_vanilla = require("./AnnotationsScrollWrapper.css");
-var scrollWrapper = "_uzgvu30-3-11-3";
+var scrollWrapper = "_uzgvu30-3-12-1";

package/charts/core/components/annotations/components/tooltip/AnnotationsOverlayTooltip.js

@@ -26,6 +26,8 @@ var import_AnnotationsCustomizedTooltip = require("./AnnotationsCustomizedToolti
 var import_AnnotationsDefaultTooltipContent = require("./AnnotationsDefaultTooltipContent.js");
 var import_useAnnotationsTooltipConfig = require("./hooks/useAnnotationsTooltipConfig.js");
 var import_OverlayTooltip = require("../../../overlay-tooltip/OverlayTooltip.js");
+var import_pinCoordinationSelectors = require("../../../overlay-tooltip/pinCoordinationSelectors.js");
+var import_usePinCoordinationActions = require("../../../overlay-tooltip/usePinCoordinationActions.js");
 var import_useTooltipReducer = require("../../../overlay-tooltip/useTooltipReducer.js");
 var import_utils = require("../../../overlay-tooltip/utils.js");
 var import_selectors = require("../../hooks/store/selectors.js");
@@ -54,9 +56,22 @@ const AnnotationsOverlayTooltip = (props) => {
   const hidden = config?.hidden === true;
   const hasData = !!data && data.length > 0 && visibility;
   const prevPinnedRef = (0, import_react.useRef)(false);
+  const { dismissChartTooltip } = (0, import_usePinCoordinationActions.usePinCoordinationActions)();
+  const dismissAnnotationAt = (0, import_pinCoordinationSelectors.useDismissAnnotationSignal)();
+  (0, import_react.useEffect)(() => {
+    if (dismissAnnotationAt === 0) {
+      return;
+    }
+    updateAnnotationsTooltipState(import_AnnotationsDataInitialState.initialState.tooltip);
+    updateAnnotationsSelectionState(import_AnnotationsDataInitialState.initialState.selection);
+    onMarkersInteraction?.(import_AnnotationsDataInitialState.initialState.selection);
+  }, [dismissAnnotationAt]);
   (0, import_react.useEffect)(() => {
     const wasPinned = prevPinnedRef.current;
     prevPinnedRef.current = pinned;
+    if (!wasPinned && pinned) {
+      dismissChartTooltip();
+    }
     if (wasPinned && !pinned) {
       dispatch({
         type: "SET_PINNED",

package/charts/core/components/annotations/hooks/useMarkerEventHandlers.js

@@ -73,22 +73,24 @@ const useMarkerEventHandlers = (annotationsContainerRef) => {
     onMarkersInteraction?.(selectionState);
   };
   const applyPinToggle = (clientX, clientY, groupId, annotationsGroup) => {
-    if (isTooltipPinned && (0, import_is_touchable_device.isTouchableDevice)()) {
+    const isSameAnnotationPinned = pinnedGroup === groupId;
+    if (isSameAnnotationPinned && (0, import_is_touchable_device.isTouchableDevice)()) {
       updateTooltipState(import_AnnotationsDataInitialState.initialState.tooltip);
       updateTooltipSelection(import_AnnotationsDataInitialState.initialState.selection);
       onMarkersInteraction?.(import_AnnotationsDataInitialState.initialState.selection);
       return;
     }
+    const shouldPin = !isSameAnnotationPinned;
     const newSelection = {
       hoveredGroup: groupId,
       data: annotationsGroup,
-      pinnedGroup: isTooltipPinned ? void 0 : groupId
+      pinnedGroup: shouldPin ? groupId : void 0
     };
     updateTooltipState({
       position: (0, import_calculate_tooltip_position.calculateTooltipPosition)(clientX, clientY),
       data: annotationsGroup,
       visibility: true,
-      pinned: !isTooltipPinned
+      pinned: shouldPin
     });
     updateTooltipSelection(newSelection);
     onMarkersInteraction?.(newSelection);

package/charts/core/components/annotations/hooks/useOverlayEvents.js

@@ -22,9 +22,13 @@ __export(useOverlayEvents_exports, {
 module.exports = __toCommonJS(useOverlayEvents_exports);
 var import_lodash_es = require("lodash");
 var import_react = require("react");
+var import_selectors = require("./store/selectors.js");
+var import_state_setters = require("./store/state-setters.js");
 var import_useAnnotationsHandlers = require("./useAnnotationsHandlers.js");
+var import_useMarkersInteractions = require("./useMarkersInteractions.js");
 var import_constants = require("../constants.js");
 var import_MarkerCoordinates_context = require("../contexts/MarkerCoordinates.context.js");
+var import_AnnotationsDataInitialState = require("../providers/AnnotationsDataInitialState.js");
 var import_in_marker_bounds = require("../utils/in-marker-bounds.js");
 const useOverlayEvents = () => {
   const markerCoordsPerTrack = (0, import_react.useContext)(import_MarkerCoordinates_context.MarkerCoordinatesContext);
@@ -38,6 +42,10 @@ const useOverlayEvents = () => {
     currentHoveredTrack,
     currentHoveredMarker
   } = (0, import_useAnnotationsHandlers.useAnnotationsHandlers)();
+  const { pinnedGroup } = (0, import_selectors.useAnnotationsSelectionState)();
+  const updateTooltipState = (0, import_state_setters.useSetStateTooltip)();
+  const updateTooltipSelection = (0, import_state_setters.useSetStateSelection)();
+  const onMarkersInteraction = (0, import_useMarkersInteractions.useMarkersInteractions)();
   const handleMouseMove = (e) => {
     const { clientX, clientY, currentTarget } = e;
     const { top, left } = currentTarget.getBoundingClientRect();
@@ -73,6 +81,12 @@ const useOverlayEvents = () => {
   const handleClick = (e) => {
     if (currentHoveredMarker.current !== void 0) {
       clickMarker(e, currentHoveredMarker.current);
+      return;
+    }
+    if (!(0, import_lodash_es.isUndefined)(pinnedGroup)) {
+      updateTooltipState(import_AnnotationsDataInitialState.initialState.tooltip);
+      updateTooltipSelection(import_AnnotationsDataInitialState.initialState.selection);
+      onMarkersInteraction?.(import_AnnotationsDataInitialState.initialState.selection);
     }
   };
   const handleTouchEnd = (e) => {

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

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

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

@@ -21,4 +21,4 @@ __export(Axis_css_exports, {
 });
 module.exports = __toCommonJS(Axis_css_exports);
 var import_Axis_css_ts_vanilla = require("./Axis.css");
-var axis = "_90oaxp0-3-11-3";
+var axis = "_90oaxp0-3-12-1";

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

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

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

@@ -23,5 +23,5 @@ __export(PanningControls_css_exports, {
 module.exports = __toCommonJS(PanningControls_css_exports);
 var import_PanningControls_css_ts_vanilla = require("./PanningControls.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var panningArrow = "_3rbllj7-3-11-3";
-var panningButtons = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_3rbllj4-3-11-3", variantClassNames: { direction: { toLeft: "_3rbllj5-3-11-3", toRight: "_3rbllj6-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
+var panningArrow = "_3rbllj7-3-12-1";
+var panningButtons = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_3rbllj4-3-12-1", variantClassNames: { direction: { toLeft: "_3rbllj5-3-12-1", toRight: "_3rbllj6-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });

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

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

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-11-3";
-var plot = "_13lzg4k2-3-11-3";
-var plotLayout = "_13lzg4k0-3-11-3";
+var area = "_13lzg4k1-3-12-1";
+var plot = "_13lzg4k2-3-12-1";
+var plotLayout = "_13lzg4k0-3-12-1";

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

@@ -94,6 +94,13 @@ const ChartLayoutRoot = (0, import_react.forwardRef)((props, forwardedRef) => {
     internalRatioRef.current = initialRatio ?? ratio;
   }
   const legendRatio = internalRatioRef.current ?? ratio;
+  const handleRatioChange = (0, import_react.useCallback)(
+    (newRatio) => {
+      internalRatioRef.current = newRatio;
+      onResize?.(newRatio);
+    },
+    [onResize]
+  );
   const {
     legendCandidateSize,
     readyForAutoRatio,
@@ -166,7 +173,7 @@ const ChartLayoutRoot = (0, import_react.forwardRef)((props, forwardedRef) => {
                   children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider2, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     import_ResizableChartLayout.ResizableChartLayout,
                     {
-                      onResize,
+                      onResize: handleRatioChange,
                       showResizer,
                       showLegend: !hidden
                     }

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

@@ -1,46 +1,46 @@
-._l1klj80-3-11-3 {
+._l1klj80-3-12-1 {
   min-width: 0;
   grid-area: graphArea;
 }
-._l1klj81-3-11-3 {
+._l1klj81-3-12-1 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj83-3-11-3 {
+._l1klj83-3-12-1 {
   height: inherit;
   grid-area: horizontalResize;
 }
-._l1klj84-3-11-3 {
+._l1klj84-3-12-1 {
   width: 100%;
   grid-area: verticalResize;
 }
-._l1klj85-3-11-3 {
+._l1klj85-3-12-1 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj86-3-11-3 {
+._l1klj86-3-12-1 {
   height: 100%;
 }
-._l1klj87-3-11-3 {
+._l1klj87-3-12-1 {
   grid-area: verticalLegend;
 }
-._l1klj88-3-11-3 {
+._l1klj88-3-12-1 {
   grid-area: horizontalLegend;
 }
-._l1klj89-3-11-3 {
+._l1klj89-3-12-1 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj8a-3-11-3 {
+._l1klj8a-3-12-1 {
   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-11-3:hover {
+._l1klj8a-3-12-1:hover {
   background: var(--dt-colors-border-primary-accent, #464cce);
 }
-._l1klj8b-3-11-3 {
+._l1klj8b-3-12-1 {
   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-11-3:hover {
+._l1klj8b-3-12-1:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._l1klj8c-3-11-3 {
+._l1klj8c-3-12-1 {
   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-11-3:hover {
+._l1klj8c-3-12-1: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-11-3", variantClassNames: { loading: { true: "_l1klj81-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var legendContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj86-3-11-3", variantClassNames: { orientation: { horizontal: "_l1klj87-3-11-3", vertical: "_l1klj88-3-11-3" }, loading: { true: "_l1klj89-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var legendResizeLine = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj8a-3-11-3", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-11-3", vertical: "_l1klj8c-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj82-3-11-3", variantClassNames: { orientation: { horizontal: "_l1klj83-3-11-3", vertical: "_l1klj84-3-11-3" }, loading: { true: "_l1klj85-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
+var graphContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj80-3-12-1", variantClassNames: { loading: { true: "_l1klj81-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj86-3-12-1", variantClassNames: { orientation: { horizontal: "_l1klj87-3-12-1", vertical: "_l1klj88-3-12-1" }, loading: { true: "_l1klj89-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
+var legendResizeLine = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj8a-3-12-1", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-12-1", vertical: "_l1klj8c-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj82-3-12-1", variantClassNames: { orientation: { horizontal: "_l1klj83-3-12-1", vertical: "_l1klj84-3-12-1" }, loading: { true: "_l1klj85-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/core/components/chart-layout/utils/calculate-graph-size.js

@@ -20,4 +20,4 @@ __export(calculate_graph_size_exports, {
   calculateGraphSize: () => calculateGraphSize
 });
 module.exports = __toCommonJS(calculate_graph_size_exports);
-const calculateGraphSize = (containerSize, legendSize, resizerWrapperSize) => containerSize - resizerWrapperSize - legendSize;
+const calculateGraphSize = (containerSize, legendSize, resizerWrapperSize) => Math.max(0, containerSize - resizerWrapperSize - legendSize);

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

@@ -1,16 +1,16 @@
-._4pqs4v0-3-11-3 {
+._4pqs4v0-3-12-1 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v1-3-11-3 {
+._4pqs4v1-3-12-1 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v2-3-11-3 {
+._4pqs4v2-3-12-1 {
   align-items: center;
   justify-content: center;
 }
-._4pqs4v3-3-11-3 {
+._4pqs4v3-3-12-1 {
   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-11-3";
-var emptyText = "_4pqs4v1-3-11-3";
-var errorText = "_4pqs4v0-3-11-3";
-var wrapper = "_4pqs4v2-3-11-3";
+var container = "_4pqs4v3-3-12-1";
+var emptyText = "_4pqs4v1-3-12-1";
+var errorText = "_4pqs4v0-3-12-1";
+var wrapper = "_4pqs4v2-3-12-1";

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

@@ -1,4 +1,4 @@
-._nm3s3e0-3-11-3 {
+._nm3s3e0-3-12-1 {
   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-11-3 {
+._nm3s3e1-3-12-1 {
   margin-left: -2px;
 }
-._nm3s3e2-3-11-3 {
+._nm3s3e2-3-12-1 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e3-3-11-3 {
+._nm3s3e3-3-12-1 {
   margin-top: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e4-3-11-3 {
+._nm3s3e4-3-12-1 {
   margin-top: -2px;
 }
-._nm3s3e5-3-11-3 {
+._nm3s3e5-3-12-1 {
   transform: rotate(-90deg);
   transform-origin: left bottom;
   margin-top: -2px;
 }
-._nm3s3e6-3-11-3 {
+._nm3s3e6-3-12-1 {
   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-11-3";
-var left = "_nm3s3e1-3-11-3";
-var magnifier = "_nm3s3e0-3-11-3";
+var bottom = "_nm3s3e3-3-12-1";
+var left = "_nm3s3e1-3-12-1";
+var magnifier = "_nm3s3e0-3-12-1";
 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-11-3";
-var rotatedBottomStyle = "_nm3s3e6-3-11-3";
-var rotatedTopStyle = "_nm3s3e5-3-11-3";
-var top = "_nm3s3e4-3-11-3";
+var right = "_nm3s3e2-3-12-1";
+var rotatedBottomStyle = "_nm3s3e6-3-12-1";
+var rotatedTopStyle = "_nm3s3e5-3-12-1";
+var top = "_nm3s3e4-3-12-1";

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

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

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

@@ -34,6 +34,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_InteractionsOverlay_css = require("./InteractionsOverlay.sty.js");
+var import_constants = require("../../constants.js");
 var import_get_active_mode = require("./utils/get-active-mode.js");
 var import_get_explore_interations = require("./utils/get-explore-interations.js");
 var import_get_gestures = require("./utils/get-gestures.js");
@@ -43,9 +44,17 @@ var import_get_zoom_interactions = require("./utils/get-zoom-interactions.js");
 var import_handle_keydown = require("./utils/handle-keydown.js");
 var import_is_own_event = require("./utils/is-own-event.js");
 var import_useMergeRefs = require("../../../../core/hooks/useMergeRefs.js");
-var import_ChartVariantContext = require("../../context/ChartVariantContext.js");
 var import_usePointerEvents = require("../../hooks/usePointerEvents.js");
 var import_usePreventScrollOnWheel = require("../../hooks/usePreventScrollOnWheel.js");
+const isDragDisabled = (effectiveMode, panDisabled, zoomDisabled, isSelectDisabled) => {
+  if (effectiveMode === "pan") {
+    return panDisabled;
+  }
+  if (effectiveMode === "zoom") {
+    return zoomDisabled;
+  }
+  return isSelectDisabled;
+};
 const InteractionsOverlay = (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
     style,
@@ -72,6 +81,7 @@ const InteractionsOverlay = (0, import_react.forwardRef)((props, forwardedRef) =
     onZoomEnd,
     isZoomDisabled,
     isPanDisabled,
+    isSelectDisabled,
     isZoomXDisabled,
     children,
     ...restProps
@@ -86,7 +96,6 @@ const InteractionsOverlay = (0, import_react.forwardRef)((props, forwardedRef) =
   const [cursorMode, setCursorMode] = (0, import_react.useState)(
     mode
   );
-  const { crosshair: crosshairConfig } = (0, import_react.useContext)(import_ChartVariantContext.ChartVariantContext);
   const htmlRef = (0, import_react.useRef)(null);
   (0, import_usePreventScrollOnWheel.usePreventScrollOnWheel)(htmlRef);
   const rootRef = (0, import_useMergeRefs.useMergeRefs)([htmlRef, forwardedRef]);
@@ -231,10 +240,27 @@ const InteractionsOverlay = (0, import_react.forwardRef)((props, forwardedRef) =
       ),
       style: {
         ...style,
-        cursor: cursorMode === "explore" ? crosshairConfig?.cursor : void 0
+        cursor: cursorMode === "explore" ? style?.cursor : void 0
       },
       onMouseDown: (event) => {
         if ((0, import_is_own_event.isOwnEvent)(event)) {
+          const isMiddleButton = event.buttons === import_constants.MIDDLE_BUTTON_ID;
+          if (!isMiddleButton) {
+            const effectiveMode = (0, import_get_active_mode.getActiveMode)(
+              mode,
+              event,
+              zoomDisabled,
+              panDisabled
+            );
+            if (isDragDisabled(
+              effectiveMode,
+              panDisabled,
+              zoomDisabled,
+              isSelectDisabled
+            )) {
+              return;
+            }
+          }
           isPointerDownRef.current = true;
           handleMouseDown(event);
         }
@@ -259,7 +285,20 @@ const InteractionsOverlay = (0, import_react.forwardRef)((props, forwardedRef) =
       },
       onTouchStart: (event) => {
         if ((0, import_is_own_event.isOwnEvent)(event)) {
-          handleTouchStart(event);
+          const effectiveMode = (0, import_get_active_mode.getActiveMode)(
+            mode,
+            event,
+            zoomDisabled,
+            panDisabled
+          );
+          if (!isDragDisabled(
+            effectiveMode,
+            panDisabled,
+            zoomDisabled,
+            isSelectDisabled
+          )) {
+            handleTouchStart(event);
+          }
         }
       },
       onTouchMove: (event) => {

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-11-3", variantClassNames: { mode: { explore: "_nfahiq1-3-11-3", pan: "_nfahiq2-3-11-3", zoom: "_nfahiq3-3-11-3", zoomOut: "_nfahiq4-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var interactionsOverlay = "_nfahiq5-3-11-3";
+var chartEventsWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_nfahiq0-3-12-1", variantClassNames: { mode: { explore: "_nfahiq1-3-12-1", pan: "_nfahiq2-3-12-1", zoom: "_nfahiq3-3-12-1", zoomOut: "_nfahiq4-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
+var interactionsOverlay = "_nfahiq5-3-12-1";

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

@@ -58,6 +58,10 @@ export interface InteractionsOverlayProps extends StylingProps {
      * Whether pan is disabled
      */
     isPanDisabled?: boolean;
+    /**
+     * Whether drag-to-select is disabled
+     */
+    isSelectDisabled?: boolean;
     /**
      * Detects if current interaction mode changed. Can be triggered by keyboard
      * @param event - The interaction event, contains:

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

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