@dynatrace/strato-components 3.1.3 → 3.2.1

package/buttons/button/Button.css

@@ -1,12 +1,12 @@
-._10kgnsa0-3-1-3 {
+._10kgnsa0-3-2-1 {
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-default-size, 14px);
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
   text-decoration: var(--dt-typography-text-base-default-text-decoration, none);
   text-transform: none;
-  background: var(--_bx32h3-3-1-3);
-  color: var(--_bx32h0-3-1-3);
+  background: var(--_bx32h3-3-2-1);
+  color: var(--_bx32h0-3-2-1);
   display: inline-flex;
   position: relative;
   align-items: center;
@@ -23,38 +23,38 @@
   transition-duration: var(--dt-animations-hover-duration-base, 150ms);
   transition-property: color, background-color, transform;
 }
-._10kgnsa1-3-1-3 {
+._10kgnsa1-3-2-1 {
   text-align: start;
   justify-content: space-between;
 }
-._10kgnsa2-3-1-3 {
+._10kgnsa2-3-2-1 {
   text-align: center;
   justify-content: center;
 }
-._10kgnsa3-3-1-3 {
+._10kgnsa3-3-2-1 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   gap: var(--dt-spacings-size-2, 2px);
 }
-._10kgnsa4-3-1-3 {
+._10kgnsa4-3-2-1 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
   gap: var(--dt-spacings-size-4, 4px);
 }
-._10kgnsa5-3-1-3 {
+._10kgnsa5-3-2-1 {
   cursor: not-allowed;
 }
-._10kgnsa6-3-1-3 {
+._10kgnsa6-3-2-1 {
   width: 100%;
 }
-._10kgnsa7-3-1-3 {
+._10kgnsa7-3-2-1 {
   width: fit-content;
 }
-._10kgnsa8-3-1-3 {
+._10kgnsa8-3-2-1 {
   position: absolute;
   top: 0;
   left: 0;
@@ -66,19 +66,19 @@
   align-items: center;
   z-index: 1;
 }
-._10kgnsa3-3-1-3 ._10kgnsa9-3-1-3:not(:has(svg:only-child)) {
+._10kgnsa3-3-2-1 ._10kgnsa9-3-2-1:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 2px;
   padding-right: 2px;
 }
-._10kgnsa4-3-1-3 ._10kgnsa9-3-1-3:not(:has(svg:only-child)) {
+._10kgnsa4-3-2-1 ._10kgnsa9-3-2-1:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 4px;
   padding-right: 4px;
 }
-._10kgnsab-3-1-3 {
+._10kgnsab-3-2-1 {
   display: inline-flex;
   min-width: 0;
   max-width: 100%;

package/buttons/button/Button.d.ts

@@ -80,8 +80,8 @@ export default function getButtonSlots(children: ReactNode): ButtonSlots;
  * @public
  */
 export declare const Button: (<E extends ElementType = "button">(props: ButtonProps<E>) => ReactElement | null) & {
-    Suffix: (props: import("./Suffix.js").ButtonSuffixProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    Prefix: (props: import("./Prefix.js").ButtonPrefixProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    Label: (props: import("./Label.js").ButtonLabelProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+    Suffix: (props: import("./Suffix.js").ButtonSuffixProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+    Prefix: (props: import("./Prefix.js").ButtonPrefixProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+    Label: (props: import("./Label.js").ButtonLabelProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
 };
 export {};

package/buttons/button/Button.sty.js

@@ -28,7 +28,7 @@ var import_ellipsis_css_ts_vanilla = require("../../styles/ellipsis.css");
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_Button_css_ts_vanilla = require("./Button.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var button = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa0-3-1-3", variantClassNames: { textAlign: { start: "_10kgnsa1-3-1-3", center: "_10kgnsa2-3-1-3" }, size: { condensed: "_10kgnsa3-3-1-3", "default": "_10kgnsa4-3-1-3" }, disabled: { true: "_10kgnsa5-3-1-3" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
-var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa9-3-1-3", variantClassNames: { textual: { true: "_oqqp1n0-3-1-3", false: "_10kgnsab-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var loading = "_10kgnsa8-3-1-3";
-var widths = { full: "_10kgnsa6-3-1-3", content: "_10kgnsa7-3-1-3" };
+var button = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa0-3-2-1", variantClassNames: { textAlign: { start: "_10kgnsa1-3-2-1", center: "_10kgnsa2-3-2-1" }, size: { condensed: "_10kgnsa3-3-2-1", "default": "_10kgnsa4-3-2-1" }, disabled: { true: "_10kgnsa5-3-2-1" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
+var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa9-3-2-1", variantClassNames: { textual: { true: "_oqqp1n0-3-2-1", false: "_10kgnsab-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
+var loading = "_10kgnsa8-3-2-1";
+var widths = { full: "_10kgnsa6-3-2-1", content: "_10kgnsa7-3-2-1" };

package/buttons/button/Label.d.ts

@@ -13,4 +13,4 @@ export interface ButtonLabelProps extends StylingProps, DataTestId {
  * Button Label component.
  * @public
  */
-export declare const Label: (props: ButtonLabelProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const Label: (props: ButtonLabelProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/buttons/button/Prefix.d.ts

@@ -13,4 +13,4 @@ export interface ButtonPrefixProps extends StylingProps, DataTestId {
  * Button Prefix component.
  * @public
  */
-export declare const Prefix: (props: ButtonPrefixProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const Prefix: (props: ButtonPrefixProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/buttons/button/Suffix.d.ts

@@ -13,4 +13,4 @@ export interface ButtonSuffixProps extends StylingProps, DataTestId {
  * Button Suffix component.
  * @public
  */
-export declare const Suffix: (props: ButtonSuffixProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const Suffix: (props: ButtonSuffixProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/buttons/intent-button/IntentButton.css

@@ -1,3 +1,3 @@
-._1xe9ern0-3-1-3 {
+._1xe9ern0-3-2-1 {
   opacity: 0.5;
 }

package/buttons/intent-button/IntentButton.d.ts

@@ -18,11 +18,11 @@ export type IntentButtonProps = Exclude<IntentProps, 'onSelect' | 'icon'> & Pick
  * The `IntentButton` only works within the AppShell context.
  * @public
  */
-export declare const IntentButton: ((props: IntentButtonProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null) & {
+export declare const IntentButton: ((props: IntentButtonProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null) & {
     Item: {
         (props: IntentProps): null;
         displayName: string;
     };
-    OpenWith: (props: import("./OpenWith.js").OpenWithProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-    Icon: (props: import("../../navigation/menu/Prefix.js").MenuPrefixProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+    OpenWith: (props: import("./OpenWith.js").OpenWithProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+    Icon: (props: import("../../navigation/menu/Prefix.js").MenuPrefixProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
 };

package/buttons/intent-button/IntentButton.sty.js

@@ -22,4 +22,4 @@ __export(IntentButton_css_exports, {
 });
 module.exports = __toCommonJS(IntentButton_css_exports);
 var import_IntentButton_css_ts_vanilla = require("./IntentButton.css");
-var disabledAppIconOpacity = "_1xe9ern0-3-1-3";
+var disabledAppIconOpacity = "_1xe9ern0-3-2-1";

package/buttons/intent-button/IntentButtonWithResponse.d.ts

@@ -7,4 +7,4 @@ import { ButtonOwnProps } from '../button/Button.js';
  */
 export declare const IntentButtonWithResponse: (props: Omit<IntentWithResponseProps, "onSelect"> & Pick<ButtonOwnProps, "color" | "textAlign" | "width" | "size" | "variant" | "aria-disabled" | "onClick"> & {
     disabled?: boolean;
-} & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+} & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement | null;

package/buttons/intent-button/IntentButtonWithoutResponse.d.ts

@@ -7,4 +7,4 @@ import { ButtonOwnProps } from '../button/Button.js';
  */
 export declare const IntentButtonWithoutResponse: (props: Omit<IntentWithoutResponseProps, "onSelect"> & Pick<ButtonOwnProps, "color" | "textAlign" | "width" | "size" | "variant" | "aria-disabled" | "onClick"> & {
     disabled?: boolean;
-} & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+} & import("react").RefAttributes<HTMLAnchorElement>) => import("react").ReactElement | null;

package/buttons/intent-button/OpenWith.d.ts

@@ -9,4 +9,4 @@ export type OpenWithProps = Omit<MenuIntentProps, 'onResponse' | 'options' | 'ch
  * that can't be changed.
  * @public
  */
-export declare const OpenWith: (props: OpenWithProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const OpenWith: (props: OpenWithProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/buttons/notify-button/NotifyButton.css

@@ -1,10 +1,10 @@
-._1j9pkom0-3-1-3 {
+._1j9pkom0-3-2-1 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-16, 16px);
   padding-left: var(--dt-spacings-size-16, 16px);
   padding-right: var(--dt-spacings-size-16, 16px);
 }
-._1j9pkom1-3-1-3 {
+._1j9pkom1-3-2-1 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-6, 6px);

package/buttons/notify-button/NotifyButton.d.ts

@@ -3,6 +3,6 @@ import type { NotifyButtonProps } from './notify-button-types.js';
  * The `NotifyButton` allows users to turn notifications about updates of resources on or off. Common use cases include notifications about updates of saved filters, workflows, or entities. Users will be notified via e-mail.
  * @public
  */
-export declare const NotifyButton: ((props: NotifyButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null) & {
-    Content: (props: import("./components/Content.js").NotifyButtonContentProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const NotifyButton: ((props: NotifyButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement | null) & {
+    Content: (props: import("./components/Content.js").NotifyButtonContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
 };

package/buttons/notify-button/NotifyButton.sty.js

@@ -23,5 +23,5 @@ __export(NotifyButton_css_exports, {
 });
 module.exports = __toCommonJS(NotifyButton_css_exports);
 var import_NotifyButton_css_ts_vanilla = require("./NotifyButton.css");
-var overlay = "_1j9pkom0-3-1-3";
-var toast = "_1j9pkom1-3-1-3";
+var overlay = "_1j9pkom0-3-2-1";
+var toast = "_1j9pkom1-3-2-1";

package/buttons/notify-button/components/Content.d.ts

@@ -18,4 +18,4 @@ export interface NotifyButtonContentProps extends DOMProps, AriaLabelingProps, S
  * The content of the NotifyButton overlay.
  * @public
  */
-export declare const Content: (props: NotifyButtonContentProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const Content: (props: NotifyButtonContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/buttons/notify-button/components/Trigger.d.ts

@@ -5,4 +5,4 @@ import type { NotifyButtonProps } from '../notify-button-types.js';
  */
 export declare const NotifyButtonTrigger: (props: Omit<NotifyButtonProps, "type" | "config"> & {
     triggerProps: TriggerProps;
-} & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+} & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement | null;

package/buttons/run-query-button/RunQueryButton.d.ts

@@ -1,4 +1,4 @@
-import { type MouseEventHandler } from 'react';
+import { type MouseEventHandler, type ReactElement } from 'react';
 import { AriaLabelingProps } from '../../core/types/a11y-props.js';
 import { DataTestId } from '../../core/types/data-props.js';
 import { DOMProps } from '../../core/types/dom.js';
@@ -44,4 +44,4 @@ export interface RunQueryButtonProps extends AriaLabelingProps, DOMProps, Stylin
  * supports four query states: idle, loading, success, and error.
  * @public
  */
-export declare const RunQueryButton: (props: RunQueryButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+export declare const RunQueryButton: (props: RunQueryButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement | null;

package/charts/annotations-chart/AnnotationsChart.d.ts

@@ -3,7 +3,7 @@ import type { AnnotationsChartProps } from './types/annotations-chart-props.js';
 import { AnnotationsChartRef } from './types/annotations-chart-ref.js';
 export declare const _AnnotationsChart: (props: AnnotationsChartProps & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<AnnotationsChartRef>) => React.ReactElement | null;
+} & import("react").RefAttributes<AnnotationsChartRef>) => import("react").ReactElement | null;
 /**
  * The `AnnotationsChart` is a visualization tool designed to highlight significant events or data points
  * on a timeline or other graph types. It allows you to annotate specific moments with labels or markers,
@@ -14,7 +14,7 @@ export declare const _AnnotationsChart: (props: AnnotationsChartProps & {
  */
 export declare const AnnotationsChart: ((props: AnnotationsChartProps & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<AnnotationsChartRef>) => React.ReactElement | null) & {
+} & import("react").RefAttributes<AnnotationsChartRef>) => import("react").ReactElement | null) & {
     Track: {
         (props: PropsWithChildren<import("../index.js").AnnotationsTrackProps>): null;
         displayName: string;

package/charts/categorical-bar/CategoricalBarChart.d.ts

@@ -1,4 +1,4 @@
 import { type ReactNode } from 'react';
 export declare const CategoricalBarChart: (props: {
     children?: ReactNode;
-} & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/charts/categorical-bar/CategoricalBarChartLayout.d.ts

@@ -18,5 +18,5 @@ interface CategoricalBarChartLayoutProps extends StylingProps, MaskingProps {
      */
     'data-dt-component'?: string;
 }
-export declare const CategoricalBarChartLayout: (props: CategoricalBarChartLayoutProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const CategoricalBarChartLayout: (props: CategoricalBarChartLayoutProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
 export {};

package/charts/categorical-bar/CategoricalBarChartLayout.js

@@ -28,6 +28,7 @@ var import_CategoricalBarChartLegend = require("./components/legend/CategoricalB
 var import_useCategoricalBarChartBaseConfig = require("./hooks/useCategoricalBarChartBaseConfig.js");
 var import_useCategoricalBarChartData = require("./hooks/useCategoricalBarChartData.js");
 var import_layout = require("./utils/layout.js");
+var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_ChartLayout = require("../core/components/chart-layout/ChartLayout.js");
 const CategoricalBarChartLayout = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
@@ -45,6 +46,7 @@ const CategoricalBarChartLayout = /* @__PURE__ */ (0, import_react.forwardRef)((
     "data-dtrum-allow": dataDtrumAllow,
     "data-dt-component": dataDtComponent
   } = props;
+  const [behaviorTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(props);
   const { uniqueDimensions } = (0, import_useCategoricalBarChartData.useCategoricalBarChartData)();
   const { groupMode } = (0, import_useCategoricalBarChartBaseConfig.useCategoricalBarChartBaseConfig)();
   const canShowLegend = (0, import_layout.isGrouped)(groupMode) || (0, import_layout.isStacked)(groupMode) && uniqueDimensions.length > 1;
@@ -69,6 +71,7 @@ const CategoricalBarChartLayout = /* @__PURE__ */ (0, import_react.forwardRef)((
       showLoader: loading,
       className,
       style,
+      ...behaviorTrackingProps,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
       "data-dt-component": dataDtComponent,

package/charts/categorical-bar/CategoricalBarChartRoot.d.ts

@@ -1,11 +1,11 @@
-import { type PropsWithChildren } from 'react';
+import { type PropsWithChildren, type ReactElement } from 'react';
 import type { CategoricalBarChartProps, CategoricalBarChartRef } from './types/categorical-bar-chart.js';
 /**
  * @public
  */
 export declare const CategoricalBarChartRoot: (props: CategoricalBarChartProps & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<CategoricalBarChartRef>) => React.ReactElement | null;
+} & import("react").RefAttributes<CategoricalBarChartRef>) => import("react").ReactElement | null;
 /**
  * The `CategoricalBarChart` visually displays the frequencies or values of
  * distinct categories using rectangular bars. Each bar's length or height
@@ -15,7 +15,7 @@ export declare const CategoricalBarChartRoot: (props: CategoricalBarChartProps &
  */
 export declare const CategoricalBarChart: ((props: CategoricalBarChartProps & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<CategoricalBarChartRef>) => React.ReactElement | null) & {
+} & import("react").RefAttributes<CategoricalBarChartRef>) => import("react").ReactElement | null) & {
     Legend: {
         (props: import("./types/categorical-bar-chart.js").CategoricalBarChartLegendProps): null;
         displayName: string;

package/charts/categorical-bar/CategoricalBarChartRoot.js

@@ -46,6 +46,7 @@ var import_ValueAxis = require("./slots/ValueAxis.js");
 var import_defaults = require("./types/defaults.js");
 var import_state = require("./types/state.js");
 var import_build_and_download_csv = require("./utils/build-and-download-csv.js");
+var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
 var import_Intent = require("../../core/slots/Intent/Intent.js");
 var import_useAutoLegendRefresh = require("../core/components/chart-layout/hooks/useAutoLegendRefresh.js");
@@ -70,6 +71,7 @@ const CategoricalBarChartRoot = /* @__PURE__ */ (0, import_react.forwardRef)((pr
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow
   } = props;
+  const [behaviorTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(props);
   const chartHeight = (0, import_coerceSizeValue.coerceSizeValue)(heightProp ?? import_defaults.DEFAULT_CHART_HEIGHT);
   const chartConfig = (0, import_useCategoricalBarChartConfig.useCategoricalBarChartConfig)(props);
   const { emptyState, errorState } = (0, import_get_chart_states_template.getChartStatesTemplates)(props.children);
@@ -124,6 +126,7 @@ const CategoricalBarChartRoot = /* @__PURE__ */ (0, import_react.forwardRef)((pr
           legend: chartConfig.legend,
           className,
           style,
+          ...behaviorTrackingProps,
           "data-dtrum-mask": dataDtrumMask,
           "data-dtrum-allow": dataDtrumAllow,
           "data-dt-component": COMPONENT_NAME_BEHAVIOURAL_TRACKING

package/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.css

@@ -1,9 +1,9 @@
-._1wi8enr0-3-1-3 {
+._1wi8enr0-3-2-1 {
   cursor: crosshair;
   overflow: visible;
   z-index: 1;
 }
-._1wi8enr1-3-1-3 {
+._1wi8enr1-3-2-1 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);

package/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.js

@@ -153,7 +153,7 @@ const CategoricalBarChartInspectOverlay = () => {
       {
         className: import_CategoricalBarChartInspectOverlay_css.crosshairLayout,
         "aria-label": CROSSHAIR_BAR_CHART_LABEL,
-        role: "img",
+        role: "graphics-symbol",
         onClick: onClickHandler,
         children: !(0, import_layout.isVertical)(layout) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_VerticalCrosshair.VerticalCrosshair,

package/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.sty.js

@@ -24,5 +24,5 @@ __export(CategoricalBarChartInspectOverlay_css_exports, {
 module.exports = __toCommonJS(CategoricalBarChartInspectOverlay_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../../core/components/chart-grid/ChartGrid.css");
 var import_CategoricalBarChartInspectOverlay_css_ts_vanilla = require("./CategoricalBarChartInspectOverlay.css");
-var crosshairLayout = "_1wi8enr0-3-1-3 _13lzg4k0-3-1-3";
-var dataPointLayout = "_1wi8enr1-3-1-3 _13lzg4k0-3-1-3";
+var crosshairLayout = "_1wi8enr0-3-2-1 _13lzg4k0-3-2-1";
+var dataPointLayout = "_1wi8enr1-3-2-1 _13lzg4k0-3-2-1";

package/charts/categorical-bar/components/thresholds/CategoricalThresholdBar.js

@@ -23,8 +23,8 @@ __export(CategoricalThresholdBar_exports, {
 module.exports = __toCommonJS(CategoricalThresholdBar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ThresholdBar = require("../../../core/components/threshold-bar/ThresholdBar.js");
+var import_get_marker_pixel = require("../../../core/components/threshold-bar/utils/get-marker-pixel.js");
 var import_get_marker_value = require("../../../core/components/threshold-bar/utils/get-marker-value.js");
-var import_get_threshold_pixel_ts = require("../../../core/components/threshold-bar/utils/get-threshold-pixel.ts.js");
 var import_type_guards = require("../../../core/types/type-guards.js");
 var import_selectors = require("../../hooks/store/selectors.js");
 var import_useCategoricalBarChartBaseConfig = require("../../hooks/useCategoricalBarChartBaseConfig.js");
@@ -46,20 +46,16 @@ const CategoricalThresholdBar = ({
     }));
   };
   const getMarkerProps = (yFirst, yLast) => ({
-    y0: (0, import_get_threshold_pixel_ts.getThresholdPixel)(yFirst, valueScale, layout),
-    y1: (0, import_get_threshold_pixel_ts.getThresholdPixel)(yLast, valueScale, layout),
+    y0: (0, import_get_marker_pixel.getMarkerPixel)(yFirst, valueScale, layout),
+    y1: (0, import_get_marker_pixel.getMarkerPixel)(yLast, valueScale, layout),
     value: (0, import_get_marker_value.getMarkerValue)({ y0: yFirst, y1: yLast }, formatter)
   });
   const markers = thresholds.map((threshold) => {
-    if ((0, import_type_guards.isStatic)(threshold.data)) {
-      return {
-        ...threshold,
-        ...getMarkerProps(threshold.data.value, threshold.data.value)
-      };
-    }
+    const domainMin = (0, import_type_guards.isBoundedRange)(threshold.data) ? threshold.data.value : threshold.data.min ?? -Infinity;
+    const domainMax = (0, import_type_guards.isBoundedRange)(threshold.data) ? threshold.data.value : threshold.data.max ?? Infinity;
     return {
       ...threshold,
-      ...getMarkerProps(threshold.data.min, threshold.data.max)
+      ...getMarkerProps(domainMin, domainMax)
     };
   });
   return markers.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/charts/categorical-bar/components/toolbar/CategoricalBarChartToolbar.js

@@ -24,6 +24,7 @@ module.exports = __toCommonJS(CategoricalBarChartToolbar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_DownloadDataButton = require("./DownloadDataButton.js");
+var import_useBehavioralTrackingProps = require("../../../../core/hooks/useBehavioralTrackingProps.js");
 var import_ChartToolbarRenderer = require("../../../core/components/toolbar/ChartToolbarRenderer.js");
 var import_constants = require("../../constants.js");
 var import_selectors = require("../../hooks/store/selectors.js");
@@ -39,6 +40,7 @@ const CategoricalBarChartToolbar = ({
   const { toolbar, intents } = (0, import_useCategoricalBarChartBaseConfig.useCategoricalBarChartBaseConfig)();
   const isInChartBounds = (0, import_selectors.useMouseInBoundsState)();
   const isDownloadEnabled = !!toolbar.downloadData?.enabled;
+  const behaviorTrackingProps = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(toolbar)[0];
   if (toolbar.hidden || !(isDownloadEnabled || intents.length)) {
     return null;
   }
@@ -67,6 +69,7 @@ const CategoricalBarChartToolbar = ({
       isDownloadEnabled: showMenuToolbarButton,
       handleDownloadDataToolbar,
       removeDragHandle: true,
+      ...behaviorTrackingProps,
       children: showDefaultToolbarDownloadButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DownloadDataButton.DownloadDataButton, { hideTooltip: isTooltipHidden })
     }
   );

package/charts/categorical-bar/layout/CategoricalGridZeroLineLayout.js

@@ -47,7 +47,7 @@ const CategoricalGridZeroLineLayout = () => {
     "svg",
     {
       className: import_ChartGrid_css.plotLayout,
-      role: "img",
+      role: "graphics-symbol",
       "aria-label": "categorical grid zero line",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GridLine.GridLine, { from, to, highlight: true })
     }

package/charts/categorical-bar/types/categorical-bar-chart.d.ts

@@ -1,6 +1,7 @@
 import type { ScaleLinear, ScaleSymLog } from 'd3-scale';
 import type { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units';
 import type { IntentProps } from '../../../core/slots/Intent/Intent.js';
+import type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';
 import { MaskingProps } from '../../../core/types/masking-props.js';
 import { StylingProps } from '../../../core/types/styling-props.js';
 import type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';
@@ -266,7 +267,7 @@ export interface CategoricalBarChartRef {
 /**
  * @public
  */
-export interface CategoricalBarChartProps extends StylingProps, MaskingProps {
+export interface CategoricalBarChartProps extends StylingProps, MaskingProps, BehaviorTrackingProps {
     /**
      * Data object for the categorical bar chart
      */

package/charts/categorical-bar/utils/iterate-slots.js

@@ -28,6 +28,7 @@ var import_ColorRule = require("../../core/slots/ColorRule.js");
 var import_ChartToolbar = require("../../core/slots/toolbar/ChartToolbar.js");
 var import_CompactToolbar = require("../../core/slots/toolbar/CompactToolbar.js");
 var import_DownloadData = require("../../core/slots/toolbar/DownloadData.js");
+var import_extract_behavior_tracking_props = require("../../core/utils/extract-behavior-tracking-props.js");
 var import_CategoryAxis = require("../slots/CategoryAxis.js");
 var import_DownloadCSV = require("../slots/DownloadCSV.js");
 var import_Legend = require("../slots/Legend.js");
@@ -104,7 +105,8 @@ const iterateSlots = (children) => {
     } else if ((0, import_is_slot.isSlot)(child, import_Toolbar.CategoricalBarChartToolbarSlot)) {
       slots.toolbar = {
         ...slots.toolbar,
-        ...(0, import_CompactToolbar.sanitizeProps)(child.props)
+        ...(0, import_CompactToolbar.sanitizeProps)(child.props),
+        ...(0, import_extract_behavior_tracking_props.extractBehaviorTrackingProps)(child.props)
       };
     } else if ((0, import_is_slot.isSlot)(child, import_DownloadCSV.CategoricalBarChartDownloadCSVSlot)) {
       slots.toolbar.downloadData ||= { enabled: false };

package/charts/core/components/annotations/AnnotationsAtom.css

@@ -1,3 +1,3 @@
-._145zb630-3-1-3 {
+._145zb630-3-2-1 {
   position: relative;
 }

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

@@ -22,4 +22,4 @@ __export(AnnotationsAtom_css_exports, {
 });
 module.exports = __toCommonJS(AnnotationsAtom_css_exports);
 var import_AnnotationsAtom_css_ts_vanilla = require("./AnnotationsAtom.css");
-var wrapper = "_145zb630-3-1-3";
+var wrapper = "_145zb630-3-2-1";

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

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

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

@@ -22,4 +22,4 @@ __export(AnnotationsCanvasLayout_css_exports, {
 });
 module.exports = __toCommonJS(AnnotationsCanvasLayout_css_exports);
 var import_AnnotationsCanvasLayout_css_ts_vanilla = require("./AnnotationsCanvasLayout.css");
-var canvasContainer = "_1yc349j0-3-1-3";
+var canvasContainer = "_1yc349j0-3-2-1";

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

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

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

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

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

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

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

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

package/charts/core/components/annotations/components/tooltip/AnnotationsTooltipItem.d.ts

@@ -5,5 +5,5 @@ type AnnotationsTooltipItemProps = {
     markerGroupKey: string;
     isScrolling?: boolean;
 };
-export declare const AnnotationsTooltipItem: (props: AnnotationsTooltipItemProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const AnnotationsTooltipItem: (props: AnnotationsTooltipItemProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
 export {};

package/charts/core/components/annotations/constants.d.ts

@@ -33,8 +33,6 @@ export declare const DEFAULT_TRUNCATION_MODE = "middle";
 export declare const DEFAULT_INTEGRATION_TEXT_OVERFLOW = "expand";
 export declare const enum TestIds {
     Marker = "marker",
-    CircleMarker = "circle-marker",
-    PillMarker = "pill-marker",
     Track = "track",
     MarkerGroup = "marker-group",
     AnnotationIndicator = "annotation-indicator"

package/charts/core/components/annotations/constants.js

@@ -102,8 +102,6 @@ const DEFAULT_TRUNCATION_MODE = "middle";
 const DEFAULT_INTEGRATION_TEXT_OVERFLOW = "expand";
 var TestIds = /* @__PURE__ */ ((TestIds2) => {
   TestIds2["Marker"] = "marker";
-  TestIds2["CircleMarker"] = "circle-marker";
-  TestIds2["PillMarker"] = "pill-marker";
   TestIds2["Track"] = "track";
   TestIds2["MarkerGroup"] = "marker-group";
   TestIds2["AnnotationIndicator"] = "annotation-indicator";

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

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

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

@@ -56,14 +56,12 @@ const Axis = ({
     size === "small" ? import_chars_font_width_map.charsFontWidth12pixelsSize400Map : import_chars_font_width_map.charsFontWidth14pixelsSize400Map,
     "middle"
   ) : "";
-  const testId = restProps["data-testid"];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "svg",
     {
       className: import_Axis_css.axis,
       width,
       height,
-      "data-testid": testId,
       role: restProps.role,
       "aria-label": restProps["aria-label"] ?? void 0,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

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

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