@cube-dev/ui-kit 0.114.0 → 0.116.0

package/dist/components/actions/Menu/Menu.js

@@ -0,0 +1,136 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
+import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { _CollectionItem } from "../../CollectionItem.js";
+import { useMenuContext } from "./context.js";
+import { MenuItem } from "./MenuItem.js";
+import { StyledDivider, StyledFooter, StyledHeader, StyledMenu, StyledMenuWrapper } from "./styled.js";
+import { MenuSection } from "./MenuSection.js";
+import { _MenuTrigger } from "./MenuTrigger.js";
+import { SubMenuTrigger } from "./SubMenuTrigger.js";
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMenu } from "react-aria";
+import { useDOMRef } from "@react-spectrum/utils";
+import { Section, useTreeState } from "react-stately";
+import { useSyncRef } from "@react-aria/utils";
+
+//#region src/components/actions/Menu/Menu.tsx
+function Menu(props, ref) {
+	const { header, footer, menuStyles, headerStyles, footerStyles, itemStyles, sectionStyles, sectionHeadingStyles, size = "medium", focusOnHover = false, qa, selectedKeys, defaultSelectedKeys, onSelectionChange, ...rest } = props;
+	const domRef = useDOMRef(ref);
+	const contextProps = useMenuContext();
+	const completeProps = mergeProps$1(contextProps, rest, {
+		focusOnHover,
+		selectedKeys: selectedKeys ? new Set(selectedKeys) : void 0,
+		defaultSelectedKeys: defaultSelectedKeys ? new Set(defaultSelectedKeys) : void 0,
+		onSelectionChange: onSelectionChange ? (keys) => {
+			if (keys === "all") onSelectionChange(Array.from(state.collection.getKeys()).map((key) => String(key)));
+			else if (keys instanceof Set) onSelectionChange(Array.from(keys).map((key) => String(key)));
+			else onSelectionChange([]);
+		} : void 0
+	});
+	const state = useTreeState(completeProps);
+	const collectionItems = [...state.collection];
+	const hasSections = collectionItems.some((item) => item.type === "section");
+	const { menuProps } = useMenu(completeProps, state, domRef);
+	const styles = useMemo(() => extractStyles(completeProps, CONTAINER_STYLES), [completeProps]);
+	const wrapperMods = useMemo(() => {
+		return {
+			popover: completeProps.mods?.popover,
+			footer: !!footer,
+			header: !!header
+		};
+	}, [
+		completeProps.mods?.popover,
+		footer,
+		header
+	]);
+	const menuMods = useMemo(() => {
+		return { sections: hasSections };
+	}, [hasSections]);
+	useSyncRef(contextProps, domRef);
+	const renderedItems = useMemo(() => {
+		const items = [];
+		let isFirstSection = true;
+		collectionItems.forEach((item) => {
+			if (item.type === "section") {
+				if (!isFirstSection) items.push(/* @__PURE__ */ jsx(StyledDivider, {
+					role: "separator",
+					"aria-orientation": "horizontal"
+				}, `divider-${String(item.key)}`));
+				items.push(/* @__PURE__ */ jsx(MenuSection, {
+					item,
+					state,
+					styles: sectionStyles,
+					itemStyles,
+					headingStyles: sectionHeadingStyles,
+					size
+				}, item.key));
+				isFirstSection = false;
+				return;
+			}
+			let menuItem = /* @__PURE__ */ jsx(MenuItem, {
+				item,
+				state,
+				styles: itemStyles,
+				size,
+				onAction: item.onAction
+			}, item.key);
+			if (item.props?.wrapper) menuItem = item.props.wrapper(menuItem);
+			else if (item.wrapper) menuItem = item.wrapper(menuItem);
+			items.push(React.cloneElement(menuItem, { key: item.key }));
+		});
+		return items;
+	}, [
+		collectionItems,
+		state,
+		sectionStyles,
+		itemStyles,
+		sectionHeadingStyles
+	]);
+	return /* @__PURE__ */ jsxs(StyledMenuWrapper, {
+		qa,
+		styles,
+		mods: wrapperMods,
+		...filterBaseProps(completeProps),
+		children: [
+			header ? /* @__PURE__ */ jsx(StyledHeader, {
+				"data-size": size,
+				styles: headerStyles,
+				children: header
+			}) : /* @__PURE__ */ jsx("div", { role: "presentation" }),
+			/* @__PURE__ */ jsx(StyledMenu, {
+				...mergeProps$1({
+					styles: menuStyles,
+					"data-size": size,
+					mods: menuMods
+				}, menuProps),
+				ref: domRef,
+				role: menuProps.role ?? "menu",
+				children: renderedItems
+			}),
+			footer ? /* @__PURE__ */ jsx(StyledFooter, {
+				"data-size": size,
+				styles: footerStyles,
+				children: footer
+			}) : /* @__PURE__ */ jsx("div", { role: "presentation" })
+		]
+	});
+}
+const _Menu = React.forwardRef(Menu);
+const Section$1 = Object.assign(Section, { displayName: "Section" });
+const __Menu = Object.assign(_Menu, {
+	Item: _CollectionItem,
+	Section: Section$1,
+	SubMenuTrigger,
+	Trigger: _MenuTrigger,
+	displayName: "Menu"
+});
+__Menu.displayName = "Menu";
+
+//#endregion
+export { __Menu };
+//# sourceMappingURL=Menu.js.map

package/dist/components/actions/Menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","names":["mergeProps","Section","BaseSection","CollectionItem","MenuTrigger"],"sources":["../../../../src/components/actions/Menu/Menu.tsx"],"sourcesContent":["import { useSyncRef } from '@react-aria/utils';\nimport { useDOMRef } from '@react-spectrum/utils';\nimport { DOMRef, FocusStrategy, ItemProps } from '@react-types/shared';\nimport React, { ReactElement, ReactNode, useMemo } from 'react';\nimport { AriaMenuProps, useMenu } from 'react-aria';\nimport { Section as BaseSection, useTreeState } from 'react-stately';\n\nimport {\n  BasePropsWithoutChildren,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  Styles,\n} from '../../../tasty';\nimport { mergeProps } from '../../../utils/react';\nimport { CollectionItem } from '../../CollectionItem';\n\nimport { useMenuContext } from './context';\nimport { MenuItem } from './MenuItem';\nimport { MenuSection } from './MenuSection';\nimport { MenuTrigger } from './MenuTrigger';\nimport {\n  StyledDivider,\n  StyledFooter,\n  StyledHeader,\n  StyledMenu,\n  StyledMenuWrapper,\n} from './styled';\nimport { SubMenuTrigger } from './SubMenuTrigger';\n\nexport interface CubeMenuProps<T>\n  extends BasePropsWithoutChildren,\n    ContainerStyleProps,\n    Omit<\n      AriaMenuProps<T>,\n      'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange'\n    > {\n  // @deprecated\n  header?: ReactNode;\n  footer?: ReactNode;\n  menuStyles?: Styles;\n  headerStyles?: Styles;\n  footerStyles?: Styles;\n  styles?: Styles;\n  itemStyles?: Styles;\n  sectionStyles?: Styles;\n  sectionHeadingStyles?: Styles;\n  /**\n   * Whether keyboard navigation should wrap around when reaching the start/end of the collection.\n   * This directly maps to the `shouldFocusWrap` option supported by React-Aria's `useMenu` hook.\n   */\n  shouldFocusWrap?: boolean;\n\n  /**\n   * Whether the menu should automatically receive focus when it mounts.\n   * This directly maps to the `autoFocus` option supported by React-Aria's `useMenu` hook.\n   */\n  autoFocus?: boolean | FocusStrategy;\n  shouldUseVirtualFocus?: boolean;\n\n  /** Size of the menu items */\n  size?: 'medium' | 'large' | (string & {});\n\n  /** Currently selected keys (controlled) */\n  selectedKeys?: string[];\n  /** Initially selected keys (uncontrolled) */\n  defaultSelectedKeys?: string[];\n  /** Handler for selection changes */\n  onSelectionChange?: (keys: string[]) => void;\n}\n\nfunction Menu<T extends object>(\n  props: CubeMenuProps<T>,\n  ref: DOMRef<HTMLUListElement>,\n) {\n  const {\n    header,\n    footer,\n    menuStyles,\n    headerStyles,\n    footerStyles,\n    itemStyles,\n    sectionStyles,\n    sectionHeadingStyles,\n    size = 'medium',\n    focusOnHover = false,\n    qa,\n    selectedKeys,\n    defaultSelectedKeys,\n    onSelectionChange,\n    ...rest\n  } = props;\n  const domRef = useDOMRef(ref);\n  const contextProps = useMenuContext();\n\n  // Convert string[] to Set<Key> for React Aria compatibility\n  const ariaSelectedKeys = selectedKeys ? new Set(selectedKeys) : undefined;\n  const ariaDefaultSelectedKeys = defaultSelectedKeys\n    ? new Set(defaultSelectedKeys)\n    : undefined;\n\n  const handleSelectionChange = onSelectionChange\n    ? (keys: any) => {\n        if (keys === 'all') {\n          // Handle 'all' selection case - collect all available keys\n          const allKeys = Array.from(state.collection.getKeys()).map(\n            (key: any) => String(key),\n          );\n          onSelectionChange(allKeys);\n        } else if (keys instanceof Set) {\n          onSelectionChange(Array.from(keys).map((key) => String(key)));\n        } else {\n          onSelectionChange([]);\n        }\n      }\n    : undefined;\n\n  const completeProps = mergeProps(contextProps, rest, {\n    focusOnHover,\n    selectedKeys: ariaSelectedKeys,\n    defaultSelectedKeys: ariaDefaultSelectedKeys,\n    onSelectionChange: handleSelectionChange,\n  });\n\n  // Props used for collection building.\n  const treeProps = completeProps as typeof completeProps;\n\n  const state = useTreeState(treeProps as typeof completeProps);\n  const collectionItems = [...state.collection];\n  const hasSections = collectionItems.some((item) => item.type === 'section');\n\n  const { menuProps } = useMenu(completeProps, state, domRef);\n  const styles = useMemo(\n    () => extractStyles(completeProps, CONTAINER_STYLES),\n    [completeProps],\n  );\n\n  const wrapperMods = useMemo(() => {\n    return {\n      popover: completeProps.mods?.popover,\n      footer: !!footer,\n      header: !!header,\n    };\n  }, [completeProps.mods?.popover, footer, header]);\n\n  const menuMods = useMemo(() => {\n    return {\n      sections: hasSections,\n    };\n  }, [hasSections]);\n\n  // Sync the ref stored in the context object with the DOM ref returned by useDOMRef.\n  // The helper from @react-aria/utils expects the context object as the first argument\n  // to keep it up-to-date, and a ref object as the second.\n  useSyncRef(contextProps, domRef);\n\n  const renderedItems = useMemo(() => {\n    const items: React.ReactNode[] = [];\n    let isFirstSection = true;\n\n    collectionItems.forEach((item) => {\n      if (item.type === 'section') {\n        if (!isFirstSection) {\n          items.push(\n            <StyledDivider\n              key={`divider-${String(item.key)}`}\n              role=\"separator\"\n              aria-orientation=\"horizontal\"\n            />,\n          );\n        }\n\n        items.push(\n          <MenuSection\n            key={item.key}\n            item={item}\n            state={state}\n            styles={sectionStyles}\n            itemStyles={itemStyles}\n            headingStyles={sectionHeadingStyles}\n            size={size}\n          />,\n        );\n\n        isFirstSection = false;\n        return;\n      }\n\n      let menuItem = (\n        <MenuItem\n          key={item.key}\n          item={item}\n          state={state}\n          styles={itemStyles}\n          size={size}\n          onAction={item.onAction}\n        />\n      );\n\n      // Apply tooltip wrapper if tooltip property is provided\n      // if (item.props.tooltip) {\n      //   const tooltipProps =\n      //     typeof item.props.tooltip === 'string'\n      //       ? { title: item.props.tooltip }\n      //       : item.props.tooltip;\n\n      //   menuItem = (\n      //     <TooltipProvider key={item.key} placement=\"right\" {...tooltipProps}>\n      //       {menuItem}\n      //     </TooltipProvider>\n      //   );\n      // }\n\n      // Apply custom wrapper if provided\n      if (item.props?.wrapper) {\n        menuItem = item.props.wrapper(menuItem);\n      } else if ((item as any).wrapper) {\n        // Handle wrapper from collection nodes (e.g., SubMenuTrigger)\n        menuItem = (item as any).wrapper(menuItem);\n      }\n\n      // Ensure every child has a stable key, even if the wrapper component didn't set one.\n      items.push(React.cloneElement(menuItem, { key: item.key }));\n    });\n\n    return items;\n  }, [collectionItems, state, sectionStyles, itemStyles, sectionHeadingStyles]);\n\n  return (\n    <StyledMenuWrapper\n      qa={qa}\n      styles={styles}\n      mods={wrapperMods}\n      {...filterBaseProps(completeProps)}\n    >\n      {header ? (\n        <StyledHeader data-size={size} styles={headerStyles}>\n          {header}\n        </StyledHeader>\n      ) : (\n        <div role=\"presentation\" />\n      )}\n      <StyledMenu\n        {...mergeProps(\n          {\n            styles: menuStyles,\n            'data-size': size,\n            mods: menuMods,\n          },\n          menuProps,\n        )}\n        ref={domRef}\n        role={menuProps.role ?? 'menu'}\n      >\n        {renderedItems}\n      </StyledMenu>\n      {footer ? (\n        <StyledFooter data-size={size} styles={footerStyles}>\n          {footer}\n        </StyledFooter>\n      ) : (\n        <div role=\"presentation\" />\n      )}\n    </StyledMenuWrapper>\n  );\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nconst _Menu = React.forwardRef(Menu) as <T>(\n  props: CubeMenuProps<T> & React.RefAttributes<HTMLUListElement>,\n) => ReactElement;\n\ntype SectionComponent = typeof BaseSection;\n\nconst Section = Object.assign(BaseSection, {\n  displayName: 'Section',\n}) as SectionComponent;\n\ntype __MenuComponent = typeof _Menu & {\n  Item: typeof CollectionItem;\n  Section: typeof Section;\n  SubMenuTrigger: typeof SubMenuTrigger;\n  Trigger: typeof MenuTrigger;\n};\n\nconst __Menu = Object.assign(_Menu as __MenuComponent, {\n  Item: CollectionItem,\n  Section,\n  SubMenuTrigger,\n  Trigger: MenuTrigger,\n  displayName: 'Menu',\n});\n\n__Menu.displayName = 'Menu';\n\nexport { __Menu as Menu };\n"],"mappings":"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"}

package/dist/components/actions/Menu/MenuItem.d.ts

@@ -0,0 +1,23 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import "../../../tasty/index.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { TreeState } from "react-stately";
+import { Key, Node } from "@react-types/shared";
+
+//#region src/components/actions/Menu/MenuItem.d.ts
+type MenuSelectionType = 'checkbox' | 'radio' | 'checkmark';
+interface MenuItemProps<T> {
+  item: Node<T>;
+  state: TreeState<T>;
+  styles?: Styles;
+  isVirtualized?: boolean;
+  isDisabled?: boolean;
+  onAction?: (key: Key) => void;
+  size?: 'small' | 'medium' | (string & {});
+}
+/** @private */
+declare function MenuItem<T>(props: MenuItemProps<T>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { MenuItem, MenuItemProps, MenuSelectionType };
+//# sourceMappingURL=MenuItem.d.ts.map

package/dist/components/actions/Menu/MenuItem.js

@@ -0,0 +1,79 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { filterCollectionItemProps } from "../../CollectionItem.js";
+import { _Item } from "../../content/Item/Item.js";
+import { RightIcon } from "../../../icons/RightIcon.js";
+import { useMenuContext } from "./context.js";
+import { SubmenuTriggerContext } from "./SubmenuTriggerContext.js";
+import { useContext, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { FocusRing, useMenuItem } from "react-aria";
+
+//#region src/components/actions/Menu/MenuItem.tsx
+/** @private */
+function MenuItem(props) {
+	const { item, state, styles, isVirtualized, onAction, size } = props;
+	const { onClose, closeOnSelect } = useMenuContext();
+	const { rendered, key, props: itemProps } = item;
+	const submenuContext = useContext(SubmenuTriggerContext);
+	const filteredItemProps = filterCollectionItemProps(itemProps);
+	const { hotkeys, mods: itemMods, qa: itemQa } = filteredItemProps;
+	const isSelectable = state.selectionManager.selectionMode !== "none";
+	const isDisabledKey = state.disabledKeys.has(key) || submenuContext?.isDisabled;
+	const ref = useRef(null);
+	const elementRef = submenuContext?.triggerRef ?? ref;
+	const { menuItemProps, labelProps, descriptionProps, keyboardShortcutProps, isFocused, isSelected, isPressed, isDisabled } = useMenuItem({
+		isSelected: state.selectionManager.isSelected(key),
+		isDisabled: isDisabledKey,
+		"aria-label": item["aria-label"],
+		key,
+		onClose: submenuContext ? void 0 : onClose,
+		closeOnSelect: submenuContext ? false : closeOnSelect,
+		isVirtualized,
+		onAction: submenuContext?.onAction || onAction
+	}, state, elementRef);
+	const isVirtualFocused = state.selectionManager.focusedKey === key;
+	const mods = {
+		...itemMods,
+		focused: isFocused || isVirtualFocused,
+		pressed: isPressed,
+		selected: isSelected,
+		disabled: isDisabled,
+		submenu: !!submenuContext,
+		menuitem: true
+	};
+	return /* @__PURE__ */ jsx(FocusRing, { children: /* @__PURE__ */ jsx(_Item, {
+		...mergeProps$1(menuItemProps, filteredItemProps, {
+			"data-popover-trigger": true,
+			qa: itemQa ? itemQa : `MenuItem-${key}`,
+			mods,
+			styles,
+			"data-size": size,
+			as: "li",
+			labelProps,
+			descriptionProps,
+			keyboardShortcutProps,
+			"aria-haspopup": submenuContext ? "menu" : void 0,
+			"aria-expanded": submenuContext?.isOpen,
+			"data-has-submenu": submenuContext ? true : void 0,
+			onKeyDown: submenuContext?.onKeyDown ? (e) => {
+				submenuContext.onKeyDown?.(e);
+				if (!e.defaultPrevented && menuItemProps.onKeyDown) menuItemProps.onKeyDown(e);
+			} : menuItemProps.onKeyDown,
+			onMouseEnter: submenuContext?.onMouseEnter || menuItemProps.onMouseEnter,
+			onMouseLeave: submenuContext?.onMouseLeave || menuItemProps.onMouseLeave
+		}),
+		ref: elementRef,
+		disableActionsFocus: true,
+		rightIcon: submenuContext ? /* @__PURE__ */ jsx(RightIcon, {}) : filteredItemProps.rightIcon,
+		defaultTooltipPlacement: "right",
+		isSelected: isSelectable ? isSelected : void 0,
+		isDisabled,
+		size: size === "small" ? "small" : "medium",
+		children: rendered
+	}) });
+}
+
+//#endregion
+export { MenuItem };
+//# sourceMappingURL=MenuItem.js.map

package/dist/components/actions/Menu/MenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","names":["Item","mergeProps"],"sources":["../../../../src/components/actions/Menu/MenuItem.tsx"],"sourcesContent":["import { Key, Node } from '@react-types/shared';\nimport { KeyboardEvent, useContext, useRef } from 'react';\nimport { FocusRing, useMenuItem } from 'react-aria';\nimport { TreeState } from 'react-stately';\n\nimport { RightIcon } from '../../../icons';\nimport { Styles } from '../../../tasty';\nimport { mergeProps } from '../../../utils/react';\nimport { filterCollectionItemProps } from '../../CollectionItem';\nimport { Item } from '../../content/Item/Item';\n\nimport { useMenuContext } from './context';\nimport { SubmenuTriggerContext } from './SubmenuTriggerContext';\n\nexport type MenuSelectionType = 'checkbox' | 'radio' | 'checkmark';\n\nexport interface MenuItemProps<T> {\n  item: Node<T>;\n  state: TreeState<T>;\n  styles?: Styles;\n  isVirtualized?: boolean;\n  isDisabled?: boolean;\n  onAction?: (key: Key) => void;\n  size?: 'small' | 'medium' | (string & {});\n}\n\n/** @private */\nexport function MenuItem<T>(props: MenuItemProps<T>) {\n  const { item, state, styles, isVirtualized, onAction, size } = props;\n  const { onClose, closeOnSelect } = useMenuContext();\n  const { rendered, key, props: itemProps } = item;\n\n  // Check if this item is wrapped in a SubmenuTriggerContext\n  const submenuContext = useContext(SubmenuTriggerContext);\n\n  // Filter out service props (react-stately and parent-handled props)\n  // All remaining props are safe to pass to Item component\n  const filteredItemProps = filterCollectionItemProps(itemProps);\n\n  // Extract specific props that need special handling\n  const { hotkeys, mods: itemMods, qa: itemQa } = filteredItemProps;\n\n  const isSelectable = state.selectionManager.selectionMode !== 'none';\n  const isDisabledKey =\n    state.disabledKeys.has(key) || submenuContext?.isDisabled;\n\n  const ref = useRef<HTMLLIElement>(null);\n\n  // Use the triggerRef from submenu context if present\n  const elementRef = (submenuContext?.triggerRef ?? ref) as any;\n\n  const {\n    menuItemProps,\n    labelProps,\n    descriptionProps,\n    keyboardShortcutProps,\n    isFocused,\n    isSelected,\n    isPressed,\n    isDisabled,\n  } = useMenuItem(\n    {\n      isSelected: state.selectionManager.isSelected(key),\n      isDisabled: isDisabledKey,\n      'aria-label': item['aria-label'],\n      key,\n      onClose: submenuContext ? undefined : onClose, // Don't close menu for submenu triggers\n      closeOnSelect: submenuContext ? false : closeOnSelect, // Don't close on submenu trigger selection\n      isVirtualized,\n      onAction: submenuContext?.onAction || onAction,\n    },\n    state,\n    elementRef,\n  );\n\n  // Selection indicator will be handled by Item component\n  const isVirtualFocused = state.selectionManager.focusedKey === key;\n\n  const mods = {\n    ...itemMods,\n    focused: isFocused || isVirtualFocused,\n    pressed: isPressed,\n    selected: isSelected,\n    disabled: isDisabled,\n    submenu: !!submenuContext,\n    menuitem: true,\n  };\n\n  return (\n    <FocusRing>\n      <Item\n        {...mergeProps(menuItemProps, filteredItemProps, {\n          'data-popover-trigger': true,\n          qa: itemQa ? itemQa : `MenuItem-${key}`,\n          mods,\n          styles,\n          'data-size': size,\n          as: 'li',\n          labelProps,\n          descriptionProps,\n          keyboardShortcutProps,\n          'aria-haspopup': submenuContext ? 'menu' : undefined,\n          'aria-expanded': submenuContext?.isOpen,\n          'data-has-submenu': submenuContext ? true : undefined,\n          onKeyDown: submenuContext?.onKeyDown\n            ? (e: KeyboardEvent) => {\n                // Call submenu handler first, if it prevents default, don't call the original\n                submenuContext.onKeyDown?.(e);\n                if (!e.defaultPrevented && menuItemProps.onKeyDown) {\n                  menuItemProps.onKeyDown(e);\n                }\n              }\n            : menuItemProps.onKeyDown,\n          onMouseEnter:\n            submenuContext?.onMouseEnter || menuItemProps.onMouseEnter,\n          onMouseLeave:\n            submenuContext?.onMouseLeave || menuItemProps.onMouseLeave,\n        })}\n        ref={elementRef}\n        disableActionsFocus={true}\n        rightIcon={submenuContext ? <RightIcon /> : filteredItemProps.rightIcon}\n        defaultTooltipPlacement=\"right\"\n        isSelected={isSelectable ? isSelected : undefined}\n        isDisabled={isDisabled}\n        size={size === 'small' ? 'small' : 'medium'}\n      >\n        {rendered}\n      </Item>\n    </FocusRing>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA2BA,SAAgB,SAAY,OAAyB;CACnD,MAAM,EAAE,MAAM,OAAO,QAAQ,eAAe,UAAU,SAAS;CAC/D,MAAM,EAAE,SAAS,kBAAkB,gBAAgB;CACnD,MAAM,EAAE,UAAU,KAAK,OAAO,cAAc;CAG5C,MAAM,iBAAiB,WAAW,sBAAsB;CAIxD,MAAM,oBAAoB,0BAA0B,UAAU;CAG9D,MAAM,EAAE,SAAS,MAAM,UAAU,IAAI,WAAW;CAEhD,MAAM,eAAe,MAAM,iBAAiB,kBAAkB;CAC9D,MAAM,gBACJ,MAAM,aAAa,IAAI,IAAI,IAAI,gBAAgB;CAEjD,MAAM,MAAM,OAAsB,KAAK;CAGvC,MAAM,aAAc,gBAAgB,cAAc;CAElD,MAAM,EACJ,eACA,YACA,kBACA,uBACA,WACA,YACA,WACA,eACE,YACF;EACE,YAAY,MAAM,iBAAiB,WAAW,IAAI;EAClD,YAAY;EACZ,cAAc,KAAK;EACnB;EACA,SAAS,iBAAiB,SAAY;EACtC,eAAe,iBAAiB,QAAQ;EACxC;EACA,UAAU,gBAAgB,YAAY;EACvC,EACD,OACA,WACD;CAGD,MAAM,mBAAmB,MAAM,iBAAiB,eAAe;CAE/D,MAAM,OAAO;EACX,GAAG;EACH,SAAS,aAAa;EACtB,SAAS;EACT,UAAU;EACV,UAAU;EACV,SAAS,CAAC,CAAC;EACX,UAAU;EACX;AAED,QACE,oBAAC,uBACC,oBAACA;EACC,GAAIC,aAAW,eAAe,mBAAmB;GAC/C,wBAAwB;GACxB,IAAI,SAAS,SAAS,YAAY;GAClC;GACA;GACA,aAAa;GACb,IAAI;GACJ;GACA;GACA;GACA,iBAAiB,iBAAiB,SAAS;GAC3C,iBAAiB,gBAAgB;GACjC,oBAAoB,iBAAiB,OAAO;GAC5C,WAAW,gBAAgB,aACtB,MAAqB;AAEpB,mBAAe,YAAY,EAAE;AAC7B,QAAI,CAAC,EAAE,oBAAoB,cAAc,UACvC,eAAc,UAAU,EAAE;OAG9B,cAAc;GAClB,cACE,gBAAgB,gBAAgB,cAAc;GAChD,cACE,gBAAgB,gBAAgB,cAAc;GACjD,CAAC;EACF,KAAK;EACL,qBAAqB;EACrB,WAAW,iBAAiB,oBAAC,cAAY,GAAG,kBAAkB;EAC9D,yBAAwB;EACxB,YAAY,eAAe,aAAa;EAC5B;EACZ,MAAM,SAAS,UAAU,UAAU;YAElC;GACI,GACG"}

package/dist/components/actions/Menu/MenuSection.d.ts

@@ -0,0 +1,17 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import "../../../tasty/index.js";
+import { MenuItemProps } from "./MenuItem.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/actions/Menu/MenuSection.d.ts
+interface CubeMenuSectionProps<T> extends MenuItemProps<T> {
+  itemStyles?: Styles;
+  headingStyles?: Styles;
+  size?: 'small' | 'medium' | (string & {});
+}
+/** @private */
+declare function MenuSection<T>(props: CubeMenuSectionProps<T>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CubeMenuSectionProps, MenuSection };
+//# sourceMappingURL=MenuSection.d.ts.map

package/dist/components/actions/Menu/MenuSection.js

@@ -0,0 +1,51 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
+import { MenuItem } from "./MenuItem.js";
+import { StyledMenu, StyledSection, StyledSectionHeading } from "./styled.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMenuSection } from "react-aria";
+
+//#region src/components/actions/Menu/MenuSection.tsx
+/** @private */
+function MenuSection(props) {
+	const { item, state, styles, itemStyles, headingStyles, size } = props;
+	const heading = item.rendered;
+	const { itemProps, headingProps, groupProps } = useMenuSection({
+		heading,
+		"aria-label": item["aria-label"]
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(StyledSection, {
+		...itemProps,
+		styles,
+		children: [heading && /* @__PURE__ */ jsx(StyledSectionHeading, {
+			...headingProps,
+			size,
+			styles: headingStyles,
+			children: heading
+		}), /* @__PURE__ */ jsx(StyledMenu, {
+			...groupProps,
+			mods: { section: true },
+			children: [...item.childNodes].map((node) => {
+				let menuItem = /* @__PURE__ */ jsx(MenuItem, {
+					item: node,
+					styles: itemStyles,
+					state,
+					size,
+					onAction: node.onAction
+				}, node.key);
+				if (node.props.tooltip) menuItem = /* @__PURE__ */ jsx(TooltipProvider, {
+					activeWrap: true,
+					placement: "right",
+					...typeof node.props.tooltip === "string" ? { title: node.props.tooltip } : node.props.tooltip,
+					children: menuItem
+				}, node.key);
+				if (node.props.wrapper) menuItem = node.props.wrapper(menuItem);
+				return menuItem;
+			})
+		})]
+	}) });
+}
+
+//#endregion
+export { MenuSection };
+//# sourceMappingURL=MenuSection.js.map

package/dist/components/actions/Menu/MenuSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuSection.js","names":[],"sources":["../../../../src/components/actions/Menu/MenuSection.tsx"],"sourcesContent":["import { useMenuSection } from 'react-aria';\n\nimport { Styles } from '../../../tasty';\nimport { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider';\n\nimport { MenuItem, MenuItemProps } from './MenuItem';\nimport { StyledMenu, StyledSection, StyledSectionHeading } from './styled';\n\nexport interface CubeMenuSectionProps<T> extends MenuItemProps<T> {\n  itemStyles?: Styles;\n  headingStyles?: Styles;\n  size?: 'small' | 'medium' | (string & {});\n}\n\n/** @private */\nexport function MenuSection<T>(props: CubeMenuSectionProps<T>) {\n  const { item, state, styles, itemStyles, headingStyles, size } = props;\n  const heading = item.rendered;\n  const { itemProps, headingProps, groupProps } = useMenuSection({\n    heading,\n    'aria-label': item['aria-label'],\n  });\n\n  return (\n    <>\n      <StyledSection {...itemProps} styles={styles}>\n        {heading && (\n          <StyledSectionHeading\n            {...headingProps}\n            size={size}\n            styles={headingStyles}\n          >\n            {heading}\n          </StyledSectionHeading>\n        )}\n        <StyledMenu {...groupProps} mods={{ section: true }}>\n          {[...item.childNodes].map((node) => {\n            let menuItem = (\n              <MenuItem\n                key={node.key}\n                item={node}\n                styles={itemStyles}\n                state={state}\n                size={size}\n                onAction={(node as unknown as MenuItemProps<T>).onAction}\n              />\n            );\n\n            // Apply tooltip wrapper if tooltip property is provided\n            if (node.props.tooltip) {\n              const tooltipProps =\n                typeof node.props.tooltip === 'string'\n                  ? { title: node.props.tooltip }\n                  : node.props.tooltip;\n\n              menuItem = (\n                <TooltipProvider\n                  key={node.key}\n                  activeWrap\n                  placement=\"right\"\n                  {...tooltipProps}\n                >\n                  {menuItem}\n                </TooltipProvider>\n              );\n            }\n\n            if (node.props.wrapper) {\n              menuItem = node.props.wrapper(menuItem);\n            }\n\n            return menuItem;\n          })}\n        </StyledMenu>\n      </StyledSection>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;AAeA,SAAgB,YAAe,OAAgC;CAC7D,MAAM,EAAE,MAAM,OAAO,QAAQ,YAAY,eAAe,SAAS;CACjE,MAAM,UAAU,KAAK;CACrB,MAAM,EAAE,WAAW,cAAc,eAAe,eAAe;EAC7D;EACA,cAAc,KAAK;EACpB,CAAC;AAEF,QACE,0CACE,qBAAC;EAAc,GAAI;EAAmB;aACnC,WACC,oBAAC;GACC,GAAI;GACE;GACN,QAAQ;aAEP;IACoB,EAEzB,oBAAC;GAAW,GAAI;GAAY,MAAM,EAAE,SAAS,MAAM;aAChD,CAAC,GAAG,KAAK,WAAW,CAAC,KAAK,SAAS;IAClC,IAAI,WACF,oBAAC;KAEC,MAAM;KACN,QAAQ;KACD;KACD;KACN,UAAW,KAAqC;OAL3C,KAAK,IAMV;AAIJ,QAAI,KAAK,MAAM,QAMb,YACE,oBAAC;KAEC;KACA,WAAU;KACV,GATF,OAAO,KAAK,MAAM,YAAY,WAC1B,EAAE,OAAO,KAAK,MAAM,SAAS,GAC7B,KAAK,MAAM;eASZ;OALI,KAAK,IAMM;AAItB,QAAI,KAAK,MAAM,QACb,YAAW,KAAK,MAAM,QAAQ,SAAS;AAGzC,WAAO;KACP;IACS;GACC,GACf"}

package/dist/components/actions/Menu/MenuTrigger.d.ts

@@ -0,0 +1,21 @@
+
+import * as react from "react";
+import { ReactElement } from "react";
+import { AriaMenuTriggerProps as AriaMenuTriggerProps$1, PositionProps } from "react-aria";
+import { MenuTriggerState } from "react-stately";
+
+//#region src/components/actions/Menu/MenuTrigger.d.ts
+type CubeMenuTriggerProps = AriaMenuTriggerProps$1 & PositionProps & {
+  isDisabled?: boolean;
+  children: [ReactElement | ((state: MenuTriggerState) => ReactElement), ReactElement];
+  closeOnSelect?: boolean;
+  isDummy?: boolean;
+};
+/**
+ * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,
+ * linking the Menu's open state with the trigger's press state.
+ */
+declare let _MenuTrigger: react.ForwardRefExoticComponent<any>;
+//#endregion
+export { type AriaMenuTriggerProps$1 as AriaMenuTriggerProps, CubeMenuTriggerProps, _MenuTrigger };
+//# sourceMappingURL=MenuTrigger.d.ts.map

package/dist/components/actions/Menu/MenuTrigger.js

@@ -0,0 +1,141 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { SlotProvider } from "../../../utils/react/Slots.js";
+import { useEventBus } from "../../../utils/react/useEventBus.js";
+import { MenuContext } from "./context.js";
+import { generateRandomId } from "../../../utils/random.js";
+import { _Tray } from "../../overlays/Modal/Tray.js";
+import { _Popover } from "../../overlays/Modal/Popover.js";
+import { Fragment, forwardRef, useEffect, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { DismissButton, useMenuTrigger, useOverlayPosition } from "react-aria";
+import { useDOMRef, useIsMobileDevice } from "@react-spectrum/utils";
+import { useMenuTriggerState } from "react-stately";
+import { PressResponder } from "@react-aria/interactions";
+
+//#region src/components/actions/Menu/MenuTrigger.tsx
+function MenuTrigger(props, ref) {
+	const menuPopoverRef = useRef(null);
+	const triggerRef = useRef(null);
+	const domRef = useDOMRef(ref);
+	const menuTriggerRef = props.targetRef || domRef || triggerRef;
+	const menuRef = useRef(null);
+	const wasOpenRef = useRef(false);
+	const { children, shouldFlip = true, closeOnSelect, trigger = "press", isDisabled, isDummy } = props;
+	const menuId = useMemo(() => generateRandomId(), []);
+	const { emit, on } = useEventBus();
+	if (!Array.isArray(children) || children.length > 2) throw new Error("MenuTrigger must have exactly 2 children");
+	let [menuTrigger, menu] = children;
+	const state = useMenuTriggerState(props);
+	useEffect(() => {
+		return on("popover:open", (data) => {
+			if (data.menuId !== menuId && state.isOpen && !isDummy) state.close();
+		});
+	}, [
+		on,
+		menuId,
+		state
+	]);
+	useEffect(() => {
+		if (state.isOpen && !isDummy) emit("popover:open", { menuId });
+	}, [
+		state.isOpen,
+		emit,
+		menuId,
+		isDummy
+	]);
+	useEffect(() => {
+		if (!state.isOpen && wasOpenRef.current && !isDummy) {
+			wasOpenRef.current = false;
+			setTimeout(() => {
+				menuTriggerRef.current?.focus();
+			}, 0);
+		} else if (state.isOpen) wasOpenRef.current = true;
+	}, [
+		state.isOpen,
+		menuTriggerRef,
+		isDummy
+	]);
+	if (typeof menuTrigger === "function") menuTrigger = menuTrigger(state);
+	const { menuTriggerProps, menuProps } = useMenuTrigger({ isDisabled }, state, menuTriggerRef);
+	let initialPlacement = props.placement ?? "bottom start";
+	const isMobile = useIsMobileDevice();
+	const { overlayProps: positionProps, placement } = useOverlayPosition({
+		targetRef: menuTriggerRef,
+		overlayRef: menuPopoverRef,
+		scrollRef: menuRef,
+		placement: initialPlacement,
+		shouldFlip,
+		isOpen: state.isOpen && !isMobile,
+		onClose: state.close,
+		containerPadding: props.containerPadding,
+		offset: props.offset ?? 8,
+		crossOffset: props.crossOffset ?? 0
+	});
+	const menuContext = {
+		...menuProps,
+		ref: menuRef,
+		onClose: state.close,
+		closeOnSelect,
+		autoFocus: state.focusStrategy ?? "first",
+		style: isMobile ? {
+			width: "100%",
+			maxHeight: "inherit"
+		} : void 0,
+		mods: {
+			popover: !isMobile,
+			tray: isMobile
+		},
+		isClosing: !state.isOpen
+	};
+	const contents = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close }),
+		menu,
+		/* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close })
+	] });
+	let overlay;
+	if (isMobile) overlay = /* @__PURE__ */ jsx(_Tray, {
+		isOpen: state.isOpen,
+		onClose: state.close,
+		children: contents
+	});
+	else overlay = /* @__PURE__ */ jsx(_Popover, {
+		ref: menuPopoverRef,
+		hideArrow: true,
+		isNonModal: true,
+		isOpen: state.isOpen,
+		style: positionProps.style,
+		placement,
+		shouldCloseOnInteractOutside: (el) => {
+			const menuTriggerEl = el.closest("[data-popover-trigger]");
+			if (!menuTriggerEl) return true;
+			if (isDummy && (menuTriggerEl === menuTriggerRef.current || menuTriggerRef.current?.contains(el))) return true;
+			if (menuTriggerEl === menuTriggerRef.current) return true;
+			return false;
+		},
+		onClose: state.close,
+		children: contents
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SlotProvider, {
+		slots: { actionButton: { holdAffordance: trigger === "longPress" } },
+		children: !isDummy ? /* @__PURE__ */ jsx(PressResponder, {
+			...menuTriggerProps,
+			ref: menuTriggerRef,
+			"data-popover-trigger": true,
+			isPressed: state.isOpen,
+			children: menuTrigger
+		}) : null
+	}), /* @__PURE__ */ jsx(MenuContext.Provider, {
+		value: menuContext,
+		children: overlay
+	})] });
+}
+/**
+* The MenuTrigger serves as a wrapper around a Menu and its associated trigger,
+* linking the Menu's open state with the trigger's press state.
+*/
+let _MenuTrigger = forwardRef(MenuTrigger);
+_MenuTrigger.displayName = "MenuTrigger";
+
+//#endregion
+export { _MenuTrigger };
+//# sourceMappingURL=MenuTrigger.js.map

package/dist/components/actions/Menu/MenuTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTrigger.js","names":["Tray","Popover"],"sources":["../../../../src/components/actions/Menu/MenuTrigger.tsx"],"sourcesContent":["import { PressResponder } from '@react-aria/interactions';\nimport { useDOMRef, useIsMobileDevice } from '@react-spectrum/utils';\nimport { DOMRef } from '@react-types/shared';\nimport {\n  forwardRef,\n  Fragment,\n  ReactElement,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  AriaMenuTriggerProps,\n  DismissButton,\n  Placement,\n  PositionProps,\n  useMenuTrigger,\n  useOverlayPosition,\n} from 'react-aria';\nimport { MenuTriggerState, useMenuTriggerState } from 'react-stately';\n\nimport { generateRandomId } from '../../../utils/random';\nimport { SlotProvider } from '../../../utils/react';\nimport { useEventBus } from '../../../utils/react/useEventBus';\nimport { Popover, Tray } from '../../overlays/Modal';\n\nimport { MenuContext, MenuContextValue } from './context';\n\nexport type { AriaMenuTriggerProps };\n\nexport type CubeMenuTriggerProps = AriaMenuTriggerProps &\n  PositionProps & {\n    isDisabled?: boolean;\n    children: [\n      ReactElement | ((state: MenuTriggerState) => ReactElement),\n      ReactElement,\n    ];\n\n    closeOnSelect?: boolean;\n    isDummy?: boolean;\n  };\n\nfunction MenuTrigger(props: CubeMenuTriggerProps, ref: DOMRef<HTMLElement>) {\n  const menuPopoverRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLElement>(null);\n  const domRef = useDOMRef(ref);\n  const menuTriggerRef = props.targetRef || domRef || triggerRef;\n  const menuRef = useRef<HTMLUListElement>(null);\n  const wasOpenRef = useRef(false);\n  const {\n    children,\n    shouldFlip = true,\n    closeOnSelect,\n    trigger = 'press',\n    isDisabled,\n    isDummy,\n  } = props;\n\n  // Generate a unique ID for this menu instance\n  const menuId = useMemo(() => generateRandomId(), []);\n\n  // Get event bus for menu synchronization\n  const { emit, on } = useEventBus();\n\n  if (!Array.isArray(children) || children.length > 2) {\n    throw new Error('MenuTrigger must have exactly 2 children');\n  }\n\n  let [menuTrigger, menu] = children;\n  const state: MenuTriggerState = useMenuTriggerState(props);\n\n  // Listen for other menus opening and close this one if needed\n  useEffect(() => {\n    const unsubscribe = on('popover:open', (data: { menuId: string }) => {\n      // If another menu is opening and this menu is open, close this one\n      if (data.menuId !== menuId && state.isOpen && !isDummy) {\n        state.close();\n      }\n    });\n\n    return unsubscribe;\n  }, [on, menuId, state]);\n\n  // Emit event when this menu opens\n  useEffect(() => {\n    if (state.isOpen && !isDummy) {\n      emit('popover:open', { menuId });\n    }\n  }, [state.isOpen, emit, menuId, isDummy]);\n\n  // Restore focus manually when the menu closes\n  useEffect(() => {\n    if (!state.isOpen && wasOpenRef.current && !isDummy) {\n      wasOpenRef.current = false;\n      // Use setTimeout to ensure focus restoration happens after any animations\n      setTimeout(() => {\n        menuTriggerRef.current?.focus();\n      }, 0);\n    } else if (state.isOpen) {\n      wasOpenRef.current = true;\n    }\n  }, [state.isOpen, menuTriggerRef, isDummy]);\n\n  if (typeof menuTrigger === 'function') {\n    menuTrigger = (menuTrigger as CubeMenuTriggerProps['children'][0])(state);\n  }\n\n  const { menuTriggerProps, menuProps } = useMenuTrigger(\n    { isDisabled },\n    state,\n    menuTriggerRef,\n  );\n\n  let initialPlacement: Placement = props.placement ?? 'bottom start';\n\n  const isMobile = useIsMobileDevice();\n  const { overlayProps: positionProps, placement } = useOverlayPosition({\n    targetRef: menuTriggerRef,\n    overlayRef: menuPopoverRef,\n    scrollRef: menuRef,\n    placement: initialPlacement,\n    shouldFlip: shouldFlip,\n    isOpen: state.isOpen && !isMobile,\n    onClose: state.close,\n    containerPadding: props.containerPadding,\n    offset: props.offset ?? 8,\n    crossOffset: props.crossOffset ?? 0,\n  });\n\n  const menuContext = {\n    ...menuProps,\n    ref: menuRef,\n    onClose: state.close,\n    closeOnSelect,\n    autoFocus: (state.focusStrategy as any) ?? 'first',\n    style: isMobile\n      ? {\n          width: '100%',\n          maxHeight: 'inherit',\n        }\n      : undefined,\n    mods: {\n      popover: !isMobile,\n      tray: isMobile,\n    },\n    isClosing: !state.isOpen,\n  } as MenuContextValue;\n\n  const contents = (\n    <>\n      <DismissButton onDismiss={state.close} />\n      {menu}\n      <DismissButton onDismiss={state.close} />\n    </>\n  );\n\n  // On small screen devices, the menu is rendered in a tray, otherwise a popover.\n  let overlay;\n  if (isMobile) {\n    overlay = (\n      <Tray isOpen={state.isOpen} onClose={state.close}>\n        {contents}\n      </Tray>\n    );\n  } else {\n    overlay = (\n      <Popover\n        ref={menuPopoverRef}\n        hideArrow\n        isNonModal\n        isOpen={state.isOpen}\n        style={positionProps.style}\n        placement={placement}\n        shouldCloseOnInteractOutside={(el) => {\n          const menuTriggerEl = el.closest('[data-popover-trigger]');\n          // If no menu trigger was clicked, allow closing\n          if (!menuTriggerEl) return true;\n          // For dummy triggers (like useAnchoredMenu), check if the clicked element\n          // is the target element or its descendant\n          if (\n            isDummy &&\n            (menuTriggerEl === menuTriggerRef.current ||\n              menuTriggerRef.current?.contains(el))\n          ) {\n            return true;\n          }\n          // If the same trigger that opened this menu was clicked, allow closing\n          if (menuTriggerEl === menuTriggerRef.current) return true;\n          // Otherwise, don't close (let event mechanism handle it)\n          return false;\n        }}\n        onClose={state.close}\n      >\n        {contents}\n      </Popover>\n    );\n  }\n\n  return (\n    <Fragment>\n      <SlotProvider\n        slots={{ actionButton: { holdAffordance: trigger === 'longPress' } }}\n      >\n        {!isDummy ? (\n          <PressResponder\n            {...menuTriggerProps}\n            ref={menuTriggerRef}\n            data-popover-trigger\n            isPressed={state.isOpen}\n          >\n            {menuTrigger}\n          </PressResponder>\n        ) : null}\n      </SlotProvider>\n      <MenuContext.Provider value={menuContext}>{overlay}</MenuContext.Provider>\n    </Fragment>\n  );\n}\n\n/**\n * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,\n * linking the Menu's open state with the trigger's press state.\n */\nlet _MenuTrigger = forwardRef(MenuTrigger);\n\n_MenuTrigger.displayName = 'MenuTrigger';\n\nexport { _MenuTrigger as MenuTrigger };\n"],"mappings":"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"}

package/dist/components/actions/Menu/SubMenuTrigger.d.ts

@@ -0,0 +1,50 @@
+
+import { Key, ReactElement, ReactNode } from "react";
+import { AriaMenuTriggerProps, Placement } from "react-aria";
+
+//#region src/components/actions/Menu/SubMenuTrigger.d.ts
+interface CubeSubMenuTriggerProps extends AriaMenuTriggerProps {
+  /** The preferred placement of the sub-menu relative to the trigger */
+  placement?: Placement;
+  /** Distance in pixels between the trigger and sub-menu */
+  offset?: number;
+  /** Distance in pixels along the cross axis from the default alignment */
+  crossOffset?: number;
+  /** Whether the sub-menu should flip to the opposite side when it would overflow */
+  shouldFlip?: boolean;
+  /** Minimum padding in pixels between the sub-menu and viewport edges */
+  containerPadding?: number;
+  /**
+   * Sub-menu trigger and the sub-menu itself. Must be exactly two React nodes.
+   *
+   * 1) Trigger – **must render `<li role="menuitem">`** (usually `Menu.Item`).
+   * 2) Sub-menu – a `<Menu>` element.
+   */
+  children: [ReactNode, ReactElement];
+  /** Whether the trigger is disabled and cannot be activated */
+  isDisabled?: boolean;
+  /**
+   * Callback fired when an action is selected from the sub-menu.
+   * Bubbles the `onAction` event from the sub-menu to parent components.
+   */
+  onAction?: (key: Key) => void;
+  /**
+   * Controls focus behavior when the sub-menu opens.
+   * - `true` or `'first'`: Focus the first item
+   * - `'last'`: Focus the last item
+   * - `false`: Don't auto-focus any item
+   * @default 'first'
+   */
+  autoFocus?: boolean | 'first' | 'last';
+}
+/**
+ * Public SubMenuTrigger component that users interact with.
+ * It just provides the getCollectionNode for the collection system.
+ */
+declare function SubMenuTrigger(props: CubeSubMenuTriggerProps): null;
+declare namespace SubMenuTrigger {
+  var displayName: string;
+}
+//#endregion
+export { CubeSubMenuTriggerProps, SubMenuTrigger };
+//# sourceMappingURL=SubMenuTrigger.d.ts.map