@dynatrace/strato-components 3.13.3 → 3.14.1

package/esm/layouts/title-bar/TitleBar.sty.js

@@ -1,10 +1,10 @@
 import "../../styles/textStyle.css";
 import "./TitleBar.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var navigationWrapperCSS = "_wcwjv22-3-13-3";
-var subtitleCSS = "_wcwjv23-3-13-3 _da9a8v0-3-13-3 _da9a8v2-3-13-3 _da9a8v3-3-13-3 _da9a8vb-3-13-3";
-var suffixWrapperCSS = "_wcwjv24-3-13-3";
-var titleSubtitleWrapperCSS = _7a468({ defaultClassName: "_wcwjv20-3-13-3", variantClassNames: { childrenAreText: { true: "_wcwjv21-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
+var navigationWrapperCSS = "_wcwjv22-3-14-1";
+var subtitleCSS = "_wcwjv23-3-14-1 _da9a8v0-3-14-1 _da9a8v2-3-14-1 _da9a8v3-3-14-1 _da9a8vb-3-14-1";
+var suffixWrapperCSS = "_wcwjv24-3-14-1";
+var titleSubtitleWrapperCSS = _7a468({ defaultClassName: "_wcwjv20-3-14-1", variantClassNames: { childrenAreText: { true: "_wcwjv21-3-14-1" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   navigationWrapperCSS,
   subtitleCSS,

package/esm/layouts/title-bar/TitleBar.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/title-bar/TitleBar.css.ts"],
-  "sourcesContent": ["import '../../styles/textStyle.css';\nimport './TitleBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var navigationWrapperCSS = '_wcwjv22-3-13-3';\nexport var subtitleCSS = '_wcwjv23-3-13-3 _da9a8v0-3-13-3 _da9a8v2-3-13-3 _da9a8v3-3-13-3 _da9a8vb-3-13-3';\nexport var suffixWrapperCSS = '_wcwjv24-3-13-3';\nexport var titleSubtitleWrapperCSS = _7a468({defaultClassName:'_wcwjv20-3-13-3',variantClassNames:{childrenAreText:{true:'_wcwjv21-3-13-3'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import '../../styles/textStyle.css';\nimport './TitleBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var navigationWrapperCSS = '_wcwjv22-3-14-1';\nexport var subtitleCSS = '_wcwjv23-3-14-1 _da9a8v0-3-14-1 _da9a8v2-3-14-1 _da9a8v3-3-14-1 _da9a8vb-3-14-1';\nexport var suffixWrapperCSS = '_wcwjv24-3-14-1';\nexport var titleSubtitleWrapperCSS = _7a468({defaultClassName:'_wcwjv20-3-14-1',variantClassNames:{childrenAreText:{true:'_wcwjv21-3-14-1'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB;AAC3B,IAAI,cAAc;AAClB,IAAI,mBAAmB;AACvB,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,iBAAgB,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/navigation/app-link/AppLink.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/app-link/AppLink.tsx"],
-  "sourcesContent": ["import { forwardRef, type MouseEvent as ReactMouseEvent } from 'react';\n\nimport { useAppLink } from './hooks/useAppLink.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { Link } from '../../typography/link/Link.js';\n\nconst COMPONENT_NAME = 'AppLink';\n\n/**\n * @public\n */\nexport interface AppLinkProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /** The ID of the app to which the link points. */\n  appId: string;\n  /** ID of the app page to be launched. */\n  pageToken?: string;\n  /** Function to handle click events on the AppLink. */\n  onClick?: (event: ReactMouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\n/**\n * `AppLink` renders a link that points to the specified application.\n * @public\n */\nexport const AppLink = /* @__PURE__ */ forwardRef<\n  HTMLAnchorElement,\n  AppLinkProps\n>((props, forwardedRef) => {\n  const {\n    appId,\n    pageToken,\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    onClick: consumerOnClick,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props;\n  const { onClick, href } = useAppLink({ appId, pageToken });\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  return (\n    <Link\n      {...restProps}\n      ref={forwardedRef}\n      onClick={(event: ReactMouseEvent<HTMLElement, MouseEvent>) => {\n        consumerOnClick?.(event);\n        onClick(event);\n      }}\n      href={href}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {children}\n    </Link>\n  );\n});\n\n(AppLink as typeof AppLink & { displayName: string }).displayName = 'AppLink';\n"],
-  "mappings": "AAwDI;AAxDJ,SAAS,kBAAsD;AAE/D,SAAS,kBAAkB;AAC3B,SAAS,kCAAkC;AAM3C,SAAS,YAAY;AAErB,MAAM,iBAAiB;AAuBhB,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,SAAS,KAAK,IAAI,WAAW,EAAE,OAAO,UAAU,CAAC;AAEzD,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,SAAS,CAAC,UAAoD;AAC5D,0BAAkB,KAAK;AACvB,gBAAQ,KAAK;AAAA,MACf;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW;AAAA,MACX,OAAO;AAAA,MACN,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAElB;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,QAAqD,cAAc;",
+  "sourcesContent": ["import { forwardRef, type MouseEvent as ReactMouseEvent } from 'react';\n\nimport { useAppLink } from './hooks/useAppLink.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { Link } from '../../typography/link/Link.js';\n\nconst COMPONENT_NAME = 'AppLink';\n\n/**\n * @public\n */\nexport interface AppLinkProps\n  extends\n    WithChildren,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /** The ID of the app to which the link points. */\n  appId: string;\n  /** ID of the app page to be launched. */\n  pageToken?: string;\n  /** Function to handle click events on the AppLink. */\n  onClick?: (event: ReactMouseEvent<HTMLElement, MouseEvent>) => void;\n}\n\n/**\n * `AppLink` renders a link that points to the specified application.\n * @public\n */\nexport const AppLink = /* @__PURE__ */ forwardRef<\n  HTMLAnchorElement,\n  AppLinkProps\n>((props, forwardedRef) => {\n  const {\n    appId,\n    pageToken,\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    onClick: consumerOnClick,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props;\n  const { onClick, href } = useAppLink({ appId, pageToken });\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  return (\n    <Link\n      {...restProps}\n      ref={forwardedRef}\n      onClick={(event: ReactMouseEvent<HTMLElement, MouseEvent>) => {\n        consumerOnClick?.(event);\n        onClick(event);\n      }}\n      href={href}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      {children}\n    </Link>\n  );\n});\n\n(AppLink as typeof AppLink & { displayName: string }).displayName = 'AppLink';\n"],
+  "mappings": "AAyDI;AAzDJ,SAAS,kBAAsD;AAE/D,SAAS,kBAAkB;AAC3B,SAAS,kCAAkC;AAM3C,SAAS,YAAY;AAErB,MAAM,iBAAiB;AAwBhB,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,SAAS,KAAK,IAAI,WAAW,EAAE,OAAO,UAAU,CAAC;AAEzD,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,SAAS,CAAC,UAAoD;AAC5D,0BAAkB,KAAK;AACvB,gBAAQ,KAAK;AAAA,MACf;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,WAAW;AAAA,MACX,OAAO;AAAA,MACN,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAElB;AAAA;AAAA,EACH;AAEJ,CAAC;AAEA,QAAqD,cAAc;",
   "names": []
 }

package/esm/navigation/breadcrumbs/Breadcrumbs.css

@@ -1,27 +1,27 @@
-._hw98ku0-3-13-3 {
+._hw98ku0-3-14-1 {
   display: flex;
   min-width: 0;
   margin: 0;
   padding: 0;
 }
-._hw98ku1-3-13-3 {
+._hw98ku1-3-14-1 {
   display: flex;
   gap: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-2, 2px);
   white-space: nowrap;
 }
-._hw98ku2-3-13-3 {
+._hw98ku2-3-14-1 {
   overflow: hidden;
 }
-._hw98ku3-3-13-3 {
+._hw98ku3-3-14-1 {
   overflow: visible;
 }
-._hw98ku4-3-13-3 {
+._hw98ku4-3-14-1 {
   position: absolute;
   visibility: hidden;
   z-index: -1;
 }
-._hw98ku5-3-13-3 {
+._hw98ku5-3-14-1 {
   cursor: pointer;
   padding: 0;
   background: none;
@@ -32,18 +32,18 @@
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   text-decoration: underline;
 }
-._hw98ku6-3-13-3 {
+._hw98ku6-3-14-1 {
   cursor: default;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   text-decoration: none;
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   pointer-events: none;
 }
-._hw98ku7-3-13-3 {
+._hw98ku7-3-14-1 {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._hw98ku8-3-13-3 {
+._hw98ku8-3-14-1 {
   min-width: var(--dt-spacings-size-20, 20px);
   min-height: var(--dt-spacings-size-20, 20px);
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);

package/esm/navigation/breadcrumbs/Breadcrumbs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/breadcrumbs/Breadcrumbs.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  type ReactNode,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport {\n  breadcrumbsContainerCSS,\n  breadcrumbsItemInvisibleCSS,\n} from './Breadcrumbs.sty.js';\nimport { isBreadcrumbItem, Item } from './Item.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useMeasureChildren } from '../../core/hooks/useMeasureChildren.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { Menu } from '../menu/Menu.js';\n\nconst COMPONENT_NAME = 'Breadcrumbs';\n\n//#region Typings\n/**\n * Accepted properties for Breadcrumbs\n * @public\n */\nexport interface BreadcrumbsProps\n  extends StylingProps,\n    DataTestId,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /** Elements to be displayed as Breadcrumbs. */\n  children?: ReactNode;\n}\n\ntype SlotsType = {\n  items: ReactNode[];\n  menuItems: ReactNode[];\n};\n// #endregion\n\n/** Breadcrumbs component */\nconst BreadcrumbsRoot = /* @__PURE__ */ forwardRef<\n  HTMLOListElement,\n  BreadcrumbsProps\n>((props: BreadcrumbsProps, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  }: BreadcrumbsProps = props;\n  const _containerRef = useRef<HTMLOListElement | null>(null);\n  const { containerRef, measurements, childProps } =\n    useMeasureChildren<HTMLOListElement>();\n  const { width: containerWidth } = useContainerSize(_containerRef);\n\n  const rootRef = useMergeRefs([forwardedRef, _containerRef, containerRef]);\n  const overflowingBreadcrumbs = useRef(new Map<string, boolean>());\n  const intl = useIntl();\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const slots = useMemo(() => {\n    const slots: SlotsType = { items: [], menuItems: [] };\n    const childrenArray = Children.toArray(children);\n\n    // Get total width of children.\n    let childWidths = 0;\n\n    for (const value of Object.values(measurements)) {\n      childWidths += value?.width || 0;\n    }\n\n    // As soon as we have sufficient data from the measurement hook,\n    // determine visible and hidden breadcrumbs.\n    if (Object.keys(measurements).length === childProps.length) {\n      const childKeys = childProps.map((props) => props['data-id']);\n\n      // Index of the next child to remove if there is not enough space.\n      // We start collapsing at the second breadcrumb.\n      // If an item is already collapsed, we additionally skip the menu\n      // toggle that is then added at the second position.\n      let childIndex = overflowingBreadcrumbs.current.size ? 2 : 1;\n\n      // Clear all entries so that breadcrumbs will show up again when expanding the container.\n      overflowingBreadcrumbs.current.clear();\n\n      while (childWidths > containerWidth && childIndex < childProps.length) {\n        // As long as at least three breadcrumbs are still visible (root + location + current),\n        // we keep removing location breadcrumbs until only root and current are left.\n        if (childIndex !== childProps.length - 1) {\n          const key = childKeys[childIndex];\n          if (key) {\n            overflowingBreadcrumbs.current.set(key, true);\n            childWidths -= measurements[key]?.width || 0;\n          }\n        } else {\n          // If only the root and current breadcrumb are visible, the next one to collapse is\n          // the root breadcrumb. The current breadcrumb will only get a text ellipsis.\n          const key = childKeys[0];\n          if (key) {\n            overflowingBreadcrumbs.current.set(key, true);\n            childWidths -= measurements[key]?.width || 0;\n          }\n        }\n        childIndex++;\n      }\n    }\n\n    // Iterate over children and add them to the corresponding slots.\n    for (const [index, child] of childrenArray.entries()) {\n      if (isBreadcrumbItem(child)) {\n        const uniqueKey = `nav-items-${index}`;\n\n        // If a breadcrumb is hidden already, we add the toggle for the overlay after the first breadcrumb.\n        // We need to account for the additional child when spreading the childProps onto each child and\n        // shift the index by one for each child after the button.\n        const adjustedIndex =\n          overflowingBreadcrumbs.current.size > 0 && index > 0\n            ? index + 1\n            : index;\n\n        // The last breadcrumb should not render the divider.\n        const isLast = index === childrenArray.length - 1;\n\n        slots.items.push(\n          cloneElement(child, {\n            ...child.props,\n            key: uniqueKey,\n            className: clsx(\n              {\n                [`${breadcrumbsItemInvisibleCSS}`]:\n                  overflowingBreadcrumbs.current.get(\n                    childProps[adjustedIndex]?.['data-id'] || '',\n                  ),\n              },\n              child.props.className,\n            ),\n            isLast,\n            isLastVisible:\n              isLast &&\n              overflowingBreadcrumbs.current.size === childrenArray.length - 1,\n            isCollapsed: false,\n            ...childProps[adjustedIndex],\n          }),\n        );\n\n        if (\n          overflowingBreadcrumbs.current.get(\n            childProps[adjustedIndex]?.['data-id'] || '',\n          )\n        ) {\n          slots.menuItems.push(\n            cloneElement(<Menu.Link />, {\n              ...child.props,\n              key: uniqueKey,\n              isCollapsed: true,\n              ...childProps[adjustedIndex],\n            }),\n          );\n        }\n      }\n    }\n\n    return slots;\n  }, [children, measurements, containerWidth, childProps]);\n\n  return (\n    <nav\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-label={intl.formatMessage({\n        defaultMessage: 'Breadcrumb',\n        id: 'x2bmZRg98b0KodlW',\n      })}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...restProps}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <ol ref={rootRef} className={breadcrumbsContainerCSS}>\n        {slots.items[0]}\n        {overflowingBreadcrumbs.current.size > 0 && (\n          <Menu>\n            <Menu.Trigger>\n              <Item as={Button} {...childProps[1]} menuTrigger size=\"condensed\">\n                <Button.Prefix style={{ color: Colors.Text.Neutral.Default }}>\n                  \u2026\n                </Button.Prefix>\n              </Item>\n            </Menu.Trigger>\n            <Menu.Content>{slots.menuItems}</Menu.Content>\n          </Menu>\n        )}\n        {slots.items.slice(1)}\n      </ol>\n    </nav>\n  );\n});\n\n(\n  BreadcrumbsRoot as typeof BreadcrumbsRoot & { displayName: string }\n).displayName = 'Breadcrumbs';\n\n/**\n * Use `Breadcrumbs` to show users their location within a hierarchy of more than two levels. Users can navigate back to any higher level directly.\n * @public\n */\nexport const Breadcrumbs = Object.assign(BreadcrumbsRoot, {\n  Item,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  type ReactNode,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport {\n  breadcrumbsContainerCSS,\n  breadcrumbsItemInvisibleCSS,\n} from './Breadcrumbs.sty.js';\nimport { isBreadcrumbItem, Item } from './Item.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useMeasureChildren } from '../../core/hooks/useMeasureChildren.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { Menu } from '../menu/Menu.js';\n\nconst COMPONENT_NAME = 'Breadcrumbs';\n\n//#region Typings\n/**\n * Accepted properties for Breadcrumbs\n * @public\n */\nexport interface BreadcrumbsProps\n  extends StylingProps, DataTestId, MaskingProps, BehaviorTrackingProps {\n  /** Elements to be displayed as Breadcrumbs. */\n  children?: ReactNode;\n}\n\ntype SlotsType = {\n  items: ReactNode[];\n  menuItems: ReactNode[];\n};\n// #endregion\n\n/** Breadcrumbs component */\nconst BreadcrumbsRoot = /* @__PURE__ */ forwardRef<\n  HTMLOListElement,\n  BreadcrumbsProps\n>((props: BreadcrumbsProps, forwardedRef) => {\n  const {\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  }: BreadcrumbsProps = props;\n  const _containerRef = useRef<HTMLOListElement | null>(null);\n  const { containerRef, measurements, childProps } =\n    useMeasureChildren<HTMLOListElement>();\n  const { width: containerWidth } = useContainerSize(_containerRef);\n\n  const rootRef = useMergeRefs([forwardedRef, _containerRef, containerRef]);\n  const overflowingBreadcrumbs = useRef(new Map<string, boolean>());\n  const intl = useIntl();\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const slots = useMemo(() => {\n    const slots: SlotsType = { items: [], menuItems: [] };\n    const childrenArray = Children.toArray(children);\n\n    // Get total width of children.\n    let childWidths = 0;\n\n    for (const value of Object.values(measurements)) {\n      childWidths += value?.width || 0;\n    }\n\n    // As soon as we have sufficient data from the measurement hook,\n    // determine visible and hidden breadcrumbs.\n    if (Object.keys(measurements).length === childProps.length) {\n      const childKeys = childProps.map((props) => props['data-id']);\n\n      // Index of the next child to remove if there is not enough space.\n      // We start collapsing at the second breadcrumb.\n      // If an item is already collapsed, we additionally skip the menu\n      // toggle that is then added at the second position.\n      let childIndex = overflowingBreadcrumbs.current.size ? 2 : 1;\n\n      // Clear all entries so that breadcrumbs will show up again when expanding the container.\n      overflowingBreadcrumbs.current.clear();\n\n      while (childWidths > containerWidth && childIndex < childProps.length) {\n        // As long as at least three breadcrumbs are still visible (root + location + current),\n        // we keep removing location breadcrumbs until only root and current are left.\n        if (childIndex !== childProps.length - 1) {\n          const key = childKeys[childIndex];\n          if (key) {\n            overflowingBreadcrumbs.current.set(key, true);\n            childWidths -= measurements[key]?.width || 0;\n          }\n        } else {\n          // If only the root and current breadcrumb are visible, the next one to collapse is\n          // the root breadcrumb. The current breadcrumb will only get a text ellipsis.\n          const key = childKeys[0];\n          if (key) {\n            overflowingBreadcrumbs.current.set(key, true);\n            childWidths -= measurements[key]?.width || 0;\n          }\n        }\n        childIndex++;\n      }\n    }\n\n    // Iterate over children and add them to the corresponding slots.\n    for (const [index, child] of childrenArray.entries()) {\n      if (isBreadcrumbItem(child)) {\n        const uniqueKey = `nav-items-${index}`;\n\n        // If a breadcrumb is hidden already, we add the toggle for the overlay after the first breadcrumb.\n        // We need to account for the additional child when spreading the childProps onto each child and\n        // shift the index by one for each child after the button.\n        const adjustedIndex =\n          overflowingBreadcrumbs.current.size > 0 && index > 0\n            ? index + 1\n            : index;\n\n        // The last breadcrumb should not render the divider.\n        const isLast = index === childrenArray.length - 1;\n\n        slots.items.push(\n          cloneElement(child, {\n            ...child.props,\n            key: uniqueKey,\n            className: clsx(\n              {\n                [`${breadcrumbsItemInvisibleCSS}`]:\n                  overflowingBreadcrumbs.current.get(\n                    childProps[adjustedIndex]?.['data-id'] || '',\n                  ),\n              },\n              child.props.className,\n            ),\n            isLast,\n            isLastVisible:\n              isLast &&\n              overflowingBreadcrumbs.current.size === childrenArray.length - 1,\n            isCollapsed: false,\n            ...childProps[adjustedIndex],\n          }),\n        );\n\n        if (\n          overflowingBreadcrumbs.current.get(\n            childProps[adjustedIndex]?.['data-id'] || '',\n          )\n        ) {\n          slots.menuItems.push(\n            cloneElement(<Menu.Link />, {\n              ...child.props,\n              key: uniqueKey,\n              isCollapsed: true,\n              ...childProps[adjustedIndex],\n            }),\n          );\n        }\n      }\n    }\n\n    return slots;\n  }, [children, measurements, containerWidth, childProps]);\n\n  return (\n    <nav\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-label={intl.formatMessage({\n        defaultMessage: 'Breadcrumb',\n        id: 'x2bmZRg98b0KodlW',\n      })}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...restProps}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <ol ref={rootRef} className={breadcrumbsContainerCSS}>\n        {slots.items[0]}\n        {overflowingBreadcrumbs.current.size > 0 && (\n          <Menu>\n            <Menu.Trigger>\n              <Item as={Button} {...childProps[1]} menuTrigger size=\"condensed\">\n                <Button.Prefix style={{ color: Colors.Text.Neutral.Default }}>\n                  \u2026\n                </Button.Prefix>\n              </Item>\n            </Menu.Trigger>\n            <Menu.Content>{slots.menuItems}</Menu.Content>\n          </Menu>\n        )}\n        {slots.items.slice(1)}\n      </ol>\n    </nav>\n  );\n});\n\n(\n  BreadcrumbsRoot as typeof BreadcrumbsRoot & { displayName: string }\n).displayName = 'Breadcrumbs';\n\n/**\n * Use `Breadcrumbs` to show users their location within a hierarchy of more than two levels. Users can navigate back to any higher level directly.\n * @public\n */\nexport const Breadcrumbs = Object.assign(BreadcrumbsRoot, {\n  Item,\n});\n"],
+  "mappings": "AAqKyB,cAgCf,YAhCe;AArKzB,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AAExB,OAAO,YAAY;AAEnB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB,YAAY;AACvC,SAAS,cAAc;AACvB,SAAS,kCAAkC;AAC3C,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAK7B,SAAS,YAAY;AAErB,MAAM,iBAAiB;AAoBvB,MAAM,kBAAkC,2BAGtC,CAAC,OAAyB,iBAAiB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAsB;AACtB,QAAM,gBAAgB,OAAgC,IAAI;AAC1D,QAAM,EAAE,cAAc,cAAc,WAAW,IAC7C,mBAAqC;AACvC,QAAM,EAAE,OAAO,eAAe,IAAI,iBAAiB,aAAa;AAEhE,QAAM,UAAU,aAAa,CAAC,cAAc,eAAe,YAAY,CAAC;AACxE,QAAM,yBAAyB,OAAO,oBAAI,IAAqB,CAAC;AAChE,QAAM,OAAO,QAAQ;AAErB,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAMA,SAAmB,EAAE,OAAO,CAAC,GAAG,WAAW,CAAC,EAAE;AACpD,UAAM,gBAAgB,SAAS,QAAQ,QAAQ;AAG/C,QAAI,cAAc;AAElB,eAAW,SAAS,OAAO,OAAO,YAAY,GAAG;AAC/C,qBAAe,OAAO,SAAS;AAAA,IACjC;AAIA,QAAI,OAAO,KAAK,YAAY,EAAE,WAAW,WAAW,QAAQ;AAC1D,YAAM,YAAY,WAAW,IAAI,CAACC,WAAUA,OAAM,SAAS,CAAC;AAM5D,UAAI,aAAa,uBAAuB,QAAQ,OAAO,IAAI;AAG3D,6BAAuB,QAAQ,MAAM;AAErC,aAAO,cAAc,kBAAkB,aAAa,WAAW,QAAQ;AAGrE,YAAI,eAAe,WAAW,SAAS,GAAG;AACxC,gBAAM,MAAM,UAAU,UAAU;AAChC,cAAI,KAAK;AACP,mCAAuB,QAAQ,IAAI,KAAK,IAAI;AAC5C,2BAAe,aAAa,GAAG,GAAG,SAAS;AAAA,UAC7C;AAAA,QACF,OAAO;AAGL,gBAAM,MAAM,UAAU,CAAC;AACvB,cAAI,KAAK;AACP,mCAAuB,QAAQ,IAAI,KAAK,IAAI;AAC5C,2BAAe,aAAa,GAAG,GAAG,SAAS;AAAA,UAC7C;AAAA,QACF;AACA;AAAA,MACF;AAAA,IACF;AAGA,eAAW,CAAC,OAAO,KAAK,KAAK,cAAc,QAAQ,GAAG;AACpD,UAAI,iBAAiB,KAAK,GAAG;AAC3B,cAAM,YAAY,aAAa,KAAK;AAKpC,cAAM,gBACJ,uBAAuB,QAAQ,OAAO,KAAK,QAAQ,IAC/C,QAAQ,IACR;AAGN,cAAM,SAAS,UAAU,cAAc,SAAS;AAEhD,QAAAD,OAAM,MAAM;AAAA,UACV,aAAa,OAAO;AAAA,YAClB,GAAG,MAAM;AAAA,YACT,KAAK;AAAA,YACL,WAAW;AAAA,cACT;AAAA,gBACE,CAAC,GAAG,2BAA2B,EAAE,GAC/B,uBAAuB,QAAQ;AAAA,kBAC7B,WAAW,aAAa,IAAI,SAAS,KAAK;AAAA,gBAC5C;AAAA,cACJ;AAAA,cACA,MAAM,MAAM;AAAA,YACd;AAAA,YACA;AAAA,YACA,eACE,UACA,uBAAuB,QAAQ,SAAS,cAAc,SAAS;AAAA,YACjE,aAAa;AAAA,YACb,GAAG,WAAW,aAAa;AAAA,UAC7B,CAAC;AAAA,QACH;AAEA,YACE,uBAAuB,QAAQ;AAAA,UAC7B,WAAW,aAAa,IAAI,SAAS,KAAK;AAAA,QAC5C,GACA;AACA,UAAAA,OAAM,UAAU;AAAA,YACd,aAAa,oBAAC,KAAK,MAAL,EAAU,GAAI;AAAA,cAC1B,GAAG,MAAM;AAAA,cACT,KAAK;AAAA,cACL,aAAa;AAAA,cACb,GAAG,WAAW,aAAa;AAAA,YAC7B,CAAC;AAAA,UACH;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAEA,WAAOA;AAAA,EACT,GAAG,CAAC,UAAU,cAAc,gBAAgB,UAAU,CAAC;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,cAAY,KAAK,cAAc;AAAA,QAC7B,gBAAgB;AAAA,QAChB,IAAI;AAAA,MACN,CAAC;AAAA,MACD,WAAW;AAAA,MACX,OAAO;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAEnB,+BAAC,QAAG,KAAK,SAAS,WAAW,yBAC1B;AAAA,cAAM,MAAM,CAAC;AAAA,QACb,uBAAuB,QAAQ,OAAO,KACrC,qBAAC,QACC;AAAA,8BAAC,KAAK,SAAL,EACC,8BAAC,QAAK,IAAI,QAAS,GAAG,WAAW,CAAC,GAAG,aAAW,MAAC,MAAK,aACpD,8BAAC,OAAO,QAAP,EAAc,OAAO,EAAE,OAAO,OAAO,KAAK,QAAQ,QAAQ,GAAG,oBAE9D,GACF,GACF;AAAA,UACA,oBAAC,KAAK,SAAL,EAAc,gBAAM,WAAU;AAAA,WACjC;AAAA,QAED,MAAM,MAAM,MAAM,CAAC;AAAA,SACtB;AAAA;AAAA,EACF;AAEJ,CAAC;AAGC,gBACA,cAAc;AAMT,MAAM,cAAc,OAAO,OAAO,iBAAiB;AAAA,EACxD;AACF,CAAC;",
   "names": ["slots", "props"]
 }

package/esm/navigation/breadcrumbs/Breadcrumbs.sty.js

@@ -1,10 +1,10 @@
 import "./Breadcrumbs.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var breadcrumbsContainerCSS = "_hw98ku0-3-13-3";
-var breadcrumbsItemCSS = _7a468({ defaultClassName: "_hw98ku5-3-13-3", variantClassNames: { disabled: { true: "_hw98ku6-3-13-3" }, isLastItem: { true: "_hw98ku7-3-13-3" } }, defaultVariants: { disabled: false, isLastItem: false }, compoundVariants: [] });
-var breadcrumbsItemInvisibleCSS = "_hw98ku4-3-13-3";
-var breadcrumbsListItemCSS = _7a468({ defaultClassName: "_hw98ku1-3-13-3", variantClassNames: { isLastVisible: { true: "_hw98ku2-3-13-3", false: "_hw98ku3-3-13-3" } }, defaultVariants: { isLastVisible: false }, compoundVariants: [] });
-var breadcrumbsSeperatorIconCSS = "_hw98ku8-3-13-3";
+var breadcrumbsContainerCSS = "_hw98ku0-3-14-1";
+var breadcrumbsItemCSS = _7a468({ defaultClassName: "_hw98ku5-3-14-1", variantClassNames: { disabled: { true: "_hw98ku6-3-14-1" }, isLastItem: { true: "_hw98ku7-3-14-1" } }, defaultVariants: { disabled: false, isLastItem: false }, compoundVariants: [] });
+var breadcrumbsItemInvisibleCSS = "_hw98ku4-3-14-1";
+var breadcrumbsListItemCSS = _7a468({ defaultClassName: "_hw98ku1-3-14-1", variantClassNames: { isLastVisible: { true: "_hw98ku2-3-14-1", false: "_hw98ku3-3-14-1" } }, defaultVariants: { isLastVisible: false }, compoundVariants: [] });
+var breadcrumbsSeperatorIconCSS = "_hw98ku8-3-14-1";
 export {
   breadcrumbsContainerCSS,
   breadcrumbsItemCSS,

package/esm/navigation/breadcrumbs/Breadcrumbs.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/breadcrumbs/Breadcrumbs.css.ts"],
-  "sourcesContent": ["import './Breadcrumbs.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var breadcrumbsContainerCSS = '_hw98ku0-3-13-3';\nexport var breadcrumbsItemCSS = _7a468({defaultClassName:'_hw98ku5-3-13-3',variantClassNames:{disabled:{true:'_hw98ku6-3-13-3'},isLastItem:{true:'_hw98ku7-3-13-3'}},defaultVariants:{disabled:false,isLastItem:false},compoundVariants:[]});\nexport var breadcrumbsItemInvisibleCSS = '_hw98ku4-3-13-3';\nexport var breadcrumbsListItemCSS = _7a468({defaultClassName:'_hw98ku1-3-13-3',variantClassNames:{isLastVisible:{true:'_hw98ku2-3-13-3',false:'_hw98ku3-3-13-3'}},defaultVariants:{isLastVisible:false},compoundVariants:[]});\nexport var breadcrumbsSeperatorIconCSS = '_hw98ku8-3-13-3';"],
+  "sourcesContent": ["import './Breadcrumbs.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var breadcrumbsContainerCSS = '_hw98ku0-3-14-1';\nexport var breadcrumbsItemCSS = _7a468({defaultClassName:'_hw98ku5-3-14-1',variantClassNames:{disabled:{true:'_hw98ku6-3-14-1'},isLastItem:{true:'_hw98ku7-3-14-1'}},defaultVariants:{disabled:false,isLastItem:false},compoundVariants:[]});\nexport var breadcrumbsItemInvisibleCSS = '_hw98ku4-3-14-1';\nexport var breadcrumbsListItemCSS = _7a468({defaultClassName:'_hw98ku1-3-14-1',variantClassNames:{isLastVisible:{true:'_hw98ku2-3-14-1',false:'_hw98ku3-3-14-1'}},defaultVariants:{isLastVisible:false},compoundVariants:[]});\nexport var breadcrumbsSeperatorIconCSS = '_hw98ku8-3-14-1';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,0BAA0B;AAC9B,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,YAAW,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,UAAS,OAAM,YAAW,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACpO,IAAI,8BAA8B;AAClC,IAAI,yBAAyB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,eAAc,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,eAAc,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrN,IAAI,8BAA8B;",
   "names": []
 }

package/esm/navigation/menu/Content.js

@@ -67,7 +67,7 @@ const Content = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       sideOffset: _sideOffset,
       alignOffset: _alignOffset,
       avoidCollisions,
-      className: styles.content,
+      className: `${styles.content} ${styles.groupContainer}`,
       style: { zIndex: style.zIndex },
       onKeyDown: handleOnKeyDown,
       collisionBoundary,

package/esm/navigation/menu/Content.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Content.tsx"],
-  "sourcesContent": ["import {\n  Content as RadixContent,\n  Portal as RadixPortal,\n} from '@radix-ui/react-dropdown-menu';\nimport {\n  forwardRef,\n  useCallback,\n  useContext,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport { MobileMenuModeContext } from './contexts/MobileMenuModeContext.js';\nimport { useMenuContext } from './hooks/useMenuContext.js';\nimport * as styles from './Menu.sty.js';\nimport { MobileContent } from './MobileContent.js';\nimport { type MenuContentProps } from './types.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\n\nexport type { MenuContentProps };\n\nconst SIDE_OFFSET = 4;\ntype InternalMenuContentProps = MenuContentProps & {\n  /** @internal */\n  _onTabKeyPressed: () => void;\n  /** @internal */\n  _sideOffset?: number;\n  /** @internal */\n  _alignOffset?: number;\n};\n\n/**\n * The component that pops out when the dropdown menu is open.\n * @public\n */\nexport const Content = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuContentProps\n>((props, forwardedRef) => {\n  const isMobile = useContext(MobileMenuModeContext);\n\n  const {\n    side = 'bottom',\n    alignment = 'start',\n    onCloseAutoFocus,\n    avoidCollisions = true,\n    _sideOffset = SIDE_OFFSET,\n    _alignOffset,\n    _onTabKeyPressed,\n    children,\n    collisionBoundary,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props as InternalMenuContentProps;\n  const tabKeyHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (_onTabKeyPressed && e.key === 'Tab') {\n        _onTabKeyPressed();\n      }\n    },\n    [_onTabKeyPressed],\n  );\n  const { style } = useOverlayStacking(undefined, 'overlay');\n  const { setIsOpen, contentId } = useMenuContext();\n\n  const handleOnKeyDown = useCallback(\n    (e: ReactKeyboardEvent) => {\n      // Only close menu on escape when it is nested in other overlays (modal, sheet, ...).\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n        e.stopPropagation();\n      }\n    },\n    [setIsOpen],\n  );\n\n  if (isMobile) {\n    return <MobileContent {...props} _contentId={contentId} />;\n  }\n\n  return (\n    <RadixPortal>\n      <RadixContent\n        {...remainingProps}\n        id={contentId}\n        data-testid={dataTestId}\n        ref={forwardedRef}\n        side={side}\n        align={alignment}\n        onKeyUp={tabKeyHandler}\n        onCloseAutoFocus={onCloseAutoFocus}\n        sideOffset={_sideOffset}\n        alignOffset={_alignOffset}\n        avoidCollisions={avoidCollisions}\n        className={styles.content}\n        style={{ zIndex: style.zIndex }}\n        onKeyDown={handleOnKeyDown}\n        collisionBoundary={collisionBoundary}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        {children}\n      </RadixContent>\n    </RadixPortal>\n  );\n});\n\n(Content as typeof Content & { displayName: string }).displayName =\n  'Menu.Content';\n"],
-  "mappings": "AA8EW;AA9EX;AAAA,EACE,WAAW;AAAA,EACX,UAAU;AAAA,OACL;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,YAAY,YAAY;AACxB,SAAS,qBAAqB;AAE9B,SAAS,0BAA0B;AAInC,MAAM,cAAc;AAcb,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM,WAAW,WAAW,qBAAqB;AAEjD,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA,kBAAkB;AAAA,IAClB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA0B;AACzB,UAAI,oBAAoB,EAAE,QAAQ,OAAO;AACvC,yBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AACA,QAAM,EAAE,MAAM,IAAI,mBAAmB,QAAW,SAAS;AACzD,QAAM,EAAE,WAAW,UAAU,IAAI,eAAe;AAEhD,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA0B;AAEzB,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,UAAE,gBAAgB;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,MAAI,UAAU;AACZ,WAAO,oBAAC,iBAAe,GAAG,OAAO,YAAY,WAAW;AAAA,EAC1D;AAEA,SACE,oBAAC,eACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,IAAI;AAAA,MACJ,eAAa;AAAA,MACb,KAAK;AAAA,MACL;AAAA,MACA,OAAO;AAAA,MACP,SAAS;AAAA,MACT;AAAA,MACA,YAAY;AAAA,MACZ,aAAa;AAAA,MACb;AAAA,MACA,WAAW,OAAO;AAAA,MAClB,OAAO,EAAE,QAAQ,MAAM,OAAO;AAAA,MAC9B,WAAW;AAAA,MACX;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAEjB;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAEA,QAAqD,cACpD;",
+  "sourcesContent": ["import {\n  Content as RadixContent,\n  Portal as RadixPortal,\n} from '@radix-ui/react-dropdown-menu';\nimport {\n  forwardRef,\n  useCallback,\n  useContext,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport { MobileMenuModeContext } from './contexts/MobileMenuModeContext.js';\nimport { useMenuContext } from './hooks/useMenuContext.js';\nimport * as styles from './Menu.sty.js';\nimport { MobileContent } from './MobileContent.js';\nimport { type MenuContentProps } from './types.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\n\nexport type { MenuContentProps };\n\nconst SIDE_OFFSET = 4;\ntype InternalMenuContentProps = MenuContentProps & {\n  /** @internal */\n  _onTabKeyPressed: () => void;\n  /** @internal */\n  _sideOffset?: number;\n  /** @internal */\n  _alignOffset?: number;\n};\n\n/**\n * The component that pops out when the dropdown menu is open.\n * @public\n */\nexport const Content = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuContentProps\n>((props, forwardedRef) => {\n  const isMobile = useContext(MobileMenuModeContext);\n\n  const {\n    side = 'bottom',\n    alignment = 'start',\n    onCloseAutoFocus,\n    avoidCollisions = true,\n    _sideOffset = SIDE_OFFSET,\n    _alignOffset,\n    _onTabKeyPressed,\n    children,\n    collisionBoundary,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props as InternalMenuContentProps;\n  const tabKeyHandler = useCallback(\n    (e: ReactKeyboardEvent) => {\n      if (_onTabKeyPressed && e.key === 'Tab') {\n        _onTabKeyPressed();\n      }\n    },\n    [_onTabKeyPressed],\n  );\n  const { style } = useOverlayStacking(undefined, 'overlay');\n  const { setIsOpen, contentId } = useMenuContext();\n\n  const handleOnKeyDown = useCallback(\n    (e: ReactKeyboardEvent) => {\n      // Only close menu on escape when it is nested in other overlays (modal, sheet, ...).\n      if (e.key === 'Escape') {\n        setIsOpen(false);\n        e.stopPropagation();\n      }\n    },\n    [setIsOpen],\n  );\n\n  if (isMobile) {\n    return <MobileContent {...props} _contentId={contentId} />;\n  }\n\n  return (\n    <RadixPortal>\n      <RadixContent\n        {...remainingProps}\n        id={contentId}\n        data-testid={dataTestId}\n        ref={forwardedRef}\n        side={side}\n        align={alignment}\n        onKeyUp={tabKeyHandler}\n        onCloseAutoFocus={onCloseAutoFocus}\n        sideOffset={_sideOffset}\n        alignOffset={_alignOffset}\n        avoidCollisions={avoidCollisions}\n        className={`${styles.content} ${styles.groupContainer}`}\n        style={{ zIndex: style.zIndex }}\n        onKeyDown={handleOnKeyDown}\n        collisionBoundary={collisionBoundary}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        {children}\n      </RadixContent>\n    </RadixPortal>\n  );\n});\n\n(Content as typeof Content & { displayName: string }).displayName =\n  'Menu.Content';\n"],
+  "mappings": "AA8EW;AA9EX;AAAA,EACE,WAAW;AAAA,EACX,UAAU;AAAA,OACL;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,YAAY,YAAY;AACxB,SAAS,qBAAqB;AAE9B,SAAS,0BAA0B;AAInC,MAAM,cAAc;AAcb,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM,WAAW,WAAW,qBAAqB;AAEjD,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA,kBAAkB;AAAA,IAClB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA0B;AACzB,UAAI,oBAAoB,EAAE,QAAQ,OAAO;AACvC,yBAAiB;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB;AAAA,EACnB;AACA,QAAM,EAAE,MAAM,IAAI,mBAAmB,QAAW,SAAS;AACzD,QAAM,EAAE,WAAW,UAAU,IAAI,eAAe;AAEhD,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA0B;AAEzB,UAAI,EAAE,QAAQ,UAAU;AACtB,kBAAU,KAAK;AACf,UAAE,gBAAgB;AAAA,MACpB;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,MAAI,UAAU;AACZ,WAAO,oBAAC,iBAAe,GAAG,OAAO,YAAY,WAAW;AAAA,EAC1D;AAEA,SACE,oBAAC,eACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,IAAI;AAAA,MACJ,eAAa;AAAA,MACb,KAAK;AAAA,MACL;AAAA,MACA,OAAO;AAAA,MACP,SAAS;AAAA,MACT;AAAA,MACA,YAAY;AAAA,MACZ,aAAa;AAAA,MACb;AAAA,MACA,WAAW,GAAG,OAAO,OAAO,IAAI,OAAO,cAAc;AAAA,MACrD,OAAO,EAAE,QAAQ,MAAM,OAAO;AAAA,MAC9B,WAAW;AAAA,MACX;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAEjB;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAEA,QAAqD,cACpD;",
   "names": []
 }

package/esm/navigation/menu/Intent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Intent.tsx"],
-  "sourcesContent": ["import {\n  forwardRef,\n  type ReactEventHandler,\n  type ReactNode,\n  Ref,\n  useMemo,\n} from 'react';\n\nimport {\n  getIntentLink,\n  type IntentPayload,\n  type SendIntentOptions,\n  type SendIntentWithResponseOptions,\n} from '@dynatrace-sdk/navigation';\n\nimport { getIntentSlots } from './item-slots.js';\nimport { Item } from './Item.js';\nimport { Prefix } from './Prefix.js';\nimport {\n  useIntent,\n  useIntentWithResponse,\n  UseIntentWithResponseReturn,\n} from '../../core/hooks/intent.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { AppIcon } from '../../layouts/app-header/app-icon/AppIcon.js';\n\n/**\n * @public\n */\nexport interface MenuIntentBaseProps\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  disabled?: boolean;\n  payload: IntentPayload;\n  onSelect?: ReactEventHandler;\n}\n\n/**\n * @public\n */\nexport interface SuccessResponse {\n  status: 'success';\n  data: Record<string, unknown>;\n}\n\n/**\n * @public\n */\nexport interface ErrorResponse {\n  status: 'error';\n  error: Error;\n}\n\n/**\n * @public\n */\nexport interface MenuIntentWithResponseProps extends MenuIntentBaseProps {\n  options: SendIntentWithResponseOptions<string>;\n  onResponse: (response: SuccessResponse | ErrorResponse) => void;\n}\n\n/**\n * @public\n */\nexport interface MenuIntentWithoutResponseProps extends MenuIntentBaseProps {\n  options: SendIntentOptions<IntentPayload>;\n  onResponse?: never;\n}\n\nfunction isWithResponse(\n  props: MenuIntentWithResponseProps | MenuIntentWithoutResponseProps,\n): props is MenuIntentWithResponseProps {\n  if ('onResponse' in props) {\n    return typeof props.onResponse === 'function';\n  }\n  return false;\n}\n\nexport type Slots = {\n  icon: ReactNode | null;\n  freeform: ReactNode[];\n};\n\n/**\n * @internal\n */\nexport function getIntentIcon(\n  icon: ReactNode | undefined,\n  intentIcon: string | null,\n) {\n  if (!icon && !intentIcon) {\n    return null;\n  }\n\n  if (icon) {\n    return icon;\n  }\n\n  if (intentIcon) {\n    return (\n      <Prefix>\n        <AppIcon src={intentIcon} alt=\"\" />\n      </Prefix>\n    );\n  }\n}\n\n/**\n * @internal\n */\nexport const getHandleSelect =\n  (\n    intent: UseIntentWithResponseReturn,\n    onSelect: ReactEventHandler | undefined,\n    onResponse: (response: SuccessResponse | ErrorResponse) => void,\n  ): ReactEventHandler =>\n  async (e) => {\n    onSelect?.(e);\n\n    try {\n      const response = await intent.send();\n      onResponse(response);\n    } catch {\n      onResponse({\n        status: 'error',\n        error: new Error('Error sending intent with response'),\n      });\n    }\n  };\n\nconst IntentWithoutResponse = /* @__PURE__ */ forwardRef<\n  HTMLAnchorElement,\n  MenuIntentWithoutResponseProps\n>((props, ref) => {\n  // discard onResponse from props\n  const {\n    onResponse,\n    onSelect,\n    payload,\n    options,\n    children,\n    disabled,\n    ...rest\n  } = props;\n\n  const intent = useIntent({\n    payload,\n    options,\n  });\n\n  const slots = getIntentSlots(children);\n\n  const intentIcon = getIntentIcon(slots.prefix, intent.iconURL);\n\n  const link = useMemo(() => {\n    return getIntentLink(\n      payload,\n      options.recommendedAppId ?? '',\n      options.recommendedIntentId ?? '',\n    );\n  }, [options.recommendedAppId, options.recommendedIntentId, payload]);\n\n  return (\n    <Item\n      {...rest}\n      as=\"a\"\n      href={disabled ? undefined : link}\n      ref={ref}\n      disabled={disabled}\n      onSelect={(e) => {\n        e.preventDefault();\n\n        intent.send();\n        onSelect?.(e);\n      }}\n    >\n      {intentIcon}\n      {slots.freeform}\n    </Item>\n  );\n});\n\nconst IntentWithResponse = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuIntentWithResponseProps\n>((props, ref) => {\n  const {\n    onSelect,\n    onResponse,\n    payload,\n    options,\n    children,\n    disabled,\n    ...rest\n  } = props;\n\n  const intent = useIntentWithResponse({\n    payload,\n    options,\n  });\n\n  const slots = getIntentSlots(children);\n\n  const intentIcon = getIntentIcon(slots.prefix, intent.iconURL);\n\n  const handleSelect = getHandleSelect(intent, onSelect, onResponse);\n\n  return (\n    <Item {...rest} ref={ref} disabled={disabled} onSelect={handleSelect}>\n      {intentIcon}\n      {slots.freeform}\n    </Item>\n  );\n});\n\n/**\n * @public\n */\nexport type MenuIntentProps =\n  | MenuIntentWithResponseProps\n  | MenuIntentWithoutResponseProps;\n\n/**\n * A menu subcomponent to send intents.\n * @public\n */\nexport const Intent = /* @__PURE__ */ forwardRef<HTMLElement, MenuIntentProps>(\n  (props, ref) => {\n    if (isWithResponse(props)) {\n      return <IntentWithResponse {...props} ref={ref as Ref<HTMLDivElement>} />;\n    }\n    return (\n      <IntentWithoutResponse {...props} ref={ref as Ref<HTMLAnchorElement>} />\n    );\n  },\n);\n\n(Intent as typeof Intent & { displayName: string }).displayName = 'Menu.Intent';\n"],
-  "mappings": "AA4GQ,cA8DJ,YA9DI;AA5GR;AAAA,EACE;AAAA,EAIA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,OAIK;AAEP,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAMP,SAAS,eAAe;AAgDxB,SAAS,eACP,OACsC;AACtC,MAAI,gBAAgB,OAAO;AACzB,WAAO,OAAO,MAAM,eAAe;AAAA,EACrC;AACA,SAAO;AACT;AAUO,SAAS,cACd,MACA,YACA;AACA,MAAI,CAAC,QAAQ,CAAC,YAAY;AACxB,WAAO;AAAA,EACT;AAEA,MAAI,MAAM;AACR,WAAO;AAAA,EACT;AAEA,MAAI,YAAY;AACd,WACE,oBAAC,UACC,8BAAC,WAAQ,KAAK,YAAY,KAAI,IAAG,GACnC;AAAA,EAEJ;AACF;AAKO,MAAM,kBACX,CACE,QACA,UACA,eAEF,OAAO,MAAM;AACX,aAAW,CAAC;AAEZ,MAAI;AACF,UAAM,WAAW,MAAM,OAAO,KAAK;AACnC,eAAW,QAAQ;AAAA,EACrB,QAAQ;AACN,eAAW;AAAA,MACT,QAAQ;AAAA,MACR,OAAO,IAAI,MAAM,oCAAoC;AAAA,IACvD,CAAC;AAAA,EACH;AACF;AAEF,MAAM,wBAAwC,2BAG5C,CAAC,OAAO,QAAQ;AAEhB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,SAAS,UAAU;AAAA,IACvB;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,QAAQ,eAAe,QAAQ;AAErC,QAAM,aAAa,cAAc,MAAM,QAAQ,OAAO,OAAO;AAE7D,QAAM,OAAO,QAAQ,MAAM;AACzB,WAAO;AAAA,MACL;AAAA,MACA,QAAQ,oBAAoB;AAAA,MAC5B,QAAQ,uBAAuB;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,QAAQ,kBAAkB,QAAQ,qBAAqB,OAAO,CAAC;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,IAAG;AAAA,MACH,MAAM,WAAW,SAAY;AAAA,MAC7B;AAAA,MACA;AAAA,MACA,UAAU,CAAC,MAAM;AACf,UAAE,eAAe;AAEjB,eAAO,KAAK;AACZ,mBAAW,CAAC;AAAA,MACd;AAAA,MAEC;AAAA;AAAA,QACA,MAAM;AAAA;AAAA;AAAA,EACT;AAEJ,CAAC;AAED,MAAM,qBAAqC,2BAGzC,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,SAAS,sBAAsB;AAAA,IACnC;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,QAAQ,eAAe,QAAQ;AAErC,QAAM,aAAa,cAAc,MAAM,QAAQ,OAAO,OAAO;AAE7D,QAAM,eAAe,gBAAgB,QAAQ,UAAU,UAAU;AAEjE,SACE,qBAAC,QAAM,GAAG,MAAM,KAAU,UAAoB,UAAU,cACrD;AAAA;AAAA,IACA,MAAM;AAAA,KACT;AAEJ,CAAC;AAaM,MAAM,SAAyB;AAAA,EACpC,CAAC,OAAO,QAAQ;AACd,QAAI,eAAe,KAAK,GAAG;AACzB,aAAO,oBAAC,sBAAoB,GAAG,OAAO,KAAiC;AAAA,IACzE;AACA,WACE,oBAAC,yBAAuB,GAAG,OAAO,KAAoC;AAAA,EAE1E;AACF;AAEC,OAAmD,cAAc;",
+  "sourcesContent": ["import {\n  forwardRef,\n  type ReactEventHandler,\n  type ReactNode,\n  Ref,\n  useMemo,\n} from 'react';\n\nimport {\n  getIntentLink,\n  type IntentPayload,\n  type SendIntentOptions,\n  type SendIntentWithResponseOptions,\n} from '@dynatrace-sdk/navigation';\n\nimport { getIntentSlots } from './item-slots.js';\nimport { Item } from './Item.js';\nimport { Prefix } from './Prefix.js';\nimport {\n  useIntent,\n  useIntentWithResponse,\n  UseIntentWithResponseReturn,\n} from '../../core/hooks/intent.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { AppIcon } from '../../layouts/app-header/app-icon/AppIcon.js';\n\n/**\n * @public\n */\nexport interface MenuIntentBaseProps\n  extends\n    WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps {\n  disabled?: boolean;\n  payload: IntentPayload;\n  onSelect?: ReactEventHandler;\n}\n\n/**\n * @public\n */\nexport interface SuccessResponse {\n  status: 'success';\n  data: Record<string, unknown>;\n}\n\n/**\n * @public\n */\nexport interface ErrorResponse {\n  status: 'error';\n  error: Error;\n}\n\n/**\n * @public\n */\nexport interface MenuIntentWithResponseProps extends MenuIntentBaseProps {\n  options: SendIntentWithResponseOptions<string>;\n  onResponse: (response: SuccessResponse | ErrorResponse) => void;\n}\n\n/**\n * @public\n */\nexport interface MenuIntentWithoutResponseProps extends MenuIntentBaseProps {\n  options: SendIntentOptions<IntentPayload>;\n  onResponse?: never;\n}\n\nfunction isWithResponse(\n  props: MenuIntentWithResponseProps | MenuIntentWithoutResponseProps,\n): props is MenuIntentWithResponseProps {\n  if ('onResponse' in props) {\n    return typeof props.onResponse === 'function';\n  }\n  return false;\n}\n\nexport type Slots = {\n  icon: ReactNode | null;\n  freeform: ReactNode[];\n};\n\n/**\n * @internal\n */\nexport function getIntentIcon(\n  icon: ReactNode | undefined,\n  intentIcon: string | null,\n) {\n  if (!icon && !intentIcon) {\n    return null;\n  }\n\n  if (icon) {\n    return icon;\n  }\n\n  if (intentIcon) {\n    return (\n      <Prefix>\n        <AppIcon src={intentIcon} alt=\"\" />\n      </Prefix>\n    );\n  }\n}\n\n/**\n * @internal\n */\nexport const getHandleSelect =\n  (\n    intent: UseIntentWithResponseReturn,\n    onSelect: ReactEventHandler | undefined,\n    onResponse: (response: SuccessResponse | ErrorResponse) => void,\n  ): ReactEventHandler =>\n  async (e) => {\n    onSelect?.(e);\n\n    try {\n      const response = await intent.send();\n      onResponse(response);\n    } catch {\n      onResponse({\n        status: 'error',\n        error: new Error('Error sending intent with response'),\n      });\n    }\n  };\n\nconst IntentWithoutResponse = /* @__PURE__ */ forwardRef<\n  HTMLAnchorElement,\n  MenuIntentWithoutResponseProps\n>((props, ref) => {\n  // discard onResponse from props\n  const {\n    onResponse,\n    onSelect,\n    payload,\n    options,\n    children,\n    disabled,\n    ...rest\n  } = props;\n\n  const intent = useIntent({\n    payload,\n    options,\n  });\n\n  const slots = getIntentSlots(children);\n\n  const intentIcon = getIntentIcon(slots.prefix, intent.iconURL);\n\n  const link = useMemo(() => {\n    return getIntentLink(\n      payload,\n      options.recommendedAppId ?? '',\n      options.recommendedIntentId ?? '',\n    );\n  }, [options.recommendedAppId, options.recommendedIntentId, payload]);\n\n  return (\n    <Item\n      {...rest}\n      as=\"a\"\n      href={disabled ? undefined : link}\n      ref={ref}\n      disabled={disabled}\n      onSelect={(e) => {\n        e.preventDefault();\n\n        intent.send();\n        onSelect?.(e);\n      }}\n    >\n      {intentIcon}\n      {slots.freeform}\n    </Item>\n  );\n});\n\nconst IntentWithResponse = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuIntentWithResponseProps\n>((props, ref) => {\n  const {\n    onSelect,\n    onResponse,\n    payload,\n    options,\n    children,\n    disabled,\n    ...rest\n  } = props;\n\n  const intent = useIntentWithResponse({\n    payload,\n    options,\n  });\n\n  const slots = getIntentSlots(children);\n\n  const intentIcon = getIntentIcon(slots.prefix, intent.iconURL);\n\n  const handleSelect = getHandleSelect(intent, onSelect, onResponse);\n\n  return (\n    <Item {...rest} ref={ref} disabled={disabled} onSelect={handleSelect}>\n      {intentIcon}\n      {slots.freeform}\n    </Item>\n  );\n});\n\n/**\n * @public\n */\nexport type MenuIntentProps =\n  | MenuIntentWithResponseProps\n  | MenuIntentWithoutResponseProps;\n\n/**\n * A menu subcomponent to send intents.\n * @public\n */\nexport const Intent = /* @__PURE__ */ forwardRef<HTMLElement, MenuIntentProps>(\n  (props, ref) => {\n    if (isWithResponse(props)) {\n      return <IntentWithResponse {...props} ref={ref as Ref<HTMLDivElement>} />;\n    }\n    return (\n      <IntentWithoutResponse {...props} ref={ref as Ref<HTMLAnchorElement>} />\n    );\n  },\n);\n\n(Intent as typeof Intent & { displayName: string }).displayName = 'Menu.Intent';\n"],
+  "mappings": "AA6GQ,cA8DJ,YA9DI;AA7GR;AAAA,EACE;AAAA,EAIA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,OAIK;AAEP,SAAS,sBAAsB;AAC/B,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAMP,SAAS,eAAe;AAiDxB,SAAS,eACP,OACsC;AACtC,MAAI,gBAAgB,OAAO;AACzB,WAAO,OAAO,MAAM,eAAe;AAAA,EACrC;AACA,SAAO;AACT;AAUO,SAAS,cACd,MACA,YACA;AACA,MAAI,CAAC,QAAQ,CAAC,YAAY;AACxB,WAAO;AAAA,EACT;AAEA,MAAI,MAAM;AACR,WAAO;AAAA,EACT;AAEA,MAAI,YAAY;AACd,WACE,oBAAC,UACC,8BAAC,WAAQ,KAAK,YAAY,KAAI,IAAG,GACnC;AAAA,EAEJ;AACF;AAKO,MAAM,kBACX,CACE,QACA,UACA,eAEF,OAAO,MAAM;AACX,aAAW,CAAC;AAEZ,MAAI;AACF,UAAM,WAAW,MAAM,OAAO,KAAK;AACnC,eAAW,QAAQ;AAAA,EACrB,QAAQ;AACN,eAAW;AAAA,MACT,QAAQ;AAAA,MACR,OAAO,IAAI,MAAM,oCAAoC;AAAA,IACvD,CAAC;AAAA,EACH;AACF;AAEF,MAAM,wBAAwC,2BAG5C,CAAC,OAAO,QAAQ;AAEhB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,SAAS,UAAU;AAAA,IACvB;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,QAAQ,eAAe,QAAQ;AAErC,QAAM,aAAa,cAAc,MAAM,QAAQ,OAAO,OAAO;AAE7D,QAAM,OAAO,QAAQ,MAAM;AACzB,WAAO;AAAA,MACL;AAAA,MACA,QAAQ,oBAAoB;AAAA,MAC5B,QAAQ,uBAAuB;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,QAAQ,kBAAkB,QAAQ,qBAAqB,OAAO,CAAC;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,IAAG;AAAA,MACH,MAAM,WAAW,SAAY;AAAA,MAC7B;AAAA,MACA;AAAA,MACA,UAAU,CAAC,MAAM;AACf,UAAE,eAAe;AAEjB,eAAO,KAAK;AACZ,mBAAW,CAAC;AAAA,MACd;AAAA,MAEC;AAAA;AAAA,QACA,MAAM;AAAA;AAAA;AAAA,EACT;AAEJ,CAAC;AAED,MAAM,qBAAqC,2BAGzC,CAAC,OAAO,QAAQ;AAChB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,SAAS,sBAAsB;AAAA,IACnC;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,QAAQ,eAAe,QAAQ;AAErC,QAAM,aAAa,cAAc,MAAM,QAAQ,OAAO,OAAO;AAE7D,QAAM,eAAe,gBAAgB,QAAQ,UAAU,UAAU;AAEjE,SACE,qBAAC,QAAM,GAAG,MAAM,KAAU,UAAoB,UAAU,cACrD;AAAA;AAAA,IACA,MAAM;AAAA,KACT;AAEJ,CAAC;AAaM,MAAM,SAAyB;AAAA,EACpC,CAAC,OAAO,QAAQ;AACd,QAAI,eAAe,KAAK,GAAG;AACzB,aAAO,oBAAC,sBAAoB,GAAG,OAAO,KAAiC;AAAA,IACzE;AACA,WACE,oBAAC,yBAAuB,GAAG,OAAO,KAAoC;AAAA,EAE1E;AACF;AAEC,OAAmD,cAAc;",
   "names": []
 }

package/esm/navigation/menu/ItemTooltip.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { Portal as RadixPortal } from "@radix-ui/react-dropdown-menu";
-import { forwardRef, useState } from "react";
+import { forwardRef, useContext, useState } from "react";
+import { MenuPortalOwnerContext } from "./contexts/MenuPortalOwnerContext.js";
 import * as menuStyles from "./Menu.sty.js";
 import { ALIGN_OFFSET } from "./SubContent.js";
 import { useOverlayStacking } from "../../core/hooks/useOverlayStacking.js";
@@ -12,6 +13,7 @@ const MenuItemTooltipWrapper = ({
   onMouseLeave
 }) => {
   const [menuTooltipRefRef, setMenuTooltipRefRef] = useState(null);
+  const ownerId = useContext(MenuPortalOwnerContext);
   const { style: overlayStyle } = useOverlayStacking(void 0, "overlay");
   const { styles, attributes } = usePopper(triggerElement, menuTooltipRefRef, {
     strategy: "fixed",
@@ -44,6 +46,7 @@ const MenuItemTooltipWrapper = ({
       onMouseEnter,
       onMouseLeave,
       ...attributes.popper,
+      ...ownerId ? { "data-tooltip-menu-id": ownerId } : {},
       "aria-hidden": "true",
       children
     }

package/esm/navigation/menu/ItemTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/ItemTooltip.tsx"],
-  "sourcesContent": ["import { Portal as RadixPortal } from '@radix-ui/react-dropdown-menu';\nimport { forwardRef, useState } from 'react';\n\nimport * as menuStyles from './Menu.sty.js';\nimport { ALIGN_OFFSET } from './SubContent.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { usePopper } from '../../overlays/utils/use-popper-compat.js';\n\n/**\n * @public\n */\nexport type MenuItemTooltipProps = WithChildren & DataTestId;\n\n/** @internal */\nexport const MenuItemTooltipWrapper = ({\n  triggerElement,\n  children,\n  onMouseEnter,\n  onMouseLeave,\n}: {\n  triggerElement: HTMLElement | null;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n} & WithChildren) => {\n  const [menuTooltipRefRef, setMenuTooltipRefRef] =\n    useState<HTMLDivElement | null>(null);\n\n  // The menu content already has a stacking z-index from useOverlayStacking.\n  // The tooltip is rendered into a sibling portal, so it needs an explicit\n  // z-index to guarantee it appears above the menu panel.\n  const { style: overlayStyle } = useOverlayStacking(undefined, 'overlay');\n\n  // strategy: 'fixed' is required here because the tooltip is rendered into a\n  // portal at document.body. With 'absolute', the offset parent would be body\n  // (position: static), causing incorrect scroll-relative coordinates. 'fixed'\n  // positions relative to the viewport, which matches the already-fixed menu\n  // content that contains the trigger element.\n  const { styles, attributes } = usePopper(triggerElement, menuTooltipRefRef, {\n    strategy: 'fixed',\n    placement: 'right-start',\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [ALIGN_OFFSET, 0],\n        },\n      },\n      {\n        name: 'flip',\n        options: {\n          fallbackPlacements: ['left-start'],\n        },\n      },\n    ],\n  });\n\n  // RadixPortal (not bare createPortal) is used intentionally: it registers\n  // this portal with Radix's DismissableLayer so that pointer events inside the\n  // tooltip are not treated as \"outside clicks\" that would close the menu.\n  // The tooltip must live outside the role=\"menu\" DOM subtree to satisfy the\n  // aria-required-children rule, which forbids div[tabindex] children such as\n  // the CodeSnippet's focus-container wrapper.\n  return (\n    <RadixPortal>\n      <div\n        ref={setMenuTooltipRefRef}\n        style={{\n          ...styles.popper,\n          zIndex: overlayStyle.zIndex,\n          pointerEvents: 'auto',\n        }}\n        className={menuStyles.tooltipWrapper}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        {...attributes.popper}\n        aria-hidden=\"true\"\n      >\n        {children}\n      </div>\n    </RadixPortal>\n  );\n};\nMenuItemTooltipWrapper.displayName = 'MenuItemTooltipWrapper';\n\n/**\n * A tooltip which can be used as a child of an Item. Its content will appear\n * in an overlay when the Item is focused.\n * @public\n */\nexport const ItemTooltip = forwardRef<HTMLDivElement, MenuItemTooltipProps>(\n  ({ children, 'data-testid': dataTestId }, forwardedRef) =>\n    children ? (\n      <div\n        className={menuStyles.tooltip}\n        ref={forwardedRef}\n        data-testid={dataTestId}\n      >\n        {children}\n      </div>\n    ) : null,\n);\n\n(ItemTooltip as typeof ItemTooltip & { displayName: string }).displayName =\n  'Menu.ItemTooltip';\n"],
-  "mappings": "AAkEM;AAlEN,SAAS,UAAU,mBAAmB;AACtC,SAAS,YAAY,gBAAgB;AAErC,YAAY,gBAAgB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AAGnC,SAAS,iBAAiB;AAQnB,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAIqB;AACnB,QAAM,CAAC,mBAAmB,oBAAoB,IAC5C,SAAgC,IAAI;AAKtC,QAAM,EAAE,OAAO,aAAa,IAAI,mBAAmB,QAAW,SAAS;AAOvE,QAAM,EAAE,QAAQ,WAAW,IAAI,UAAU,gBAAgB,mBAAmB;AAAA,IAC1E,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,MACT;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,UACP,QAAQ,CAAC,cAAc,CAAC;AAAA,QAC1B;AAAA,MACF;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,UACP,oBAAoB,CAAC,YAAY;AAAA,QACnC;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AAQD,SACE,oBAAC,eACC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,GAAG,OAAO;AAAA,QACV,QAAQ,aAAa;AAAA,QACrB,eAAe;AAAA,MACjB;AAAA,MACA,WAAW,WAAW;AAAA,MACtB;AAAA,MACA;AAAA,MACC,GAAG,WAAW;AAAA,MACf,eAAY;AAAA,MAEX;AAAA;AAAA,EACH,GACF;AAEJ;AACA,uBAAuB,cAAc;AAO9B,MAAM,cAAc;AAAA,EACzB,CAAC,EAAE,UAAU,eAAe,WAAW,GAAG,iBACxC,WACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW;AAAA,MACtB,KAAK;AAAA,MACL,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH,IACE;AACR;AAEC,YAA6D,cAC5D;",
+  "sourcesContent": ["import { Portal as RadixPortal } from '@radix-ui/react-dropdown-menu';\nimport { forwardRef, useContext, useState } from 'react';\n\nimport { MenuPortalOwnerContext } from './contexts/MenuPortalOwnerContext.js';\nimport * as menuStyles from './Menu.sty.js';\nimport { ALIGN_OFFSET } from './SubContent.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { usePopper } from '../../overlays/utils/use-popper-compat.js';\n\n/**\n * @public\n */\nexport type MenuItemTooltipProps = WithChildren & DataTestId;\n\n/** @internal */\nexport const MenuItemTooltipWrapper = ({\n  triggerElement,\n  children,\n  onMouseEnter,\n  onMouseLeave,\n}: {\n  triggerElement: HTMLElement | null;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n} & WithChildren) => {\n  const [menuTooltipRefRef, setMenuTooltipRefRef] =\n    useState<HTMLDivElement | null>(null);\n  const ownerId = useContext(MenuPortalOwnerContext);\n\n  // The menu content already has a stacking z-index from useOverlayStacking.\n  // The tooltip is rendered into a sibling portal, so it needs an explicit\n  // z-index to guarantee it appears above the menu panel.\n  const { style: overlayStyle } = useOverlayStacking(undefined, 'overlay');\n\n  // strategy: 'fixed' is required here because the tooltip is rendered into a\n  // portal at document.body. With 'absolute', the offset parent would be body\n  // (position: static), causing incorrect scroll-relative coordinates. 'fixed'\n  // positions relative to the viewport, which matches the already-fixed menu\n  // content that contains the trigger element.\n  const { styles, attributes } = usePopper(triggerElement, menuTooltipRefRef, {\n    strategy: 'fixed',\n    placement: 'right-start',\n    modifiers: [\n      {\n        name: 'offset',\n        options: {\n          offset: [ALIGN_OFFSET, 0],\n        },\n      },\n      {\n        name: 'flip',\n        options: {\n          fallbackPlacements: ['left-start'],\n        },\n      },\n    ],\n  });\n\n  // RadixPortal (not bare createPortal) is used intentionally: it registers\n  // this portal with Radix's DismissableLayer so that pointer events inside the\n  // tooltip are not treated as \"outside clicks\" that would close the menu.\n  // The tooltip must live outside the role=\"menu\" DOM subtree to satisfy the\n  // aria-required-children rule, which forbids div[tabindex] children such as\n  // the CodeSnippet's focus-container wrapper.\n  return (\n    <RadixPortal>\n      <div\n        ref={setMenuTooltipRefRef}\n        style={{\n          ...styles.popper,\n          zIndex: overlayStyle.zIndex,\n          pointerEvents: 'auto',\n        }}\n        className={menuStyles.tooltipWrapper}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        {...attributes.popper}\n        {...(ownerId ? { 'data-tooltip-menu-id': ownerId } : {})}\n        aria-hidden=\"true\"\n      >\n        {children}\n      </div>\n    </RadixPortal>\n  );\n};\nMenuItemTooltipWrapper.displayName = 'MenuItemTooltipWrapper';\n\n/**\n * A tooltip which can be used as a child of an Item. Its content will appear\n * in an overlay when the Item is focused.\n * @public\n */\nexport const ItemTooltip = forwardRef<HTMLDivElement, MenuItemTooltipProps>(\n  ({ children, 'data-testid': dataTestId }, forwardedRef) =>\n    children ? (\n      <div\n        className={menuStyles.tooltip}\n        ref={forwardedRef}\n        data-testid={dataTestId}\n      >\n        {children}\n      </div>\n    ) : null,\n);\n\n(ItemTooltip as typeof ItemTooltip & { displayName: string }).displayName =\n  'Menu.ItemTooltip';\n"],
+  "mappings": "AAoEM;AApEN,SAAS,UAAU,mBAAmB;AACtC,SAAS,YAAY,YAAY,gBAAgB;AAEjD,SAAS,8BAA8B;AACvC,YAAY,gBAAgB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AAGnC,SAAS,iBAAiB;AAQnB,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAIqB;AACnB,QAAM,CAAC,mBAAmB,oBAAoB,IAC5C,SAAgC,IAAI;AACtC,QAAM,UAAU,WAAW,sBAAsB;AAKjD,QAAM,EAAE,OAAO,aAAa,IAAI,mBAAmB,QAAW,SAAS;AAOvE,QAAM,EAAE,QAAQ,WAAW,IAAI,UAAU,gBAAgB,mBAAmB;AAAA,IAC1E,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,MACT;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,UACP,QAAQ,CAAC,cAAc,CAAC;AAAA,QAC1B;AAAA,MACF;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,UACP,oBAAoB,CAAC,YAAY;AAAA,QACnC;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AAQD,SACE,oBAAC,eACC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,GAAG,OAAO;AAAA,QACV,QAAQ,aAAa;AAAA,QACrB,eAAe;AAAA,MACjB;AAAA,MACA,WAAW,WAAW;AAAA,MACtB;AAAA,MACA;AAAA,MACC,GAAG,WAAW;AAAA,MACd,GAAI,UAAU,EAAE,wBAAwB,QAAQ,IAAI,CAAC;AAAA,MACtD,eAAY;AAAA,MAEX;AAAA;AAAA,EACH,GACF;AAEJ;AACA,uBAAuB,cAAc;AAO9B,MAAM,cAAc;AAAA,EACzB,CAAC,EAAE,UAAU,eAAe,WAAW,GAAG,iBACxC,WACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW;AAAA,MACtB,KAAK;AAAA,MACL,eAAa;AAAA,MAEZ;AAAA;AAAA,EACH,IACE;AACR;AAEC,YAA6D,cAC5D;",
   "names": []
 }

package/esm/navigation/menu/Menu.css

@@ -1,11 +1,11 @@
-._1m01arl1-3-13-3 {
+._1m01arl1-3-14-1 {
   background: var(--dt-colors-background-surface-default, #fff);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   padding: var(--dt-spacings-size-8, 8px);
   max-width: 500px;
 }
-._1m01arl2-3-13-3 {
+._1m01arl2-3-14-1 {
   box-sizing: border-box;
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -18,13 +18,13 @@
   padding-right: var(--dt-spacings-size-12, 12px);
   text-align: left;
 }
-._1m01arl0-3-13-3 ._1m01arl2-3-13-3 {
+._1m01arl0-3-14-1 ._1m01arl2-3-14-1 {
   padding-top: var(--dt-spacings-size-4, 4px);
   padding-left: var(--dt-spacings-size-0, 0);
   padding-right: var(--dt-spacings-size-0, 0);
   padding-bottom: var(--dt-spacings-size-8, 8px);
 }
-._1m01arl3-3-13-3 {
+._1m01arl3-3-14-1 {
   background: var(--dt-colors-background-surface-default, #fff);
   padding: var(--dt-spacings-size-4, 4px);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -32,15 +32,15 @@
   max-height: var(--radix-dropdown-menu-content-available-height);
   box-sizing: border-box;
   overflow-y: auto;
-  max-width: 100dvw;
+  width: fit-content(100dvw);
 }
-._1m01arl3-3-13-3 ._1m01arl4-3-13-3:not(:last-child) {
+._1m01arl4-3-14-1 ._1m01arl5-3-14-1:not(:last-child) {
   width: 100%;
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
   padding-bottom: var(--dt-spacings-size-4, 4px);
   margin-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1m01arl5-3-13-3 {
+._1m01arl6-3-14-1 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   background-color: transparent;
@@ -56,45 +56,45 @@
   border-width: 0;
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1m01arl6-3-13-3 {
+._1m01arl7-3-14-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
   outline: none;
 }
-._1m01arl7-3-13-3:hover, ._1m01arl7-3-13-3[data-state="open"] {
+._1m01arl8-3-14-1:hover, ._1m01arl8-3-14-1[data-state="open"] {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1m01arl7-3-13-3:focus {
+._1m01arl8-3-14-1:focus {
   outline: none;
 }
-._1m01arl7-3-13-3:active {
+._1m01arl8-3-14-1:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1m01arl8-3-13-3 {
+._1m01arl9-3-14-1 {
   width: 100%;
 }
-._1m01arl5-3-13-3 > ._1m01arl8-3-13-3:first-child {
+._1m01arl6-3-14-1 > ._1m01arl9-3-14-1:first-child {
   padding-left: var(--dt-spacings-size-4, 4px);
 }
-._1m01arl5-3-13-3 > ._1m01arl8-3-13-3:last-child:not(:has(svg:last-child)) {
+._1m01arl6-3-14-1 > ._1m01arl9-3-14-1:last-child:not(:has(svg:last-child)) {
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._1m01arl9-3-13-3 {
+._1m01arla-3-14-1 {
   flex: 1 1 auto;
   overflow: hidden;
 }
-._1m01arl9-3-13-3:first-child {
+._1m01arla-3-14-1:first-child {
   padding-left: var(--dt-spacings-size-4, 4px);
 }
 @media (max-width: 640px) {
-  ._1m01arl8-3-13-3 {
+  ._1m01arl9-3-14-1 {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  ._1m01arl9-3-13-3 {
+  ._1m01arla-3-14-1 {
     text-overflow: ellipsis;
     white-space: nowrap;
   }

package/esm/navigation/menu/Menu.sty.js

@@ -1,16 +1,18 @@
 import "./Menu.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var content = "_1m01arl3-3-13-3";
-var group = "_1m01arl4-3-13-3";
-var item = _7a468({ defaultClassName: "_1m01arl5-3-13-3", variantClassNames: { disabled: { true: "_1m01arl6-3-13-3", false: "_1m01arl7-3-13-3" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
-var itemChildren = "_1m01arl8-3-13-3";
-var label = "_1m01arl2-3-13-3";
-var subChildren = "_1m01arl9-3-13-3";
-var tooltip = "_1m01arl0-3-13-3";
-var tooltipWrapper = "_1m01arl1-3-13-3";
+var content = "_1m01arl3-3-14-1";
+var group = "_1m01arl5-3-14-1";
+var groupContainer = "_1m01arl4-3-14-1";
+var item = _7a468({ defaultClassName: "_1m01arl6-3-14-1", variantClassNames: { disabled: { true: "_1m01arl7-3-14-1", false: "_1m01arl8-3-14-1" } }, defaultVariants: { disabled: false }, compoundVariants: [] });
+var itemChildren = "_1m01arl9-3-14-1";
+var label = "_1m01arl2-3-14-1";
+var subChildren = "_1m01arla-3-14-1";
+var tooltip = "_1m01arl0-3-14-1";
+var tooltipWrapper = "_1m01arl1-3-14-1";
 export {
   content,
   group,
+  groupContainer,
   item,
   itemChildren,
   label,

package/esm/navigation/menu/Menu.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Menu.css.ts"],
-  "sourcesContent": ["import './Menu.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var content = '_1m01arl3-3-13-3';\nexport var group = '_1m01arl4-3-13-3';\nexport var item = _7a468({defaultClassName:'_1m01arl5-3-13-3',variantClassNames:{disabled:{true:'_1m01arl6-3-13-3',false:'_1m01arl7-3-13-3'}},defaultVariants:{disabled:false},compoundVariants:[]});\nexport var itemChildren = '_1m01arl8-3-13-3';\nexport var label = '_1m01arl2-3-13-3';\nexport var subChildren = '_1m01arl9-3-13-3';\nexport var tooltip = '_1m01arl0-3-13-3';\nexport var tooltipWrapper = '_1m01arl1-3-13-3';"],
-  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,OAAO,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,EAAC,GAAE,iBAAgB,EAAC,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC5L,IAAI,eAAe;AACnB,IAAI,QAAQ;AACZ,IAAI,cAAc;AAClB,IAAI,UAAU;AACd,IAAI,iBAAiB;",
+  "sourcesContent": ["import './Menu.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var content = '_1m01arl3-3-14-1';\nexport var group = '_1m01arl5-3-14-1';\nexport var groupContainer = '_1m01arl4-3-14-1';\nexport var item = _7a468({defaultClassName:'_1m01arl6-3-14-1',variantClassNames:{disabled:{true:'_1m01arl7-3-14-1',false:'_1m01arl8-3-14-1'}},defaultVariants:{disabled:false},compoundVariants:[]});\nexport var itemChildren = '_1m01arl9-3-14-1';\nexport var label = '_1m01arl2-3-14-1';\nexport var subChildren = '_1m01arla-3-14-1';\nexport var tooltip = '_1m01arl0-3-14-1';\nexport var tooltipWrapper = '_1m01arl1-3-14-1';"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,iBAAiB;AACrB,IAAI,OAAO,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,EAAC,GAAE,iBAAgB,EAAC,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC5L,IAAI,eAAe;AACnB,IAAI,QAAQ;AACZ,IAAI,cAAc;AAClB,IAAI,UAAU;AACd,IAAI,iBAAiB;",
   "names": []
 }

package/esm/navigation/menu/MobileContent.js

@@ -15,6 +15,7 @@ import { useIntl } from "react-intl";
 import { ChevronLeftSmallIcon } from "@dynatrace/strato-icons";
 import { MobileMenuNavigationContext } from "./contexts/MobileMenuNavigationContext.js";
 import { getSubTriggerSlots } from "./item-slots.js";
+import { groupContainer as menuGroupContainer } from "./Menu.sty.js";
 import * as styles from "./MobileMenu.sty.js";
 import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { useOverlayStacking } from "../../core/hooks/useOverlayStacking.js";
@@ -112,7 +113,7 @@ const MobileContent = (props) => {
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: clsx(styles.body, {
+            className: clsx(styles.body, menuGroupContainer, {
               [styles.bodyAnimatedForward]: direction === "forward" && stack.length > 0,
               [styles.bodyAnimatedBack]: direction === "back"
             }),

package/esm/navigation/menu/MobileContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/MobileContent.tsx"],
-  "sourcesContent": ["import {\n  Content as RadixContent,\n  Portal as RadixPortal,\n} from '@radix-ui/react-dropdown-menu';\nimport clsx from 'clsx';\nimport {\n  useCallback,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ChevronLeftSmallIcon } from '@dynatrace/strato-icons';\n\nimport { MobileMenuNavigationContext } from './contexts/MobileMenuNavigationContext.js';\nimport { getSubTriggerSlots } from './item-slots.js';\nimport * as styles from './MobileMenu.sty.js';\nimport { type MenuContentProps } from './types.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\n\ntype InternalMobileContentProps = MenuContentProps & {\n  _sideOffset?: number;\n  _alignOffset?: number;\n  _contentId?: string;\n};\n\nconst SIDE_OFFSET = 4;\n\n/**\n * @internal\n */\nexport const MobileContent = (props: InternalMobileContentProps) => {\n  const {\n    children,\n    side = 'bottom',\n    alignment = 'start',\n    onCloseAutoFocus,\n    avoidCollisions = true,\n    collisionBoundary,\n    _sideOffset = SIDE_OFFSET,\n    _alignOffset: _unusedAlignOffset,\n    _contentId,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props as InternalMobileContentProps;\n\n  const intl = useIntl();\n  const { stack, direction, pop } = useContext(MobileMenuNavigationContext);\n  const { style: overlayStyle } = useOverlayStacking(undefined, 'overlay');\n  const { focusProps: backFocusProps, focusClassName: backFocusClassName } =\n    useFocusRing();\n\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [panelWidth, setPanelWidth] = useState<number | undefined>(undefined);\n\n  useLayoutEffect(() => {\n    if (panelRef.current && panelWidth === undefined) {\n      setPanelWidth(panelRef.current.offsetWidth);\n    }\n  }, [panelWidth]);\n\n  const currentLevel = stack.length > 0 ? stack[stack.length - 1] : null;\n  const currentContent: ReactNode = currentLevel\n    ? currentLevel.content\n    : children;\n  const titleSlots = currentLevel\n    ? getSubTriggerSlots(currentLevel.title)\n    : null;\n\n  const handleEscapeKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (stack.length > 0) {\n        pop();\n        e.preventDefault();\n      }\n      e.stopPropagation();\n    },\n    [pop, stack.length],\n  );\n\n  return (\n    <RadixPortal>\n      <RadixContent\n        {...remainingProps}\n        ref={panelRef}\n        id={_contentId}\n        side={side}\n        align={alignment}\n        sideOffset={_sideOffset}\n        avoidCollisions={avoidCollisions}\n        collisionBoundary={collisionBoundary}\n        onCloseAutoFocus={onCloseAutoFocus}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={styles.panel}\n        style={{ zIndex: overlayStyle.zIndex, width: panelWidth }}\n        onEscapeKeyDown={handleEscapeKeyDown}\n      >\n        {currentLevel && (\n          <div className={styles.header}>\n            <button\n              className={clsx(styles.backButton, backFocusClassName)}\n              onClick={pop}\n              aria-label={intl.formatMessage({\n                id: 'tSs2tyafv8WOwku3',\n                defaultMessage: 'Back',\n              })}\n              type=\"button\"\n              role=\"menuitem\"\n              {...backFocusProps}\n            >\n              <ChevronLeftSmallIcon />\n              <div className={styles.headerTitleWrapper}>\n                {titleSlots?.prefix}\n                <span\n                  className={clsx(\n                    textStyleCSS({ textStyle: 'base-emphasized' }),\n                    styles.headerTitleText,\n                  )}\n                >\n                  {titleSlots?.freeform}\n                </span>\n              </div>\n            </button>\n          </div>\n        )}\n        <div\n          className={clsx(styles.body, {\n            [styles.bodyAnimatedForward]:\n              direction === 'forward' && stack.length > 0,\n            [styles.bodyAnimatedBack]: direction === 'back',\n          })}\n          key={stack.length}\n        >\n          {currentContent}\n        </div>\n      </RadixContent>\n    </RadixPortal>\n  );\n};\n\n(MobileContent as typeof MobileContent & { displayName: string }).displayName =\n  'Menu.Content';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  Content as RadixContent,\n  Portal as RadixPortal,\n} from '@radix-ui/react-dropdown-menu';\nimport clsx from 'clsx';\nimport {\n  useCallback,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ChevronLeftSmallIcon } from '@dynatrace/strato-icons';\n\nimport { MobileMenuNavigationContext } from './contexts/MobileMenuNavigationContext.js';\nimport { getSubTriggerSlots } from './item-slots.js';\nimport { groupContainer as menuGroupContainer } from './Menu.sty.js';\nimport * as styles from './MobileMenu.sty.js';\nimport { type MenuContentProps } from './types.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\n\ntype InternalMobileContentProps = MenuContentProps & {\n  _sideOffset?: number;\n  _alignOffset?: number;\n  _contentId?: string;\n};\n\nconst SIDE_OFFSET = 4;\n\n/**\n * @internal\n */\nexport const MobileContent = (props: InternalMobileContentProps) => {\n  const {\n    children,\n    side = 'bottom',\n    alignment = 'start',\n    onCloseAutoFocus,\n    avoidCollisions = true,\n    collisionBoundary,\n    _sideOffset = SIDE_OFFSET,\n    _alignOffset: _unusedAlignOffset,\n    _contentId,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  } = props as InternalMobileContentProps;\n\n  const intl = useIntl();\n  const { stack, direction, pop } = useContext(MobileMenuNavigationContext);\n  const { style: overlayStyle } = useOverlayStacking(undefined, 'overlay');\n  const { focusProps: backFocusProps, focusClassName: backFocusClassName } =\n    useFocusRing();\n\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [panelWidth, setPanelWidth] = useState<number | undefined>(undefined);\n\n  useLayoutEffect(() => {\n    if (panelRef.current && panelWidth === undefined) {\n      setPanelWidth(panelRef.current.offsetWidth);\n    }\n  }, [panelWidth]);\n\n  const currentLevel = stack.length > 0 ? stack[stack.length - 1] : null;\n  const currentContent: ReactNode = currentLevel\n    ? currentLevel.content\n    : children;\n  const titleSlots = currentLevel\n    ? getSubTriggerSlots(currentLevel.title)\n    : null;\n\n  const handleEscapeKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (stack.length > 0) {\n        pop();\n        e.preventDefault();\n      }\n      e.stopPropagation();\n    },\n    [pop, stack.length],\n  );\n\n  return (\n    <RadixPortal>\n      <RadixContent\n        {...remainingProps}\n        ref={panelRef}\n        id={_contentId}\n        side={side}\n        align={alignment}\n        sideOffset={_sideOffset}\n        avoidCollisions={avoidCollisions}\n        collisionBoundary={collisionBoundary}\n        onCloseAutoFocus={onCloseAutoFocus}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        className={styles.panel}\n        style={{ zIndex: overlayStyle.zIndex, width: panelWidth }}\n        onEscapeKeyDown={handleEscapeKeyDown}\n      >\n        {currentLevel && (\n          <div className={styles.header}>\n            <button\n              className={clsx(styles.backButton, backFocusClassName)}\n              onClick={pop}\n              aria-label={intl.formatMessage({\n                id: 'tSs2tyafv8WOwku3',\n                defaultMessage: 'Back',\n              })}\n              type=\"button\"\n              role=\"menuitem\"\n              {...backFocusProps}\n            >\n              <ChevronLeftSmallIcon />\n              <div className={styles.headerTitleWrapper}>\n                {titleSlots?.prefix}\n                <span\n                  className={clsx(\n                    textStyleCSS({ textStyle: 'base-emphasized' }),\n                    styles.headerTitleText,\n                  )}\n                >\n                  {titleSlots?.freeform}\n                </span>\n              </div>\n            </button>\n          </div>\n        )}\n        <div\n          className={clsx(styles.body, menuGroupContainer, {\n            [styles.bodyAnimatedForward]:\n              direction === 'forward' && stack.length > 0,\n            [styles.bodyAnimatedBack]: direction === 'back',\n          })}\n          key={stack.length}\n        >\n          {currentContent}\n        </div>\n      </RadixContent>\n    </RadixPortal>\n  );\n};\n\n(MobileContent as typeof MobileContent & { displayName: string }).displayName =\n  'Menu.Content';\n"],
+  "mappings": "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",
   "names": []
 }