@dynatrace/strato-components 3.11.2 → 3.12.0

package/editors/dql-editor/{dql → autocomplete}/suggestions-info-section-extension.js

@@ -44,6 +44,12 @@ const SUGGESTIONS_INFO_ATTR = "data-dql-suggestions-info";
 function findTooltipElement() {
   return document.querySelector(".cm-tooltip-autocomplete");
 }
+function ensureCompletionSectionFirst(ul) {
+  const sectionHeader = ul.querySelector("completion-section");
+  if (sectionHeader && ul.firstElementChild !== sectionHeader) {
+    ul.insertBefore(sectionHeader, ul.firstElementChild);
+  }
+}
 const suggestionsInfoSectionTheme = import_view.EditorView.baseTheme({
   ".cm-tooltip.cm-tooltip-autocomplete": {
     background: "transparent !important",
@@ -79,18 +85,25 @@ const suggestionsInfoSectionPlugin = import_view.ViewPlugin.fromClass(
   class {
     container = null;
     root = null;
+    currentUl = null;
     update(update) {
       const status = (0, import_autocomplete.completionStatus)(update.state);
       if (status === null) {
         queueMicrotask(() => this.unmount());
+        this.currentUl = null;
         return;
       }
       queueMicrotask(() => {
+        const tooltipEl = findTooltipElement();
+        const ul = tooltipEl?.querySelector("ul") ?? null;
+        if (ul && ul !== this.currentUl) {
+          this.currentUl = ul;
+          ensureCompletionSectionFirst(ul);
+        }
         if (this.container?.isConnected) {
           return;
         }
         this.unmount();
-        const tooltipEl = findTooltipElement();
         if (tooltipEl) {
           this.mount(tooltipEl);
         }

package/editors/dql-editor/dql/dql-language.js

@@ -27,9 +27,9 @@ var import_view = require("@codemirror/view");
 var import_dql_fold_service = require("./dql-fold-service.js");
 var import_dql_linter = require("./dql-linter.js");
 var import_dql = require("./dql.js");
-var import_open_autocomplete = require("./open-autocomplete.js");
-var import_suggestion_autocompletions = require("./suggestion-autocompletions.js");
-var import_suggestions_info_section_extension = require("./suggestions-info-section-extension.js");
+var import_open_autocomplete = require("../autocomplete/open-autocomplete.js");
+var import_suggestion_autocompletions = require("../autocomplete/suggestion-autocompletions.js");
+var import_suggestions_info_section_extension = require("../autocomplete/suggestions-info-section-extension.js");
 const VALIDATION_DELAY = 500;
 function getDqlConfig(readOnly, onValidationStart, onValidationEnd, setValidityInfo) {
   const language = import_language.StreamLanguage.define(import_dql.dql);

package/esm/buttons/button/Button.css

@@ -1,13 +1,13 @@
-._10kgnsa0-3-11-2 {
+._10kgnsa0-3-12-0 {
   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-11-2);
-  box-shadow: var(--_bx32h4-3-11-2);
-  color: var(--_bx32h0-3-11-2);
+  background: var(--_bx32h3-3-12-0);
+  box-shadow: var(--_bx32h4-3-12-0);
+  color: var(--_bx32h0-3-12-0);
   display: inline-flex;
   position: relative;
   align-items: center;
@@ -24,38 +24,38 @@
   transition-duration: var(--dt-animations-hover-duration-base, 150ms);
   transition-property: color, background-color, box-shadow, transform;
 }
-._10kgnsa1-3-11-2 {
+._10kgnsa1-3-12-0 {
   text-align: start;
   justify-content: space-between;
 }
-._10kgnsa2-3-11-2 {
+._10kgnsa2-3-12-0 {
   text-align: center;
   justify-content: center;
 }
-._10kgnsa3-3-11-2 {
+._10kgnsa3-3-12-0 {
   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-11-2 {
+._10kgnsa4-3-12-0 {
   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-11-2 {
+._10kgnsa5-3-12-0 {
   cursor: not-allowed;
 }
-._10kgnsa6-3-11-2 {
+._10kgnsa6-3-12-0 {
   width: 100%;
 }
-._10kgnsa7-3-11-2 {
+._10kgnsa7-3-12-0 {
   width: fit-content;
 }
-._10kgnsa8-3-11-2 {
+._10kgnsa8-3-12-0 {
   position: absolute;
   top: 0;
   left: 0;
@@ -67,19 +67,19 @@
   align-items: center;
   z-index: 1;
 }
-._10kgnsa3-3-11-2 ._10kgnsa9-3-11-2:not(:has(svg:only-child)) {
+._10kgnsa3-3-12-0 ._10kgnsa9-3-12-0:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 2px;
   padding-right: 2px;
 }
-._10kgnsa4-3-11-2 ._10kgnsa9-3-11-2:not(:has(svg:only-child)) {
+._10kgnsa4-3-12-0 ._10kgnsa9-3-12-0:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 4px;
   padding-right: 4px;
 }
-._10kgnsab-3-11-2 {
+._10kgnsab-3-12-0 {
   display: inline-flex;
   min-width: 0;
   max-width: 100%;

package/esm/buttons/button/Button.sty.js

@@ -3,10 +3,10 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./Button.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var button = _7a468({ defaultClassName: "_10kgnsa0-3-11-2", variantClassNames: { textAlign: { start: "_10kgnsa1-3-11-2", center: "_10kgnsa2-3-11-2" }, size: { condensed: "_10kgnsa3-3-11-2", "default": "_10kgnsa4-3-11-2" }, disabled: { true: "_10kgnsa5-3-11-2" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
-var label = _7a468({ defaultClassName: "_10kgnsa9-3-11-2", variantClassNames: { textual: { true: "_oqqp1n0-3-11-2", false: "_10kgnsab-3-11-2" } }, defaultVariants: {}, compoundVariants: [] });
-var loading = "_10kgnsa8-3-11-2";
-var widths = { full: "_10kgnsa6-3-11-2", content: "_10kgnsa7-3-11-2" };
+var button = _7a468({ defaultClassName: "_10kgnsa0-3-12-0", variantClassNames: { textAlign: { start: "_10kgnsa1-3-12-0", center: "_10kgnsa2-3-12-0" }, size: { condensed: "_10kgnsa3-3-12-0", "default": "_10kgnsa4-3-12-0" }, disabled: { true: "_10kgnsa5-3-12-0" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
+var label = _7a468({ defaultClassName: "_10kgnsa9-3-12-0", variantClassNames: { textual: { true: "_oqqp1n0-3-12-0", false: "_10kgnsab-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var loading = "_10kgnsa8-3-12-0";
+var widths = { full: "_10kgnsa6-3-12-0", content: "_10kgnsa7-3-12-0" };
 export {
   button,
   label,

package/esm/buttons/button/Button.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/button/Button.css.ts"],
-  "sourcesContent": ["import '../../styles/ellipsis.css';\nimport '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Button.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var button = _7a468({defaultClassName:'_10kgnsa0-3-11-2',variantClassNames:{textAlign:{start:'_10kgnsa1-3-11-2',center:'_10kgnsa2-3-11-2'},size:{condensed:'_10kgnsa3-3-11-2','default':'_10kgnsa4-3-11-2'},disabled:{true:'_10kgnsa5-3-11-2'}},defaultVariants:{size:'default',textAlign:'center',disabled:false},compoundVariants:[]});\nexport var label = _7a468({defaultClassName:'_10kgnsa9-3-11-2',variantClassNames:{textual:{true:'_oqqp1n0-3-11-2',false:'_10kgnsab-3-11-2'}},defaultVariants:{},compoundVariants:[]});\nexport var loading = '_10kgnsa8-3-11-2';\nexport var widths = {full:'_10kgnsa6-3-11-2',content:'_10kgnsa7-3-11-2'};"],
+  "sourcesContent": ["import '../../styles/ellipsis.css';\nimport '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Button.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var button = _7a468({defaultClassName:'_10kgnsa0-3-12-0',variantClassNames:{textAlign:{start:'_10kgnsa1-3-12-0',center:'_10kgnsa2-3-12-0'},size:{condensed:'_10kgnsa3-3-12-0','default':'_10kgnsa4-3-12-0'},disabled:{true:'_10kgnsa5-3-12-0'}},defaultVariants:{size:'default',textAlign:'center',disabled:false},compoundVariants:[]});\nexport var label = _7a468({defaultClassName:'_10kgnsa9-3-12-0',variantClassNames:{textual:{true:'_oqqp1n0-3-12-0',false:'_10kgnsab-3-12-0'}},defaultVariants:{},compoundVariants:[]});\nexport var loading = '_10kgnsa8-3-12-0';\nexport var widths = {full:'_10kgnsa6-3-12-0',content:'_10kgnsa7-3-12-0'};"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,SAAS,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,WAAU,EAAC,OAAM,oBAAmB,QAAO,mBAAkB,GAAE,MAAK,EAAC,WAAU,oBAAmB,WAAU,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,EAAC,MAAK,WAAU,WAAU,UAAS,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvU,IAAI,QAAQ,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,mBAAkB,OAAM,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7K,IAAI,UAAU;AACd,IAAI,SAAS,EAAC,MAAK,oBAAmB,SAAQ,mBAAkB;",
   "names": []
 }

package/esm/buttons/intent-button/IntentButton.css

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

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

@@ -6,6 +6,7 @@ import { DotMenuIcon } from "@dynatrace/strato-icons";
 import { IntentButtonWithoutResponse } from "./IntentButtonWithoutResponse.js";
 import { IntentButtonWithResponse } from "./IntentButtonWithResponse.js";
 import { OpenWith } from "./OpenWith.js";
+import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useSlots } from "../../core/hooks/useSlots.js";
 import {
@@ -40,6 +41,14 @@ const _IntentButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     ...remainingProps
   } = props;
   const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
+  const ariaLabelingProps = useAriaLabelingProps(restProps);
+  const {
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-describedby": _ariaDescribedBy,
+    "aria-details": _ariaDetails,
+    ...outerRestProps
+  } = restProps;
   const [slots, freeform] = useSlots(children, {
     icon: IconPrefix,
     items: { match: Item, multiple: true },
@@ -60,6 +69,7 @@ const _IntentButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     textAlign,
     onClick,
     disabled,
+    ...ariaLabelingProps,
     "aria-disabled": ariaDisabledProp
   };
   return /* @__PURE__ */ jsxs(
@@ -71,7 +81,7 @@ const _IntentButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       "data-dtrum-allow": dataDtrumAllow,
       className: consumerClassName,
       style: consumerStyle,
-      ...mergeProps(restProps, behavioralTrackingProps),
+      ...mergeProps(outerRestProps, behavioralTrackingProps),
       "data-dt-component": COMPONENT_NAME,
       children: [
         "responseProperties" in options ? /* @__PURE__ */ jsx(

package/esm/buttons/intent-button/IntentButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/intent-button/IntentButton.tsx"],
-  "sourcesContent": ["import { forwardRef, isValidElement } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DotMenuIcon } from '@dynatrace/strato-icons';\n\nimport { IntentButtonWithoutResponse } from './IntentButtonWithoutResponse.js';\nimport { IntentButtonWithResponse } from './IntentButtonWithResponse.js';\nimport { OpenWith } from './OpenWith.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport {\n  Intent as Item,\n  type IntentProps,\n} from '../../core/slots/Intent/Intent.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { Menu } from '../../navigation/menu/Menu.js';\nimport { Prefix as IconPrefix } from '../../navigation/menu/Prefix.js';\nimport { Button, ButtonOwnProps } from '../button/Button.js';\n\nconst COMPONENT_NAME = 'IntentButton';\n\n//#region Typings\n\n/**\n * Accepted properties for the IntentButton.\n * @public\n */\nexport type IntentButtonProps = Exclude<IntentProps, 'onSelect' | 'icon'> &\n  Pick<\n    ButtonOwnProps,\n    | 'onClick'\n    | 'color'\n    | 'variant'\n    | 'width'\n    | 'aria-disabled'\n    | 'textAlign'\n    | 'size'\n    | 'disabled'\n  > &\n  BehaviorTrackingProps & {\n    /**\n     * Enable the three dot menu for additional intents.\n     * This menu includes a fallback \"Open with...\" entry for cases where specific intents are unavailable.\n     * @defaultValue true\n     */\n    showMenu?: boolean;\n  };\n\n//#endregion\n\nconst _IntentButton = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  IntentButtonProps\n>((props, forwardedRef) => {\n  const {\n    payload,\n    children,\n    onResponse,\n    options,\n    disabled,\n    color,\n    variant = 'emphasized',\n    width,\n    onClick,\n    size,\n    textAlign,\n    showMenu = true,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  }: IntentButtonProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const [slots, freeform] = useSlots(children, {\n    icon: IconPrefix,\n    items: { match: Item, multiple: true },\n    openWith: OpenWith,\n  });\n\n  const slottedIcon = isValidElement(slots.icon) ? slots.icon : undefined;\n\n  const intl = useIntl();\n  const menuAriaLabel = intl.formatMessage({\n    defaultMessage: 'Open intent menu',\n    id: 'OEhnk3JokTy0c/JX',\n    description: 'Aria label for the IntentButton menu trigger.',\n  });\n\n  const sharedProps: ButtonOwnProps = {\n    color,\n    variant,\n    width,\n    size,\n    textAlign,\n    onClick,\n    disabled,\n    'aria-disabled': ariaDisabledProp,\n  };\n\n  return (\n    <InputGroup\n      ref={forwardedRef}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...mergeProps(restProps, behavioralTrackingProps)}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {'responseProperties' in options ? (\n        <IntentButtonWithResponse\n          {...sharedProps}\n          payload={payload}\n          options={options}\n          onResponse={onResponse ?? (() => undefined)}\n          icon={slottedIcon}\n        >\n          {freeform}\n        </IntentButtonWithResponse>\n      ) : (\n        <IntentButtonWithoutResponse\n          {...sharedProps}\n          payload={payload}\n          options={options}\n          icon={slottedIcon}\n        >\n          {freeform}\n        </IntentButtonWithoutResponse>\n      )}\n      {showMenu && (\n        <Menu>\n          <Menu.Trigger aria-label={menuAriaLabel}>\n            <Button\n              disabled={disabled}\n              aria-disabled={ariaDisabledProp}\n              variant={variant}\n              color={color}\n              size={size}\n              style={{ width: 'max-content', minWidth: 'fit-content' }}\n            >\n              <DotMenuIcon />\n            </Button>\n          </Menu.Trigger>\n          <Menu.Content\n            alignment=\"end\"\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          >\n            {slots.items && (\n              <Menu.Group>\n                {slots.items.map((item, index) => (\n                  <Menu.Intent\n                    {...item.props}\n                    key={`${item.props.options.recommendedAppId}-${index}`}\n                  />\n                ))}\n              </Menu.Group>\n            )}\n            <Menu.Group>\n              {slots.openWith ?? <OpenWith payload={payload} />}\n            </Menu.Group>\n          </Menu.Content>\n        </Menu>\n      )}\n    </InputGroup>\n  );\n});\n\n(_IntentButton as typeof _IntentButton & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\n/**\n * The `IntentButton` is a dedicated component for sending\n * {@link https://developer.dynatrace.com/develop/guides/navigation/intents/ | intents}.\n * The `IntentButton` only works within the AppShell context.\n * @public\n */\nexport const IntentButton = Object.assign(_IntentButton, {\n  Item,\n  OpenWith,\n  Icon: IconPrefix,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { forwardRef, isValidElement } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DotMenuIcon } from '@dynatrace/strato-icons';\n\nimport { IntentButtonWithoutResponse } from './IntentButtonWithoutResponse.js';\nimport { IntentButtonWithResponse } from './IntentButtonWithResponse.js';\nimport { OpenWith } from './OpenWith.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport {\n  Intent as Item,\n  type IntentProps,\n} from '../../core/slots/Intent/Intent.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { Menu } from '../../navigation/menu/Menu.js';\nimport { Prefix as IconPrefix } from '../../navigation/menu/Prefix.js';\nimport { Button, ButtonOwnProps } from '../button/Button.js';\n\nconst COMPONENT_NAME = 'IntentButton';\n\n//#region Typings\n\n/**\n * Accepted properties for the IntentButton.\n * @public\n */\nexport type IntentButtonProps = Exclude<IntentProps, 'onSelect' | 'icon'> &\n  Pick<\n    ButtonOwnProps,\n    | 'onClick'\n    | 'color'\n    | 'variant'\n    | 'width'\n    | 'aria-disabled'\n    | 'textAlign'\n    | 'size'\n    | 'disabled'\n  > &\n  BehaviorTrackingProps & {\n    /**\n     * Enable the three dot menu for additional intents.\n     * This menu includes a fallback \"Open with...\" entry for cases where specific intents are unavailable.\n     * @defaultValue true\n     */\n    showMenu?: boolean;\n  };\n\n//#endregion\n\nconst _IntentButton = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  IntentButtonProps\n>((props, forwardedRef) => {\n  const {\n    payload,\n    children,\n    onResponse,\n    options,\n    disabled,\n    color,\n    variant = 'emphasized',\n    width,\n    onClick,\n    size,\n    textAlign,\n    showMenu = true,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    className: consumerClassName,\n    style: consumerStyle,\n    ...remainingProps\n  }: IntentButtonProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n  const {\n    'aria-label': _ariaLabel,\n    'aria-labelledby': _ariaLabelledBy,\n    'aria-describedby': _ariaDescribedBy,\n    'aria-details': _ariaDetails,\n    ...outerRestProps\n  } = restProps;\n\n  const [slots, freeform] = useSlots(children, {\n    icon: IconPrefix,\n    items: { match: Item, multiple: true },\n    openWith: OpenWith,\n  });\n\n  const slottedIcon = isValidElement(slots.icon) ? slots.icon : undefined;\n\n  const intl = useIntl();\n  const menuAriaLabel = intl.formatMessage({\n    defaultMessage: 'Open intent menu',\n    id: 'OEhnk3JokTy0c/JX',\n    description: 'Aria label for the IntentButton menu trigger.',\n  });\n\n  const sharedProps: ButtonOwnProps = {\n    color,\n    variant,\n    width,\n    size,\n    textAlign,\n    onClick,\n    disabled,\n    ...ariaLabelingProps,\n    'aria-disabled': ariaDisabledProp,\n  };\n\n  return (\n    <InputGroup\n      ref={forwardedRef}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...mergeProps(outerRestProps, behavioralTrackingProps)}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {'responseProperties' in options ? (\n        <IntentButtonWithResponse\n          {...sharedProps}\n          payload={payload}\n          options={options}\n          onResponse={onResponse ?? (() => undefined)}\n          icon={slottedIcon}\n        >\n          {freeform}\n        </IntentButtonWithResponse>\n      ) : (\n        <IntentButtonWithoutResponse\n          {...sharedProps}\n          payload={payload}\n          options={options}\n          icon={slottedIcon}\n        >\n          {freeform}\n        </IntentButtonWithoutResponse>\n      )}\n      {showMenu && (\n        <Menu>\n          <Menu.Trigger aria-label={menuAriaLabel}>\n            <Button\n              disabled={disabled}\n              aria-disabled={ariaDisabledProp}\n              variant={variant}\n              color={color}\n              size={size}\n              style={{ width: 'max-content', minWidth: 'fit-content' }}\n            >\n              <DotMenuIcon />\n            </Button>\n          </Menu.Trigger>\n          <Menu.Content\n            alignment=\"end\"\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          >\n            {slots.items && (\n              <Menu.Group>\n                {slots.items.map((item, index) => (\n                  <Menu.Intent\n                    {...item.props}\n                    key={`${item.props.options.recommendedAppId}-${index}`}\n                  />\n                ))}\n              </Menu.Group>\n            )}\n            <Menu.Group>\n              {slots.openWith ?? <OpenWith payload={payload} />}\n            </Menu.Group>\n          </Menu.Content>\n        </Menu>\n      )}\n    </InputGroup>\n  );\n});\n\n(_IntentButton as typeof _IntentButton & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\n/**\n * The `IntentButton` is a dedicated component for sending\n * {@link https://developer.dynatrace.com/develop/guides/navigation/intents/ | intents}.\n * The `IntentButton` only works within the AppShell context.\n * @public\n */\nexport const IntentButton = Object.assign(_IntentButton, {\n  Item,\n  OpenWith,\n  Icon: IconPrefix,\n});\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import "./IntentButton.css";
-var disabledAppIconOpacity = "_1xe9ern0-3-11-2";
+var disabledAppIconOpacity = "_1xe9ern0-3-12-0";
 export {
   disabledAppIconOpacity
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/intent-button/IntentButton.css.ts"],
-  "sourcesContent": ["import './IntentButton.css';\nexport var disabledAppIconOpacity = '_1xe9ern0-3-11-2';"],
+  "sourcesContent": ["import './IntentButton.css';\nexport var disabledAppIconOpacity = '_1xe9ern0-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,yBAAyB;",
   "names": []
 }

package/esm/buttons/notify-button/NotifyButton.css

@@ -1,10 +1,10 @@
-._1j9pkom0-3-11-2 {
+._1j9pkom0-3-12-0 {
   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-11-2 {
+._1j9pkom1-3-12-0 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-6, 6px);

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

@@ -1,6 +1,6 @@
 import "./NotifyButton.css";
-var overlay = "_1j9pkom0-3-11-2";
-var toast = "_1j9pkom1-3-11-2";
+var overlay = "_1j9pkom0-3-12-0";
+var toast = "_1j9pkom1-3-12-0";
 export {
   overlay,
   toast

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/notify-button/NotifyButton.css.ts"],
-  "sourcesContent": ["import './NotifyButton.css';\nexport var overlay = '_1j9pkom0-3-11-2';\nexport var toast = '_1j9pkom1-3-11-2';"],
+  "sourcesContent": ["import './NotifyButton.css';\nexport var overlay = '_1j9pkom0-3-12-0';\nexport var toast = '_1j9pkom1-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,QAAQ;",
   "names": []
 }

package/esm/charts/annotations-chart/AnnotationsChart.js

@@ -29,6 +29,7 @@ import {
 import { isNumericalData } from "../core/components/annotations/utils/is-numerical-marker.js";
 import { ChartStateHandler } from "../core/components/chart-states/ChartStateHandler.js";
 import { getChartStatesTemplates } from "../core/components/chart-states/utils/get-chart-states-template.js";
+import { PinCoordinationProvider } from "../core/components/overlay-tooltip/contexts/PinCoordinationContext.js";
 import { DataDtrumContext } from "../core/context/DataDtrumContext.js";
 import { useObserveContainerSize } from "../core/hooks/useObserveContainerSize.js";
 import { EmptyStateSlot } from "../core/slots/chart-states/EmptyStateSlot.js";
@@ -49,7 +50,11 @@ const _AnnotationsChart = forwardRef((props, forwardedRef) => {
     "data-testid": dataTestId,
     style: consumerStyle,
     className: consumerClassName,
-    width: propsWidth
+    width: propsWidth,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-details": ariaDetails
   } = props;
   const [behaviorTrackingProps] = useBehavioralTrackingProps(props);
   const [containerDimension, sizeObserverRef] = useObserveContainerSize();
@@ -125,32 +130,41 @@ const _AnnotationsChart = forwardRef((props, forwardedRef) => {
         {
           style: { height, width },
           ref: rootRef,
-          "aria-label": ANNOTATIONS_CHART_ARIA_LABEL,
+          "aria-label": ariaLabel ?? ANNOTATIONS_CHART_ARIA_LABEL,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
+          "aria-details": ariaDetails,
           role: "img",
-          children: /* @__PURE__ */ jsxs(AnnotationsChartConfigProvider, { config, children: [
-            /* @__PURE__ */ jsx(DataDtrumContext.Provider, { value: { dataDtrumAllow, dataDtrumMask }, children: /* @__PURE__ */ jsx(
-              AnnotationsScrollWrapper,
+          children: /* @__PURE__ */ jsx(PinCoordinationProvider, { children: /* @__PURE__ */ jsxs(AnnotationsChartConfigProvider, { config, children: [
+            /* @__PURE__ */ jsx(
+              DataDtrumContext.Provider,
               {
-                height: scrollWrapperHeight,
-                width: containerDimension.width,
+                value: { dataDtrumAllow, dataDtrumMask },
                 children: /* @__PURE__ */ jsx(
-                  AnnotationsDisplay,
+                  AnnotationsScrollWrapper,
                   {
-                    tracks,
-                    scale,
-                    annotationsActions,
-                    showLabels: shouldShowLabels,
-                    labelsOffset,
+                    height: scrollWrapperHeight,
                     width: containerDimension.width,
-                    tooltipConfig,
-                    textOverflow,
-                    truncateMode,
-                    maxLines,
-                    ...behaviorTrackingProps
+                    children: /* @__PURE__ */ jsx(
+                      AnnotationsDisplay,
+                      {
+                        tracks,
+                        scale,
+                        annotationsActions,
+                        showLabels: shouldShowLabels,
+                        labelsOffset,
+                        width: containerDimension.width,
+                        tooltipConfig,
+                        textOverflow,
+                        truncateMode,
+                        maxLines,
+                        ...behaviorTrackingProps
+                      }
+                    )
                   }
                 )
               }
-            ) }),
+            ),
             /* @__PURE__ */ jsx(
               AnnotationsAxis,
               {
@@ -160,7 +174,7 @@ const _AnnotationsChart = forwardRef((props, forwardedRef) => {
                 labelsOffset
               }
             )
-          ] })
+          ] }) })
         }
       )
     }

package/esm/charts/annotations-chart/AnnotationsChart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/annotations-chart/AnnotationsChart.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { isEmpty } from 'lodash-es';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { AnnotationsDisplay } from './components/AnnotationsDisplay.js';\nimport { AnnotationsAxis } from './components/axis/AnnotationsAxis.js';\nimport { ANNOTATIONS_CHART_ARIA_LABEL } from './constants.js';\nimport { useAnnotationsChartConfig } from './hooks/useAnnotationsChartConfig.js';\nimport { AnnotationsChartConfigProvider } from './providers/annotations-chart-config.provider.js';\nimport { Marker } from './slots/Marker.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { Track } from './slots/Track.js';\nimport { XAxis } from './slots/XAxis.js';\nimport type { AnnotationsChartProps } from './types/annotations-chart-props.js';\nimport { AnnotationsChartRef } from './types/annotations-chart-ref.js';\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { buildScale } from './utils/scales.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { AnnotationsScrollWrapper } from '../core/components/annotations/components/overlays/AnnotationsScrollWrapper.js';\nimport {\n  DEFAULT_LABELS_OFFSET,\n  TRACK_HEIGHT,\n  TRACK_SEPARATOR_STROKE_WIDTH,\n} from '../core/components/annotations/constants.js';\nimport { isNumericalData } from '../core/components/annotations/utils/is-numerical-marker.js';\nimport { ChartStateHandler } from '../core/components/chart-states/ChartStateHandler.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { DataDtrumContext } from '../core/context/DataDtrumContext.js';\nimport { useObserveContainerSize } from '../core/hooks/useObserveContainerSize.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ChartType } from '../core/types/chart-types.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\n\nconst AXIS_HEIGHT = 25;\nconst X_AXIS_LABEL_HEIGHT = 10;\nconst COMPONENT_NAME = 'AnnotationsChart';\n\nconst calculateXAxisHeight = (isHidden: boolean, label?: string) =>\n  isHidden ? 0 : label ? AXIS_HEIGHT + X_AXIS_LABEL_HEIGHT : AXIS_HEIGHT;\n\nexport const _AnnotationsChart = forwardRef<\n  AnnotationsChartRef,\n  PropsWithChildren<AnnotationsChartProps>\n>((props, forwardedRef) => {\n  const {\n    annotationsActions,\n    children,\n    loading = false,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId,\n    style: consumerStyle,\n    className: consumerClassName,\n    width: propsWidth,\n  } = props;\n\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  const [containerDimension, sizeObserverRef] = useObserveContainerSize();\n\n  const { aggregatedMarkers, tracks, xAxisProps, tooltipProps } =\n    iterateSlots(children);\n  const { emptyState, errorState } = getChartStatesTemplates(children);\n\n  const hasNumericalData =\n    aggregatedMarkers.length > 0 && isNumericalData(aggregatedMarkers);\n\n  const config = useAnnotationsChartConfig(\n    props,\n    xAxisProps,\n    tooltipProps,\n    hasNumericalData,\n  );\n\n  const {\n    showLabels,\n    xAxisConfig,\n    tooltipConfig,\n    textOverflow,\n    truncateMode,\n    maxLines,\n  } = config;\n\n  const shouldShowLabels = tracks.some(({ label }) => label) && showLabels;\n\n  const labelsOffset = shouldShowLabels\n    ? DEFAULT_LABELS_OFFSET + config.labelWidth\n    : 0;\n\n  const scale = buildScale(\n    aggregatedMarkers,\n    containerDimension.width - labelsOffset,\n    xAxisConfig,\n  );\n\n  const shownTracks = tracks.filter(({ hidden }) => !hidden);\n\n  const tracksHeight =\n    shownTracks.length * TRACK_HEIGHT + TRACK_SEPARATOR_STROKE_WIDTH;\n\n  const axisHeight = calculateXAxisHeight(\n    xAxisConfig.hidden,\n    config.xAxisConfig.label,\n  );\n  const coercedHeight = coerceSizeValue(config.height);\n  const coercedWidth = coerceSizeValue(propsWidth);\n\n  const height = coercedHeight ?? tracksHeight + axisHeight;\n  const width = coercedWidth ?? '100%';\n\n  const scrollWrapperHeight = Math.min(\n    tracksHeight,\n    Math.max(0, containerDimension.height - axisHeight),\n  );\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const rootRef = useMergeRefs<AnnotationsChartRef | HTMLDivElement>([\n    forwardedRef,\n    containerRef,\n    sizeObserverRef,\n  ]);\n\n  useImperativeHandle(forwardedRef, () => ({\n    element: containerRef.current,\n    getConfig: () => {\n      return JSON.stringify({\n        type: ChartType.AnnotationsChart,\n        ...config,\n      });\n    },\n  }));\n\n  return (\n    <ChartStateHandler\n      empty={isEmpty(tracks)}\n      height=\"100%\"\n      emptyState={emptyState}\n      errorState={errorState}\n      isLoading={loading}\n      className={clsx(defaultChartSize, consumerClassName)}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-testid={dataTestId}\n      data-dt-component={COMPONENT_NAME}\n      style={consumerStyle}\n    >\n      <div\n        style={{ height, width }}\n        ref={rootRef}\n        aria-label={ANNOTATIONS_CHART_ARIA_LABEL}\n        role=\"img\"\n      >\n        <AnnotationsChartConfigProvider config={config}>\n          <DataDtrumContext.Provider value={{ dataDtrumAllow, dataDtrumMask }}>\n            <AnnotationsScrollWrapper\n              height={scrollWrapperHeight}\n              width={containerDimension.width}\n            >\n              <AnnotationsDisplay\n                tracks={tracks}\n                scale={scale}\n                annotationsActions={annotationsActions}\n                showLabels={shouldShowLabels}\n                labelsOffset={labelsOffset}\n                width={containerDimension.width}\n                tooltipConfig={tooltipConfig}\n                textOverflow={textOverflow}\n                truncateMode={truncateMode}\n                maxLines={maxLines}\n                {...behaviorTrackingProps}\n              />\n            </AnnotationsScrollWrapper>\n          </DataDtrumContext.Provider>\n          <AnnotationsAxis\n            height={axisHeight}\n            scale={scale}\n            width={containerDimension.width}\n            labelsOffset={labelsOffset}\n          />\n        </AnnotationsChartConfigProvider>\n      </div>\n    </ChartStateHandler>\n  );\n});\n\n/**\n * The `AnnotationsChart` is a visualization tool designed to highlight significant events or data points\n * on a timeline or other graph types. It allows you to annotate specific moments with labels or markers,\n * providing additional context or insights directly within the chart. This chart can be used standalone\n * or integrated with other chart types, such `HistogramChart` or  `TimeseriesChart`, to enrich the data presentation\n * by drawing attention to each event.\n * @public\n */\nexport const AnnotationsChart = Object.assign(_AnnotationsChart, {\n  Track,\n  Marker,\n  XAxis,\n  Tooltip,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { isEmpty } from 'lodash-es';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { AnnotationsDisplay } from './components/AnnotationsDisplay.js';\nimport { AnnotationsAxis } from './components/axis/AnnotationsAxis.js';\nimport { ANNOTATIONS_CHART_ARIA_LABEL } from './constants.js';\nimport { useAnnotationsChartConfig } from './hooks/useAnnotationsChartConfig.js';\nimport { AnnotationsChartConfigProvider } from './providers/annotations-chart-config.provider.js';\nimport { Marker } from './slots/Marker.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { Track } from './slots/Track.js';\nimport { XAxis } from './slots/XAxis.js';\nimport type { AnnotationsChartProps } from './types/annotations-chart-props.js';\nimport { AnnotationsChartRef } from './types/annotations-chart-ref.js';\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { buildScale } from './utils/scales.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { AnnotationsScrollWrapper } from '../core/components/annotations/components/overlays/AnnotationsScrollWrapper.js';\nimport {\n  DEFAULT_LABELS_OFFSET,\n  TRACK_HEIGHT,\n  TRACK_SEPARATOR_STROKE_WIDTH,\n} from '../core/components/annotations/constants.js';\nimport { isNumericalData } from '../core/components/annotations/utils/is-numerical-marker.js';\nimport { ChartStateHandler } from '../core/components/chart-states/ChartStateHandler.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { PinCoordinationProvider } from '../core/components/overlay-tooltip/contexts/PinCoordinationContext.js';\nimport { DataDtrumContext } from '../core/context/DataDtrumContext.js';\nimport { useObserveContainerSize } from '../core/hooks/useObserveContainerSize.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ChartType } from '../core/types/chart-types.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\n\nconst AXIS_HEIGHT = 25;\nconst X_AXIS_LABEL_HEIGHT = 10;\nconst COMPONENT_NAME = 'AnnotationsChart';\n\nconst calculateXAxisHeight = (isHidden: boolean, label?: string) =>\n  isHidden ? 0 : label ? AXIS_HEIGHT + X_AXIS_LABEL_HEIGHT : AXIS_HEIGHT;\n\nexport const _AnnotationsChart = forwardRef<\n  AnnotationsChartRef,\n  PropsWithChildren<AnnotationsChartProps>\n>((props, forwardedRef) => {\n  const {\n    annotationsActions,\n    children,\n    loading = false,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId,\n    style: consumerStyle,\n    className: consumerClassName,\n    width: propsWidth,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n  } = props;\n\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  const [containerDimension, sizeObserverRef] = useObserveContainerSize();\n\n  const { aggregatedMarkers, tracks, xAxisProps, tooltipProps } =\n    iterateSlots(children);\n  const { emptyState, errorState } = getChartStatesTemplates(children);\n\n  const hasNumericalData =\n    aggregatedMarkers.length > 0 && isNumericalData(aggregatedMarkers);\n\n  const config = useAnnotationsChartConfig(\n    props,\n    xAxisProps,\n    tooltipProps,\n    hasNumericalData,\n  );\n\n  const {\n    showLabels,\n    xAxisConfig,\n    tooltipConfig,\n    textOverflow,\n    truncateMode,\n    maxLines,\n  } = config;\n\n  const shouldShowLabels = tracks.some(({ label }) => label) && showLabels;\n\n  const labelsOffset = shouldShowLabels\n    ? DEFAULT_LABELS_OFFSET + config.labelWidth\n    : 0;\n\n  const scale = buildScale(\n    aggregatedMarkers,\n    containerDimension.width - labelsOffset,\n    xAxisConfig,\n  );\n\n  const shownTracks = tracks.filter(({ hidden }) => !hidden);\n\n  const tracksHeight =\n    shownTracks.length * TRACK_HEIGHT + TRACK_SEPARATOR_STROKE_WIDTH;\n\n  const axisHeight = calculateXAxisHeight(\n    xAxisConfig.hidden,\n    config.xAxisConfig.label,\n  );\n  const coercedHeight = coerceSizeValue(config.height);\n  const coercedWidth = coerceSizeValue(propsWidth);\n\n  const height = coercedHeight ?? tracksHeight + axisHeight;\n  const width = coercedWidth ?? '100%';\n\n  const scrollWrapperHeight = Math.min(\n    tracksHeight,\n    Math.max(0, containerDimension.height - axisHeight),\n  );\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const rootRef = useMergeRefs<AnnotationsChartRef | HTMLDivElement>([\n    forwardedRef,\n    containerRef,\n    sizeObserverRef,\n  ]);\n\n  useImperativeHandle(forwardedRef, () => ({\n    element: containerRef.current,\n    getConfig: () => {\n      return JSON.stringify({\n        type: ChartType.AnnotationsChart,\n        ...config,\n      });\n    },\n  }));\n\n  return (\n    <ChartStateHandler\n      empty={isEmpty(tracks)}\n      height=\"100%\"\n      emptyState={emptyState}\n      errorState={errorState}\n      isLoading={loading}\n      className={clsx(defaultChartSize, consumerClassName)}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-testid={dataTestId}\n      data-dt-component={COMPONENT_NAME}\n      style={consumerStyle}\n    >\n      <div\n        style={{ height, width }}\n        ref={rootRef}\n        aria-label={ariaLabel ?? ANNOTATIONS_CHART_ARIA_LABEL}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-details={ariaDetails}\n        role=\"img\"\n      >\n        <PinCoordinationProvider>\n          <AnnotationsChartConfigProvider config={config}>\n            <DataDtrumContext.Provider\n              value={{ dataDtrumAllow, dataDtrumMask }}\n            >\n              <AnnotationsScrollWrapper\n                height={scrollWrapperHeight}\n                width={containerDimension.width}\n              >\n                <AnnotationsDisplay\n                  tracks={tracks}\n                  scale={scale}\n                  annotationsActions={annotationsActions}\n                  showLabels={shouldShowLabels}\n                  labelsOffset={labelsOffset}\n                  width={containerDimension.width}\n                  tooltipConfig={tooltipConfig}\n                  textOverflow={textOverflow}\n                  truncateMode={truncateMode}\n                  maxLines={maxLines}\n                  {...behaviorTrackingProps}\n                />\n              </AnnotationsScrollWrapper>\n            </DataDtrumContext.Provider>\n            <AnnotationsAxis\n              height={axisHeight}\n              scale={scale}\n              width={containerDimension.width}\n              labelsOffset={labelsOffset}\n            />\n          </AnnotationsChartConfigProvider>\n        </PinCoordinationProvider>\n      </div>\n    </ChartStateHandler>\n  );\n});\n\n/**\n * The `AnnotationsChart` is a visualization tool designed to highlight significant events or data points\n * on a timeline or other graph types. It allows you to annotate specific moments with labels or markers,\n * providing additional context or insights directly within the chart. This chart can be used standalone\n * or integrated with other chart types, such `HistogramChart` or  `TimeseriesChart`, to enrich the data presentation\n * by drawing attention to each event.\n * @public\n */\nexport const AnnotationsChart = Object.assign(_AnnotationsChart, {\n  Track,\n  Marker,\n  XAxis,\n  Tooltip,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/categorical-bar/CategoricalBarChartInternal.js

@@ -25,6 +25,7 @@ import {
   BOTTOM_PADDING_ADJUSTMENT,
   OVERLAY_PADDING
 } from "../core/components/data-point/constants.js";
+import { useAriaLabelingContext } from "../core/context/AriaLabelingContext.js";
 const categoricalGridTemplateAreas = `
   "${AREAS.leftAxis} ${AREAS.leftThreshold} plot"
   ". . ${AREAS.bottomThreshold}"
@@ -39,6 +40,12 @@ const categoricalGridTemplateRows = (bottomAxisMaxHeight = "auto") => {
   return `minmax(60%, 1fr) auto minmax(0, ${max})`;
 };
 const CategoricalBarChartInternal = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
+  const {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-details": ariaDetails
+  } = useAriaLabelingContext();
   const loading = useChartLayoutLoading();
   const chartRef = useRef(null);
   const chartAndForwardedRef = useMergeRefs([forwardedRef, chartRef]);
@@ -59,7 +66,10 @@ const CategoricalBarChartInternal = /* @__PURE__ */ forwardRef((props, forwarded
     {
       style: { paddingTop: OVERLAY_PADDING },
       className: defaultChartSize,
-      "aria-label": CATEGORICAL_BAR_CHART_ARIA_LABEL,
+      "aria-label": ariaLabel ?? CATEGORICAL_BAR_CHART_ARIA_LABEL,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-details": ariaDetails,
       role: "img",
       children: /* @__PURE__ */ jsx(
         ChartGrid,

package/esm/charts/categorical-bar/CategoricalBarChartInternal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/categorical-bar/CategoricalBarChartInternal.tsx"],
-  "sourcesContent": ["import { forwardRef, type ReactNode, useRef } from 'react';\n\nimport { CategoricalBarChartCategoryAxis } from './components/axes/CategoricalBarChartCategoryAxis.js';\nimport { CategoricalBarChartValueAxis } from './components/axes/CategoricalBarChartValueAxis.js';\nimport { CategoricalBarChartOverlays } from './components/interactions/CategoricalBarChartOverlays.js';\nimport { CategoricalThresholdArea } from './components/thresholds/CategoricalThresholdArea.js';\nimport { CategoricalThresholdIndicators } from './components/thresholds/CategoricalThresholdIndicators.js';\nimport { CATEGORICAL_BAR_CHART_ARIA_LABEL } from './constants.js';\nimport { useCategoricalBarChartBaseConfig } from './hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartCategoryAxisConfig } from './hooks/useCategoricalBarChartCategoryAxisConfig.js';\nimport { useCategoricalBarChartData } from './hooks/useCategoricalBarChartData.js';\nimport { useCategoricalBarChartLegend } from './hooks/useCategoricalBarChartLegend.js';\nimport { CategoricalBarChartPlot } from './layout/CategoricalBarChartPlot.js';\nimport { CategoricalBarChartFormatterProvider } from './providers/CategoricalBarChartFormatterProvider.js';\nimport { CategoricalBarScalesProvider } from './providers/CategoricalBarScalesProviders.js';\nimport { AREAS } from './types/categorical-bar-area-rules.js';\nimport { isVertical } from './utils/layout.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { ChartGrid } from '../core/components/chart-grid/ChartGridRoot.js';\nimport { useChartLayoutLoading } from '../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useChartLayoutOrientation } from '../core/components/chart-layout/hooks/useChartLayoutOrientation.js';\nimport { useGraphSize } from '../core/components/chart-layout/hooks/useGraphSize.js';\nimport {\n  BOTTOM_PADDING_ADJUSTMENT,\n  OVERLAY_PADDING,\n} from '../core/components/data-point/constants.js';\n\nconst categoricalGridTemplateAreas = `\n  \"${AREAS.leftAxis} ${AREAS.leftThreshold} plot\"\n  \". . ${AREAS.bottomThreshold}\"\n  \". . ${AREAS.bottomAxis}\"\n`;\n\nconst categoricalGridTemplateColumns = (\n  leftAxisMaxWidth: number | 'auto' = 'auto',\n) => {\n  const max =\n    typeof leftAxisMaxWidth === 'number'\n      ? `${leftAxisMaxWidth}px`\n      : leftAxisMaxWidth;\n\n  return `minmax(0, ${max}) auto minmax(60%, 1fr)`;\n};\n\nconst categoricalGridTemplateRows = (\n  bottomAxisMaxHeight: number | 'auto' = 'auto',\n) => {\n  const max =\n    typeof bottomAxisMaxHeight === 'number'\n      ? `${bottomAxisMaxHeight}px`\n      : bottomAxisMaxHeight;\n\n  return `minmax(60%, 1fr) auto minmax(0, ${max})`;\n};\n\nexport const CategoricalBarChartInternal = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  { children?: ReactNode }\n>((props, forwardedRef) => {\n  const loading = useChartLayoutLoading();\n  const chartRef = useRef<HTMLDivElement>(null);\n  const chartAndForwardedRef = useMergeRefs([forwardedRef, chartRef]);\n  const { maxSize } = useCategoricalBarChartCategoryAxisConfig();\n  const { layout } = useCategoricalBarChartBaseConfig();\n  const { hidden: legendHidden } = useCategoricalBarChartLegend();\n  const { orientation } = useChartLayoutOrientation();\n  const { uniqueDimensions } = useCategoricalBarChartData();\n\n  const maxSizeLeftAxis = isVertical(layout) ? undefined : maxSize;\n  const maxSizeBottomAxis = isVertical(layout) ? maxSize : undefined;\n\n  const { width, height } = useGraphSize();\n\n  //TODO (APPDEV-9905): Improve this logic to make Legend Hidden / Unique dimensions logic to be part of one same context, but not for this bugfix.\n  const dontShowLegend = legendHidden || uniqueDimensions.length <= 1;\n  const noLegendRight = dontShowLegend || orientation === 'vertical';\n  const noLegendBottom = dontShowLegend || orientation === 'horizontal';\n\n  const chartGridHeight =\n    height - (noLegendBottom ? OVERLAY_PADDING + BOTTOM_PADDING_ADJUSTMENT : 0);\n  return (\n    <div\n      style={{ paddingTop: OVERLAY_PADDING }}\n      className={defaultChartSize}\n      aria-label={CATEGORICAL_BAR_CHART_ARIA_LABEL}\n      role=\"img\"\n    >\n      <ChartGrid\n        width={width - (noLegendRight ? OVERLAY_PADDING : 0)}\n        height={chartGridHeight}\n        gridTemplateAreas={categoricalGridTemplateAreas}\n        gridTemplateColumns={categoricalGridTemplateColumns(maxSizeLeftAxis)}\n        gridTemplateRows={categoricalGridTemplateRows(maxSizeBottomAxis)}\n        ref={chartAndForwardedRef}\n      >\n        <CategoricalBarScalesProvider>\n          <CategoricalBarChartFormatterProvider>\n            <CategoricalBarChartCategoryAxis />\n            <CategoricalBarChartValueAxis />\n\n            <ChartGrid.PlotArea>\n              <CategoricalBarChartPlot />\n\n              <CategoricalThresholdIndicators />\n\n              {loading ? null : <CategoricalBarChartOverlays />}\n            </ChartGrid.PlotArea>\n            <CategoricalThresholdArea />\n          </CategoricalBarChartFormatterProvider>\n        </CategoricalBarScalesProvider>\n      </ChartGrid>\n    </div>\n  );\n});\n\n(\n  CategoricalBarChartInternal as typeof CategoricalBarChartInternal & {\n    displayName: string;\n  }\n).displayName = 'CategoricalBarChartInternal';\n"],
-  "mappings": "AAkGY,cAGA,YAHA;AAlGZ,SAAS,YAA4B,cAAc;AAEnD,SAAS,uCAAuC;AAChD,SAAS,oCAAoC;AAC7C,SAAS,mCAAmC;AAC5C,SAAS,gCAAgC;AACzC,SAAS,sCAAsC;AAC/C,SAAS,wCAAwC;AACjD,SAAS,wCAAwC;AACjD,SAAS,gDAAgD;AACzD,SAAS,kCAAkC;AAC3C,SAAS,oCAAoC;AAC7C,SAAS,+BAA+B;AACxC,SAAS,4CAA4C;AACrD,SAAS,oCAAoC;AAC7C,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAC1B,SAAS,6BAA6B;AACtC,SAAS,iCAAiC;AAC1C,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,MAAM,+BAA+B;AAAA,KAChC,MAAM,QAAQ,IAAI,MAAM,aAAa;AAAA,SACjC,MAAM,eAAe;AAAA,SACrB,MAAM,UAAU;AAAA;AAGzB,MAAM,iCAAiC,CACrC,mBAAoC,WACjC;AACH,QAAM,MACJ,OAAO,qBAAqB,WACxB,GAAG,gBAAgB,OACnB;AAEN,SAAO,aAAa,GAAG;AACzB;AAEA,MAAM,8BAA8B,CAClC,sBAAuC,WACpC;AACH,QAAM,MACJ,OAAO,wBAAwB,WAC3B,GAAG,mBAAmB,OACtB;AAEN,SAAO,mCAAmC,GAAG;AAC/C;AAEO,MAAM,8BAA8C,2BAGzD,CAAC,OAAO,iBAAiB;AACzB,QAAM,UAAU,sBAAsB;AACtC,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,uBAAuB,aAAa,CAAC,cAAc,QAAQ,CAAC;AAClE,QAAM,EAAE,QAAQ,IAAI,yCAAyC;AAC7D,QAAM,EAAE,OAAO,IAAI,iCAAiC;AACpD,QAAM,EAAE,QAAQ,aAAa,IAAI,6BAA6B;AAC9D,QAAM,EAAE,YAAY,IAAI,0BAA0B;AAClD,QAAM,EAAE,iBAAiB,IAAI,2BAA2B;AAExD,QAAM,kBAAkB,WAAW,MAAM,IAAI,SAAY;AACzD,QAAM,oBAAoB,WAAW,MAAM,IAAI,UAAU;AAEzD,QAAM,EAAE,OAAO,OAAO,IAAI,aAAa;AAGvC,QAAM,iBAAiB,gBAAgB,iBAAiB,UAAU;AAClE,QAAM,gBAAgB,kBAAkB,gBAAgB;AACxD,QAAM,iBAAiB,kBAAkB,gBAAgB;AAEzD,QAAM,kBACJ,UAAU,iBAAiB,kBAAkB,4BAA4B;AAC3E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,YAAY,gBAAgB;AAAA,MACrC,WAAW;AAAA,MACX,cAAY;AAAA,MACZ,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,SAAS,gBAAgB,kBAAkB;AAAA,UAClD,QAAQ;AAAA,UACR,mBAAmB;AAAA,UACnB,qBAAqB,+BAA+B,eAAe;AAAA,UACnE,kBAAkB,4BAA4B,iBAAiB;AAAA,UAC/D,KAAK;AAAA,UAEL,8BAAC,gCACC,+BAAC,wCACC;AAAA,gCAAC,mCAAgC;AAAA,YACjC,oBAAC,gCAA6B;AAAA,YAE9B,qBAAC,UAAU,UAAV,EACC;AAAA,kCAAC,2BAAwB;AAAA,cAEzB,oBAAC,kCAA+B;AAAA,cAE/B,UAAU,OAAO,oBAAC,+BAA4B;AAAA,eACjD;AAAA,YACA,oBAAC,4BAAyB;AAAA,aAC5B,GACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAGC,4BAGA,cAAc;",
+  "sourcesContent": ["import { forwardRef, type ReactNode, useRef } from 'react';\n\nimport { CategoricalBarChartCategoryAxis } from './components/axes/CategoricalBarChartCategoryAxis.js';\nimport { CategoricalBarChartValueAxis } from './components/axes/CategoricalBarChartValueAxis.js';\nimport { CategoricalBarChartOverlays } from './components/interactions/CategoricalBarChartOverlays.js';\nimport { CategoricalThresholdArea } from './components/thresholds/CategoricalThresholdArea.js';\nimport { CategoricalThresholdIndicators } from './components/thresholds/CategoricalThresholdIndicators.js';\nimport { CATEGORICAL_BAR_CHART_ARIA_LABEL } from './constants.js';\nimport { useCategoricalBarChartBaseConfig } from './hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartCategoryAxisConfig } from './hooks/useCategoricalBarChartCategoryAxisConfig.js';\nimport { useCategoricalBarChartData } from './hooks/useCategoricalBarChartData.js';\nimport { useCategoricalBarChartLegend } from './hooks/useCategoricalBarChartLegend.js';\nimport { CategoricalBarChartPlot } from './layout/CategoricalBarChartPlot.js';\nimport { CategoricalBarChartFormatterProvider } from './providers/CategoricalBarChartFormatterProvider.js';\nimport { CategoricalBarScalesProvider } from './providers/CategoricalBarScalesProviders.js';\nimport { AREAS } from './types/categorical-bar-area-rules.js';\nimport { isVertical } from './utils/layout.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { ChartGrid } from '../core/components/chart-grid/ChartGridRoot.js';\nimport { useChartLayoutLoading } from '../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useChartLayoutOrientation } from '../core/components/chart-layout/hooks/useChartLayoutOrientation.js';\nimport { useGraphSize } from '../core/components/chart-layout/hooks/useGraphSize.js';\nimport {\n  BOTTOM_PADDING_ADJUSTMENT,\n  OVERLAY_PADDING,\n} from '../core/components/data-point/constants.js';\nimport { useAriaLabelingContext } from '../core/context/AriaLabelingContext.js';\n\nconst categoricalGridTemplateAreas = `\n  \"${AREAS.leftAxis} ${AREAS.leftThreshold} plot\"\n  \". . ${AREAS.bottomThreshold}\"\n  \". . ${AREAS.bottomAxis}\"\n`;\n\nconst categoricalGridTemplateColumns = (\n  leftAxisMaxWidth: number | 'auto' = 'auto',\n) => {\n  const max =\n    typeof leftAxisMaxWidth === 'number'\n      ? `${leftAxisMaxWidth}px`\n      : leftAxisMaxWidth;\n\n  return `minmax(0, ${max}) auto minmax(60%, 1fr)`;\n};\n\nconst categoricalGridTemplateRows = (\n  bottomAxisMaxHeight: number | 'auto' = 'auto',\n) => {\n  const max =\n    typeof bottomAxisMaxHeight === 'number'\n      ? `${bottomAxisMaxHeight}px`\n      : bottomAxisMaxHeight;\n\n  return `minmax(60%, 1fr) auto minmax(0, ${max})`;\n};\n\nexport const CategoricalBarChartInternal = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  { children?: ReactNode }\n>((props, forwardedRef) => {\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-details': ariaDetails,\n  } = useAriaLabelingContext();\n  const loading = useChartLayoutLoading();\n  const chartRef = useRef<HTMLDivElement>(null);\n  const chartAndForwardedRef = useMergeRefs([forwardedRef, chartRef]);\n  const { maxSize } = useCategoricalBarChartCategoryAxisConfig();\n  const { layout } = useCategoricalBarChartBaseConfig();\n  const { hidden: legendHidden } = useCategoricalBarChartLegend();\n  const { orientation } = useChartLayoutOrientation();\n  const { uniqueDimensions } = useCategoricalBarChartData();\n\n  const maxSizeLeftAxis = isVertical(layout) ? undefined : maxSize;\n  const maxSizeBottomAxis = isVertical(layout) ? maxSize : undefined;\n\n  const { width, height } = useGraphSize();\n\n  //TODO (APPDEV-9905): Improve this logic to make Legend Hidden / Unique dimensions logic to be part of one same context, but not for this bugfix.\n  const dontShowLegend = legendHidden || uniqueDimensions.length <= 1;\n  const noLegendRight = dontShowLegend || orientation === 'vertical';\n  const noLegendBottom = dontShowLegend || orientation === 'horizontal';\n\n  const chartGridHeight =\n    height - (noLegendBottom ? OVERLAY_PADDING + BOTTOM_PADDING_ADJUSTMENT : 0);\n  return (\n    <div\n      style={{ paddingTop: OVERLAY_PADDING }}\n      className={defaultChartSize}\n      aria-label={ariaLabel ?? CATEGORICAL_BAR_CHART_ARIA_LABEL}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      aria-details={ariaDetails}\n      role=\"img\"\n    >\n      <ChartGrid\n        width={width - (noLegendRight ? OVERLAY_PADDING : 0)}\n        height={chartGridHeight}\n        gridTemplateAreas={categoricalGridTemplateAreas}\n        gridTemplateColumns={categoricalGridTemplateColumns(maxSizeLeftAxis)}\n        gridTemplateRows={categoricalGridTemplateRows(maxSizeBottomAxis)}\n        ref={chartAndForwardedRef}\n      >\n        <CategoricalBarScalesProvider>\n          <CategoricalBarChartFormatterProvider>\n            <CategoricalBarChartCategoryAxis />\n            <CategoricalBarChartValueAxis />\n\n            <ChartGrid.PlotArea>\n              <CategoricalBarChartPlot />\n\n              <CategoricalThresholdIndicators />\n\n              {loading ? null : <CategoricalBarChartOverlays />}\n            </ChartGrid.PlotArea>\n            <CategoricalThresholdArea />\n          </CategoricalBarChartFormatterProvider>\n        </CategoricalBarScalesProvider>\n      </ChartGrid>\n    </div>\n  );\n});\n\n(\n  CategoricalBarChartInternal as typeof CategoricalBarChartInternal & {\n    displayName: string;\n  }\n).displayName = 'CategoricalBarChartInternal';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/categorical-bar/CategoricalBarChartRoot.js

@@ -4,6 +4,7 @@ import {
   forwardRef,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef
 } from "react";
 import { CategoricalBarChartLayout } from "./CategoricalBarChartLayout.js";
@@ -26,6 +27,7 @@ import { getChartStatesTemplates } from "../core/components/chart-states/utils/g
 import { OverlayProvider } from "../core/components/overlay-tooltip/contexts/OverlayContext.js";
 import { TooltipProvider } from "../core/components/overlay-tooltip/contexts/TooltipContext.js";
 import { ChartSeriesActionContext } from "../core/components/series-action/ChartSeriesActionContext.js";
+import { AriaLabelingContext } from "../core/context/AriaLabelingContext.js";
 import { ColorRuleContext } from "../core/context/ColorRuleContext.js";
 import { ChartType } from "../core/types/chart-types.js";
 import { coerceSizeValue } from "../core/utils/coerceSizeValue.js";
@@ -40,7 +42,11 @@ const CategoricalBarChartRoot = /* @__PURE__ */ forwardRef((props, forwardedRef)
     className,
     style,
     "data-dtrum-mask": dataDtrumMask,
-    "data-dtrum-allow": dataDtrumAllow
+    "data-dtrum-allow": dataDtrumAllow,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-details": ariaDetails
   } = props;
   const [behaviorTrackingProps] = useBehavioralTrackingProps(props);
   const chartHeight = coerceSizeValue(heightProp ?? DEFAULT_CHART_HEIGHT);
@@ -75,7 +81,16 @@ const CategoricalBarChartRoot = /* @__PURE__ */ forwardRef((props, forwardedRef)
     setState(() => initialState);
   }, [chartConfig]);
   const chartLayoutRef = useAutoLegendRefresh(data);
-  return /* @__PURE__ */ jsx(CategoricalBarChartBaseConfigContext.Provider, { value: baseConfig, children: /* @__PURE__ */ jsx(ColorRuleContext.Provider, { value: chartConfig.colorRules, children: /* @__PURE__ */ jsx(CategoricalBarChartRawDataContext.Provider, { value: data, children: /* @__PURE__ */ jsx(CategoricalBarDataProvider, { data, children: /* @__PURE__ */ jsx(StoreProvider, { children: /* @__PURE__ */ jsx(
+  const ariaLabelingValue = useMemo(
+    () => ({
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-details": ariaDetails
+    }),
+    [ariaLabel, ariaLabelledBy, ariaDescribedBy, ariaDetails]
+  );
+  return /* @__PURE__ */ jsx(AriaLabelingContext.Provider, { value: ariaLabelingValue, children: /* @__PURE__ */ jsx(CategoricalBarChartBaseConfigContext.Provider, { value: baseConfig, children: /* @__PURE__ */ jsx(ColorRuleContext.Provider, { value: chartConfig.colorRules, children: /* @__PURE__ */ jsx(CategoricalBarChartRawDataContext.Provider, { value: data, children: /* @__PURE__ */ jsx(CategoricalBarDataProvider, { data, children: /* @__PURE__ */ jsx(StoreProvider, { children: /* @__PURE__ */ jsx(
     ChartSeriesActionContext.Provider,
     {
       value: {
@@ -104,7 +119,7 @@ const CategoricalBarChartRoot = /* @__PURE__ */ forwardRef((props, forwardedRef)
         }
       ) }) }) }) })
     }
-  ) }) }) }) }) });
+  ) }) }) }) }) }) });
 });
 CategoricalBarChartRoot.displayName = DISPLAY_NAME;
 export {