@dynatrace/strato-components 3.5.2 → 3.7.0

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-5-2";
-var breadcrumbsItemCSS = _7a468({ defaultClassName: "_hw98ku5-3-5-2", variantClassNames: { disabled: { true: "_hw98ku6-3-5-2" }, isLastItem: { true: "_hw98ku7-3-5-2" } }, defaultVariants: { disabled: false, isLastItem: false }, compoundVariants: [] });
-var breadcrumbsItemInvisibleCSS = "_hw98ku4-3-5-2";
-var breadcrumbsListItemCSS = _7a468({ defaultClassName: "_hw98ku1-3-5-2", variantClassNames: { isLastVisible: { true: "_hw98ku2-3-5-2", false: "_hw98ku3-3-5-2" } }, defaultVariants: { isLastVisible: false }, compoundVariants: [] });
-var breadcrumbsSeperatorIconCSS = "_hw98ku8-3-5-2";
+var breadcrumbsContainerCSS = "_hw98ku0-3-7-0";
+var breadcrumbsItemCSS = _7a468({ defaultClassName: "_hw98ku5-3-7-0", variantClassNames: { disabled: { true: "_hw98ku6-3-7-0" }, isLastItem: { true: "_hw98ku7-3-7-0" } }, defaultVariants: { disabled: false, isLastItem: false }, compoundVariants: [] });
+var breadcrumbsItemInvisibleCSS = "_hw98ku4-3-7-0";
+var breadcrumbsListItemCSS = _7a468({ defaultClassName: "_hw98ku1-3-7-0", variantClassNames: { isLastVisible: { true: "_hw98ku2-3-7-0", false: "_hw98ku3-3-7-0" } }, defaultVariants: { isLastVisible: false }, compoundVariants: [] });
+var breadcrumbsSeperatorIconCSS = "_hw98ku8-3-7-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-5-2';\nexport var breadcrumbsItemCSS = _7a468({defaultClassName:'_hw98ku5-3-5-2',variantClassNames:{disabled:{true:'_hw98ku6-3-5-2'},isLastItem:{true:'_hw98ku7-3-5-2'}},defaultVariants:{disabled:false,isLastItem:false},compoundVariants:[]});\nexport var breadcrumbsItemInvisibleCSS = '_hw98ku4-3-5-2';\nexport var breadcrumbsListItemCSS = _7a468({defaultClassName:'_hw98ku1-3-5-2',variantClassNames:{isLastVisible:{true:'_hw98ku2-3-5-2',false:'_hw98ku3-3-5-2'}},defaultVariants:{isLastVisible:false},compoundVariants:[]});\nexport var breadcrumbsSeperatorIconCSS = '_hw98ku8-3-5-2';"],
+  "sourcesContent": ["import './Breadcrumbs.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var breadcrumbsContainerCSS = '_hw98ku0-3-7-0';\nexport var breadcrumbsItemCSS = _7a468({defaultClassName:'_hw98ku5-3-7-0',variantClassNames:{disabled:{true:'_hw98ku6-3-7-0'},isLastItem:{true:'_hw98ku7-3-7-0'}},defaultVariants:{disabled:false,isLastItem:false},compoundVariants:[]});\nexport var breadcrumbsItemInvisibleCSS = '_hw98ku4-3-7-0';\nexport var breadcrumbsListItemCSS = _7a468({defaultClassName:'_hw98ku1-3-7-0',variantClassNames:{isLastVisible:{true:'_hw98ku2-3-7-0',false:'_hw98ku3-3-7-0'}},defaultVariants:{isLastVisible:false},compoundVariants:[]});\nexport var breadcrumbsSeperatorIconCSS = '_hw98ku8-3-7-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

@@ -61,8 +61,6 @@ const Content = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       style: { zIndex: style.zIndex },
       onKeyDown: handleOnKeyDown,
       collisionBoundary,
-      onPointerDownCapture: (e) => e.stopPropagation(),
-      onPointerUpCapture: (e) => e.stopPropagation(),
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
       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  type MouseEvent as ReactMouseEvent,\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, MaskingProps, 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        // stop event propagation so that selecting a menu item does not close dismissible overlays if the menu is placed inside one\n        onPointerDownCapture={(e: ReactMouseEvent) => e.stopPropagation()}\n        onPointerUpCapture={(e: ReactMouseEvent) => e.stopPropagation()}\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": "AAiHM;AAjHN;AAAA,EACE,WAAW;AAAA,EACX,UAAU;AAAA,OACL;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,sBAAsB;AAC/B,YAAY,YAAY;AACxB,SAAS,0BAA0B;AA8CnC,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,MAEA,sBAAsB,CAAC,MAAuB,EAAE,gBAAgB;AAAA,MAChE,oBAAoB,CAAC,MAAuB,EAAE,gBAAgB;AAAA,MAC9D,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 { 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;",
   "names": []
 }

package/esm/navigation/menu/Item.js

@@ -10,7 +10,7 @@ import { useIsMenuItemHovered } from "./hooks/useIsMenuItemHovered.js";
 import { getItemSlots } from "./item-slots.js";
 import { MenuItemTooltipWrapper } from "./ItemTooltip.js";
 import * as styles from "./Menu.sty.js";
-import { useFocusRing } from "../../core/styles/useFocusRing.js";
+import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { useTooltipState } from "../../overlays/hooks/useTooltipState.js";

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/styles/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"],
+  "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;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/ItemTooltip.tsx"],
-  "sourcesContent": ["import { forwardRef, useState } from 'react';\nimport { usePopper } from 'react-popper';\n\nimport * as menuStyles from './Menu.sty.js';\nimport { ALIGN_OFFSET } from './SubContent.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\n\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  const { styles, attributes } = usePopper(triggerElement, menuTooltipRefRef, {\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  return (\n    <div\n      ref={setMenuTooltipRefRef}\n      style={styles.popper}\n      className={menuStyles.tooltipWrapper}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      {...attributes.popper}\n    >\n      {children}\n    </div>\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": "AA+CI;AA/CJ,SAAS,YAAY,gBAAgB;AACrC,SAAS,iBAAiB;AAE1B,YAAY,gBAAgB;AAC5B,SAAS,oBAAoB;AAWtB,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAIqB;AACnB,QAAM,CAAC,mBAAmB,oBAAoB,IAC5C,SAAgC,IAAI;AAEtC,QAAM,EAAE,QAAQ,WAAW,IAAI,UAAU,gBAAgB,mBAAmB;AAAA,IAC1E,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;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO,OAAO;AAAA,MACd,WAAW,WAAW;AAAA,MACtB;AAAA,MACA;AAAA,MACC,GAAG,WAAW;AAAA,MAEd;AAAA;AAAA,EACH;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 { forwardRef, useState } from 'react';\nimport { usePopper } from 'react-popper';\n\nimport * as menuStyles from './Menu.sty.js';\nimport { ALIGN_OFFSET } from './SubContent.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { WithChildren } from '../../core/types/with-children.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  const { styles, attributes } = usePopper(triggerElement, menuTooltipRefRef, {\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  return (\n    <div\n      ref={setMenuTooltipRefRef}\n      style={styles.popper}\n      className={menuStyles.tooltipWrapper}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      {...attributes.popper}\n    >\n      {children}\n    </div>\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": "AA8CI;AA9CJ,SAAS,YAAY,gBAAgB;AACrC,SAAS,iBAAiB;AAE1B,YAAY,gBAAgB;AAC5B,SAAS,oBAAoB;AAUtB,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAIqB;AACnB,QAAM,CAAC,mBAAmB,oBAAoB,IAC5C,SAAgC,IAAI;AAEtC,QAAM,EAAE,QAAQ,WAAW,IAAI,UAAU,gBAAgB,mBAAmB;AAAA,IAC1E,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;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO,OAAO;AAAA,MACd,WAAW,WAAW;AAAA,MACtB;AAAA,MACA;AAAA,MACC,GAAG,WAAW;AAAA,MAEd;AAAA;AAAA,EACH;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/Link.js

@@ -9,7 +9,7 @@ import { useIsMenuItemHovered } from "./hooks/useIsMenuItemHovered.js";
 import { getItemSlots } from "./item-slots.js";
 import { MenuItemTooltipWrapper } from "./ItemTooltip.js";
 import * as styles from "./Menu.sty.js";
-import { useFocusRing } from "../../core/styles/useFocusRing.js";
+import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { useTooltipState } from "../../overlays/hooks/useTooltipState.js";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Link.tsx"],
-  "sourcesContent": ["import { Item as RadixItem } from '@radix-ui/react-dropdown-menu';\nimport clsx from 'clsx';\nimport {\n  forwardRef,\n  useState,\n  type ElementType,\n  type ReactElement,\n} from 'react';\n\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/styles/useFocusRing.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { PolymorphicComponentProps } from '../../core/types/polymorph.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 * Props for the Menu.Link component\n * @public\n */\nexport interface MenuLinkOwnProps extends WithChildren, AriaLabelingProps {\n  /**\n   * Whether the menu link is disabled.\n   * If `true`, it prevents the user from interacting with the link and the link\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 link. Use this when the content\n   * is complex, or you have non-textual content inside.\n   */\n  textValue?: string;\n}\n\n/**\n * @public\n */\nexport type MenuLinkProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  MenuLinkOwnProps\n>;\n\n/**\n * The component that contains the dropdown menu Links.\n * @public\n */\nexport const Link: <E extends ElementType = 'a'>(\n  props: MenuLinkProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    {\n      children,\n      disabled = false,\n      as = 'a' 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      ...remainingProps\n    }: MenuLinkProps<E>,\n    forwardedRef: typeof remainingProps.ref,\n  ) => {\n    const slots = getItemSlots(children);\n\n    const {\n      isOpen,\n      open: openTooltip,\n      close: closeTooltip,\n    } = useTooltipState({\n      defaultOpen: false,\n    });\n\n    const [tooltipTriggerRef, setTooltipTriggerRef] =\n      useState<HTMLElement | null>(null);\n\n    const { focusProps, focusClassName } = useFocusRing({\n      disabled,\n    });\n    const { isItemHovered, hoverProps } = useIsMenuItemHovered();\n\n    return (\n      <>\n        <RadixItem\n          ref={forwardedRef}\n          {..._mergeProps(focusProps, hoverProps, {\n            onFocus: () => slots.tooltip && !disabled && openTooltip(true),\n            onBlur: () => slots.tooltip && !disabled && closeTooltip(),\n          })}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          aria-details={ariaDetails}\n          role=\"menuitem\"\n          asChild\n        >\n          <Flex\n            {...remainingProps}\n            className={clsx(\n              textStyleCSS({ textStyle: 'base-emphasized' }),\n              !isItemHovered && focusClassName,\n              styles.item({ disabled }),\n              consumerClassName,\n            )}\n            style={consumerStyle}\n            as={as satisfies ElementType}\n            ref={setTooltipTriggerRef}\n            disabled={disabled}\n            aria-disabled={disabled}\n          >\n            {slots.prefix}\n            <div className={styles.itemChildren}>{slots.freeform}</div>\n            {slots.suffix}\n          </Flex>\n        </RadixItem>\n        {isOpen && (\n          <MenuItemTooltipWrapper triggerElement={tooltipTriggerRef}>\n            {slots.tooltip}\n          </MenuItemTooltipWrapper>\n        )}\n      </>\n    );\n  },\n);\n\n(Link as typeof Link & { displayName: string }).displayName = 'Menu.Link';\n"],
-  "mappings": "AA2FM,mBA6BM,KAfF,YAdJ;AA3FN,SAAS,QAAQ,iBAAiB;AAClC,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAI7B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,aAAa,oBAAoB;AAiCnC,MAAM,OAE8B;AAAA,EACzC,CACE;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX,KAAK;AAAA,IACL,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,GACA,iBACG;AACH,UAAM,QAAQ,aAAa,QAAQ;AAEnC,UAAM;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,MACN,OAAO;AAAA,IACT,IAAI,gBAAgB;AAAA,MAClB,aAAa;AAAA,IACf,CAAC;AAED,UAAM,CAAC,mBAAmB,oBAAoB,IAC5C,SAA6B,IAAI;AAEnC,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,MAClD;AAAA,IACF,CAAC;AACD,UAAM,EAAE,eAAe,WAAW,IAAI,qBAAqB;AAE3D,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACJ,GAAG,YAAY,YAAY,YAAY;AAAA,YACtC,SAAS,MAAM,MAAM,WAAW,CAAC,YAAY,YAAY,IAAI;AAAA,YAC7D,QAAQ,MAAM,MAAM,WAAW,CAAC,YAAY,aAAa;AAAA,UAC3D,CAAC;AAAA,UACD,cAAY;AAAA,UACZ,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,gBAAc;AAAA,UACd,MAAK;AAAA,UACL,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,gBACxB;AAAA,cACF;AAAA,cACA,OAAO;AAAA,cACP;AAAA,cACA,KAAK;AAAA,cACL;AAAA,cACA,iBAAe;AAAA,cAEd;AAAA,sBAAM;AAAA,gBACP,oBAAC,SAAI,WAAW,OAAO,cAAe,gBAAM,UAAS;AAAA,gBACpD,MAAM;AAAA;AAAA;AAAA,UACT;AAAA;AAAA,MACF;AAAA,MACC,UACC,oBAAC,0BAAuB,gBAAgB,mBACrC,gBAAM,SACT;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  forwardRef,\n  useState,\n  type ElementType,\n  type ReactElement,\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 { PolymorphicComponentProps } from '../../core/types/polymorph.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 * Props for the Menu.Link component\n * @public\n */\nexport interface MenuLinkOwnProps extends WithChildren, AriaLabelingProps {\n  /**\n   * Whether the menu link is disabled.\n   * If `true`, it prevents the user from interacting with the link and the link\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 link. Use this when the content\n   * is complex, or you have non-textual content inside.\n   */\n  textValue?: string;\n}\n\n/**\n * @public\n */\nexport type MenuLinkProps<E extends ElementType> = PolymorphicComponentProps<\n  E,\n  MenuLinkOwnProps\n>;\n\n/**\n * The component that contains the dropdown menu Links.\n * @public\n */\nexport const Link: <E extends ElementType = 'a'>(\n  props: MenuLinkProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    {\n      children,\n      disabled = false,\n      as = 'a' 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      ...remainingProps\n    }: MenuLinkProps<E>,\n    forwardedRef: typeof remainingProps.ref,\n  ) => {\n    const slots = getItemSlots(children);\n\n    const {\n      isOpen,\n      open: openTooltip,\n      close: closeTooltip,\n    } = useTooltipState({\n      defaultOpen: false,\n    });\n\n    const [tooltipTriggerRef, setTooltipTriggerRef] =\n      useState<HTMLElement | null>(null);\n\n    const { focusProps, focusClassName } = useFocusRing({\n      disabled,\n    });\n    const { isItemHovered, hoverProps } = useIsMenuItemHovered();\n\n    return (\n      <>\n        <RadixItem\n          ref={forwardedRef}\n          {..._mergeProps(focusProps, hoverProps, {\n            onFocus: () => slots.tooltip && !disabled && openTooltip(true),\n            onBlur: () => slots.tooltip && !disabled && closeTooltip(),\n          })}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          aria-details={ariaDetails}\n          role=\"menuitem\"\n          asChild\n        >\n          <Flex\n            {...remainingProps}\n            className={clsx(\n              textStyleCSS({ textStyle: 'base-emphasized' }),\n              !isItemHovered && focusClassName,\n              styles.item({ disabled }),\n              consumerClassName,\n            )}\n            style={consumerStyle}\n            as={as satisfies ElementType}\n            ref={setTooltipTriggerRef}\n            disabled={disabled}\n            aria-disabled={disabled}\n          >\n            {slots.prefix}\n            <div className={styles.itemChildren}>{slots.freeform}</div>\n            {slots.suffix}\n          </Flex>\n        </RadixItem>\n        {isOpen && (\n          <MenuItemTooltipWrapper triggerElement={tooltipTriggerRef}>\n            {slots.tooltip}\n          </MenuItemTooltipWrapper>\n        )}\n      </>\n    );\n  },\n);\n\n(Link as typeof Link & { displayName: string }).displayName = 'Menu.Link';\n"],
+  "mappings": "AA0FM,mBA6BM,KAfF,YAdJ;AA1FN,SAAS,QAAQ,iBAAiB;AAClC,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAI7B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,aAAa,oBAAoB;AAiCnC,MAAM,OAE8B;AAAA,EACzC,CACE;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX,KAAK;AAAA,IACL,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,GACA,iBACG;AACH,UAAM,QAAQ,aAAa,QAAQ;AAEnC,UAAM;AAAA,MACJ;AAAA,MACA,MAAM;AAAA,MACN,OAAO;AAAA,IACT,IAAI,gBAAgB;AAAA,MAClB,aAAa;AAAA,IACf,CAAC;AAED,UAAM,CAAC,mBAAmB,oBAAoB,IAC5C,SAA6B,IAAI;AAEnC,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,MAClD;AAAA,IACF,CAAC;AACD,UAAM,EAAE,eAAe,WAAW,IAAI,qBAAqB;AAE3D,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACJ,GAAG,YAAY,YAAY,YAAY;AAAA,YACtC,SAAS,MAAM,MAAM,WAAW,CAAC,YAAY,YAAY,IAAI;AAAA,YAC7D,QAAQ,MAAM,MAAM,WAAW,CAAC,YAAY,aAAa;AAAA,UAC3D,CAAC;AAAA,UACD,cAAY;AAAA,UACZ,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,gBAAc;AAAA,UACd,MAAK;AAAA,UACL,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,gBACxB;AAAA,cACF;AAAA,cACA,OAAO;AAAA,cACP;AAAA,cACA,KAAK;AAAA,cACL;AAAA,cACA,iBAAe;AAAA,cAEd;AAAA,sBAAM;AAAA,gBACP,oBAAC,SAAI,WAAW,OAAO,cAAe,gBAAM,UAAS;AAAA,gBACpD,MAAM;AAAA;AAAA;AAAA,UACT;AAAA;AAAA,MACF;AAAA,MACC,UACC,oBAAC,0BAAuB,gBAAgB,mBACrC,gBAAM,SACT;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
   "names": []
 }

package/esm/navigation/menu/Menu.css

@@ -1,11 +1,11 @@
-._1m01arl1-3-5-2 {
+._1m01arl1-3-7-0 {
   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-5-2 {
+._1m01arl2-3-7-0 {
   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-5-2 ._1m01arl2-3-5-2 {
+._1m01arl0-3-7-0 ._1m01arl2-3-7-0 {
   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-5-2 {
+._1m01arl3-3-7-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   padding: var(--dt-spacings-size-4, 4px);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -34,13 +34,13 @@
   overflow-y: auto;
   max-width: 100dvw;
 }
-._1m01arl3-3-5-2 ._1m01arl4-3-5-2:not(:last-child) {
+._1m01arl3-3-7-0 ._1m01arl4-3-7-0: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-5-2 {
+._1m01arl5-3-7-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   background-color: transparent;
@@ -56,35 +56,35 @@
   border-width: 0;
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1m01arl6-3-5-2 {
+._1m01arl6-3-7-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
   outline: none;
 }
-._1m01arl7-3-5-2:hover, ._1m01arl7-3-5-2[data-state="open"] {
+._1m01arl7-3-7-0:hover, ._1m01arl7-3-7-0[data-state="open"] {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1m01arl7-3-5-2:focus {
+._1m01arl7-3-7-0:focus {
   outline: none;
 }
-._1m01arl7-3-5-2:active {
+._1m01arl7-3-7-0:active {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1m01arl8-3-5-2 {
+._1m01arl8-3-7-0 {
   width: 100%;
 }
-._1m01arl5-3-5-2 > ._1m01arl8-3-5-2:first-child {
+._1m01arl5-3-7-0 > ._1m01arl8-3-7-0:first-child {
   padding-left: var(--dt-spacings-size-4, 4px);
 }
-._1m01arl5-3-5-2 > ._1m01arl8-3-5-2:last-child:not(:has(svg:last-child)) {
+._1m01arl5-3-7-0 > ._1m01arl8-3-7-0:last-child:not(:has(svg:last-child)) {
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._1m01arl9-3-5-2 {
+._1m01arl9-3-7-0 {
   flex: 1 1 auto;
   overflow: hidden;
 }
-._1m01arl9-3-5-2:first-child {
+._1m01arl9-3-7-0:first-child {
   padding-left: var(--dt-spacings-size-4, 4px);
 }

package/esm/navigation/menu/Menu.js

@@ -4,8 +4,6 @@ import {
   Children,
   cloneElement,
   isValidElement,
-  useCallback,
-  useEffect,
   useMemo
 } from "react";
 import { isElement } from "react-is";
@@ -13,6 +11,7 @@ import { COMPONENT_NAME } from "./constants.js";
 import { Content } from "./Content.js";
 import { MenuContext } from "./contexts/MenuContext.js";
 import { Group } from "./Group.js";
+import { useMenuAutoClose } from "./hooks/useMenuAutoClose.js";
 import { Intent } from "./Intent.js";
 import { Item } from "./Item.js";
 import { ItemTooltip } from "./ItemTooltip.js";
@@ -25,7 +24,6 @@ import { SubTrigger } from "./SubTrigger.js";
 import { Suffix } from "./Suffix.js";
 import { Trigger } from "./Trigger.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
-import { isBrowser } from "../../core/utils/isBrowser.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 function getMenuSlots(children) {
   const slots = {
@@ -87,18 +85,7 @@ const MenuRoot = (props) => {
     ),
     [children, updateOpen, dataDtComponent]
   );
-  const onWindowBlur = useCallback(() => {
-    updateOpen(false);
-  }, [updateOpen]);
-  useEffect(() => {
-    if (!isBrowser) {
-      return;
-    }
-    window.addEventListener("blur", onWindowBlur);
-    return () => {
-      window.removeEventListener("blur", onWindowBlur);
-    };
-  }, [onWindowBlur]);
+  useMenuAutoClose(open, updateOpen);
   const menuContextValue = useMemo(
     () => ({
       isOpen: open,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Menu.tsx"],
-  "sourcesContent": ["import { Root as RadixRoot } from '@radix-ui/react-dropdown-menu';\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { COMPONENT_NAME } from './constants.js';\nimport { Content, type MenuContentProps } from './Content.js';\nimport { MenuContext } from './contexts/MenuContext.js';\nimport { Group } from './Group.js';\nimport { Intent } from './Intent.js';\nimport { Item } from './Item.js';\nimport { ItemTooltip } from './ItemTooltip.js';\nimport { Label } from './Label.js';\nimport { Link } from './Link.js';\nimport { Prefix } from './Prefix.js';\nimport { Sub } from './Sub.js';\nimport { SubContent } from './SubContent.js';\nimport { SubTrigger } from './SubTrigger.js';\nimport { Suffix } from './Suffix.js';\nimport { Trigger } from './Trigger.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.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';\nimport { isBrowser } from '../../core/utils/isBrowser.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\n\n// TODO Remove logic for handling tab key as soon as the related bug in the radix-ui\n// library has been fixed and we've upgraded to a newer version that contains the fix\n// (see https://github.com/radix-ui/primitives/issues/1565 and https://github.com/radix-ui/primitives/pull/1576)\n\n/**\n * @public\n */\nexport interface MenuProps extends WithChildren, DataTestId, MaskingProps {\n  /**\n   * The open state of the dropdown menu when it is initially rendered. Use when\n   * you do not need to control its open state.\n   * @defaultValue false\n   */\n  defaultOpen?: boolean;\n  /**\n   * The controlled open state of the dropdown menu. Must be used in conjunction\n   * with onOpenChange.\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the dropdown menu changes.\n   * @param isOpen - true if the menu has been opened\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * The modality of the dialog.\n   * When set to true, interaction with outside elements will be disabled and\n   * only dialog content will be visible to screen readers.\n   * @defaultValue true\n   */\n  modal?: boolean;\n}\n\ntype MenuSlots = {\n  trigger: ReactNode | null;\n  content: ReactNode[];\n  freeform: ReactNode[];\n};\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getMenuSlots(children: ReactNode) {\n  const slots: MenuSlots = {\n    trigger: null,\n    content: [],\n    freeform: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case Trigger:\n          slots.trigger = child;\n          break;\n        case Content:\n          slots.content.push(child);\n          break;\n        default:\n          slots.freeform.push(child);\n      }\n    } else {\n      slots.freeform.push(child);\n    }\n  });\n\n  return slots;\n}\n\n/** Iterates over all top-level Content nodes and registers tab key handler. */\nfunction registerTabHandlers(\n  children: ReactNode,\n  handleTabKeyPressed: () => void,\n  dataDtComponent: string,\n): ReactNode {\n  return Children.map(children, (child: ReactNode) => {\n    return isValidElement<MenuContentProps>(child) && child.type === Content\n      ? cloneElement(\n          child,\n          _mergeProps(child.props, {\n            _onTabKeyPressed: handleTabKeyPressed,\n            'data-dt-component': dataDtComponent,\n          }),\n          child.props.children,\n        )\n      : child;\n  });\n}\n\n/**\n * @internal\n */\nconst MenuRoot = (props: MenuProps) => {\n  const {\n    open: value,\n    onOpenChange: onChange,\n    modal = true,\n    defaultOpen = false,\n    children,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.\n    'data-dt-component': dataDtComponent = COMPONENT_NAME,\n  } = props;\n\n  const [open, updateOpen] = useControllableState({\n    defaultValue: defaultOpen,\n    value,\n    onChange,\n  });\n\n  const slots = useMemo(\n    () =>\n      getMenuSlots(\n        registerTabHandlers(children, () => updateOpen(false), dataDtComponent),\n      ),\n    [children, updateOpen, dataDtComponent],\n  );\n\n  // Closes the Menu on window blur to fix inherent issue with Radix UI keeping submenus open.\n  // https://github.com/radix-ui/primitives/issues/1441\n  const onWindowBlur = useCallback(() => {\n    updateOpen(false);\n  }, [updateOpen]);\n\n  useEffect(() => {\n    if (!isBrowser) {\n      return;\n    }\n    window.addEventListener('blur', onWindowBlur);\n    return () => {\n      window.removeEventListener('blur', onWindowBlur);\n    };\n  }, [onWindowBlur]);\n\n  const menuContextValue = useMemo(\n    () => ({\n      isOpen: open,\n      isDefaultOpen: defaultOpen,\n      setIsOpen: updateOpen,\n    }),\n    [defaultOpen, open, updateOpen],\n  );\n\n  return (\n    <MenuContext.Provider value={menuContextValue}>\n      <RadixRoot\n        open={open}\n        onOpenChange={(isOpen) => updateOpen(isOpen)}\n        modal={modal}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        {slots.trigger !== null && slots.trigger}\n        {open && slots.content}\n        {slots.freeform}\n      </RadixRoot>\n    </MenuContext.Provider>\n  );\n};\n\n(MenuRoot as typeof MenuRoot & { displayName: string }).displayName = 'Menu';\n\n/**\n * The `Menu` component displays the list of action items that are revealed when\n * the user clicks on the trigger element.\n * @public\n */\nexport const Menu = Object.assign(MenuRoot, {\n  Trigger,\n  Content,\n  Item,\n  ItemTooltip,\n  Label,\n  Link,\n  Group,\n  Prefix,\n  Suffix,\n  Sub,\n  SubTrigger,\n  SubContent,\n  Intent,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Root as RadixRoot } from '@radix-ui/react-dropdown-menu';\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  type ReactNode,\n  useMemo,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { COMPONENT_NAME } from './constants.js';\nimport { Content, type MenuContentProps } from './Content.js';\nimport { MenuContext } from './contexts/MenuContext.js';\nimport { Group } from './Group.js';\nimport { useMenuAutoClose } from './hooks/useMenuAutoClose.js';\nimport { Intent } from './Intent.js';\nimport { Item } from './Item.js';\nimport { ItemTooltip } from './ItemTooltip.js';\nimport { Label } from './Label.js';\nimport { Link } from './Link.js';\nimport { Prefix } from './Prefix.js';\nimport { Sub } from './Sub.js';\nimport { SubContent } from './SubContent.js';\nimport { SubTrigger } from './SubTrigger.js';\nimport { Suffix } from './Suffix.js';\nimport { Trigger } from './Trigger.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.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';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\n\n// TODO Remove logic for handling tab key as soon as the related bug in the radix-ui\n// library has been fixed and we've upgraded to a newer version that contains the fix\n// (see https://github.com/radix-ui/primitives/issues/1565 and https://github.com/radix-ui/primitives/pull/1576)\n\n/**\n * @public\n */\nexport interface MenuProps extends WithChildren, DataTestId, MaskingProps {\n  /**\n   * The open state of the dropdown menu when it is initially rendered. Use when\n   * you do not need to control its open state.\n   * @defaultValue false\n   */\n  defaultOpen?: boolean;\n  /**\n   * The controlled open state of the dropdown menu. Must be used in conjunction\n   * with onOpenChange.\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the dropdown menu changes.\n   * @param isOpen - true if the menu has been opened\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * The modality of the dialog.\n   * When set to true, interaction with outside elements will be disabled and\n   * only dialog content will be visible to screen readers.\n   * @defaultValue true\n   */\n  modal?: boolean;\n}\n\ntype MenuSlots = {\n  trigger: ReactNode | null;\n  content: ReactNode[];\n  freeform: ReactNode[];\n};\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getMenuSlots(children: ReactNode) {\n  const slots: MenuSlots = {\n    trigger: null,\n    content: [],\n    freeform: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case Trigger:\n          slots.trigger = child;\n          break;\n        case Content:\n          slots.content.push(child);\n          break;\n        default:\n          slots.freeform.push(child);\n      }\n    } else {\n      slots.freeform.push(child);\n    }\n  });\n\n  return slots;\n}\n\n/** Iterates over all top-level Content nodes and registers tab key handler. */\nfunction registerTabHandlers(\n  children: ReactNode,\n  handleTabKeyPressed: () => void,\n  dataDtComponent: string,\n): ReactNode {\n  return Children.map(children, (child: ReactNode) => {\n    return isValidElement<MenuContentProps>(child) && child.type === Content\n      ? cloneElement(\n          child,\n          _mergeProps(child.props, {\n            _onTabKeyPressed: handleTabKeyPressed,\n            'data-dt-component': dataDtComponent,\n          }),\n          child.props.children,\n        )\n      : child;\n  });\n}\n\n/**\n * @internal\n */\nconst MenuRoot = (props: MenuProps) => {\n  const {\n    open: value,\n    onOpenChange: onChange,\n    modal = true,\n    defaultOpen = false,\n    children,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.\n    'data-dt-component': dataDtComponent = COMPONENT_NAME,\n  } = props;\n\n  const [open, updateOpen] = useControllableState({\n    defaultValue: defaultOpen,\n    value,\n    onChange,\n  });\n\n  const slots = useMemo(\n    () =>\n      getMenuSlots(\n        registerTabHandlers(children, () => updateOpen(false), dataDtComponent),\n      ),\n    [children, updateOpen, dataDtComponent],\n  );\n\n  useMenuAutoClose(open, updateOpen);\n\n  const menuContextValue = useMemo(\n    () => ({\n      isOpen: open,\n      isDefaultOpen: defaultOpen,\n      setIsOpen: updateOpen,\n    }),\n    [defaultOpen, open, updateOpen],\n  );\n\n  return (\n    <MenuContext.Provider value={menuContextValue}>\n      <RadixRoot\n        open={open}\n        onOpenChange={(isOpen) => updateOpen(isOpen)}\n        modal={modal}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        {slots.trigger !== null && slots.trigger}\n        {open && slots.content}\n        {slots.freeform}\n      </RadixRoot>\n    </MenuContext.Provider>\n  );\n};\n\n(MenuRoot as typeof MenuRoot & { displayName: string }).displayName = 'Menu';\n\n/**\n * The `Menu` component displays the list of action items that are revealed when\n * the user clicks on the trigger element.\n * @public\n */\nexport const Menu = Object.assign(MenuRoot, {\n  Trigger,\n  Content,\n  Item,\n  ItemTooltip,\n  Label,\n  Link,\n  Group,\n  Prefix,\n  Suffix,\n  Sub,\n  SubTrigger,\n  SubContent,\n  Intent,\n});\n"],
+  "mappings": "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",
   "names": []
 }

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

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

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-5-2';\nexport var group = '_1m01arl4-3-5-2';\nexport var item = _7a468({defaultClassName:'_1m01arl5-3-5-2',variantClassNames:{disabled:{true:'_1m01arl6-3-5-2',false:'_1m01arl7-3-5-2'}},defaultVariants:{disabled:false},compoundVariants:[]});\nexport var itemChildren = '_1m01arl8-3-5-2';\nexport var label = '_1m01arl2-3-5-2';\nexport var subChildren = '_1m01arl9-3-5-2';\nexport var tooltip = '_1m01arl0-3-5-2';\nexport var tooltipWrapper = '_1m01arl1-3-5-2';"],
+  "sourcesContent": ["import './Menu.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var content = '_1m01arl3-3-7-0';\nexport var group = '_1m01arl4-3-7-0';\nexport var item = _7a468({defaultClassName:'_1m01arl5-3-7-0',variantClassNames:{disabled:{true:'_1m01arl6-3-7-0',false:'_1m01arl7-3-7-0'}},defaultVariants:{disabled:false},compoundVariants:[]});\nexport var itemChildren = '_1m01arl8-3-7-0';\nexport var label = '_1m01arl2-3-7-0';\nexport var subChildren = '_1m01arl9-3-7-0';\nexport var tooltip = '_1m01arl0-3-7-0';\nexport var tooltipWrapper = '_1m01arl1-3-7-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,UAAU;AACd,IAAI,QAAQ;AACZ,IAAI,OAAO,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACzL,IAAI,eAAe;AACnB,IAAI,QAAQ;AACZ,IAAI,cAAc;AAClB,IAAI,UAAU;AACd,IAAI,iBAAiB;",
   "names": []
 }

package/esm/navigation/menu/Sub.js

@@ -1,8 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Sub as RadixSub } from "@radix-ui/react-dropdown-menu";
 import {
-  useCallback,
-  useEffect,
   useMemo,
   Children,
   isValidElement,
@@ -10,10 +8,10 @@ import {
 } from "react";
 import { isElement } from "react-is";
 import { MenuSubContext } from "./contexts/MenuSubContext.js";
+import { useMenuAutoClose } from "./hooks/useMenuAutoClose.js";
 import { SubContent } from "./SubContent.js";
 import { SubTrigger } from "./SubTrigger.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
-import { isBrowser } from "../../core/utils/isBrowser.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 function registerTabHandlers(children, handleTabKeyPressed) {
   return Children.map(children, (child) => {
@@ -67,18 +65,7 @@ const Sub = (props) => {
     () => getSubSlots(registerTabHandlers(children, () => updateOpen(false))),
     [children, updateOpen]
   );
-  const onWindowBlur = useCallback(() => {
-    updateOpen(false);
-  }, [updateOpen]);
-  useEffect(() => {
-    if (!isBrowser) {
-      return;
-    }
-    window.addEventListener("blur", onWindowBlur);
-    return () => {
-      window.removeEventListener("blur", onWindowBlur);
-    };
-  }, [onWindowBlur]);
+  useMenuAutoClose(open, updateOpen);
   return /* @__PURE__ */ jsx(
     MenuSubContext.Provider,
     {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/Sub.tsx"],
-  "sourcesContent": ["import { Sub as RadixSub } from '@radix-ui/react-dropdown-menu';\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  type ReactNode,\n  Children,\n  isValidElement,\n  cloneElement,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { MenuSubContext } from './contexts/MenuSubContext.js';\nimport { SubContent, type MenuSubContentProps } from './SubContent.js';\nimport { SubTrigger } from './SubTrigger.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isBrowser } from '../../core/utils/isBrowser.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\n\n/**\n * @public\n */\nexport interface MenuSubProps extends WithChildren {\n  /**\n   * The open state of the dropdown menu when it is initially rendered. Use when\n   * you do not need to control its open state.\n   */\n  defaultOpen?: boolean;\n  /**\n   * The controlled open state of the dropdown menu. Must be used in conjunction\n   * with onOpenChange.\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the dropdown menu changes.\n   * @param isOpen - true if the menu has been opened\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\ntype SubSlots = {\n  trigger: ReactNode | null;\n  content: ReactNode[];\n  freeform: ReactNode[];\n};\n\n/** Iterates over all top-level SubContent nodes and registers tab key handler. */\nfunction registerTabHandlers(\n  children: ReactNode,\n  handleTabKeyPressed: () => void,\n): ReactNode {\n  return Children.map(children, (child: ReactNode) => {\n    return isValidElement<MenuSubContentProps>(child) &&\n      child.type === SubContent\n      ? cloneElement(\n          child,\n          _mergeProps(child.props, {\n            _onTabKeyPressed: handleTabKeyPressed,\n          }),\n          child.props.children,\n        )\n      : child;\n  });\n}\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getSubSlots(children: ReactNode) {\n  const slots: SubSlots = {\n    trigger: null,\n    content: [],\n    freeform: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case SubTrigger:\n          slots.trigger = child;\n          break;\n        case SubContent:\n          slots.content.push(child);\n          break;\n        default:\n          slots.freeform.push(child);\n      }\n    } else {\n      slots.freeform.push(child);\n    }\n  });\n\n  return slots;\n}\n\n/**\n * @public\n */\nexport const Sub = (props: MenuSubProps) => {\n  const {\n    defaultOpen: defaultValue,\n    open: value,\n    onOpenChange: onChange,\n    children,\n    ...remainingProps\n  } = props;\n  const [open, updateOpen] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n  const slots = useMemo(\n    () => getSubSlots(registerTabHandlers(children, () => updateOpen(false))),\n    [children, updateOpen],\n  );\n\n  // Closes the Menu on window blur to fix inherent issue with Radix UI keeping submenus open.\n  // https://github.com/radix-ui/primitives/issues/1441\n  const onWindowBlur = useCallback(() => {\n    updateOpen(false);\n  }, [updateOpen]);\n\n  useEffect(() => {\n    if (!isBrowser) {\n      return;\n    }\n    window.addEventListener('blur', onWindowBlur);\n    return () => {\n      window.removeEventListener('blur', onWindowBlur);\n    };\n  }, [onWindowBlur]);\n\n  return (\n    <MenuSubContext.Provider\n      value={{\n        isOpen: open ?? false,\n        isDefaultOpen: defaultValue ?? false,\n        setIsOpen: updateOpen,\n      }}\n    >\n      <RadixSub\n        open={open}\n        onOpenChange={(isOpen) => updateOpen(isOpen)}\n        {...remainingProps}\n      >\n        {slots.trigger !== null && slots.trigger}\n        {open && slots.content}\n        {slots.freeform}\n      </RadixSub>\n    </MenuSubContext.Provider>\n  );\n};\n\n(Sub as typeof Sub & { displayName: string }).displayName = 'Menu.Sub';\n"],
-  "mappings": "AAoII,cAOE,YAPF;AApIJ,SAAS,OAAO,gBAAgB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAE1B,SAAS,sBAAsB;AAC/B,SAAS,kBAA4C;AACrD,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AAErC,SAAS,iBAAiB;AAC1B,SAAS,cAAc,mBAAmB;AA8B1C,SAAS,oBACP,UACA,qBACW;AACX,SAAO,SAAS,IAAI,UAAU,CAAC,UAAqB;AAClD,WAAO,eAAoC,KAAK,KAC9C,MAAM,SAAS,aACb;AAAA,MACE;AAAA,MACA,YAAY,MAAM,OAAO;AAAA,QACvB,kBAAkB;AAAA,MACpB,CAAC;AAAA,MACD,MAAM,MAAM;AAAA,IACd,IACA;AAAA,EACN,CAAC;AACH;AAGA,SAAS,YAAY,UAAqB;AACxC,QAAM,QAAkB;AAAA,IACtB,SAAS;AAAA,IACT,SAAS,CAAC;AAAA,IACV,UAAU,CAAC;AAAA,EACb;AAEA,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,UAAU,KAAK,GAAG;AACpB,cAAQ,MAAM,MAAM;AAAA,QAClB,KAAK;AACH,gBAAM,UAAU;AAChB;AAAA,QACF,KAAK;AACH,gBAAM,QAAQ,KAAK,KAAK;AACxB;AAAA,QACF;AACE,gBAAM,SAAS,KAAK,KAAK;AAAA,MAC7B;AAAA,IACF,OAAO;AACL,YAAM,SAAS,KAAK,KAAK;AAAA,IAC3B;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAKO,MAAM,MAAM,CAAC,UAAwB;AAC1C,QAAM;AAAA,IACJ,aAAa;AAAA,IACb,MAAM;AAAA,IACN,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,MAAM,UAAU,IAAI,qBAAqB;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,QAAQ;AAAA,IACZ,MAAM,YAAY,oBAAoB,UAAU,MAAM,WAAW,KAAK,CAAC,CAAC;AAAA,IACxE,CAAC,UAAU,UAAU;AAAA,EACvB;AAIA,QAAM,eAAe,YAAY,MAAM;AACrC,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,UAAU,CAAC;AAEf,YAAU,MAAM;AACd,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AACA,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,OAAO;AAAA,QACL,QAAQ,QAAQ;AAAA,QAChB,eAAe,gBAAgB;AAAA,QAC/B,WAAW;AAAA,MACb;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,cAAc,CAAC,WAAW,WAAW,MAAM;AAAA,UAC1C,GAAG;AAAA,UAEH;AAAA,kBAAM,YAAY,QAAQ,MAAM;AAAA,YAChC,QAAQ,MAAM;AAAA,YACd,MAAM;AAAA;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;AAEC,IAA6C,cAAc;",
+  "sourcesContent": ["import { Sub as RadixSub } from '@radix-ui/react-dropdown-menu';\nimport {\n  useMemo,\n  type ReactNode,\n  Children,\n  isValidElement,\n  cloneElement,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { MenuSubContext } from './contexts/MenuSubContext.js';\nimport { useMenuAutoClose } from './hooks/useMenuAutoClose.js';\nimport { SubContent, type MenuSubContentProps } from './SubContent.js';\nimport { SubTrigger } from './SubTrigger.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\n\n/**\n * @public\n */\nexport interface MenuSubProps extends WithChildren {\n  /**\n   * The open state of the dropdown menu when it is initially rendered. Use when\n   * you do not need to control its open state.\n   */\n  defaultOpen?: boolean;\n  /**\n   * The controlled open state of the dropdown menu. Must be used in conjunction\n   * with onOpenChange.\n   */\n  open?: boolean;\n  /**\n   * Event handler called when the open state of the dropdown menu changes.\n   * @param isOpen - true if the menu has been opened\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n}\n\ntype SubSlots = {\n  trigger: ReactNode | null;\n  content: ReactNode[];\n  freeform: ReactNode[];\n};\n\n/** Iterates over all top-level SubContent nodes and registers tab key handler. */\nfunction registerTabHandlers(\n  children: ReactNode,\n  handleTabKeyPressed: () => void,\n): ReactNode {\n  return Children.map(children, (child: ReactNode) => {\n    return isValidElement<MenuSubContentProps>(child) &&\n      child.type === SubContent\n      ? cloneElement(\n          child,\n          _mergeProps(child.props, {\n            _onTabKeyPressed: handleTabKeyPressed,\n          }),\n          child.props.children,\n        )\n      : child;\n  });\n}\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getSubSlots(children: ReactNode) {\n  const slots: SubSlots = {\n    trigger: null,\n    content: [],\n    freeform: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case SubTrigger:\n          slots.trigger = child;\n          break;\n        case SubContent:\n          slots.content.push(child);\n          break;\n        default:\n          slots.freeform.push(child);\n      }\n    } else {\n      slots.freeform.push(child);\n    }\n  });\n\n  return slots;\n}\n\n/**\n * @public\n */\nexport const Sub = (props: MenuSubProps) => {\n  const {\n    defaultOpen: defaultValue,\n    open: value,\n    onOpenChange: onChange,\n    children,\n    ...remainingProps\n  } = props;\n  const [open, updateOpen] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n  const slots = useMemo(\n    () => getSubSlots(registerTabHandlers(children, () => updateOpen(false))),\n    [children, updateOpen],\n  );\n\n  useMenuAutoClose(open, updateOpen);\n\n  return (\n    <MenuSubContext.Provider\n      value={{\n        isOpen: open ?? false,\n        isDefaultOpen: defaultValue ?? false,\n        setIsOpen: updateOpen,\n      }}\n    >\n      <RadixSub\n        open={open}\n        onOpenChange={(isOpen) => updateOpen(isOpen)}\n        {...remainingProps}\n      >\n        {slots.trigger !== null && slots.trigger}\n        {open && slots.content}\n        {slots.freeform}\n      </RadixSub>\n    </MenuSubContext.Provider>\n  );\n};\n\n(Sub as typeof Sub & { displayName: string }).displayName = 'Menu.Sub';\n"],
+  "mappings": "AAoHI,cAOE,YAPF;AApHJ,SAAS,OAAO,gBAAgB;AAChC;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAE1B,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,kBAA4C;AACrD,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AAErC,SAAS,cAAc,mBAAmB;AA8B1C,SAAS,oBACP,UACA,qBACW;AACX,SAAO,SAAS,IAAI,UAAU,CAAC,UAAqB;AAClD,WAAO,eAAoC,KAAK,KAC9C,MAAM,SAAS,aACb;AAAA,MACE;AAAA,MACA,YAAY,MAAM,OAAO;AAAA,QACvB,kBAAkB;AAAA,MACpB,CAAC;AAAA,MACD,MAAM,MAAM;AAAA,IACd,IACA;AAAA,EACN,CAAC;AACH;AAGA,SAAS,YAAY,UAAqB;AACxC,QAAM,QAAkB;AAAA,IACtB,SAAS;AAAA,IACT,SAAS,CAAC;AAAA,IACV,UAAU,CAAC;AAAA,EACb;AAEA,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,UAAU,KAAK,GAAG;AACpB,cAAQ,MAAM,MAAM;AAAA,QAClB,KAAK;AACH,gBAAM,UAAU;AAChB;AAAA,QACF,KAAK;AACH,gBAAM,QAAQ,KAAK,KAAK;AACxB;AAAA,QACF;AACE,gBAAM,SAAS,KAAK,KAAK;AAAA,MAC7B;AAAA,IACF,OAAO;AACL,YAAM,SAAS,KAAK,KAAK;AAAA,IAC3B;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAKO,MAAM,MAAM,CAAC,UAAwB;AAC1C,QAAM;AAAA,IACJ,aAAa;AAAA,IACb,MAAM;AAAA,IACN,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,CAAC,MAAM,UAAU,IAAI,qBAAqB;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,QAAQ;AAAA,IACZ,MAAM,YAAY,oBAAoB,UAAU,MAAM,WAAW,KAAK,CAAC,CAAC;AAAA,IACxE,CAAC,UAAU,UAAU;AAAA,EACvB;AAEA,mBAAiB,MAAM,UAAU;AAEjC,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,OAAO;AAAA,QACL,QAAQ,QAAQ;AAAA,QAChB,eAAe,gBAAgB;AAAA,QAC/B,WAAW;AAAA,MACb;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,cAAc,CAAC,WAAW,WAAW,MAAM;AAAA,UAC1C,GAAG;AAAA,UAEH;AAAA,kBAAM,YAAY,QAAQ,MAAM;AAAA,YAChC,QAAQ,MAAM;AAAA,YACd,MAAM;AAAA;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;AAEC,IAA6C,cAAc;",
   "names": []
 }

package/esm/navigation/menu/SubTrigger.js

@@ -6,7 +6,7 @@ import { ChevronRightSmallIcon } from "@dynatrace/strato-icons";
 import { useIsMenuItemHovered } from "./hooks/useIsMenuItemHovered.js";
 import { getSubTriggerSlots } from "./item-slots.js";
 import * as styles from "./Menu.sty.js";
-import { useFocusRing } from "../../core/styles/useFocusRing.js";
+import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { textStyle as textStyleCSS } from "../../styles/textStyle.sty.js";

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/menu/SubTrigger.tsx"],
-  "sourcesContent": ["import { SubTrigger as RadixSubTrigger } from '@radix-ui/react-dropdown-menu';\nimport clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { ChevronRightSmallIcon } from '@dynatrace/strato-icons';\n\nimport { useIsMenuItemHovered } from './hooks/useIsMenuItemHovered.js';\nimport { getSubTriggerSlots } from './item-slots.js';\nimport * as styles from './Menu.sty.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-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 { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * @public\n */\nexport interface MenuSubTriggerProps extends WithChildren, AriaLabelingProps {\n  /**\n   * Whether the menu trigger item is disabled.\n   * If true, it prevents the user from interacting with the item.\n   */\n  disabled?: boolean;\n\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\n/**\n * An item that opens a submenu. Used in combination with a `Menu.Sub`.\n * Must not be rendered inside a root Menu.\n * @public\n */\nexport const SubTrigger = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuSubTriggerProps\n>(\n  (\n    {\n      children,\n      disabled,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n      ...remainingProps\n    }: MenuSubTriggerProps,\n    forwardedRef,\n  ) => {\n    const slots = getSubTriggerSlots(children);\n\n    const { focusProps, focusClassName } = useFocusRing({\n      disabled,\n    });\n    const { isItemHovered, hoverProps } = useIsMenuItemHovered();\n\n    return (\n      <RadixSubTrigger\n        ref={forwardedRef}\n        disabled={disabled}\n        className={clsx(\n          textStyleCSS({ textStyle: 'base-emphasized' }),\n          !isItemHovered && focusClassName,\n          styles.item({ disabled: disabled }),\n        )}\n        {..._mergeProps(remainingProps, focusProps, hoverProps)}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-details={ariaDetails}\n        aria-haspopup={true}\n        role=\"menuitem\"\n        asChild\n      >\n        <Flex justifyContent=\"space-between\">\n          {slots.prefix}\n          <div className={styles.subChildren}>{slots.freeform}</div>\n          <ChevronRightSmallIcon />\n        </Flex>\n      </RadixSubTrigger>\n    );\n  },\n);\n\n(SubTrigger as typeof SubTrigger & { displayName: string }).displayName =\n  'Menu.SubTrigger';\n"],
+  "sourcesContent": ["import { SubTrigger as RadixSubTrigger } from '@radix-ui/react-dropdown-menu';\nimport clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { ChevronRightSmallIcon } from '@dynatrace/strato-icons';\n\nimport { useIsMenuItemHovered } from './hooks/useIsMenuItemHovered.js';\nimport { getSubTriggerSlots } from './item-slots.js';\nimport * as styles from './Menu.sty.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { AriaLabelingProps } from '../../core/types/a11y-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 { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * @public\n */\nexport interface MenuSubTriggerProps extends WithChildren, AriaLabelingProps {\n  /**\n   * Whether the menu trigger item is disabled.\n   * If true, it prevents the user from interacting with the item.\n   */\n  disabled?: boolean;\n\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\n/**\n * An item that opens a submenu. Used in combination with a `Menu.Sub`.\n * Must not be rendered inside a root Menu.\n * @public\n */\nexport const SubTrigger = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  MenuSubTriggerProps\n>(\n  (\n    {\n      children,\n      disabled,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-details': ariaDetails,\n      ...remainingProps\n    }: MenuSubTriggerProps,\n    forwardedRef,\n  ) => {\n    const slots = getSubTriggerSlots(children);\n\n    const { focusProps, focusClassName } = useFocusRing({\n      disabled,\n    });\n    const { isItemHovered, hoverProps } = useIsMenuItemHovered();\n\n    return (\n      <RadixSubTrigger\n        ref={forwardedRef}\n        disabled={disabled}\n        className={clsx(\n          textStyleCSS({ textStyle: 'base-emphasized' }),\n          !isItemHovered && focusClassName,\n          styles.item({ disabled: disabled }),\n        )}\n        {..._mergeProps(remainingProps, focusProps, hoverProps)}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-details={ariaDetails}\n        aria-haspopup={true}\n        role=\"menuitem\"\n        asChild\n      >\n        <Flex justifyContent=\"space-between\">\n          {slots.prefix}\n          <div className={styles.subChildren}>{slots.freeform}</div>\n          <ChevronRightSmallIcon />\n        </Flex>\n      </RadixSubTrigger>\n    );\n  },\n);\n\n(SubTrigger as typeof SubTrigger & { displayName: string }).displayName =\n  'Menu.SubTrigger';\n"],
   "mappings": "AAgFQ,SAEE,KAFF;AAhFR,SAAS,cAAc,uBAAuB;AAC9C,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,6BAA6B;AAEtC,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AACnC,YAAY,YAAY;AACxB,SAAS,oBAAoB;AAG7B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,YAAY;AACrB,SAAS,aAAa,oBAAoB;AAyBnC,MAAM,aAA6B;AAAA,EAIxC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,GAAG;AAAA,EACL,GACA,iBACG;AACH,UAAM,QAAQ,mBAAmB,QAAQ;AAEzC,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,MAClD;AAAA,IACF,CAAC;AACD,UAAM,EAAE,eAAe,WAAW,IAAI,qBAAqB;AAE3D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA,WAAW;AAAA,UACT,aAAa,EAAE,WAAW,kBAAkB,CAAC;AAAA,UAC7C,CAAC,iBAAiB;AAAA,UAClB,OAAO,KAAK,EAAE,SAAmB,CAAC;AAAA,QACpC;AAAA,QACC,GAAG,YAAY,gBAAgB,YAAY,UAAU;AAAA,QACtD,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,gBAAc;AAAA,QACd,iBAAe;AAAA,QACf,MAAK;AAAA,QACL,SAAO;AAAA,QAEP,+BAAC,QAAK,gBAAe,iBAClB;AAAA,gBAAM;AAAA,UACP,oBAAC,SAAI,WAAW,OAAO,aAAc,gBAAM,UAAS;AAAA,UACpD,oBAAC,yBAAsB;AAAA,WACzB;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,WAA2D,cAC1D;",
   "names": []
 }

package/esm/navigation/menu/hooks/useMenuAutoClose.js

@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+import { isBrowser } from "../../../core/utils/isBrowser.js";
+import {
+  getOverlayStackSize,
+  subscribeToOverlayStack
+} from "../../../overlays/hooks/useOverlay.js";
+function useMenuAutoClose(open, setOpen) {
+  useEffect(() => {
+    if (!isBrowser) {
+      return void 0;
+    }
+    const onWindowBlur = () => setOpen(false);
+    window.addEventListener("blur", onWindowBlur);
+    return () => {
+      window.removeEventListener("blur", onWindowBlur);
+    };
+  }, [setOpen]);
+  useEffect(() => {
+    if (!open) {
+      return void 0;
+    }
+    const stackSizeAtOpen = getOverlayStackSize();
+    return subscribeToOverlayStack(() => {
+      if (getOverlayStackSize() > stackSizeAtOpen) {
+        setOpen(false);
+      }
+    });
+  }, [open, setOpen]);
+}
+export {
+  useMenuAutoClose
+};
+//# sourceMappingURL=useMenuAutoClose.js.map

package/esm/navigation/menu/hooks/useMenuAutoClose.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/navigation/menu/hooks/useMenuAutoClose.tsx"],
+  "sourcesContent": ["import { useEffect } from 'react';\n\nimport { isBrowser } from '../../../core/utils/isBrowser.js';\nimport {\n  getOverlayStackSize,\n  subscribeToOverlayStack,\n} from '../../../overlays/hooks/useOverlay.js';\n\n/**\n * Auto-close behavior shared between `Menu` and `Menu.Sub`:\n *\n * - Closes on window blur, working around a Radix bug where submenus stay\n *   open when the browser window loses focus\n *   (https://github.com/radix-ui/primitives/issues/1441).\n * - Closes when any `useOverlay`-managed overlay (Modal, Sheet, Drawer, ...)\n *   is pushed onto the stack while the menu is open, so the user only has\n *   to dismiss the topmost layer.\n *\n * Menus themselves don't register with `visibleOverlays` (Radix has its own\n * dismiss layer); the hook just observes stack growth above the size\n * captured at open-time.\n * @internal\n */\nexport function useMenuAutoClose(\n  open: boolean | undefined,\n  setOpen: (open: boolean) => void,\n): void {\n  useEffect(() => {\n    if (!isBrowser) {\n      return undefined;\n    }\n    const onWindowBlur = () => setOpen(false);\n    window.addEventListener('blur', onWindowBlur);\n    return () => {\n      window.removeEventListener('blur', onWindowBlur);\n    };\n  }, [setOpen]);\n\n  useEffect(() => {\n    if (!open) {\n      return undefined;\n    }\n    const stackSizeAtOpen = getOverlayStackSize();\n    return subscribeToOverlayStack(() => {\n      if (getOverlayStackSize() > stackSizeAtOpen) {\n        setOpen(false);\n      }\n    });\n  }, [open, setOpen]);\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAE1B,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAiBA,SAAS,iBACd,MACA,SACM;AACN,YAAU,MAAM;AACd,QAAI,CAAC,WAAW;AACd,aAAO;AAAA,IACT;AACA,UAAM,eAAe,MAAM,QAAQ,KAAK;AACxC,WAAO,iBAAiB,QAAQ,YAAY;AAC5C,WAAO,MAAM;AACX,aAAO,oBAAoB,QAAQ,YAAY;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,YAAU,MAAM;AACd,QAAI,CAAC,MAAM;AACT,aAAO;AAAA,IACT;AACA,UAAM,kBAAkB,oBAAoB;AAC5C,WAAO,wBAAwB,MAAM;AACnC,UAAI,oBAAoB,IAAI,iBAAiB;AAC3C,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,MAAM,OAAO,CAAC;AACpB;",
+  "names": []
+}