@dynatrace/strato-components 3.7.1 → 3.9.0

package/esm/layouts/split-layout/useSplitSizing.js

@@ -1,4 +1,3 @@
-import { throttle } from "lodash-es";
 import {
   useCallback,
   useLayoutEffect,
@@ -6,9 +5,37 @@ import {
   useRef,
   useState
 } from "react";
-import useResizeObserver from "use-resize-observer";
 import { clampPanelWidth, computeLayout } from "./split-sizing-utils.js";
 import { convertToPx, toCssLength } from "./width-utils.js";
+import { useResizeObserver } from "../../core/hooks/useResizeObserver.js";
+function getEffectiveHandleWidth() {
+  if (typeof document === "undefined") {
+    return 8;
+  }
+  const raw = getComputedStyle(document.documentElement).getPropertyValue("--_dt-split-handle-ew").trim();
+  const value = parseFloat(raw);
+  return Number.isNaN(value) ? 8 : value;
+}
+function useApplyControlledWidth({
+  controlledWidth,
+  containerWidth,
+  isDraggingRef,
+  getClampedSplit,
+  splitPxRef,
+  hasBeenManuallyResizedRef,
+  setSplitPx
+}) {
+  const appliedRef = useRef();
+  if (controlledWidth !== void 0 && containerWidth > 0 && !isDraggingRef.current && controlledWidth !== appliedRef.current) {
+    appliedRef.current = controlledWidth;
+    const clamped = getClampedSplit(controlledWidth, containerWidth);
+    if (splitPxRef.current !== clamped) {
+      splitPxRef.current = clamped;
+      hasBeenManuallyResizedRef.current = true;
+      setSplitPx(clamped);
+    }
+  }
+}
 function useSplitSizing(options) {
   const { panel, content, refs } = options;
   const [containerWidth, setContainerWidth] = useState(0);
@@ -25,7 +52,7 @@ function useSplitSizing(options) {
   if (!isDraggingRef.current) {
     splitPxRef.current = splitPx;
   }
-  const handleWidth = panel.resizable ? 8 : 0;
+  const handleWidth = panel.resizable ? getEffectiveHandleWidth() : 0;
   const contentMinCss = toCssLength(content.min);
   const sizingConfig = useMemo(
     () => ({
@@ -59,16 +86,15 @@ function useSplitSizing(options) {
     },
     [containerWidth, panel.default, splitPx]
   );
-  const KEEP_SQUISHED_SIZES = false;
-  const throttledSync = useMemo(
-    () => throttle((width) => {
-      const expected = getClampedSplit(splitPxRef.current, width);
-      if (splitPxRef.current !== expected) {
-        setSplitPx(expected);
-      }
-    }, 100),
-    [getClampedSplit]
-  );
+  useApplyControlledWidth({
+    controlledWidth: panel.width,
+    containerWidth,
+    isDraggingRef,
+    getClampedSplit,
+    splitPxRef,
+    hasBeenManuallyResizedRef,
+    setSplitPx
+  });
   useResizeObserver({
     ref: refs.root,
     onResize: (size) => {
@@ -76,9 +102,6 @@ function useSplitSizing(options) {
         return;
       }
       setContainerWidth(size.width);
-      if (KEEP_SQUISHED_SIZES) {
-        throttledSync(size.width);
-      }
     }
   });
   const { position: panelPosition, onResize: onPanelResize } = panel;
@@ -129,11 +152,12 @@ function useSplitSizing(options) {
     ]
   );
   const layout = computeLayout(splitPx, containerWidth, sizingConfig);
-  const isUnresolved = splitPx === -1;
-  const panelWidthCss = isUnresolved ? toCssLength(panel.default) : `${layout.panel.width}px`;
-  const contentWidthCss = isUnresolved ? `max(${toCssLength(content.min)}, 100% - ${toCssLength(
-    panel.default
-  )} - ${handleWidth}px)` : layout.content.widthCss;
+  const isPreMeasure = containerWidth === 0 || splitPx === -1;
+  const preWidthCss = panel.width !== void 0 ? `${panel.width}px` : toCssLength(panel.default);
+  const panelWidthCss = isPreMeasure ? preWidthCss : `${layout.panel.width}px`;
+  const contentWidthCss = isPreMeasure ? `max(${toCssLength(
+    content.min
+  )}, 100% - ${preWidthCss} - ${handleWidth}px)` : layout.content.widthCss;
   return {
     ...layout,
     panel: { ...layout.panel, widthCss: panelWidthCss },

package/esm/layouts/split-layout/useSplitSizing.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/split-layout/useSplitSizing.ts"],
-  "sourcesContent": ["import { throttle } from 'lodash-es';\nimport {\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type RefObject,\n} from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport { clampPanelWidth, computeLayout } from './split-sizing-utils.js';\nimport { convertToPx, toCssLength, type PanelWidth } from './width-utils.js';\n\ninterface UseSplitSizingOptions {\n  panel: {\n    min: PanelWidth;\n    max: PanelWidth;\n    default: PanelWidth;\n    position: 'start' | 'end';\n    resizable: boolean;\n    onResize?: (width: number) => void;\n  };\n  content: {\n    min: PanelWidth;\n  };\n  refs: {\n    root: RefObject<HTMLDivElement>;\n    panel: RefObject<HTMLDivElement>;\n    content: RefObject<HTMLDivElement>;\n  };\n}\n\ninterface SplitSizing {\n  panel: {\n    width: number;\n    widthCss: string;\n    minPx: number;\n    maxPx: number;\n  };\n  content: {\n    width: number;\n    widthCss: string;\n    minPx: number;\n    maxPx: number;\n  };\n  handleWidth: number;\n  dragActions: {\n    onDragStart: () => void;\n    onDrag: (mx: number) => void;\n    onDragEnd: () => void;\n  };\n}\n\nexport function useSplitSizing(options: UseSplitSizingOptions): SplitSizing {\n  const { panel, content, refs } = options;\n\n  const [containerWidth, setContainerWidth] = useState(0);\n\n  const [splitPx, setSplitPx] = useState<number>(() => {\n    if (typeof panel.default === 'number') {\n      return panel.default;\n    }\n    return -1;\n  });\n\n  const splitPxRef = useRef(splitPx);\n  const isDraggingRef = useRef(false);\n  const hasBeenManuallyResizedRef = useRef(false);\n  const dragStartPx = useRef<number | null>(null);\n\n  if (!isDraggingRef.current) {\n    splitPxRef.current = splitPx;\n  }\n\n  const handleWidth = panel.resizable ? 8 : 0;\n  const contentMinCss = toCssLength(content.min);\n\n  const sizingConfig = useMemo(\n    () => ({\n      panelMin: panel.min,\n      panelMax: panel.max,\n      contentMin: content.min,\n      handleWidth,\n    }),\n    [panel.min, panel.max, content.min, handleWidth],\n  );\n\n  const getClampedSplit = useCallback(\n    (split: number, container: number) =>\n      clampPanelWidth(split, container, sizingConfig),\n    [sizingConfig],\n  );\n\n  useLayoutEffect(\n    function initializeSplit() {\n      if (containerWidth === 0) {\n        return;\n      }\n      // For a numeric defaultWidth, initialize once and then let the user drive.\n      if (typeof panel.default === 'number') {\n        if (splitPx !== -1) {\n          return;\n        }\n        setSplitPx(panel.default);\n        return;\n      }\n      // For a percentage defaultWidth, re-derive from the container on every\n      // container resize until the user has manually dragged. This ensures that\n      // when the container itself is sized via %, the inner layout still applies\n      // the percentage against the correct, fully-resolved container width.\n      if (hasBeenManuallyResizedRef.current) {\n        return;\n      }\n      setSplitPx(convertToPx(panel.default, containerWidth));\n    },\n    [containerWidth, panel.default, splitPx],\n  );\n\n  const KEEP_SQUISHED_SIZES = false;\n\n  const throttledSync = useMemo(\n    () =>\n      throttle((width: number) => {\n        const expected = getClampedSplit(splitPxRef.current, width);\n        if (splitPxRef.current !== expected) {\n          setSplitPx(expected);\n        }\n      }, 100),\n    [getClampedSplit],\n  );\n\n  useResizeObserver({\n    ref: refs.root,\n    onResize: (size) => {\n      if (!size.width) {\n        return;\n      }\n      setContainerWidth(size.width);\n\n      if (KEEP_SQUISHED_SIZES) {\n        throttledSync(size.width);\n      }\n    },\n  });\n\n  const { position: panelPosition, onResize: onPanelResize } = panel;\n\n  const dragActions = useMemo(\n    () => ({\n      onDragStart: () => {\n        isDraggingRef.current = true;\n        const containerW = refs.root.current?.offsetWidth ?? 0;\n        const clamped = getClampedSplit(splitPxRef.current, containerW);\n        splitPxRef.current = clamped;\n        setSplitPx(clamped);\n        dragStartPx.current = clamped;\n      },\n      onDrag: (mx: number) => {\n        const containerW = refs.root.current?.offsetWidth ?? 0;\n        if (dragStartPx.current === null || containerW === 0) {\n          return;\n        }\n\n        const sign = panelPosition === 'start' ? 1 : -1;\n\n        const next = dragStartPx.current + mx * sign;\n        const clamped = getClampedSplit(next, containerW);\n        splitPxRef.current = clamped;\n\n        if (refs.panel.current) {\n          refs.panel.current.style.width = `${clamped}px`;\n        }\n        if (refs.content.current) {\n          refs.content.current.style.width = `max(${contentMinCss}, 100% - ${\n            clamped + handleWidth\n          }px)`;\n        }\n      },\n      onDragEnd: () => {\n        isDraggingRef.current = false;\n        hasBeenManuallyResizedRef.current = true;\n        dragStartPx.current = null;\n        const rootWidth = refs.root.current?.offsetWidth ?? 0;\n        const clamped = getClampedSplit(splitPxRef.current, rootWidth);\n        splitPxRef.current = clamped;\n        setSplitPx(clamped);\n        onPanelResize?.(clamped);\n      },\n    }),\n    [\n      getClampedSplit,\n      panelPosition,\n      onPanelResize,\n      handleWidth,\n      contentMinCss,\n      refs,\n    ],\n  );\n\n  const layout = computeLayout(splitPx, containerWidth, sizingConfig);\n\n  // When splitPx is -1 (percentage default, container not yet measured), use\n  // the raw CSS percentage so the panel renders at the correct size on first\n  // paint instead of collapsing to 0px and then jumping.\n  // Content width is computed from the panel percentage so the two columns\n  // add up to 100% without overflow.\n  const isUnresolved = splitPx === -1;\n  const panelWidthCss = isUnresolved\n    ? toCssLength(panel.default)\n    : `${layout.panel.width}px`;\n  const contentWidthCss = isUnresolved\n    ? `max(${toCssLength(content.min)}, 100% - ${toCssLength(\n        panel.default,\n      )} - ${handleWidth}px)`\n    : layout.content.widthCss;\n\n  return {\n    ...layout,\n    panel: { ...layout.panel, widthCss: panelWidthCss },\n    content: { ...layout.content, widthCss: contentWidthCss },\n    handleWidth,\n    dragActions,\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type Dispatch,\n  type MutableRefObject,\n  type RefObject,\n  type SetStateAction,\n} from 'react';\n\nimport { clampPanelWidth, computeLayout } from './split-sizing-utils.js';\nimport { convertToPx, toCssLength, type PanelWidth } from './width-utils.js';\nimport { useResizeObserver } from '../../core/hooks/useResizeObserver.js';\n\n// Read the effective flex space consumed by the SplitLayout resize handle.\n// Under visual refresh, a CSS var is set to 0 on :root (see SplitLayout.css.ts).\n// Reading from document.documentElement is synchronous and available before the\n// handle element mounts, so the correct value is used from the very first render.\nfunction getEffectiveHandleWidth(): number {\n  if (typeof document === 'undefined') {\n    return 8;\n  }\n  const raw = getComputedStyle(document.documentElement)\n    .getPropertyValue('--_dt-split-handle-ew')\n    .trim();\n  const value = parseFloat(raw);\n  return Number.isNaN(value) ? 8 : value;\n}\n\ninterface UseApplyControlledWidthOptions {\n  controlledWidth: number | undefined;\n  containerWidth: number;\n  isDraggingRef: MutableRefObject<boolean>;\n  getClampedSplit: (split: number, container: number) => number;\n  splitPxRef: MutableRefObject<number>;\n  hasBeenManuallyResizedRef: MutableRefObject<boolean>;\n  setSplitPx: Dispatch<SetStateAction<number>>;\n}\n\nfunction useApplyControlledWidth({\n  controlledWidth,\n  containerWidth,\n  isDraggingRef,\n  getClampedSplit,\n  splitPxRef,\n  hasBeenManuallyResizedRef,\n  setSplitPx,\n}: UseApplyControlledWidthOptions): void {\n  const appliedRef = useRef<number>();\n  if (\n    controlledWidth !== undefined &&\n    containerWidth > 0 &&\n    !isDraggingRef.current &&\n    controlledWidth !== appliedRef.current\n  ) {\n    appliedRef.current = controlledWidth;\n    const clamped = getClampedSplit(controlledWidth, containerWidth);\n    if (splitPxRef.current !== clamped) {\n      splitPxRef.current = clamped;\n      hasBeenManuallyResizedRef.current = true;\n      setSplitPx(clamped);\n    }\n  }\n}\n\ninterface UseSplitSizingOptions {\n  panel: {\n    min: PanelWidth;\n    max: PanelWidth;\n    default: PanelWidth;\n    position: 'start' | 'end';\n    resizable: boolean;\n    onResize?: (width: number) => void;\n    width?: number;\n  };\n  content: {\n    min: PanelWidth;\n  };\n  refs: {\n    root: RefObject<HTMLDivElement>;\n    panel: RefObject<HTMLDivElement>;\n    content: RefObject<HTMLDivElement>;\n  };\n}\n\ninterface SplitSizing {\n  panel: {\n    width: number;\n    widthCss: string;\n    minPx: number;\n    maxPx: number;\n  };\n  content: {\n    width: number;\n    widthCss: string;\n    minPx: number;\n    maxPx: number;\n  };\n  handleWidth: number;\n  dragActions: {\n    onDragStart: () => void;\n    onDrag: (mx: number) => void;\n    onDragEnd: () => void;\n  };\n}\n\nexport function useSplitSizing(options: UseSplitSizingOptions): SplitSizing {\n  const { panel, content, refs } = options;\n\n  const [containerWidth, setContainerWidth] = useState(0);\n\n  const [splitPx, setSplitPx] = useState<number>(() => {\n    if (typeof panel.default === 'number') {\n      return panel.default;\n    }\n    return -1;\n  });\n\n  const splitPxRef = useRef(splitPx);\n  const isDraggingRef = useRef(false);\n  const hasBeenManuallyResizedRef = useRef(false);\n  const dragStartPx = useRef<number | null>(null);\n\n  if (!isDraggingRef.current) {\n    splitPxRef.current = splitPx;\n  }\n\n  const handleWidth = panel.resizable ? getEffectiveHandleWidth() : 0;\n\n  const contentMinCss = toCssLength(content.min);\n\n  const sizingConfig = useMemo(\n    () => ({\n      panelMin: panel.min,\n      panelMax: panel.max,\n      contentMin: content.min,\n      handleWidth,\n    }),\n    [panel.min, panel.max, content.min, handleWidth],\n  );\n\n  const getClampedSplit = useCallback(\n    (split: number, container: number) =>\n      clampPanelWidth(split, container, sizingConfig),\n    [sizingConfig],\n  );\n\n  useLayoutEffect(\n    function initializeSplit() {\n      if (containerWidth === 0) {\n        return;\n      }\n      // For a numeric defaultWidth, initialize once and then let the user drive.\n      if (typeof panel.default === 'number') {\n        if (splitPx !== -1) {\n          return;\n        }\n        setSplitPx(panel.default);\n        return;\n      }\n      // For a percentage defaultWidth, re-derive from the container on every\n      // container resize until the user has manually dragged. This ensures that\n      // when the container itself is sized via %, the inner layout still applies\n      // the percentage against the correct, fully-resolved container width.\n      if (hasBeenManuallyResizedRef.current) {\n        return;\n      }\n      setSplitPx(convertToPx(panel.default, containerWidth));\n    },\n    [containerWidth, panel.default, splitPx],\n  );\n\n  useApplyControlledWidth({\n    controlledWidth: panel.width,\n    containerWidth,\n    isDraggingRef,\n    getClampedSplit,\n    splitPxRef,\n    hasBeenManuallyResizedRef,\n    setSplitPx,\n  });\n\n  useResizeObserver({\n    ref: refs.root,\n    onResize: (size) => {\n      if (!size.width) {\n        return;\n      }\n      setContainerWidth(size.width);\n    },\n  });\n\n  const { position: panelPosition, onResize: onPanelResize } = panel;\n\n  const dragActions = useMemo(\n    () => ({\n      onDragStart: () => {\n        isDraggingRef.current = true;\n        const containerW = refs.root.current?.offsetWidth ?? 0;\n        const clamped = getClampedSplit(splitPxRef.current, containerW);\n        splitPxRef.current = clamped;\n        setSplitPx(clamped);\n        dragStartPx.current = clamped;\n      },\n      onDrag: (mx: number) => {\n        const containerW = refs.root.current?.offsetWidth ?? 0;\n        if (dragStartPx.current === null || containerW === 0) {\n          return;\n        }\n\n        const sign = panelPosition === 'start' ? 1 : -1;\n\n        const next = dragStartPx.current + mx * sign;\n        const clamped = getClampedSplit(next, containerW);\n        splitPxRef.current = clamped;\n\n        if (refs.panel.current) {\n          refs.panel.current.style.width = `${clamped}px`;\n        }\n        if (refs.content.current) {\n          refs.content.current.style.width = `max(${contentMinCss}, 100% - ${\n            clamped + handleWidth\n          }px)`;\n        }\n      },\n      onDragEnd: () => {\n        isDraggingRef.current = false;\n        hasBeenManuallyResizedRef.current = true;\n        dragStartPx.current = null;\n        const rootWidth = refs.root.current?.offsetWidth ?? 0;\n        const clamped = getClampedSplit(splitPxRef.current, rootWidth);\n        splitPxRef.current = clamped;\n        setSplitPx(clamped);\n        onPanelResize?.(clamped);\n      },\n    }),\n    [\n      getClampedSplit,\n      panelPosition,\n      onPanelResize,\n      handleWidth,\n      contentMinCss,\n      refs,\n    ],\n  );\n\n  const layout = computeLayout(splitPx, containerWidth, sizingConfig);\n\n  // computeLayout resolves percentage bounds against containerWidth; when it is\n  // 0, those clamp to 0 and collapse the panel to minWidth.\n  const isPreMeasure = containerWidth === 0 || splitPx === -1;\n  const preWidthCss =\n    panel.width !== undefined ? `${panel.width}px` : toCssLength(panel.default);\n  const panelWidthCss = isPreMeasure ? preWidthCss : `${layout.panel.width}px`;\n  const contentWidthCss = isPreMeasure\n    ? `max(${toCssLength(\n        content.min,\n      )}, 100% - ${preWidthCss} - ${handleWidth}px)`\n    : layout.content.widthCss;\n\n  return {\n    ...layout,\n    panel: { ...layout.panel, widthCss: panelWidthCss },\n    content: { ...layout.content, widthCss: contentWidthCss },\n    handleWidth,\n    dragActions,\n  };\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/layouts/surface/Surface.css

@@ -1,86 +1,86 @@
-._1qto6jt6-3-7-1 {
-  --_1igzksy0-3-7-1: var(--dt-borders-radius-surface-default, 12px);
+._1qto6jt6-3-9-0 {
+  --_1igzksy0-3-9-0: var(--dt-borders-radius-surface-default, 12px);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   text-align: left;
   border: none;
   outline: none;
   position: relative;
   background-color: var(--dt-colors-background-surface-default, #fff);
-  border-radius: var(--_1igzksy0-3-7-1);
+  border-radius: var(--_1igzksy0-3-9-0);
 }
-._1qto6jt6-3-7-1::before, ._1qto6jt6-3-7-1::after {
+._1qto6jt6-3-9-0::before, ._1qto6jt6-3-9-0::after {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
-  border-radius: var(--_1igzksy0-3-7-1);
+  border-radius: var(--_1igzksy0-3-9-0);
   pointer-events: none;
 }
-._1qto6jt6-3-7-1::after {
+._1qto6jt6-3-9-0::after {
   outline-offset: 2px;
-  outline: 2px solid var(--_17bwkb02-3-7-1);
-  opacity: var(--_1qto6jt4-3-7-1);
-  transition: var(--_1qto6jt5-3-7-1);
+  outline: 2px solid var(--_17bwkb02-3-9-0);
+  opacity: var(--_1qto6jt4-3-9-0);
+  transition: var(--_1qto6jt5-3-9-0);
 }
-._1qto6jt7-3-7-1 {
-  --_1qto6jt4-3-7-1: 1;
-  --_1qto6jt5-3-7-1: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1)) var(--dt-animations-fade-in-duration-fast, 150ms);
+._1qto6jt7-3-9-0 {
+  --_1qto6jt4-3-9-0: 1;
+  --_1qto6jt5-3-9-0: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1)) var(--dt-animations-fade-in-duration-fast, 150ms);
 }
-._1qto6jt8-3-7-1 {
-  --_1qto6jt4-3-7-1: 0;
-  --_1qto6jt5-3-7-1: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1)) var(--dt-animations-fade-out-duration-fast, 150ms);
+._1qto6jt8-3-9-0 {
+  --_1qto6jt4-3-9-0: 0;
+  --_1qto6jt5-3-9-0: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1)) var(--dt-animations-fade-out-duration-fast, 150ms);
 }
-._1qto6jt9-3-7-1 {
-  --_1qto6jt1-3-7-1: 0;
-  --_1qto6jt2-3-7-1: pointer;
-  --_1qto6jt3-3-7-1: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
+._1qto6jt9-3-9-0 {
+  --_1qto6jt1-3-9-0: 0;
+  --_1qto6jt2-3-9-0: pointer;
+  --_1qto6jt3-3-9-0: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
-  border-radius: var(--_1igzksy0-3-7-1);
+  border-radius: var(--_1igzksy0-3-9-0);
   pointer-events: none;
 }
-._1qto6jt9-3-7-1::after,._1qto6jt9-3-7-1::before {
+._1qto6jt9-3-9-0::after,._1qto6jt9-3-9-0::before {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
-  border-radius: var(--_1igzksy0-3-7-1);
+  border-radius: var(--_1igzksy0-3-9-0);
   pointer-events: none;
   transition: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1)) var(--dt-animations-fade-in-duration-fast, 150ms);
 }
-._1qto6jt9-3-7-1::after {
-  box-shadow: var(--_1qto6jt0-3-7-1);
-  opacity: var(--_1qto6jt1-3-7-1);
+._1qto6jt9-3-9-0::after {
+  box-shadow: var(--_1qto6jt0-3-9-0);
+  opacity: var(--_1qto6jt1-3-9-0);
 }
-._1qto6jt9-3-7-1::before {
-  box-shadow: var(--_1qto6jt3-3-7-1);
+._1qto6jt9-3-9-0::before {
+  box-shadow: var(--_1qto6jt3-3-9-0);
   opacity: 0;
 }
-._1qto6jta-3-7-1 {
-  --_1qto6jt0-3-7-1: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
-  --_1qto6jt3-3-7-1: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
+._1qto6jta-3-9-0 {
+  --_1qto6jt0-3-9-0: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
+  --_1qto6jt3-3-9-0: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
   box-shadow: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d);
 }
-._1qto6jtb-3-7-1 {
-  --_1qto6jt0-3-7-1: var(--dt-box-shadows-surface-raised-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
-  --_1qto6jt3-3-7-1: var(--dt-box-shadows-surface-raised-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
+._1qto6jtb-3-9-0 {
+  --_1qto6jt0-3-9-0: var(--dt-box-shadows-surface-raised-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
+  --_1qto6jt3-3-9-0: var(--dt-box-shadows-surface-raised-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   box-shadow: var(--dt-box-shadows-surface-raised-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
 }
-._1qto6jtc-3-7-1 {
-  --_1qto6jt0-3-7-1: var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
-  --_1qto6jt3-3-7-1: var(--dt-box-shadows-surface-floating-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 6px 14px -2px #2d2e4e3d);
+._1qto6jtc-3-9-0 {
+  --_1qto6jt0-3-9-0: var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
+  --_1qto6jt3-3-9-0: var(--dt-box-shadows-surface-floating-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 6px 14px -2px #2d2e4e3d);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._1qto6jtd-3-7-1 {
-  --_1qto6jt1-3-7-1: 1;
-  --_1qto6jt2-3-7-1: grab;
+._1qto6jtd-3-9-0 {
+  --_1qto6jt1-3-9-0: 1;
+  --_1qto6jt2-3-9-0: grab;
 }
 button.strato-surface:not(:disabled), a.strato-surface:not(:disabled) {
   cursor: pointer;

package/esm/layouts/surface/Surface.sty.js

@@ -1,8 +1,8 @@
 import "../../styles/colorUtils.css";
 import "./Surface.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var pseudoElement = _7a468({ defaultClassName: "_1qto6jt9-3-7-1", variantClassNames: { elevation: { flat: "_1qto6jta-3-7-1", raised: "_1qto6jtb-3-7-1", floating: "_1qto6jtc-3-7-1" }, dragged: { true: "_1qto6jtd-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
-var surface = _7a468({ defaultClassName: "_1qto6jt6-3-7-1", variantClassNames: { selected: { true: "_1qto6jt7-3-7-1", false: "_1qto6jt8-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
+var pseudoElement = _7a468({ defaultClassName: "_1qto6jt9-3-9-0", variantClassNames: { elevation: { flat: "_1qto6jta-3-9-0", raised: "_1qto6jtb-3-9-0", floating: "_1qto6jtc-3-9-0" }, dragged: { true: "_1qto6jtd-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
+var surface = _7a468({ defaultClassName: "_1qto6jt6-3-9-0", variantClassNames: { selected: { true: "_1qto6jt7-3-9-0", false: "_1qto6jt8-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   pseudoElement,
   surface

package/esm/layouts/surface/Surface.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/surface/Surface.css.ts"],
-  "sourcesContent": ["import '../../styles/colorUtils.css';\nimport './Surface.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var pseudoElement = _7a468({defaultClassName:'_1qto6jt9-3-7-1',variantClassNames:{elevation:{flat:'_1qto6jta-3-7-1',raised:'_1qto6jtb-3-7-1',floating:'_1qto6jtc-3-7-1'},dragged:{true:'_1qto6jtd-3-7-1'}},defaultVariants:{},compoundVariants:[]});\nexport var surface = _7a468({defaultClassName:'_1qto6jt6-3-7-1',variantClassNames:{selected:{true:'_1qto6jt7-3-7-1',false:'_1qto6jt8-3-7-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import '../../styles/colorUtils.css';\nimport './Surface.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var pseudoElement = _7a468({defaultClassName:'_1qto6jt9-3-9-0',variantClassNames:{elevation:{flat:'_1qto6jta-3-9-0',raised:'_1qto6jtb-3-9-0',floating:'_1qto6jtc-3-9-0'},dragged:{true:'_1qto6jtd-3-9-0'}},defaultVariants:{},compoundVariants:[]});\nexport var surface = _7a468({defaultClassName:'_1qto6jt6-3-9-0',variantClassNames:{selected:{true:'_1qto6jt7-3-9-0',false:'_1qto6jt8-3-9-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,MAAK,mBAAkB,QAAO,mBAAkB,UAAS,kBAAiB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClP,IAAI,UAAU,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/layouts/surface/variables.sty.js

@@ -1,4 +1,4 @@
-var surfaceBorderRadius = "var(--_1igzksy0-3-7-1)";
+var surfaceBorderRadius = "var(--_1igzksy0-3-9-0)";
 export {
   surfaceBorderRadius
 };

package/esm/layouts/surface/variables.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/surface/variables.css.ts"],
-  "sourcesContent": ["export var surfaceBorderRadius = 'var(--_1igzksy0-3-7-1)';"],
+  "sourcesContent": ["export var surfaceBorderRadius = 'var(--_1igzksy0-3-9-0)';"],
   "mappings": "AAAO,IAAI,sBAAsB;",
   "names": []
 }

package/esm/layouts/title-bar/TitleBar.css

@@ -1,21 +1,21 @@
-._wcwjv20-3-7-1 {
+._wcwjv20-3-9-0 {
   flex-grow: 1;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._wcwjv21-3-7-1 {
+._wcwjv21-3-9-0 {
   width: clamp(400px, 400px, 100%);
 }
-._wcwjv22-3-7-1 {
+._wcwjv22-3-9-0 {
   flex-grow: 1;
   align-self: center;
   min-width: 0;
 }
-._wcwjv23-3-7-1 {
+._wcwjv23-3-9-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._wcwjv24-3-7-1 {
+._wcwjv24-3-9-0 {
   max-width: 100%;
 }

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-7-1";
-var subtitleCSS = "_wcwjv23-3-7-1 _da9a8v0-3-7-1 _da9a8v2-3-7-1 _da9a8v3-3-7-1 _da9a8vb-3-7-1";
-var suffixWrapperCSS = "_wcwjv24-3-7-1";
-var titleSubtitleWrapperCSS = _7a468({ defaultClassName: "_wcwjv20-3-7-1", variantClassNames: { childrenAreText: { true: "_wcwjv21-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
+var navigationWrapperCSS = "_wcwjv22-3-9-0";
+var subtitleCSS = "_wcwjv23-3-9-0 _da9a8v0-3-9-0 _da9a8v2-3-9-0 _da9a8v3-3-9-0 _da9a8vb-3-9-0";
+var suffixWrapperCSS = "_wcwjv24-3-9-0";
+var titleSubtitleWrapperCSS = _7a468({ defaultClassName: "_wcwjv20-3-9-0", variantClassNames: { childrenAreText: { true: "_wcwjv21-3-9-0" } }, 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-7-1';\nexport var subtitleCSS = '_wcwjv23-3-7-1 _da9a8v0-3-7-1 _da9a8v2-3-7-1 _da9a8v3-3-7-1 _da9a8vb-3-7-1';\nexport var suffixWrapperCSS = '_wcwjv24-3-7-1';\nexport var titleSubtitleWrapperCSS = _7a468({defaultClassName:'_wcwjv20-3-7-1',variantClassNames:{childrenAreText:{true:'_wcwjv21-3-7-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import '../../styles/textStyle.css';\nimport './TitleBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var navigationWrapperCSS = '_wcwjv22-3-9-0';\nexport var subtitleCSS = '_wcwjv23-3-9-0 _da9a8v0-3-9-0 _da9a8v2-3-9-0 _da9a8v3-3-9-0 _da9a8vb-3-9-0';\nexport var suffixWrapperCSS = '_wcwjv24-3-9-0';\nexport var titleSubtitleWrapperCSS = _7a468({defaultClassName:'_wcwjv20-3-9-0',variantClassNames:{childrenAreText:{true:'_wcwjv21-3-9-0'}},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,kBAAiB,mBAAkB,EAAC,iBAAgB,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/navigation/breadcrumbs/Breadcrumbs.css

@@ -1,27 +1,27 @@
-._hw98ku0-3-7-1 {
+._hw98ku0-3-9-0 {
   display: flex;
   min-width: 0;
   margin: 0;
   padding: 0;
 }
-._hw98ku1-3-7-1 {
+._hw98ku1-3-9-0 {
   display: flex;
   gap: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-2, 2px);
   white-space: nowrap;
 }
-._hw98ku2-3-7-1 {
+._hw98ku2-3-9-0 {
   overflow: hidden;
 }
-._hw98ku3-3-7-1 {
+._hw98ku3-3-9-0 {
   overflow: visible;
 }
-._hw98ku4-3-7-1 {
+._hw98ku4-3-9-0 {
   position: absolute;
   visibility: hidden;
   z-index: -1;
 }
-._hw98ku5-3-7-1 {
+._hw98ku5-3-9-0 {
   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-7-1 {
+._hw98ku6-3-9-0 {
   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-7-1 {
+._hw98ku7-3-9-0 {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._hw98ku8-3-7-1 {
+._hw98ku8-3-9-0 {
   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.sty.js

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

package/esm/navigation/menu/Content.js

@@ -7,6 +7,7 @@ import {
   forwardRef,
   useCallback
 } from "react";
+import { MenuSubLevelProvider } from "./contexts/MenuSubLevelContext.js";
 import { useMenuContext } from "./hooks/useMenuContext.js";
 import * as styles from "./Menu.sty.js";
 import { useOverlayStacking } from "../../core/hooks/useOverlayStacking.js";
@@ -63,7 +64,7 @@ const Content = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       collisionBoundary,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      children
+      children: /* @__PURE__ */ jsx(MenuSubLevelProvider, { children })
     }
   ) });
 });

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  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport { useMenuContext } from './hooks/useMenuContext.js';\nimport * as styles from './Menu.sty.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\n/**\n * @public\n */\nexport interface MenuContentProps\n  extends WithChildren,\n    MaskingProps,\n    DataTestId {\n  /**\n   * The preferred side where the menu content should be rendered relative to the\n   * trigger element. This value may be ignored if collisions occur.\n   * This prop is ignored within submenus.\n   *\n   * @defaultValue 'bottom'\n   */\n  side?: 'bottom' | 'top' | 'right' | 'left';\n  /**\n   * The horizontal position where the menu content should be rendered relative\n   * to the trigger element. This value may be ignored if collisions occur\n   * or when `side` is set to `'right'` or `'left'`.\n   * This prop is ignored within submenus.\n   *\n   * @defaultValue 'start'\n   */\n  alignment?: 'start' | 'center' | 'end';\n  /**\n   * Event handler called when focus moves to the trigger after closing.\n   * It can be prevented by calling event.preventDefault.\n   */\n  onCloseAutoFocus?: (event: Event) => void;\n  /**\n   * When true, overrides the side and align preferences to prevent collisions\n   * with boundary edges.\n   *\n   * @defaultValue true\n   */\n  avoidCollisions?: boolean;\n  /**\n   * Additional elements can be provided to be included in the boundary check for menu.\n   * By default this is the viewport.\n   */\n  collisionBoundary?: Element | null | Array<Element | null>;\n}\n\nconst SIDE_OFFSET = 4;\ntype InternalMenuContentProps = MenuContentProps & {\n  /** @internal */\n  _onTabKeyPressed: () => void;\n  /** @internal */\n  _sideOffset?: 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 {\n    side = 'bottom',\n    alignment = 'start',\n    onCloseAutoFocus,\n    avoidCollisions = true,\n    _sideOffset = SIDE_OFFSET,\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 } = 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  return (\n    <RadixPortal>\n      <RadixContent\n        {...remainingProps}\n        data-testid={dataTestId}\n        ref={forwardedRef}\n        side={side}\n        align={alignment}\n        onKeyUp={tabKeyHandler}\n        onCloseAutoFocus={onCloseAutoFocus}\n        sideOffset={_sideOffset}\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": "AAkHM;AAlHN;AAAA,EACE,WAAW;AAAA,EACX,UAAU;AAAA,OACL;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,sBAAsB;AAC/B,YAAY,YAAY;AACxB,SAAS,0BAA0B;AAgDnC,MAAM,cAAc;AAYb,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA,kBAAkB;AAAA,IAClB,cAAc;AAAA,IACd;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,UAAU,IAAI,eAAe;AAErC,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,SACE,oBAAC,eACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAa;AAAA,MACb,KAAK;AAAA,MACL;AAAA,MACA,OAAO;AAAA,MACP,SAAS;AAAA,MACT;AAAA,MACA,YAAY;AAAA,MACZ;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  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\n\nimport { MenuSubLevelProvider } from './contexts/MenuSubLevelContext.js';\nimport { useMenuContext } from './hooks/useMenuContext.js';\nimport * as styles from './Menu.sty.js';\nimport { useOverlayStacking } from '../../core/hooks/useOverlayStacking.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\n/**\n * @public\n */\nexport interface MenuContentProps\n  extends WithChildren,\n    MaskingProps,\n    DataTestId {\n  /**\n   * The preferred side where the menu content should be rendered relative to the\n   * trigger element. This value may be ignored if collisions occur.\n   * This prop is ignored within submenus.\n   *\n   * @defaultValue 'bottom'\n   */\n  side?: 'bottom' | 'top' | 'right' | 'left';\n  /**\n   * The horizontal position where the menu content should be rendered relative\n   * to the trigger element. This value may be ignored if collisions occur\n   * or when `side` is set to `'right'` or `'left'`.\n   * This prop is ignored within submenus.\n   *\n   * @defaultValue 'start'\n   */\n  alignment?: 'start' | 'center' | 'end';\n  /**\n   * Event handler called when focus moves to the trigger after closing.\n   * It can be prevented by calling event.preventDefault.\n   */\n  onCloseAutoFocus?: (event: Event) => void;\n  /**\n   * When true, overrides the side and align preferences to prevent collisions\n   * with boundary edges.\n   *\n   * @defaultValue true\n   */\n  avoidCollisions?: boolean;\n  /**\n   * Additional elements can be provided to be included in the boundary check for menu.\n   * By default this is the viewport.\n   */\n  collisionBoundary?: Element | null | Array<Element | null>;\n}\n\nconst SIDE_OFFSET = 4;\ntype InternalMenuContentProps = MenuContentProps & {\n  /** @internal */\n  _onTabKeyPressed: () => void;\n  /** @internal */\n  _sideOffset?: 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 {\n    side = 'bottom',\n    alignment = 'start',\n    onCloseAutoFocus,\n    avoidCollisions = true,\n    _sideOffset = SIDE_OFFSET,\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 } = 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  return (\n    <RadixPortal>\n      <RadixContent\n        {...remainingProps}\n        data-testid={dataTestId}\n        ref={forwardedRef}\n        side={side}\n        align={alignment}\n        onKeyUp={tabKeyHandler}\n        onCloseAutoFocus={onCloseAutoFocus}\n        sideOffset={_sideOffset}\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        <MenuSubLevelProvider>{children}</MenuSubLevelProvider>\n      </RadixContent>\n    </RadixPortal>\n  );\n});\n\n(Content as typeof Content & { displayName: string }).displayName =\n  'Menu.Content';\n"],
+  "mappings": "AAoIQ;AApIR;AAAA,EACE,WAAW;AAAA,EACX,UAAU;AAAA,OACL;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,YAAY,YAAY;AACxB,SAAS,0BAA0B;AAgDnC,MAAM,cAAc;AAYb,MAAM,UAA0B,2BAGrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,YAAY;AAAA,IACZ;AAAA,IACA,kBAAkB;AAAA,IAClB,cAAc;AAAA,IACd;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,UAAU,IAAI,eAAe;AAErC,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,SACE,oBAAC,eACC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAa;AAAA,MACb,KAAK;AAAA,MACL;AAAA,MACA,OAAO;AAAA,MACP,SAAS;AAAA,MACT;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA,WAAW,OAAO;AAAA,MAClB,OAAO,EAAE,QAAQ,MAAM,OAAO;AAAA,MAC9B,WAAW;AAAA,MACX;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAElB,8BAAC,wBAAsB,UAAS;AAAA;AAAA,EAClC,GACF;AAEJ,CAAC;AAEA,QAAqD,cACpD;",
   "names": []
 }

package/esm/navigation/menu/Item.js

@@ -3,6 +3,7 @@ import { Item as RadixItem } from "@radix-ui/react-dropdown-menu";
 import clsx from "clsx";
 import {
   forwardRef,
+  useEffect,
   useRef,
   useState
 } from "react";
@@ -44,6 +45,13 @@ const Item = /* @__PURE__ */ forwardRef(
     });
     const isTooltipHovered = useRef(false);
     const { isItemHovered, hoverProps } = useIsMenuItemHovered();
+    useEffect(() => {
+      if (!isOpen) {
+        return;
+      }
+      window.addEventListener("scroll", closeTooltip, { capture: true });
+      return () => window.removeEventListener("scroll", closeTooltip, { capture: true });
+    }, [isOpen, closeTooltip]);
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         RadixItem,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Item.tsx"],
-  "sourcesContent": ["import { Item as RadixItem } from '@radix-ui/react-dropdown-menu';\nimport clsx from 'clsx';\nimport {\n  type ElementType,\n  forwardRef,\n  type ReactEventHandler,\n  useRef,\n  useState,\n  type ReactElement,\n  type MouseEvent,\n} from 'react';\n\nimport { useIsMenuItemHovered } from './hooks/useIsMenuItemHovered.js';\nimport { getItemSlots } from './item-slots.js';\nimport { MenuItemTooltipWrapper } from './ItemTooltip.js';\nimport * as styles from './Menu.sty.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { useTooltipState } from '../../overlays/hooks/useTooltipState.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * @public\n */\nexport interface MenuItemOwnProps\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId {\n  /**\n   * Whether the menu item is disabled.\n   * If `true`, it prevents the user from interacting with the item and the item\n   * being focused.\n   */\n  disabled?: boolean;\n  /**\n   * Optional text used for typeahead purposes. By default, the typeahead\n   * behavior will use the `.textContent` of the item. Use this when the content\n   * is complex, or you have non-textual content inside.\n   */\n  textValue?: string;\n  /*\n   * TODO: The onSelect from the Radix MenuItem actually emits a native Event instead of a react synthetic event.\n   * When trying to fix that, our the app toolkits version of typescript ~4.9 bailed due to the type complexity. Right now there is no way\n   * to correct the typing on the event and keep a compatible type version.\n   * This limitiation also tracks through to the `ActionGroup` and `AppHeader`.\n   * APPDEV-8522\n   */\n  /**\n   * Event handler called when the user selects an item (via mouse or keyboard).\n   * Calling `event.preventDefault()` in this handler prevents the dropdown menu\n   * from closing when selecting that item.\n   */\n  onSelect: ReactEventHandler;\n}\n\n/**\n * @public\n */\nexport type MenuItemProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  MenuItemOwnProps\n>;\n\n/**\n * The component that contains the dropdown menu Items.\n * @public\n */\nexport const Item: <E extends ElementType = 'div'>(\n  props: MenuItemProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    {\n      children,\n      disabled = false,\n      onSelect,\n      as = 'div' as E,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...remainingProps\n    }: MenuItemProps<E>,\n    forwardedRef: typeof remainingProps.ref,\n  ) => {\n    const slots = getItemSlots(children);\n    const {\n      isOpen,\n      open: openTooltip,\n      close: closeTooltip,\n    } = useTooltipState({\n      defaultOpen: false,\n    });\n    const [tooltipTriggerRef, setTooltipTriggerRef] =\n      useState<HTMLElement | null>(null);\n    const { focusProps, focusClassName } = useFocusRing({\n      disabled,\n    });\n    const isTooltipHovered = useRef(false);\n    const { isItemHovered, hoverProps } = useIsMenuItemHovered();\n\n    return (\n      <>\n        <RadixItem\n          data-testid={dataTestId}\n          ref={forwardedRef}\n          {..._mergeProps(focusProps, hoverProps, {\n            onClick: (event: MouseEvent) => {\n              if (disabled) {\n                event.stopPropagation();\n                event.preventDefault();\n                return;\n              }\n\n              const nativeEvent = event.nativeEvent;\n              if (\n                nativeEvent.button !== 0 ||\n                nativeEvent.metaKey ||\n                nativeEvent.ctrlKey ||\n                nativeEvent.shiftKey\n              ) {\n                return; // let the browser handle the event\n              }\n\n              onSelect(event);\n            },\n            onFocus: () => slots.tooltip && openTooltip(true),\n            onBlur: () =>\n              slots.tooltip &&\n              // Ensures isTooltipHovered state is set correctly when the tooltip is hovered.\n              // Otherwise, the tooltip would close before the onMouseLeave event of the tooltip triggers\n              // and the isTooltipHovered state would never be set.\n              requestAnimationFrame(() => {\n                if (!isTooltipHovered.current) {\n                  closeTooltip();\n                }\n              }),\n            className: consumerClassName,\n            style: consumerStyle,\n          })}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          aria-details={ariaDetails}\n          asChild\n        >\n          <Flex\n            {...remainingProps}\n            className={clsx(\n              textStyleCSS({ textStyle: 'base-emphasized' }),\n              !isItemHovered && focusClassName,\n              styles.item({ disabled }),\n            )}\n            disabled={disabled}\n            // TODO LeMa: role actually belongs on top-level element (check for side effects regarding tests after moving the attribute!)\n            role=\"menuitem\"\n            aria-disabled={disabled}\n            ref={setTooltipTriggerRef}\n            as={as satisfies ElementType}\n          >\n            {slots.prefix}\n            <div className={styles.itemChildren}>{slots.freeform}</div>\n            {slots.suffix}\n          </Flex>\n        </RadixItem>\n        {isOpen && (\n          <MenuItemTooltipWrapper\n            triggerElement={tooltipTriggerRef}\n            onMouseEnter={() => {\n              isTooltipHovered.current = true;\n            }}\n            onMouseLeave={() => {\n              isTooltipHovered.current = false;\n              closeTooltip();\n            }}\n          >\n            {slots.tooltip}\n          </MenuItemTooltipWrapper>\n        )}\n      </>\n    );\n  },\n);\n\n(Item as typeof Item & { displayName: string }).displayName = 'Menu.Item';\n"],
-  "mappings": "AA+GM,mBA2DM,KAfF,YA5CJ;AA/GN,SAAS,QAAQ,iBAAiB;AAClC,OAAO,UAAU;AACjB;AAAA,EAEE;AAAA,EAEA;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAM7B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,aAAa,oBAAoB;AAiDnC,MAAM,OAE8B;AAAA,EACzC,CACE;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,KAAK;AAAA,IACL,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,GACA,iBACG;AACH,UAAM,QAAQ,aAAa,QAAQ;AACnC,UAAM;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,MACN,OAAO;AAAA,IACT,IAAI,gBAAgB;AAAA,MAClB,aAAa;AAAA,IACf,CAAC;AACD,UAAM,CAAC,mBAAmB,oBAAoB,IAC5C,SAA6B,IAAI;AACnC,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,MAClD;AAAA,IACF,CAAC;AACD,UAAM,mBAAmB,OAAO,KAAK;AACrC,UAAM,EAAE,eAAe,WAAW,IAAI,qBAAqB;AAE3D,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAa;AAAA,UACb,KAAK;AAAA,UACJ,GAAG,YAAY,YAAY,YAAY;AAAA,YACtC,SAAS,CAAC,UAAsB;AAC9B,kBAAI,UAAU;AACZ,sBAAM,gBAAgB;AACtB,sBAAM,eAAe;AACrB;AAAA,cACF;AAEA,oBAAM,cAAc,MAAM;AAC1B,kBACE,YAAY,WAAW,KACvB,YAAY,WACZ,YAAY,WACZ,YAAY,UACZ;AACA;AAAA,cACF;AAEA,uBAAS,KAAK;AAAA,YAChB;AAAA,YACA,SAAS,MAAM,MAAM,WAAW,YAAY,IAAI;AAAA,YAChD,QAAQ,MACN,MAAM;AAAA;AAAA;AAAA,YAIN,sBAAsB,MAAM;AAC1B,kBAAI,CAAC,iBAAiB,SAAS;AAC7B,6BAAa;AAAA,cACf;AAAA,YACF,CAAC;AAAA,YACH,WAAW;AAAA,YACX,OAAO;AAAA,UACT,CAAC;AAAA,UACD,cAAY;AAAA,UACZ,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,gBAAc;AAAA,UACd,SAAO;AAAA,UAEP;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW;AAAA,gBACT,aAAa,EAAE,WAAW,kBAAkB,CAAC;AAAA,gBAC7C,CAAC,iBAAiB;AAAA,gBAClB,OAAO,KAAK,EAAE,SAAS,CAAC;AAAA,cAC1B;AAAA,cACA;AAAA,cAEA,MAAK;AAAA,cACL,iBAAe;AAAA,cACf,KAAK;AAAA,cACL;AAAA,cAEC;AAAA,sBAAM;AAAA,gBACP,oBAAC,SAAI,WAAW,OAAO,cAAe,gBAAM,UAAS;AAAA,gBACpD,MAAM;AAAA;AAAA;AAAA,UACT;AAAA;AAAA,MACF;AAAA,MACC,UACC;AAAA,QAAC;AAAA;AAAA,UACC,gBAAgB;AAAA,UAChB,cAAc,MAAM;AAClB,6BAAiB,UAAU;AAAA,UAC7B;AAAA,UACA,cAAc,MAAM;AAClB,6BAAiB,UAAU;AAC3B,yBAAa;AAAA,UACf;AAAA,UAEC,gBAAM;AAAA;AAAA,MACT;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
+  "sourcesContent": ["import { Item as RadixItem } from '@radix-ui/react-dropdown-menu';\nimport clsx from 'clsx';\nimport {\n  type ElementType,\n  forwardRef,\n  type ReactEventHandler,\n  useEffect,\n  useRef,\n  useState,\n  type ReactElement,\n  type MouseEvent,\n} from 'react';\n\nimport { useIsMenuItemHovered } from './hooks/useIsMenuItemHovered.js';\nimport { getItemSlots } from './item-slots.js';\nimport { MenuItemTooltipWrapper } from './ItemTooltip.js';\nimport * as styles from './Menu.sty.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { useTooltipState } from '../../overlays/hooks/useTooltipState.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * @public\n */\nexport interface MenuItemOwnProps\n  extends WithChildren,\n    AriaLabelingProps,\n    StylingProps,\n    DataTestId {\n  /**\n   * Whether the menu item is disabled.\n   * If `true`, it prevents the user from interacting with the item and the item\n   * being focused.\n   */\n  disabled?: boolean;\n  /**\n   * Optional text used for typeahead purposes. By default, the typeahead\n   * behavior will use the `.textContent` of the item. Use this when the content\n   * is complex, or you have non-textual content inside.\n   */\n  textValue?: string;\n  /*\n   * TODO: The onSelect from the Radix MenuItem actually emits a native Event instead of a react synthetic event.\n   * When trying to fix that, our the app toolkits version of typescript ~4.9 bailed due to the type complexity. Right now there is no way\n   * to correct the typing on the event and keep a compatible type version.\n   * This limitiation also tracks through to the `ActionGroup` and `AppHeader`.\n   * APPDEV-8522\n   */\n  /**\n   * Event handler called when the user selects an item (via mouse or keyboard).\n   * Calling `event.preventDefault()` in this handler prevents the dropdown menu\n   * from closing when selecting that item.\n   */\n  onSelect: ReactEventHandler;\n}\n\n/**\n * @public\n */\nexport type MenuItemProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  MenuItemOwnProps\n>;\n\n/**\n * The component that contains the dropdown menu Items.\n * @public\n */\nexport const Item: <E extends ElementType = 'div'>(\n  props: MenuItemProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    {\n      children,\n      disabled = false,\n      onSelect,\n      as = 'div' as E,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      ...remainingProps\n    }: MenuItemProps<E>,\n    forwardedRef: typeof remainingProps.ref,\n  ) => {\n    const slots = getItemSlots(children);\n    const {\n      isOpen,\n      open: openTooltip,\n      close: closeTooltip,\n    } = useTooltipState({\n      defaultOpen: false,\n    });\n    const [tooltipTriggerRef, setTooltipTriggerRef] =\n      useState<HTMLElement | null>(null);\n    const { focusProps, focusClassName } = useFocusRing({\n      disabled,\n    });\n    const isTooltipHovered = useRef(false);\n    const { isItemHovered, hoverProps } = useIsMenuItemHovered();\n\n    useEffect(() => {\n      if (!isOpen) {\n        return;\n      }\n      window.addEventListener('scroll', closeTooltip, { capture: true });\n      return () =>\n        window.removeEventListener('scroll', closeTooltip, { capture: true });\n    }, [isOpen, closeTooltip]);\n\n    return (\n      <>\n        <RadixItem\n          data-testid={dataTestId}\n          ref={forwardedRef}\n          {..._mergeProps(focusProps, hoverProps, {\n            onClick: (event: MouseEvent) => {\n              if (disabled) {\n                event.stopPropagation();\n                event.preventDefault();\n                return;\n              }\n\n              const nativeEvent = event.nativeEvent;\n              if (\n                nativeEvent.button !== 0 ||\n                nativeEvent.metaKey ||\n                nativeEvent.ctrlKey ||\n                nativeEvent.shiftKey\n              ) {\n                return; // let the browser handle the event\n              }\n\n              onSelect(event);\n            },\n            onFocus: () => slots.tooltip && openTooltip(true),\n            onBlur: () =>\n              slots.tooltip &&\n              // Ensures isTooltipHovered state is set correctly when the tooltip is hovered.\n              // Otherwise, the tooltip would close before the onMouseLeave event of the tooltip triggers\n              // and the isTooltipHovered state would never be set.\n              requestAnimationFrame(() => {\n                if (!isTooltipHovered.current) {\n                  closeTooltip();\n                }\n              }),\n            className: consumerClassName,\n            style: consumerStyle,\n          })}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          aria-details={ariaDetails}\n          asChild\n        >\n          <Flex\n            {...remainingProps}\n            className={clsx(\n              textStyleCSS({ textStyle: 'base-emphasized' }),\n              !isItemHovered && focusClassName,\n              styles.item({ disabled }),\n            )}\n            disabled={disabled}\n            // TODO LeMa: role actually belongs on top-level element (check for side effects regarding tests after moving the attribute!)\n            role=\"menuitem\"\n            aria-disabled={disabled}\n            ref={setTooltipTriggerRef}\n            as={as satisfies ElementType}\n          >\n            {slots.prefix}\n            <div className={styles.itemChildren}>{slots.freeform}</div>\n            {slots.suffix}\n          </Flex>\n        </RadixItem>\n        {isOpen && (\n          <MenuItemTooltipWrapper\n            triggerElement={tooltipTriggerRef}\n            onMouseEnter={() => {\n              isTooltipHovered.current = true;\n            }}\n            onMouseLeave={() => {\n              isTooltipHovered.current = false;\n              closeTooltip();\n            }}\n          >\n            {slots.tooltip}\n          </MenuItemTooltipWrapper>\n        )}\n      </>\n    );\n  },\n);\n\n(Item as typeof Item & { displayName: string }).displayName = 'Menu.Item';\n"],
+  "mappings": "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",
   "names": []
 }