@cube-dev/ui-kit 0.141.0 → 0.142.1

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

@@ -1 +1 @@
-{"version":3,"file":"CommandMenu.js","names":["mergeProps","MenuTrigger"],"sources":["../../../../src/components/actions/CommandMenu/CommandMenu.tsx"],"sourcesContent":["import { useSyncRef } from '@react-aria/utils';\nimport { useDOMRef } from '@react-spectrum/utils';\nimport { DOMRef, FocusStrategy } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n} from '@tenphi/tasty';\nimport React, {\n  Key,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFilter, useMenu } from 'react-aria';\n// Import Item and Section from Menu for CommandMenu compound component\nimport { Item, Section, useTreeState } from 'react-stately';\n\nimport { LoadingIcon } from '../../../icons';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider';\nimport { useMenuContext } from '../Menu';\nimport { CubeMenuProps } from '../Menu/Menu';\nimport { MenuItem } from '../Menu/MenuItem';\nimport { MenuSection } from '../Menu/MenuSection';\nimport { MenuTrigger } from '../Menu/MenuTrigger';\nimport {\n  StyledDivider,\n  StyledFooter,\n  StyledHeader,\n  StyledMenu,\n} from '../Menu/styled';\n\nimport {\n  StyledCommandMenu,\n  StyledEmptyState,\n  StyledLoadingWrapper,\n  StyledSearchInput,\n} from './styled';\n\nexport interface CommandMenuItem {\n  // Standard item props\n  id: string;\n  textValue: string;\n\n  // Enhanced search features\n  keywords?: string[];\n  forceMount?: boolean;\n\n  // Standard Menu item props inherited\n  [key: string]: any;\n}\n\nexport interface CubeCommandMenuProps<T>\n  extends BaseProps,\n    ContainerStyleProps,\n    Omit<\n      CubeMenuProps<T>,\n      'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange'\n    > {\n  // Search-specific props\n  searchPlaceholder?: string;\n  searchValue?: string;\n  onSearchChange?: (value: string) => void;\n  filter?: (textValue: string, inputValue: string) => boolean;\n  emptyLabel?: ReactNode;\n  searchInputStyles?: Styles;\n  headerStyles?: Styles;\n  footerStyles?: Styles;\n\n  // Advanced search features\n  isLoading?: boolean;\n  shouldFilter?: boolean;\n\n  // Focus management - override the autoFocus from CubeMenuProps to allow boolean | FocusStrategy\n  autoFocus?: boolean | FocusStrategy;\n\n  // Size prop\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 CommandMenu<T extends object>(\n  props: CubeCommandMenuProps<T>,\n  ref: DOMRef<HTMLDivElement>,\n) {\n  const {\n    searchPlaceholder = 'Search commands...',\n    searchValue: controlledSearchValue,\n    onSearchChange,\n    filter: customFilter,\n    emptyLabel = 'No commands found',\n    searchInputStyles,\n    headerStyles,\n    footerStyles,\n    isLoading = false,\n    shouldFilter = true,\n    autoFocus = true,\n    size = 'medium',\n    qa,\n    styles,\n    selectedKeys,\n    defaultSelectedKeys,\n    onSelectionChange,\n    header,\n    footer,\n    ...restMenuProps\n  } = props;\n\n  const domRef = useDOMRef(ref);\n  const searchInputRef = useRef<HTMLInputElement>(null);\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: 'all' | Set<Key>) => {\n        if (keys === 'all') {\n          // Handle 'all' selection case - collect all available keys\n          const allKeys = Array.from(treeState.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, restMenuProps, {\n    selectedKeys: ariaSelectedKeys,\n    defaultSelectedKeys: ariaDefaultSelectedKeys,\n    onSelectionChange: handleSelectionChange,\n  });\n\n  // Search state management\n  const [internalSearchValue, setInternalSearchValue] = useState('');\n  const searchValue = controlledSearchValue ?? internalSearchValue;\n\n  const handleSearchChange = useCallback(\n    (value: string) => {\n      if (controlledSearchValue === undefined) {\n        setInternalSearchValue(value);\n      }\n      onSearchChange?.(value);\n    },\n    [controlledSearchValue, onSearchChange],\n  );\n\n  // Filter setup\n  const { contains } = useFilter({ sensitivity: 'base' });\n  const textFilterFn = useMemo(\n    () => customFilter || contains,\n    [customFilter, contains],\n  );\n\n  // Enhanced filter function that supports keywords and forceMount\n  const enhancedFilter = useCallback(\n    (textValue: string, inputValue: string, item?: any) => {\n      // Always show force-mounted items\n      if (item?.forceMount) {\n        return true;\n      }\n\n      // If shouldFilter is false, show all items\n      if (!shouldFilter) {\n        return true;\n      }\n\n      // Split input value into individual words and filter out empty strings\n      const searchWords = inputValue\n        .trim()\n        .toLowerCase()\n        .split(/\\s+/)\n        .filter((word) => word.length > 0);\n\n      // If no search words, show all items\n      if (searchWords.length === 0) {\n        return true;\n      }\n\n      // Collect all searchable text for this item\n      const searchableTexts: string[] = [];\n\n      // Add main text value\n      searchableTexts.push(textValue.toLowerCase());\n\n      // Add keywords if available\n      if (item?.keywords && Array.isArray(item.keywords)) {\n        searchableTexts.push(\n          ...item.keywords.map((keyword: string) => keyword.toLowerCase()),\n        );\n      }\n\n      // Check if ALL search words match at least one of the searchable texts\n      return searchWords.every((searchWord) =>\n        searchableTexts.some((text) => text.includes(searchWord)),\n      );\n    },\n    [shouldFilter],\n  );\n\n  // Collection filter for React Stately\n  const collectionFilter = useCallback(\n    (nodes: Iterable<any>): Iterable<any> => {\n      const term = searchValue.trim();\n\n      // If no search term, return all nodes\n      if (!term) {\n        return nodes;\n      }\n\n      // Split search term into words for multi-word filtering\n      const searchWords = term\n        .toLowerCase()\n        .split(/\\s+/)\n        .filter((word) => word.length > 0);\n\n      // If no valid search words, return all nodes\n      if (searchWords.length === 0) {\n        return nodes;\n      }\n\n      // Recursive helper to filter sections and items\n      const filterNodes = (iter: Iterable<any>): any[] => {\n        const result: any[] = [];\n\n        for (const node of iter) {\n          if (node.type === 'section') {\n            const filteredChildren = filterNodes(node.childNodes);\n\n            if (filteredChildren.length) {\n              result.push({\n                ...node,\n                childNodes: filteredChildren,\n              });\n            }\n          } else {\n            const text = node.textValue ?? String(node.rendered ?? '');\n\n            if (enhancedFilter(text, term, node.props)) {\n              result.push(node);\n            }\n          }\n        }\n\n        return result;\n      };\n\n      return filterNodes(nodes);\n    },\n    [searchValue, enhancedFilter],\n  );\n\n  // Create tree state with filter for both keyboard navigation and rendering\n  const treeStateProps = {\n    ...completeProps,\n    filter: collectionFilter,\n    shouldUseVirtualFocus: true, // Always use virtual focus for CommandMenu\n  };\n\n  const treeState = useTreeState(treeStateProps);\n\n  const collectionItems = [...treeState.collection];\n  const hasSections = collectionItems.some((item) => item.type === 'section');\n\n  // Track focused key for aria-activedescendant\n  const [focusedKey, setFocusedKey] = React.useState<React.Key | null>(null);\n  const focusedKeyRef = useRef<React.Key | null>(null);\n\n  // Apply filtering to collection items for rendering and empty state checks\n  const filteredCollectionItems = useMemo(() => {\n    const term = searchValue.trim();\n    if (!term) {\n      return collectionItems;\n    }\n\n    // Split search term into words for multi-word filtering\n    const searchWords = term\n      .toLowerCase()\n      .split(/\\s+/)\n      .filter((word) => word.length > 0);\n\n    // If no valid search words, return all items\n    if (searchWords.length === 0) {\n      return collectionItems;\n    }\n\n    const filterNodes = (items: any[]): any[] => {\n      const result: any[] = [];\n\n      [...items].forEach((item) => {\n        if (item.type === 'section') {\n          const filteredChildren = filterNodes(item.childNodes);\n          if (filteredChildren.length) {\n            result.push({\n              ...item,\n              childNodes: filteredChildren,\n            });\n          }\n        } else {\n          const text = item.textValue ?? String(item.rendered ?? '');\n          if (enhancedFilter(text, term, item.props)) {\n            result.push(item);\n          }\n        }\n      });\n\n      return result;\n    };\n\n    return filterNodes(collectionItems);\n  }, [collectionItems, searchValue, enhancedFilter]);\n\n  const hasFilteredItems = filteredCollectionItems.length > 0;\n  const viewHasSections = filteredCollectionItems.some(\n    (item) => item.type === 'section',\n  );\n\n  // Helper function to find the first selectable item from filtered results\n  const findFirstSelectableItem = useCallback(() => {\n    const { selectionManager } = treeState;\n\n    const visit = (items: any[]): Key | null => {\n      for (const node of items) {\n        if (node?.type === 'section') {\n          const childResult = visit(Array.from(node.childNodes ?? []));\n          if (childResult != null) return childResult;\n        } else if (\n          node?.type === 'item' &&\n          !selectionManager.isDisabled(node.key)\n        ) {\n          return node.key;\n        }\n      }\n      return null;\n    };\n\n    return visit(filteredCollectionItems);\n  }, [filteredCollectionItems, treeState.selectionManager]);\n\n  // Create a ref for the menu container\n  const menuRef = useRef<HTMLUListElement>(null);\n\n  // Use menu hook for accessibility\n  const { menuProps } = useMenu(\n    {\n      ...completeProps,\n      'aria-label': 'Command palette menu',\n      filter: collectionFilter,\n      shouldUseVirtualFocus: true,\n    },\n    treeState,\n    menuRef,\n  );\n\n  // Manual rendering of menu items (similar to Menu component)\n  const renderedItems = useMemo(() => {\n    const items: React.ReactNode[] = [];\n    let isFirstSection = true;\n\n    filteredCollectionItems.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={treeState}\n            styles={completeProps.sectionStyles}\n            itemStyles={completeProps.itemStyles}\n            headingStyles={completeProps.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={treeState}\n          styles={completeProps.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\n            key={item.key}\n            activeWrap\n            placement=\"right\"\n            {...tooltipProps}\n          >\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      }\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  }, [\n    filteredCollectionItems,\n    treeState,\n    completeProps.sectionStyles,\n    completeProps.itemStyles,\n\n    completeProps.sectionHeadingStyles,\n  ]);\n\n  // Auto-focus search input\n  React.useEffect(() => {\n    if (autoFocus && searchInputRef.current) {\n      // Use a small timeout to ensure the element is visible and focusable\n      // This is especially important when the CommandMenu is opened in a popover\n      const timeoutId = setTimeout(() => {\n        if (searchInputRef.current) {\n          searchInputRef.current.focus();\n        }\n      }, 0);\n\n      return () => clearTimeout(timeoutId);\n    }\n  }, [autoFocus]);\n\n  // Also focus when the component becomes visible (for trigger/popover usage)\n  React.useEffect(() => {\n    // Check if autoFocus is enabled and we're in a trigger context\n    if (autoFocus && contextProps.autoFocus && searchInputRef.current) {\n      // Use a small timeout to ensure the popover is fully rendered\n      const timeoutId = setTimeout(() => {\n        if (searchInputRef.current) {\n          searchInputRef.current.focus();\n        }\n      }, 50); // Slightly longer timeout for popover context\n\n      return () => clearTimeout(timeoutId);\n    }\n  }, [autoFocus, contextProps.autoFocus]);\n\n  // Track the previous search value to only run auto-focus when search actually changes\n  const prevSearchValueRef = useRef<string>('');\n\n  // Auto-focus first item when search value changes (but not on initial render)\n  React.useEffect(() => {\n    const currentSearchValue = searchValue.trim();\n    const prevSearchValue = prevSearchValueRef.current;\n\n    // Only auto-focus when search value actually changes\n    if (currentSearchValue !== prevSearchValue && currentSearchValue !== '') {\n      const firstSelectableKey = findFirstSelectableItem();\n\n      if (firstSelectableKey && hasFilteredItems) {\n        // Focus the first item in the selection manager\n        treeState.selectionManager.setFocusedKey(firstSelectableKey);\n        setFocusedKey(firstSelectableKey);\n        focusedKeyRef.current = firstSelectableKey;\n      } else {\n        // Clear focus if no items are available\n        treeState.selectionManager.setFocusedKey(null);\n        setFocusedKey(null);\n        focusedKeyRef.current = null;\n      }\n    }\n\n    // Update the previous search value\n    prevSearchValueRef.current = currentSearchValue;\n  }, [searchValue, findFirstSelectableItem, hasFilteredItems]);\n\n  // Extract styles\n  const extractedStyles = useMemo(\n    () => extractStyles(props, CONTAINER_STYLES),\n    [props],\n  );\n\n  // Determine if we should show empty state based on actual filtered collection\n  const hasSearchTerm = searchValue.trim().length > 0;\n  const showEmptyState = hasSearchTerm && !hasFilteredItems && !isLoading;\n\n  // Sync refs\n  useSyncRef(contextProps, menuRef);\n\n  const mods = useMemo(() => {\n    // Determine mods based on menu context\n    let popoverMod = completeProps.mods?.popover;\n    let trayMod = completeProps.mods?.tray;\n\n    return {\n      sections: viewHasSections,\n      footer: !!footer,\n      header: !!header,\n      popover: popoverMod,\n      tray: trayMod,\n    };\n  }, [viewHasSections, footer, header, completeProps.mods]);\n\n  return (\n    <StyledCommandMenu\n      {...(filterBaseProps(props) as Record<string, unknown>)}\n      ref={domRef}\n      qa={qa || 'CommandMenu'}\n      data-size={size}\n      mods={mods}\n      styles={mergeProps(extractedStyles, styles)}\n    >\n      {/* Header */}\n      {header && (\n        <StyledHeader\n          role=\"presentation\"\n          data-size={size}\n          styles={{ border: 'none', ...headerStyles }}\n        >\n          {header}\n        </StyledHeader>\n      )}\n\n      {/* Search Input */}\n      <StyledSearchInput\n        ref={searchInputRef}\n        type=\"search\"\n        placeholder={searchPlaceholder}\n        value={searchValue}\n        styles={searchInputStyles}\n        data-size={size}\n        aria-controls={`${qa || 'CommandMenu'}-menu`}\n        role=\"combobox\"\n        aria-expanded=\"true\"\n        aria-haspopup=\"listbox\"\n        aria-activedescendant={\n          focusedKey != null\n            ? `${qa || 'CommandMenu'}-menu-option-${focusedKey}`\n            : undefined\n        }\n        onChange={(e) => handleSearchChange(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n            e.preventDefault();\n\n            const isArrowDown = e.key === 'ArrowDown';\n            const { selectionManager } = treeState;\n            // Use the ref to get the current focused key synchronously\n            const currentKey =\n              focusedKeyRef.current || selectionManager.focusedKey;\n\n            // Helper function to get all visible item keys accounting for sections\n            const getVisibleItemKeys = (): Key[] => {\n              const keys: Key[] = [];\n\n              const visit = (items: any[]) => {\n                for (const node of items) {\n                  if (node?.type === 'section') {\n                    visit(Array.from(node.childNodes ?? []));\n                  } else if (node?.type === 'item') {\n                    keys.push(node.key);\n                  }\n                }\n              };\n\n              visit(filteredCollectionItems);\n              return keys;\n            };\n\n            // Helper function to find next selectable key in a direction\n            const findNextSelectableKey = (\n              currentIndex: number,\n              direction: 'forward' | 'backward',\n              visibleKeys: Key[],\n            ) => {\n              const increment = direction === 'forward' ? 1 : -1;\n\n              for (\n                let i = currentIndex + increment;\n                i >= 0 && i < visibleKeys.length;\n                i += increment\n              ) {\n                const key = visibleKeys[i];\n                if (!selectionManager.isDisabled(key)) {\n                  return key;\n                }\n              }\n\n              return null;\n            };\n\n            // Helper function to find first or last selectable key\n            const findFirstLastSelectableKey = (\n              direction: 'forward' | 'backward',\n              visibleKeys: Key[],\n            ) => {\n              const keysToCheck =\n                direction === 'forward'\n                  ? visibleKeys\n                  : [...visibleKeys].reverse();\n\n              for (const key of keysToCheck) {\n                if (!selectionManager.isDisabled(key)) {\n                  return key;\n                }\n              }\n\n              return null;\n            };\n\n            const visibleKeys = getVisibleItemKeys();\n\n            if (visibleKeys.length === 0) {\n              return; // No visible items to navigate\n            }\n\n            let nextKey;\n            const direction = isArrowDown ? 'forward' : 'backward';\n\n            if (currentKey == null) {\n              // No current focus, start from the first/last item\n              nextKey = findFirstLastSelectableKey(direction, visibleKeys);\n            } else {\n              // Find current position in visible keys\n              const currentIndex = visibleKeys.indexOf(currentKey);\n\n              if (currentIndex === -1) {\n                // Current key not in visible items, start from beginning/end\n                nextKey = findFirstLastSelectableKey(direction, visibleKeys);\n              } else {\n                // Find next selectable item from current position\n                nextKey = findNextSelectableKey(\n                  currentIndex,\n                  direction,\n                  visibleKeys,\n                );\n\n                // If no next key found, wrap to first/last selectable item\n                if (nextKey == null) {\n                  nextKey = findFirstLastSelectableKey(direction, visibleKeys);\n                }\n              }\n            }\n\n            if (nextKey != null) {\n              selectionManager.setFocusedKey(nextKey);\n              setFocusedKey(nextKey);\n              focusedKeyRef.current = nextKey; // Update ref immediately\n            }\n          } else if (\n            e.key === 'Enter' ||\n            (e.key === ' ' && !searchValue.trim())\n          ) {\n            const currentFocusedKey =\n              focusedKey || treeState.selectionManager.focusedKey;\n            if (currentFocusedKey != null) {\n              e.preventDefault();\n\n              // Trigger action for the focused item (like Menu does)\n              // First check if there's a selection mode, if so, handle selection\n              if (treeState.selectionManager.selectionMode !== 'none') {\n                treeState.selectionManager.select(currentFocusedKey, e);\n              } else {\n                // Default behavior: trigger action\n                const node = treeState.collection.getItem(currentFocusedKey);\n                if (node) {\n                  // Call the tree state's action handler\n                  const onAction = (completeProps as any).onAction;\n                  if (onAction) {\n                    onAction(currentFocusedKey);\n                  }\n                  // Also call the item's individual onAction if it exists\n                  if (node.props?.onAction) {\n                    node.props.onAction(currentFocusedKey);\n                  }\n                }\n              }\n\n              // Close the menu if we're in a trigger context and closeOnSelect is enabled (default behavior)\n              const { onClose, closeOnSelect } = contextProps;\n              if (onClose && closeOnSelect !== false) {\n                onClose();\n              }\n            }\n          } else if (e.key === 'Escape') {\n            if (searchValue) {\n              e.preventDefault();\n              handleSearchChange('');\n            }\n          }\n        }}\n      />\n\n      {/* Loading State */}\n      {isLoading && (\n        <StyledLoadingWrapper>\n          <LoadingIcon\n            role=\"progressbar\"\n            aria-label=\"Loading commands\"\n            aria-hidden={false}\n          />\n        </StyledLoadingWrapper>\n      )}\n\n      {/* Menu Content - always render unless loading */}\n      {!isLoading && !showEmptyState && (\n        <StyledMenu\n          {...menuProps}\n          ref={menuRef}\n          id={`${qa || 'CommandMenu'}-menu`}\n          aria-label=\"Command menu\"\n          qa=\"Menu\"\n          data-size={size}\n          mods={mods}\n          styles={{\n            border: 'none',\n            boxShadow: 'none',\n            radius: 0,\n            padding: '0.5x',\n          }}\n        >\n          {renderedItems}\n        </StyledMenu>\n      )}\n\n      {/* Empty State - show when search term exists but no results */}\n      {!isLoading && showEmptyState && (\n        <StyledEmptyState>{emptyLabel}</StyledEmptyState>\n      )}\n\n      {/* Footer */}\n      {footer && (\n        <StyledFooter\n          role=\"presentation\"\n          data-size={size}\n          styles={footerStyles}\n        >\n          {footer}\n        </StyledFooter>\n      )}\n    </StyledCommandMenu>\n  );\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\nconst _CommandMenu = React.forwardRef(CommandMenu) as <T>(\n  props: CubeCommandMenuProps<T> & React.RefAttributes<HTMLDivElement>,\n) => ReactElement;\n\n// Attach Trigger alias from MenuTrigger for consistent API\n// Also attach Item and Section for compound component pattern\nconst __CommandMenu = Object.assign(_CommandMenu, {\n  Trigger: MenuTrigger,\n  Item,\n  Section,\n  displayName: 'CommandMenu',\n});\n\nexport { __CommandMenu as CommandMenu };\n"],"mappings":"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"}
+{"version":3,"file":"CommandMenu.js","names":["mergeProps","MenuTrigger"],"sources":["../../../../src/components/actions/CommandMenu/CommandMenu.tsx"],"sourcesContent":["import { useObjectRef, useSyncRef } from '@react-aria/utils';\nimport { FocusStrategy } from '@react-types/shared';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n} from '@tenphi/tasty';\nimport React, {\n  Key,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFilter, useMenu } from 'react-aria';\n// Import Item and Section from Menu for CommandMenu compound component\nimport { Item, Section, useTreeState } from 'react-stately';\n\nimport { LoadingIcon } from '../../../icons';\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\nimport { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider';\nimport { useMenuContext } from '../Menu';\nimport { CubeMenuProps } from '../Menu/Menu';\nimport { MenuItem } from '../Menu/MenuItem';\nimport { MenuSection } from '../Menu/MenuSection';\nimport { MenuTrigger } from '../Menu/MenuTrigger';\nimport {\n  StyledDivider,\n  StyledFooter,\n  StyledHeader,\n  StyledMenu,\n} from '../Menu/styled';\n\nimport {\n  StyledCommandMenu,\n  StyledEmptyState,\n  StyledLoadingWrapper,\n  StyledSearchInput,\n} from './styled';\n\nexport interface CommandMenuItem {\n  // Standard item props\n  id: string;\n  textValue: string;\n\n  // Enhanced search features\n  keywords?: string[];\n  forceMount?: boolean;\n\n  // Standard Menu item props inherited\n  [key: string]: any;\n}\n\nexport interface CubeCommandMenuProps<T>\n  extends BaseProps,\n    ContainerStyleProps,\n    Omit<\n      CubeMenuProps<T>,\n      'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange'\n    > {\n  // Search-specific props\n  searchPlaceholder?: string;\n  searchValue?: string;\n  onSearchChange?: (value: string) => void;\n  filter?: (textValue: string, inputValue: string) => boolean;\n  emptyLabel?: ReactNode;\n  searchInputStyles?: Styles;\n  headerStyles?: Styles;\n  footerStyles?: Styles;\n\n  // Advanced search features\n  isLoading?: boolean;\n  shouldFilter?: boolean;\n\n  // Focus management - override the autoFocus from CubeMenuProps to allow boolean | FocusStrategy\n  autoFocus?: boolean | FocusStrategy;\n\n  // Size prop\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 CommandMenu<T extends object>(\n  props: CubeCommandMenuProps<T>,\n  ref: Ref<HTMLDivElement>,\n) {\n  const {\n    searchPlaceholder = 'Search commands...',\n    searchValue: controlledSearchValue,\n    onSearchChange,\n    filter: customFilter,\n    emptyLabel = 'No commands found',\n    searchInputStyles,\n    headerStyles,\n    footerStyles,\n    isLoading = false,\n    shouldFilter = true,\n    autoFocus = true,\n    size = 'medium',\n    qa,\n    styles,\n    selectedKeys,\n    defaultSelectedKeys,\n    onSelectionChange,\n    header,\n    footer,\n    ...restMenuProps\n  } = props;\n\n  const domRef = useObjectRef(ref);\n  const searchInputRef = useRef<HTMLInputElement>(null);\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: 'all' | Set<Key>) => {\n        if (keys === 'all') {\n          // Handle 'all' selection case - collect all available keys\n          const allKeys = Array.from(treeState.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, restMenuProps, {\n    selectedKeys: ariaSelectedKeys,\n    defaultSelectedKeys: ariaDefaultSelectedKeys,\n    onSelectionChange: handleSelectionChange,\n  });\n\n  // Search state management\n  const [internalSearchValue, setInternalSearchValue] = useState('');\n  const searchValue = controlledSearchValue ?? internalSearchValue;\n\n  const handleSearchChange = useCallback(\n    (value: string) => {\n      if (controlledSearchValue === undefined) {\n        setInternalSearchValue(value);\n      }\n      onSearchChange?.(value);\n    },\n    [controlledSearchValue, onSearchChange],\n  );\n\n  // Filter setup\n  const { contains } = useFilter({ sensitivity: 'base' });\n  const textFilterFn = useMemo(\n    () => customFilter || contains,\n    [customFilter, contains],\n  );\n\n  // Enhanced filter function that supports keywords and forceMount\n  const enhancedFilter = useCallback(\n    (textValue: string, inputValue: string, item?: any) => {\n      // Always show force-mounted items\n      if (item?.forceMount) {\n        return true;\n      }\n\n      // If shouldFilter is false, show all items\n      if (!shouldFilter) {\n        return true;\n      }\n\n      // Split input value into individual words and filter out empty strings\n      const searchWords = inputValue\n        .trim()\n        .toLowerCase()\n        .split(/\\s+/)\n        .filter((word) => word.length > 0);\n\n      // If no search words, show all items\n      if (searchWords.length === 0) {\n        return true;\n      }\n\n      // Collect all searchable text for this item\n      const searchableTexts: string[] = [];\n\n      // Add main text value\n      searchableTexts.push(textValue.toLowerCase());\n\n      // Add keywords if available\n      if (item?.keywords && Array.isArray(item.keywords)) {\n        searchableTexts.push(\n          ...item.keywords.map((keyword: string) => keyword.toLowerCase()),\n        );\n      }\n\n      // Check if ALL search words match at least one of the searchable texts\n      return searchWords.every((searchWord) =>\n        searchableTexts.some((text) => text.includes(searchWord)),\n      );\n    },\n    [shouldFilter],\n  );\n\n  // Collection filter for React Stately\n  const collectionFilter = useCallback(\n    (nodes: Iterable<any>): Iterable<any> => {\n      const term = searchValue.trim();\n\n      // If no search term, return all nodes\n      if (!term) {\n        return nodes;\n      }\n\n      // Split search term into words for multi-word filtering\n      const searchWords = term\n        .toLowerCase()\n        .split(/\\s+/)\n        .filter((word) => word.length > 0);\n\n      // If no valid search words, return all nodes\n      if (searchWords.length === 0) {\n        return nodes;\n      }\n\n      // Recursive helper to filter sections and items\n      const filterNodes = (iter: Iterable<any>): any[] => {\n        const result: any[] = [];\n\n        for (const node of iter) {\n          if (node.type === 'section') {\n            const filteredChildren = filterNodes(node.childNodes);\n\n            if (filteredChildren.length) {\n              result.push({\n                ...node,\n                childNodes: filteredChildren,\n              });\n            }\n          } else {\n            const text = node.textValue ?? String(node.rendered ?? '');\n\n            if (enhancedFilter(text, term, node.props)) {\n              result.push(node);\n            }\n          }\n        }\n\n        return result;\n      };\n\n      return filterNodes(nodes);\n    },\n    [searchValue, enhancedFilter],\n  );\n\n  // Create tree state with filter for both keyboard navigation and rendering\n  const treeStateProps = {\n    ...completeProps,\n    filter: collectionFilter,\n    shouldUseVirtualFocus: true, // Always use virtual focus for CommandMenu\n  };\n\n  const treeState = useTreeState(treeStateProps);\n\n  const collectionItems = [...treeState.collection];\n  const hasSections = collectionItems.some((item) => item.type === 'section');\n\n  // Track focused key for aria-activedescendant\n  const [focusedKey, setFocusedKey] = React.useState<React.Key | null>(null);\n  const focusedKeyRef = useRef<React.Key | null>(null);\n\n  // Apply filtering to collection items for rendering and empty state checks\n  const filteredCollectionItems = useMemo(() => {\n    const term = searchValue.trim();\n    if (!term) {\n      return collectionItems;\n    }\n\n    // Split search term into words for multi-word filtering\n    const searchWords = term\n      .toLowerCase()\n      .split(/\\s+/)\n      .filter((word) => word.length > 0);\n\n    // If no valid search words, return all items\n    if (searchWords.length === 0) {\n      return collectionItems;\n    }\n\n    const filterNodes = (items: any[]): any[] => {\n      const result: any[] = [];\n\n      [...items].forEach((item) => {\n        if (item.type === 'section') {\n          const filteredChildren = filterNodes(item.childNodes);\n          if (filteredChildren.length) {\n            result.push({\n              ...item,\n              childNodes: filteredChildren,\n            });\n          }\n        } else {\n          const text = item.textValue ?? String(item.rendered ?? '');\n          if (enhancedFilter(text, term, item.props)) {\n            result.push(item);\n          }\n        }\n      });\n\n      return result;\n    };\n\n    return filterNodes(collectionItems);\n  }, [collectionItems, searchValue, enhancedFilter]);\n\n  const hasFilteredItems = filteredCollectionItems.length > 0;\n  const viewHasSections = filteredCollectionItems.some(\n    (item) => item.type === 'section',\n  );\n\n  // Helper function to find the first selectable item from filtered results\n  const findFirstSelectableItem = useCallback(() => {\n    const { selectionManager } = treeState;\n\n    const visit = (items: any[]): Key | null => {\n      for (const node of items) {\n        if (node?.type === 'section') {\n          const childResult = visit(Array.from(node.childNodes ?? []));\n          if (childResult != null) return childResult;\n        } else if (\n          node?.type === 'item' &&\n          !selectionManager.isDisabled(node.key)\n        ) {\n          return node.key;\n        }\n      }\n      return null;\n    };\n\n    return visit(filteredCollectionItems);\n  }, [filteredCollectionItems, treeState.selectionManager]);\n\n  // Create a ref for the menu container\n  const menuRef = useRef<HTMLUListElement>(null);\n\n  // Use menu hook for accessibility\n  const { menuProps } = useMenu(\n    {\n      ...completeProps,\n      'aria-label': 'Command palette menu',\n      filter: collectionFilter,\n      shouldUseVirtualFocus: true,\n    },\n    treeState,\n    menuRef,\n  );\n\n  // Manual rendering of menu items (similar to Menu component)\n  const renderedItems = useMemo(() => {\n    const items: React.ReactNode[] = [];\n    let isFirstSection = true;\n\n    filteredCollectionItems.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={treeState}\n            styles={completeProps.sectionStyles}\n            itemStyles={completeProps.itemStyles}\n            headingStyles={completeProps.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={treeState}\n          styles={completeProps.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\n            key={item.key}\n            activeWrap\n            placement=\"right\"\n            {...tooltipProps}\n          >\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      }\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  }, [\n    filteredCollectionItems,\n    treeState,\n    completeProps.sectionStyles,\n    completeProps.itemStyles,\n\n    completeProps.sectionHeadingStyles,\n  ]);\n\n  // Auto-focus search input\n  React.useEffect(() => {\n    if (autoFocus && searchInputRef.current) {\n      // Use a small timeout to ensure the element is visible and focusable\n      // This is especially important when the CommandMenu is opened in a popover\n      const timeoutId = setTimeout(() => {\n        if (searchInputRef.current) {\n          searchInputRef.current.focus();\n        }\n      }, 0);\n\n      return () => clearTimeout(timeoutId);\n    }\n  }, [autoFocus]);\n\n  // Also focus when the component becomes visible (for trigger/popover usage)\n  React.useEffect(() => {\n    // Check if autoFocus is enabled and we're in a trigger context\n    if (autoFocus && contextProps.autoFocus && searchInputRef.current) {\n      // Use a small timeout to ensure the popover is fully rendered\n      const timeoutId = setTimeout(() => {\n        if (searchInputRef.current) {\n          searchInputRef.current.focus();\n        }\n      }, 50); // Slightly longer timeout for popover context\n\n      return () => clearTimeout(timeoutId);\n    }\n  }, [autoFocus, contextProps.autoFocus]);\n\n  // Track the previous search value to only run auto-focus when search actually changes\n  const prevSearchValueRef = useRef<string>('');\n\n  // Auto-focus first item when search value changes (but not on initial render)\n  React.useEffect(() => {\n    const currentSearchValue = searchValue.trim();\n    const prevSearchValue = prevSearchValueRef.current;\n\n    // Only auto-focus when search value actually changes\n    if (currentSearchValue !== prevSearchValue && currentSearchValue !== '') {\n      const firstSelectableKey = findFirstSelectableItem();\n\n      if (firstSelectableKey && hasFilteredItems) {\n        // Focus the first item in the selection manager\n        treeState.selectionManager.setFocusedKey(firstSelectableKey);\n        setFocusedKey(firstSelectableKey);\n        focusedKeyRef.current = firstSelectableKey;\n      } else {\n        // Clear focus if no items are available\n        treeState.selectionManager.setFocusedKey(null);\n        setFocusedKey(null);\n        focusedKeyRef.current = null;\n      }\n    }\n\n    // Update the previous search value\n    prevSearchValueRef.current = currentSearchValue;\n  }, [searchValue, findFirstSelectableItem, hasFilteredItems]);\n\n  // Extract styles\n  const extractedStyles = useMemo(\n    () => extractStyles(props, CONTAINER_STYLES),\n    [props],\n  );\n\n  // Determine if we should show empty state based on actual filtered collection\n  const hasSearchTerm = searchValue.trim().length > 0;\n  const showEmptyState = hasSearchTerm && !hasFilteredItems && !isLoading;\n\n  // Sync refs\n  useSyncRef(contextProps, menuRef);\n\n  const mods = useMemo(() => {\n    // Determine mods based on menu context\n    let popoverMod = completeProps.mods?.popover;\n    let trayMod = completeProps.mods?.tray;\n\n    return {\n      sections: viewHasSections,\n      footer: !!footer,\n      header: !!header,\n      popover: popoverMod,\n      tray: trayMod,\n    };\n  }, [viewHasSections, footer, header, completeProps.mods]);\n\n  return (\n    <StyledCommandMenu\n      {...(filterBaseProps(props) as Record<string, unknown>)}\n      ref={domRef}\n      qa={qa || 'CommandMenu'}\n      data-size={size}\n      mods={mods}\n      styles={mergeProps(extractedStyles, styles)}\n    >\n      {/* Header */}\n      {header && (\n        <StyledHeader\n          role=\"presentation\"\n          data-size={size}\n          styles={{ border: 'none', ...headerStyles }}\n        >\n          {header}\n        </StyledHeader>\n      )}\n\n      {/* Search Input */}\n      <StyledSearchInput\n        ref={searchInputRef}\n        type=\"search\"\n        placeholder={searchPlaceholder}\n        value={searchValue}\n        styles={searchInputStyles}\n        data-size={size}\n        aria-controls={`${qa || 'CommandMenu'}-menu`}\n        role=\"combobox\"\n        aria-expanded=\"true\"\n        aria-haspopup=\"listbox\"\n        aria-activedescendant={\n          focusedKey != null\n            ? `${qa || 'CommandMenu'}-menu-option-${focusedKey}`\n            : undefined\n        }\n        onChange={(e) => handleSearchChange(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n            e.preventDefault();\n\n            const isArrowDown = e.key === 'ArrowDown';\n            const { selectionManager } = treeState;\n            // Use the ref to get the current focused key synchronously\n            const currentKey =\n              focusedKeyRef.current || selectionManager.focusedKey;\n\n            // Helper function to get all visible item keys accounting for sections\n            const getVisibleItemKeys = (): Key[] => {\n              const keys: Key[] = [];\n\n              const visit = (items: any[]) => {\n                for (const node of items) {\n                  if (node?.type === 'section') {\n                    visit(Array.from(node.childNodes ?? []));\n                  } else if (node?.type === 'item') {\n                    keys.push(node.key);\n                  }\n                }\n              };\n\n              visit(filteredCollectionItems);\n              return keys;\n            };\n\n            // Helper function to find next selectable key in a direction\n            const findNextSelectableKey = (\n              currentIndex: number,\n              direction: 'forward' | 'backward',\n              visibleKeys: Key[],\n            ) => {\n              const increment = direction === 'forward' ? 1 : -1;\n\n              for (\n                let i = currentIndex + increment;\n                i >= 0 && i < visibleKeys.length;\n                i += increment\n              ) {\n                const key = visibleKeys[i];\n                if (!selectionManager.isDisabled(key)) {\n                  return key;\n                }\n              }\n\n              return null;\n            };\n\n            // Helper function to find first or last selectable key\n            const findFirstLastSelectableKey = (\n              direction: 'forward' | 'backward',\n              visibleKeys: Key[],\n            ) => {\n              const keysToCheck =\n                direction === 'forward'\n                  ? visibleKeys\n                  : [...visibleKeys].reverse();\n\n              for (const key of keysToCheck) {\n                if (!selectionManager.isDisabled(key)) {\n                  return key;\n                }\n              }\n\n              return null;\n            };\n\n            const visibleKeys = getVisibleItemKeys();\n\n            if (visibleKeys.length === 0) {\n              return; // No visible items to navigate\n            }\n\n            let nextKey;\n            const direction = isArrowDown ? 'forward' : 'backward';\n\n            if (currentKey == null) {\n              // No current focus, start from the first/last item\n              nextKey = findFirstLastSelectableKey(direction, visibleKeys);\n            } else {\n              // Find current position in visible keys\n              const currentIndex = visibleKeys.indexOf(currentKey);\n\n              if (currentIndex === -1) {\n                // Current key not in visible items, start from beginning/end\n                nextKey = findFirstLastSelectableKey(direction, visibleKeys);\n              } else {\n                // Find next selectable item from current position\n                nextKey = findNextSelectableKey(\n                  currentIndex,\n                  direction,\n                  visibleKeys,\n                );\n\n                // If no next key found, wrap to first/last selectable item\n                if (nextKey == null) {\n                  nextKey = findFirstLastSelectableKey(direction, visibleKeys);\n                }\n              }\n            }\n\n            if (nextKey != null) {\n              selectionManager.setFocusedKey(nextKey);\n              setFocusedKey(nextKey);\n              focusedKeyRef.current = nextKey; // Update ref immediately\n            }\n          } else if (\n            e.key === 'Enter' ||\n            (e.key === ' ' && !searchValue.trim())\n          ) {\n            const currentFocusedKey =\n              focusedKey || treeState.selectionManager.focusedKey;\n            if (currentFocusedKey != null) {\n              e.preventDefault();\n\n              // Trigger action for the focused item (like Menu does)\n              // First check if there's a selection mode, if so, handle selection\n              if (treeState.selectionManager.selectionMode !== 'none') {\n                treeState.selectionManager.select(currentFocusedKey, e);\n              } else {\n                // Default behavior: trigger action\n                const node = treeState.collection.getItem(currentFocusedKey);\n                if (node) {\n                  // Call the tree state's action handler\n                  const onAction = (completeProps as any).onAction;\n                  if (onAction) {\n                    onAction(currentFocusedKey);\n                  }\n                  // Also call the item's individual onAction if it exists\n                  if (node.props?.onAction) {\n                    node.props.onAction(currentFocusedKey);\n                  }\n                }\n              }\n\n              // Close the menu if we're in a trigger context and closeOnSelect is enabled (default behavior)\n              const { onClose, closeOnSelect } = contextProps;\n              if (onClose && closeOnSelect !== false) {\n                onClose();\n              }\n            }\n          } else if (e.key === 'Escape') {\n            if (searchValue) {\n              e.preventDefault();\n              handleSearchChange('');\n            }\n          }\n        }}\n      />\n\n      {/* Loading State */}\n      {isLoading && (\n        <StyledLoadingWrapper>\n          <LoadingIcon\n            role=\"progressbar\"\n            aria-label=\"Loading commands\"\n            aria-hidden={false}\n          />\n        </StyledLoadingWrapper>\n      )}\n\n      {/* Menu Content - always render unless loading */}\n      {!isLoading && !showEmptyState && (\n        <StyledMenu\n          {...menuProps}\n          ref={menuRef}\n          id={`${qa || 'CommandMenu'}-menu`}\n          aria-label=\"Command menu\"\n          qa=\"Menu\"\n          data-size={size}\n          mods={mods}\n          styles={{\n            border: 'none',\n            boxShadow: 'none',\n            radius: 0,\n            padding: '0.5x',\n          }}\n        >\n          {renderedItems}\n        </StyledMenu>\n      )}\n\n      {/* Empty State - show when search term exists but no results */}\n      {!isLoading && showEmptyState && (\n        <StyledEmptyState>{emptyLabel}</StyledEmptyState>\n      )}\n\n      {/* Footer */}\n      {footer && (\n        <StyledFooter\n          role=\"presentation\"\n          data-size={size}\n          styles={footerStyles}\n        >\n          {footer}\n        </StyledFooter>\n      )}\n    </StyledCommandMenu>\n  );\n}\n\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\nconst _CommandMenu = React.forwardRef(CommandMenu) as <T>(\n  props: CubeCommandMenuProps<T> & React.RefAttributes<HTMLDivElement>,\n) => ReactElement;\n\n// Attach Trigger alias from MenuTrigger for consistent API\n// Also attach Item and Section for compound component pattern\nconst __CommandMenu = Object.assign(_CommandMenu, {\n  Trigger: MenuTrigger,\n  Item,\n  Section,\n  displayName: 'CommandMenu',\n});\n\nexport { __CommandMenu as CommandMenu };\n"],"mappings":"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"}

package/dist/components/actions/CommandMenu/styled.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.141.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.1 | Cube Dev Team */
 import { tasty } from "@tenphi/tasty";
 
 //#region src/components/actions/CommandMenu/styled.tsx

package/dist/components/actions/ItemAction/ItemAction.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.141.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.1 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
 import { DANGER_CLEAR_STYLES, DANGER_OUTLINE_STYLES, DANGER_PRIMARY_STYLES, DEFAULT_CLEAR_STYLES, DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, ITEM_ACTION_BASE_STYLES, NOTE_CLEAR_STYLES, NOTE_OUTLINE_STYLES, NOTE_PRIMARY_STYLES, SPECIAL_CLEAR_STYLES, SPECIAL_OUTLINE_STYLES, SPECIAL_PRIMARY_STYLES, SUCCESS_CLEAR_STYLES, SUCCESS_OUTLINE_STYLES, SUCCESS_PRIMARY_STYLES, WARNING_CLEAR_STYLES, WARNING_OUTLINE_STYLES, WARNING_PRIMARY_STYLES } from "../../../data/item-themes.js";

package/dist/components/actions/ItemActionContext.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.141.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.1 | Cube Dev Team */
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 

package/dist/components/actions/ItemButton/ItemButton.js

@@ -1,5 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.141.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.1 | Cube Dev Team */
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { mergeRefs } from "../../../utils/react/useCombinedRefs.js";
+import { useDismissParentPopover } from "../../../utils/react/usePopoverSync.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
 import { ItemActionProvider } from "../ItemActionContext.js";
 import { useAction } from "../use-action.js";
@@ -97,13 +100,24 @@ const ItemButton = forwardRef(function ItemButton(allProps, ref) {
 		return () => observer.disconnect();
 	}, [areActionsVisible, autoHideActions]);
 	const shouldShowActions = isHovered || isFocusWithin || hasPressed || !autoHideActions;
+	const dismissParentPopover = useDismissParentPopover();
+	const buttonElementRef = useRef(null);
+	const wrappedOnPress = useEvent((e) => {
+		onPress?.(e);
+		const el = buttonElementRef.current;
+		if (!el) return;
+		if (el.hasAttribute("data-popover-trigger")) return;
+		if (el.closest("[data-popover-keep]")) return;
+		dismissParentPopover(el);
+	});
 	const { actionProps } = useAction({
 		...allProps,
 		htmlType,
 		to,
 		as,
 		mods,
-		isDisabled: finalIsDisabled
+		isDisabled: finalIsDisabled,
+		onPress: wrappedOnPress
 	}, ref);
 	const finalMods = useMemo(() => {
 		return shouldShowActions ? {
@@ -111,11 +125,13 @@ const ItemButton = forwardRef(function ItemButton(allProps, ref) {
 			"actions-shown": true
 		} : mods;
 	}, [mods, shouldShowActions]);
+	const combinedRef = useMemo(() => mergeRefs(actionProps.ref, buttonElementRef), [actionProps.ref]);
 	const button = /* @__PURE__ */ jsx(StyledItem, {
 		insideWrapper: !!actions,
 		showActions: shouldShowActions,
 		actions: actions ? true : void 0,
 		...mergeProps$1(rest, actionProps),
+		ref: combinedRef,
 		"data-popover-dismiss": "",
 		htmlType: actionProps.type,
 		type,

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

@@ -1 +1 @@
-{"version":3,"file":"ItemButton.js","names":["Item","mergeProps"],"sources":["../../../../src/components/actions/ItemButton/ItemButton.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { Styles, tasty } from '@tenphi/tasty';\nimport {\n  CSSProperties,\n  forwardRef,\n  ReactNode,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFocusWithin, useHover } from 'react-aria';\n\nimport { mergeProps } from '../../../utils/react';\nimport { CubeItemProps, Item } from '../../content/Item';\nimport { ItemBadge } from '../../content/ItemBadge';\nimport { DisplayTransition } from '../../helpers';\nimport { CubeItemActionProps, ItemAction } from '../ItemAction';\nimport { ItemActionProvider } from '../ItemActionContext';\nimport { CubeUseActionProps, useAction } from '../use-action';\n\nexport interface CubeItemButtonProps\n  extends Omit<CubeItemProps, 'size'>,\n    Omit<CubeUseActionProps, 'as'> {\n  actions?: ReactNode;\n  size?: Omit<CubeItemProps['size'], 'inline'>;\n  wrapperStyles?: Styles;\n}\n\nconst StyledItem = tasty(Item, {\n  as: 'button',\n  type: 'item',\n  theme: 'default',\n  styles: {\n    recipe: 'reset button',\n    placeContent: 'center stretch',\n  },\n});\n\nconst ActionsWrapper = tasty({\n  styles: {\n    display: 'grid',\n    position: 'relative',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n\n    Actions: {\n      $: '>',\n      position: 'absolute',\n      inset: {\n        '': '1bw 1bw auto auto',\n        'type=card': '(1bw + .5x) (1bw + .5x) auto auto',\n      },\n      display: 'flex',\n      gap: '1bw',\n      placeItems: 'center',\n      placeContent: 'center end',\n      pointerEvents: {\n        '': 'auto',\n        '!actions-shown': 'none',\n      },\n      padding: '0 $side-padding',\n      height: 'min ($size - 2bw)',\n      opacity: {\n        '': 1,\n        '!actions-shown': 0,\n      },\n      translate: {\n        '': '0 0',\n        '!actions-shown': '.5x 0',\n      },\n      transition: 'theme, translate',\n\n      // Size for the action buttons\n      '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',\n      // Side padding for the button\n      '$side-padding': '(($size - $action-size - 2bw) / 2)',\n    },\n  },\n});\n\nconst ItemButton = forwardRef(function ItemButton(\n  allProps: CubeItemButtonProps,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const {\n    mods,\n    to,\n    htmlType,\n    as,\n    type = 'item',\n    theme = 'default',\n    onPress,\n    // Extract react-aria press callbacks to prevent them from leaking to DOM via rest.\n    // These are handled by useButton inside useAction.\n    onPressStart: _onPressStart,\n    onPressEnd: _onPressEnd,\n    onPressChange: _onPressChange,\n    onPressUp: _onPressUp,\n    actions,\n    size = 'medium',\n    wrapperStyles,\n    autoHideActions = false,\n    disableActionsFocus = false,\n    isDisabled,\n    isLoading = false,\n    ...rest\n  } = allProps as CubeItemButtonProps & {\n    as?: 'a' | 'button' | 'div' | 'span';\n  };\n\n  // Loading state makes the component disabled (same logic as Item)\n  const finalIsDisabled =\n    isDisabled === true || (isLoading && isDisabled !== false);\n\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const [actionsWidth, setActionsWidth] = useState(0);\n  const [areActionsVisible, setAreActionsVisible] = useState(false);\n  const [areActionsShown, setAreActionsShown] = useState(false);\n\n  useLayoutEffect(() => {\n    if (actions && actionsRef.current) {\n      const width = Math.round(actionsRef.current.offsetWidth);\n      if (width !== actionsWidth) {\n        setActionsWidth(width);\n      }\n    }\n  }, [actions, areActionsVisible]);\n\n  const [isFocusWithin, setIsFocusWithin] = useState(false);\n  const [hasPressed, setHasPressed] = useState(false);\n  const { hoverProps, isHovered } = useHover({});\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: setIsFocusWithin,\n  });\n\n  // Watch for data-pressed attribute on any descendant element\n  useLayoutEffect(() => {\n    const actionsEl = actionsRef.current;\n\n    if (!actionsEl || !autoHideActions) return;\n\n    const checkPressed = () => {\n      setHasPressed(actionsEl.querySelector('[data-pressed]') !== null);\n    };\n\n    const observer = new MutationObserver(checkPressed);\n\n    observer.observe(actionsEl, {\n      attributes: true,\n      attributeFilter: ['data-pressed'],\n      subtree: true,\n    });\n\n    checkPressed();\n\n    return () => observer.disconnect();\n  }, [areActionsVisible, autoHideActions]);\n\n  const shouldShowActions =\n    isHovered || isFocusWithin || hasPressed || !autoHideActions;\n\n  const { actionProps } = useAction(\n    {\n      ...(allProps as any),\n      htmlType,\n      to,\n      as,\n      mods,\n      isDisabled: finalIsDisabled,\n    },\n    ref,\n  );\n\n  const finalMods = useMemo(() => {\n    return shouldShowActions ? { ...mods, 'actions-shown': true } : mods;\n  }, [mods, shouldShowActions]);\n\n  const button = (\n    <StyledItem\n      insideWrapper={!!actions}\n      showActions={shouldShowActions}\n      actions={actions ? true : undefined}\n      {...(mergeProps(rest, actionProps) as any)}\n      data-popover-dismiss=\"\"\n      htmlType={actionProps.type}\n      type={type}\n      theme={theme}\n      size={size}\n      isLoading={isLoading}\n      isDisabled={isDisabled}\n    />\n  );\n\n  if (actions) {\n    return (\n      <ActionsWrapper\n        {...hoverProps}\n        data-size={size}\n        data-type={type}\n        data-theme={theme}\n        mods={finalMods}\n        styles={wrapperStyles}\n        style={\n          {\n            '--actions-width':\n              areActionsVisible || !autoHideActions\n                ? `${actionsWidth}px`\n                : '0px',\n            ...(typeof size === 'number' && { '--size': `${size}px` }),\n          } as CSSProperties\n        }\n      >\n        {button}\n        <ItemActionProvider\n          type={type}\n          theme={theme}\n          disableActionsFocus={disableActionsFocus}\n          isDisabled={finalIsDisabled}\n        >\n          {autoHideActions ? (\n            <DisplayTransition\n              exposeUnmounted\n              isShown={shouldShowActions}\n              onPhaseChange={(phase) => {\n                setAreActionsVisible(phase !== 'unmounted');\n              }}\n              onToggle={(isShown) => {\n                setAreActionsShown(isShown);\n              }}\n            >\n              {({ ref: transitionRef }) => {\n                return (\n                  <div\n                    {...focusWithinProps}\n                    ref={(node: any) => {\n                      actionsRef.current = node;\n                      transitionRef(node);\n                    }}\n                    data-element=\"Actions\"\n                  >\n                    {actions}\n                  </div>\n                );\n              }}\n            </DisplayTransition>\n          ) : (\n            <div ref={actionsRef} data-element=\"Actions\">\n              {actions}\n            </div>\n          )}\n        </ItemActionProvider>\n      </ActionsWrapper>\n    );\n  }\n\n  return button;\n});\n\nconst _ItemButton = Object.assign(ItemButton, {\n  Action: ItemAction,\n  Badge: ItemBadge,\n});\n\nexport { _ItemButton as ItemButton };\nexport type {\n  CubeItemButtonProps as ItemButtonProps,\n  CubeItemActionProps as ItemActionProps,\n};\n"],"mappings":"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"}
+{"version":3,"file":"ItemButton.js","names":["Item","mergeProps"],"sources":["../../../../src/components/actions/ItemButton/ItemButton.tsx"],"sourcesContent":["import { FocusableRef, PressEvent } from '@react-types/shared';\nimport { Styles, tasty } from '@tenphi/tasty';\nimport {\n  CSSProperties,\n  forwardRef,\n  ReactNode,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useFocusWithin, useHover } from 'react-aria';\n\nimport { useEvent } from '../../../_internal';\nimport {\n  mergeProps,\n  mergeRefs,\n  useDismissParentPopover,\n} from '../../../utils/react';\nimport { CubeItemProps, Item } from '../../content/Item';\nimport { ItemBadge } from '../../content/ItemBadge';\nimport { DisplayTransition } from '../../helpers';\nimport { CubeItemActionProps, ItemAction } from '../ItemAction';\nimport { ItemActionProvider } from '../ItemActionContext';\nimport { CubeUseActionProps, useAction } from '../use-action';\n\nexport interface CubeItemButtonProps\n  extends Omit<CubeItemProps, 'size'>,\n    Omit<CubeUseActionProps, 'as'> {\n  actions?: ReactNode;\n  size?: Omit<CubeItemProps['size'], 'inline'>;\n  wrapperStyles?: Styles;\n}\n\nconst StyledItem = tasty(Item, {\n  as: 'button',\n  type: 'item',\n  theme: 'default',\n  styles: {\n    recipe: 'reset button',\n    placeContent: 'center stretch',\n  },\n});\n\nconst ActionsWrapper = tasty({\n  styles: {\n    display: 'grid',\n    position: 'relative',\n    placeContent: 'stretch',\n    placeItems: 'stretch',\n\n    $size: {\n      '': '$size-md',\n      'size=xsmall': '$size-xs',\n      'size=small': '$size-sm',\n      'size=medium': '$size-md',\n      'size=large': '$size-lg',\n      'size=xlarge': '$size-xl',\n    },\n\n    Actions: {\n      $: '>',\n      position: 'absolute',\n      inset: {\n        '': '1bw 1bw auto auto',\n        'type=card': '(1bw + .5x) (1bw + .5x) auto auto',\n      },\n      display: 'flex',\n      gap: '1bw',\n      placeItems: 'center',\n      placeContent: 'center end',\n      pointerEvents: {\n        '': 'auto',\n        '!actions-shown': 'none',\n      },\n      padding: '0 $side-padding',\n      height: 'min ($size - 2bw)',\n      opacity: {\n        '': 1,\n        '!actions-shown': 0,\n      },\n      translate: {\n        '': '0 0',\n        '!actions-shown': '.5x 0',\n      },\n      transition: 'theme, translate',\n\n      // Size for the action buttons\n      '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',\n      // Side padding for the button\n      '$side-padding': '(($size - $action-size - 2bw) / 2)',\n    },\n  },\n});\n\nconst ItemButton = forwardRef(function ItemButton(\n  allProps: CubeItemButtonProps,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const {\n    mods,\n    to,\n    htmlType,\n    as,\n    type = 'item',\n    theme = 'default',\n    onPress,\n    // Extract react-aria press callbacks to prevent them from leaking to DOM via rest.\n    // These are handled by useButton inside useAction.\n    onPressStart: _onPressStart,\n    onPressEnd: _onPressEnd,\n    onPressChange: _onPressChange,\n    onPressUp: _onPressUp,\n    actions,\n    size = 'medium',\n    wrapperStyles,\n    autoHideActions = false,\n    disableActionsFocus = false,\n    isDisabled,\n    isLoading = false,\n    ...rest\n  } = allProps as CubeItemButtonProps & {\n    as?: 'a' | 'button' | 'div' | 'span';\n  };\n\n  // Loading state makes the component disabled (same logic as Item)\n  const finalIsDisabled =\n    isDisabled === true || (isLoading && isDisabled !== false);\n\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const [actionsWidth, setActionsWidth] = useState(0);\n  const [areActionsVisible, setAreActionsVisible] = useState(false);\n  const [areActionsShown, setAreActionsShown] = useState(false);\n\n  useLayoutEffect(() => {\n    if (actions && actionsRef.current) {\n      const width = Math.round(actionsRef.current.offsetWidth);\n      if (width !== actionsWidth) {\n        setActionsWidth(width);\n      }\n    }\n  }, [actions, areActionsVisible]);\n\n  const [isFocusWithin, setIsFocusWithin] = useState(false);\n  const [hasPressed, setHasPressed] = useState(false);\n  const { hoverProps, isHovered } = useHover({});\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithinChange: setIsFocusWithin,\n  });\n\n  // Watch for data-pressed attribute on any descendant element\n  useLayoutEffect(() => {\n    const actionsEl = actionsRef.current;\n\n    if (!actionsEl || !autoHideActions) return;\n\n    const checkPressed = () => {\n      setHasPressed(actionsEl.querySelector('[data-pressed]') !== null);\n    };\n\n    const observer = new MutationObserver(checkPressed);\n\n    observer.observe(actionsEl, {\n      attributes: true,\n      attributeFilter: ['data-pressed'],\n      subtree: true,\n    });\n\n    checkPressed();\n\n    return () => observer.disconnect();\n  }, [areActionsVisible, autoHideActions]);\n\n  const shouldShowActions =\n    isHovered || isFocusWithin || hasPressed || !autoHideActions;\n\n  // Default: pressing an ItemButton inside an open popover closes that\n  // popover. Opt-outs: `data-popover-trigger` on self (applied by\n  // FilterPicker / Picker / Select / MenuTrigger for their own triggers) and\n  // `data-popover-keep` on self or any ancestor. Modals don't subscribe.\n  const dismissParentPopover = useDismissParentPopover();\n  const buttonElementRef = useRef<HTMLElement | null>(null);\n\n  const wrappedOnPress = useEvent((e: PressEvent) => {\n    onPress?.(e);\n    const el = buttonElementRef.current;\n    if (!el) return;\n    if (el.hasAttribute('data-popover-trigger')) return;\n    if (el.closest('[data-popover-keep]')) return;\n    dismissParentPopover(el);\n  });\n\n  const { actionProps } = useAction(\n    {\n      ...(allProps as any),\n      htmlType,\n      to,\n      as,\n      mods,\n      isDisabled: finalIsDisabled,\n      onPress: wrappedOnPress,\n    },\n    ref,\n  );\n\n  const finalMods = useMemo(() => {\n    return shouldShowActions ? { ...mods, 'actions-shown': true } : mods;\n  }, [mods, shouldShowActions]);\n\n  // Merge the useAction-supplied ref with our internal ref so the dismiss\n  // wrapper can read the rendered DOM node at press time.\n  const combinedRef = useMemo(\n    () => mergeRefs(actionProps.ref as any, buttonElementRef),\n    [actionProps.ref],\n  );\n\n  const button = (\n    <StyledItem\n      insideWrapper={!!actions}\n      showActions={shouldShowActions}\n      actions={actions ? true : undefined}\n      {...(mergeProps(rest, actionProps) as any)}\n      ref={combinedRef}\n      data-popover-dismiss=\"\"\n      htmlType={actionProps.type}\n      type={type}\n      theme={theme}\n      size={size}\n      isLoading={isLoading}\n      isDisabled={isDisabled}\n    />\n  );\n\n  if (actions) {\n    return (\n      <ActionsWrapper\n        {...hoverProps}\n        data-size={size}\n        data-type={type}\n        data-theme={theme}\n        mods={finalMods}\n        styles={wrapperStyles}\n        style={\n          {\n            '--actions-width':\n              areActionsVisible || !autoHideActions\n                ? `${actionsWidth}px`\n                : '0px',\n            ...(typeof size === 'number' && { '--size': `${size}px` }),\n          } as CSSProperties\n        }\n      >\n        {button}\n        <ItemActionProvider\n          type={type}\n          theme={theme}\n          disableActionsFocus={disableActionsFocus}\n          isDisabled={finalIsDisabled}\n        >\n          {autoHideActions ? (\n            <DisplayTransition\n              exposeUnmounted\n              isShown={shouldShowActions}\n              onPhaseChange={(phase) => {\n                setAreActionsVisible(phase !== 'unmounted');\n              }}\n              onToggle={(isShown) => {\n                setAreActionsShown(isShown);\n              }}\n            >\n              {({ ref: transitionRef }) => {\n                return (\n                  <div\n                    {...focusWithinProps}\n                    ref={(node: any) => {\n                      actionsRef.current = node;\n                      transitionRef(node);\n                    }}\n                    data-element=\"Actions\"\n                  >\n                    {actions}\n                  </div>\n                );\n              }}\n            </DisplayTransition>\n          ) : (\n            <div ref={actionsRef} data-element=\"Actions\">\n              {actions}\n            </div>\n          )}\n        </ItemActionProvider>\n      </ActionsWrapper>\n    );\n  }\n\n  return button;\n});\n\nconst _ItemButton = Object.assign(ItemButton, {\n  Action: ItemAction,\n  Badge: ItemBadge,\n});\n\nexport { _ItemButton as ItemButton };\nexport type {\n  CubeItemButtonProps as ItemButtonProps,\n  CubeItemActionProps as ItemActionProps,\n};\n"],"mappings":"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"}

package/dist/components/actions/Link/Link.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.141.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.1 | Cube Dev Team */
 import { Button } from "../Button/Button.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.141.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.1 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
 import { _CollectionItem } from "../../CollectionItem.js";
@@ -12,14 +12,13 @@ import { CONTAINER_STYLES, filterBaseProps } from "@tenphi/tasty";
 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";
+import { useObjectRef, 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 domRef = useObjectRef(ref);
 	const contextProps = useMenuContext();
 	const completeProps = mergeProps$1(contextProps, rest, {
 		focusOnHover,

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

@@ -1 +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 {\n  BasePropsWithoutChildren,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n} from '@tenphi/tasty';\nimport React, { ReactElement, ReactNode, useMemo } from 'react';\nimport { AriaMenuProps, useMenu } from 'react-aria';\nimport { Section as BaseSection, useTreeState } from 'react-stately';\n\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\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) as Record<string, unknown>)}\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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"}
+{"version":3,"file":"Menu.js","names":["mergeProps","Section","BaseSection","CollectionItem","MenuTrigger"],"sources":["../../../../src/components/actions/Menu/Menu.tsx"],"sourcesContent":["import { useObjectRef, useSyncRef } from '@react-aria/utils';\nimport { FocusStrategy, ItemProps } from '@react-types/shared';\nimport {\n  BasePropsWithoutChildren,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n} from '@tenphi/tasty';\nimport React, { ReactElement, ReactNode, Ref, useMemo } from 'react';\nimport { AriaMenuProps, useMenu } from 'react-aria';\nimport { Section as BaseSection, useTreeState } from 'react-stately';\n\nimport { mergeProps } from '../../../utils/react';\nimport { extractStyles } from '../../../utils/styles';\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: Ref<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 = useObjectRef(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 menu's DOM ref.\n  // `useSyncRef` from @react-aria/utils expects the context object as the\n  // first argument 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) as Record<string, unknown>)}\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.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.141.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.1 | 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";

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.141.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.1 | Cube Dev Team */
 import { TooltipProvider } from "../../overlays/Tooltip/TooltipProvider.js";
 import { MenuItem } from "./MenuItem.js";
 import { StyledMenu, StyledSection, StyledSectionHeading } from "./styled.js";

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

@@ -1,23 +1,24 @@
-/** @license MIT | @cube-dev/ui-kit v0.141.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.1 | Cube Dev Team */
 import { SlotProvider } from "../../../utils/react/Slots.js";
+import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { MenuContext } from "./context.js";
 import { generateRandomId } from "../../../utils/random.js";
-import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";
 import { _Tray } from "../../overlays/Modal/Tray.js";
 import { _Popover } from "../../overlays/Modal/Popover.js";
 import { Fragment, forwardRef, useEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DismissButton, FocusScope, useMenuTrigger, useOverlayPosition } from "react-aria";
-import { useDOMRef, useIsMobileDevice } from "@react-spectrum/utils";
+import { useIsMobileDevice } from "@react-spectrum/utils";
 import { useMenuTriggerState } from "react-stately";
+import { useObjectRef } from "@react-aria/utils";
 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 domRef = useObjectRef(ref);
 	const menuTriggerRef = props.targetRef || domRef || triggerRef;
 	const menuRef = useRef(null);
 	const wasOpenRef = useRef(false);
@@ -30,7 +31,9 @@ function MenuTrigger(props, ref) {
 		menuId,
 		isOpen: state.isOpen,
 		onClose: () => state.close(),
-		enabled: !isDummy
+		enabled: !isDummy,
+		triggerRef: menuTriggerRef,
+		containerRef: menuPopoverRef
 	});
 	useEffect(() => {
 		if (!state.isOpen && wasOpenRef.current && !isDummy) {

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

@@ -1 +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  FocusScope,\n  Placement,\n  PositionProps,\n  useMenuTrigger,\n  useOverlayPosition,\n} from 'react-aria';\nimport { MenuTriggerState, useMenuTriggerState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { generateRandomId } from '../../../utils/random';\nimport { SlotProvider } from '../../../utils/react';\nimport { usePopoverSync } from '../../../utils/react/usePopoverSync';\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     * Overlay variant to use on mobile screens. Defaults to `'popover'`, which\n     * keeps the desktop overlay even on small viewports. Pass `'tray'` to opt\n     * into the bottom-sheet `Tray` overlay on mobile (the previous implicit\n     * default). Mirrors the `mobileType` API on `DialogTrigger`.\n     */\n    mobileType?: 'popover' | 'tray';\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    mobileType = 'popover',\n  } = props;\n\n  // Generate a unique ID for this menu instance\n  const menuId = useMemo(() => generateRandomId(), []);\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  usePopoverSync({\n    menuId,\n    isOpen: state.isOpen,\n    onClose: () => state.close(),\n    enabled: !isDummy,\n  });\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  // Tray rendering is now opt-in via `mobileType=\"tray\"` (matches DialogTrigger).\n  // Without that opt-in, MenuTrigger always renders a Popover so that environments\n  // like jsdom (where `window.screen.width === 0` makes useIsMobileDevice() true)\n  // don't accidentally swap in the tray overlay.\n  const isMobileDevice = useIsMobileDevice();\n  const isTray = mobileType === 'tray' && isMobileDevice;\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 && !isTray,\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: isTray\n      ? {\n          width: '100%',\n          maxHeight: 'inherit',\n        }\n      : undefined,\n    mods: {\n      popover: !isTray,\n      tray: isTray,\n    },\n    isClosing: !state.isOpen,\n  } as MenuContextValue;\n\n  // Wrap in a FocusScope so the menu popover registers as a child of any\n  // outer contained FocusScope (e.g. a parent Dialog/Popover). Without this,\n  // when the menu opens inside an outer contained FocusScope, the outer\n  // scope rejects focus moving into the menu items (which live in a portal\n  // and would otherwise belong to no scope) and yanks focus back to the\n  // menu trigger.\n  const contents = (\n    <FocusScope restoreFocus>\n      <DismissButton onDismiss={state.close} />\n      {menu}\n      <DismissButton onDismiss={state.close} />\n    </FocusScope>\n  );\n\n  // Shared between the Popover and Tray branches so both react-aria\n  // `useOverlay` calls see the same predicate. Without this, the Tray branch\n  // falls back to unconditional dismiss-on-outside-interaction, which\n  // `useOverlay` translates into stopPropagation/preventDefault in the\n  // capture phase — that swallows clicks on sibling triggers (see Menu\n  // rapid-open test).\n  //\n  // `useEvent` gives us a single stable callback reference for the lifetime\n  // of the component while always reading the latest closure values. This\n  // matters because `useMenuTriggerState` returns a fresh `state` object on\n  // every render, so a vanilla `useCallback([..., state])` would produce a\n  // new function every render and defeat any stability guarantees consumers\n  // rely on.\n  const shouldCloseOnInteractOutside = useEvent((el: Element) => {\n    // While `Popover` is animating out, `useInteractOutside`'s capture-phase\n    // listener is still attached (jsdom 29+ uses pointerdown/click capture).\n    // The animation lasts ~350ms; without this guard, clicks on a sibling\n    // trigger during the exit window get stopPropagation()'d and the\n    // sibling's `onClick` never runs — breaking rapid-open and \"open menu\n    // again with new props\" flows. Reading `state.isOpen` directly is safe\n    // because `useEvent` always sees the latest closure.\n    if (!state.isOpen) return false;\n\n    const menuTriggerEl = el.closest('[data-popover-trigger]');\n    if (!menuTriggerEl) {\n      // Plain interactive controls (Button, ItemButton) opt in via\n      // `data-popover-dismiss`. We schedule the close via setTimeout(0) so\n      // it lands AFTER the click event finishes — the button's onPress\n      // fires first, then the popover closes. Without this, useOverlay\n      // would stopPropagation() the click and the user would need a second\n      // click to actually press the button.\n      if (el.closest('[data-popover-dismiss]')) {\n        setTimeout(() => state.close(), 0);\n        return false;\n      }\n      return true;\n    }\n    if (\n      isDummy &&\n      (menuTriggerEl === menuTriggerRef.current ||\n        menuTriggerRef.current?.contains(el))\n    ) {\n      return true;\n    }\n    if (menuTriggerEl === menuTriggerRef.current) return true;\n    return false;\n  });\n\n  let overlay;\n  if (isTray) {\n    overlay = (\n      <Tray\n        isOpen={state.isOpen}\n        shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}\n        onClose={state.close}\n      >\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={shouldCloseOnInteractOutside}\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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"}
+{"version":3,"file":"MenuTrigger.js","names":["Tray","Popover"],"sources":["../../../../src/components/actions/Menu/MenuTrigger.tsx"],"sourcesContent":["import { PressResponder } from '@react-aria/interactions';\nimport { useObjectRef } from '@react-aria/utils';\nimport { useIsMobileDevice } from '@react-spectrum/utils';\nimport {\n  forwardRef,\n  Fragment,\n  ReactElement,\n  Ref,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  AriaMenuTriggerProps,\n  DismissButton,\n  FocusScope,\n  Placement,\n  PositionProps,\n  useMenuTrigger,\n  useOverlayPosition,\n} from 'react-aria';\nimport { MenuTriggerState, useMenuTriggerState } from 'react-stately';\n\nimport { useEvent } from '../../../_internal';\nimport { generateRandomId } from '../../../utils/random';\nimport { SlotProvider } from '../../../utils/react';\nimport { usePopoverSync } from '../../../utils/react/usePopoverSync';\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     * Overlay variant to use on mobile screens. Defaults to `'popover'`, which\n     * keeps the desktop overlay even on small viewports. Pass `'tray'` to opt\n     * into the bottom-sheet `Tray` overlay on mobile (the previous implicit\n     * default). Mirrors the `mobileType` API on `DialogTrigger`.\n     */\n    mobileType?: 'popover' | 'tray';\n  };\n\nfunction MenuTrigger(props: CubeMenuTriggerProps, ref: Ref<HTMLElement>) {\n  const menuPopoverRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLElement>(null);\n  const domRef = useObjectRef(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    mobileType = 'popover',\n  } = props;\n\n  // Generate a unique ID for this menu instance\n  const menuId = useMemo(() => generateRandomId(), []);\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  usePopoverSync({\n    menuId,\n    isOpen: state.isOpen,\n    onClose: () => state.close(),\n    enabled: !isDummy,\n    triggerRef: menuTriggerRef,\n    containerRef: menuPopoverRef,\n  });\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  // Tray rendering is now opt-in via `mobileType=\"tray\"` (matches DialogTrigger).\n  // Without that opt-in, MenuTrigger always renders a Popover so that environments\n  // like jsdom (where `window.screen.width === 0` makes useIsMobileDevice() true)\n  // don't accidentally swap in the tray overlay.\n  const isMobileDevice = useIsMobileDevice();\n  const isTray = mobileType === 'tray' && isMobileDevice;\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 && !isTray,\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: isTray\n      ? {\n          width: '100%',\n          maxHeight: 'inherit',\n        }\n      : undefined,\n    mods: {\n      popover: !isTray,\n      tray: isTray,\n    },\n    isClosing: !state.isOpen,\n  } as MenuContextValue;\n\n  // Wrap in a FocusScope so the menu popover registers as a child of any\n  // outer contained FocusScope (e.g. a parent Dialog/Popover). Without this,\n  // when the menu opens inside an outer contained FocusScope, the outer\n  // scope rejects focus moving into the menu items (which live in a portal\n  // and would otherwise belong to no scope) and yanks focus back to the\n  // menu trigger.\n  const contents = (\n    <FocusScope restoreFocus>\n      <DismissButton onDismiss={state.close} />\n      {menu}\n      <DismissButton onDismiss={state.close} />\n    </FocusScope>\n  );\n\n  // Shared between the Popover and Tray branches so both react-aria\n  // `useOverlay` calls see the same predicate. Without this, the Tray branch\n  // falls back to unconditional dismiss-on-outside-interaction, which\n  // `useOverlay` translates into stopPropagation/preventDefault in the\n  // capture phase — that swallows clicks on sibling triggers (see Menu\n  // rapid-open test).\n  //\n  // `useEvent` gives us a single stable callback reference for the lifetime\n  // of the component while always reading the latest closure values. This\n  // matters because `useMenuTriggerState` returns a fresh `state` object on\n  // every render, so a vanilla `useCallback([..., state])` would produce a\n  // new function every render and defeat any stability guarantees consumers\n  // rely on.\n  const shouldCloseOnInteractOutside = useEvent((el: Element) => {\n    // While `Popover` is animating out, `useInteractOutside`'s capture-phase\n    // listener is still attached (jsdom 29+ uses pointerdown/click capture).\n    // The animation lasts ~350ms; without this guard, clicks on a sibling\n    // trigger during the exit window get stopPropagation()'d and the\n    // sibling's `onClick` never runs — breaking rapid-open and \"open menu\n    // again with new props\" flows. Reading `state.isOpen` directly is safe\n    // because `useEvent` always sees the latest closure.\n    if (!state.isOpen) return false;\n\n    const menuTriggerEl = el.closest('[data-popover-trigger]');\n    if (!menuTriggerEl) {\n      // Plain interactive controls (Button, ItemButton) opt in via\n      // `data-popover-dismiss`. We schedule the close via setTimeout(0) so\n      // it lands AFTER the click event finishes — the button's onPress\n      // fires first, then the popover closes. Without this, useOverlay\n      // would stopPropagation() the click and the user would need a second\n      // click to actually press the button.\n      if (el.closest('[data-popover-dismiss]')) {\n        setTimeout(() => state.close(), 0);\n        return false;\n      }\n      return true;\n    }\n    if (\n      isDummy &&\n      (menuTriggerEl === menuTriggerRef.current ||\n        menuTriggerRef.current?.contains(el))\n    ) {\n      return true;\n    }\n    if (menuTriggerEl === menuTriggerRef.current) return true;\n    return false;\n  });\n\n  let overlay;\n  if (isTray) {\n    overlay = (\n      <Tray\n        isOpen={state.isOpen}\n        shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}\n        onClose={state.close}\n      >\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={shouldCloseOnInteractOutside}\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":";;;;;;;;;;;;;;;;;AAoDA,SAAS,YAAY,OAA6B,KAAuB;CACvE,MAAM,iBAAiB,OAAuB,KAAK;CACnD,MAAM,aAAa,OAAoB,KAAK;CAC5C,MAAM,SAAS,aAAa,IAAI;CAChC,MAAM,iBAAiB,MAAM,aAAa,UAAU;CACpD,MAAM,UAAU,OAAyB,KAAK;CAC9C,MAAM,aAAa,OAAO,MAAM;CAChC,MAAM,EACJ,UACA,aAAa,MACb,eACA,UAAU,SACV,YACA,SACA,aAAa,cACX;CAGJ,MAAM,SAAS,cAAc,kBAAkB,EAAE,EAAE,CAAC;AAEpD,KAAI,CAAC,MAAM,QAAQ,SAAS,IAAI,SAAS,SAAS,EAChD,OAAM,IAAI,MAAM,2CAA2C;CAG7D,IAAI,CAAC,aAAa,QAAQ;CAC1B,MAAM,QAA0B,oBAAoB,MAAM;AAE1D,gBAAe;EACb;EACA,QAAQ,MAAM;EACd,eAAe,MAAM,OAAO;EAC5B,SAAS,CAAC;EACV,YAAY;EACZ,cAAc;EACf,CAAC;AAGF,iBAAgB;AACd,MAAI,CAAC,MAAM,UAAU,WAAW,WAAW,CAAC,SAAS;AACnD,cAAW,UAAU;AAErB,oBAAiB;AACf,mBAAe,SAAS,OAAO;MAC9B,EAAE;aACI,MAAM,OACf,YAAW,UAAU;IAEtB;EAAC,MAAM;EAAQ;EAAgB;EAAQ,CAAC;AAE3C,KAAI,OAAO,gBAAgB,WACzB,eAAe,YAAoD,MAAM;CAG3E,MAAM,EAAE,kBAAkB,cAAc,eACtC,EAAE,YAAY,EACd,OACA,eACD;CAED,IAAI,mBAA8B,MAAM,aAAa;CAMrD,MAAM,iBAAiB,mBAAmB;CAC1C,MAAM,SAAS,eAAe,UAAU;CACxC,MAAM,EAAE,cAAc,eAAe,cAAc,mBAAmB;EACpE,WAAW;EACX,YAAY;EACZ,WAAW;EACX,WAAW;EACC;EACZ,QAAQ,MAAM,UAAU,CAAC;EACzB,SAAS,MAAM;EACf,kBAAkB,MAAM;EACxB,QAAQ,MAAM,UAAU;EACxB,aAAa,MAAM,eAAe;EACnC,CAAC;CAEF,MAAM,cAAc;EAClB,GAAG;EACH,KAAK;EACL,SAAS,MAAM;EACf;EACA,WAAY,MAAM,iBAAyB;EAC3C,OAAO,SACH;GACE,OAAO;GACP,WAAW;GACZ,GACD;EACJ,MAAM;GACJ,SAAS,CAAC;GACV,MAAM;GACP;EACD,WAAW,CAAC,MAAM;EACnB;CAQD,MAAM,WACJ,qBAAC;EAAW;;GACV,oBAAC,iBAAc,WAAW,MAAM,QAAS;GACxC;GACD,oBAAC,iBAAc,WAAW,MAAM,QAAS;;GAC9B;CAgBf,MAAM,+BAA+B,UAAU,OAAgB;AAQ7D,MAAI,CAAC,MAAM,OAAQ,QAAO;EAE1B,MAAM,gBAAgB,GAAG,QAAQ,yBAAyB;AAC1D,MAAI,CAAC,eAAe;AAOlB,OAAI,GAAG,QAAQ,yBAAyB,EAAE;AACxC,qBAAiB,MAAM,OAAO,EAAE,EAAE;AAClC,WAAO;;AAET,UAAO;;AAET,MACE,YACC,kBAAkB,eAAe,WAChC,eAAe,SAAS,SAAS,GAAG,EAEtC,QAAO;AAET,MAAI,kBAAkB,eAAe,QAAS,QAAO;AACrD,SAAO;GACP;CAEF,IAAI;AACJ,KAAI,OACF,WACE,oBAACA;EACC,QAAQ,MAAM;EACgB;EAC9B,SAAS,MAAM;YAEd;GACI;KAGT,WACE,oBAACC;EACC,KAAK;EACL;EACA;EACA,QAAQ,MAAM;EACd,OAAO,cAAc;EACV;EACmB;EAC9B,SAAS,MAAM;YAEd;GACO;AAId,QACE,qBAAC,uBACC,oBAAC;EACC,OAAO,EAAE,cAAc,EAAE,gBAAgB,YAAY,aAAa,EAAE;YAEnE,CAAC,UACA,oBAAC;GACC,GAAI;GACJ,KAAK;GACL;GACA,WAAW,MAAM;aAEhB;IACc,GACf;GACS,EACf,oBAAC,YAAY;EAAS,OAAO;YAAc;GAA+B,IACjE;;;;;;AAQf,IAAI,eAAe,WAAW,YAAY;AAE1C,aAAa,cAAc"}

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

@@ -1,9 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.141.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.142.1 | Cube Dev Team */
+import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { MenuContext, useMenuContext } from "./context.js";
 import { SubmenuTriggerContext } from "./SubmenuTriggerContext.js";
 import { generateRandomId } from "../../../utils/random.js";
-import { usePopoverSync } from "../../../utils/react/usePopoverSync.js";
 import { _Popover } from "../../overlays/Modal/Popover.js";
 import React, { useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -23,14 +23,17 @@ function InternalSubMenuTrigger(props) {
 	const { children, placement = DEFAULT_PLACEMENT, offset = DEFAULT_OFFSET, crossOffset = DEFAULT_CROSS_OFFSET, shouldFlip = true, isDisabled, autoFocus = "first", onAction, targetKey, ...overlayProps } = props;
 	const [menuTrigger, menu] = React.Children.toArray(children);
 	const state = useMenuTriggerState(props);
-	usePopoverSync({
-		menuId: useMemo(() => generateRandomId(), []),
-		isOpen: state.isOpen,
-		onClose: () => state.close()
-	});
+	const submenuId = useMemo(() => generateRandomId(), []);
 	const domTriggerRef = useRef(null);
 	const popoverRef = useRef(null);
 	const menuRef = useRef(null);
+	usePopoverSync({
+		menuId: submenuId,
+		isOpen: state.isOpen,
+		onClose: () => state.close(),
+		triggerRef: domTriggerRef,
+		containerRef: popoverRef
+	});
 	const { menuTriggerProps: rawTriggerProps, menuProps } = useMenuTrigger({
 		type: "submenu",
 		isDisabled