@kushagradhawan/kookie-ui 0.3.12 → 0.3.13

package/dist/cjs/components/virtual-menu.js

@@ -1,2 +1,2 @@
-"use strict";"use client";var X=Object.create;var v=Object.defineProperty;var Z=Object.getOwnPropertyDescriptor;var ee=Object.getOwnPropertyNames;var te=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty;var re=(e,t)=>{for(var i in t)v(e,i,{get:t[i],enumerable:!0})},D=(e,t,i,u)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of ee(t))!ne.call(e,l)&&l!==i&&v(e,l,{get:()=>t[l],enumerable:!(u=Z(t,l))||u.enumerable});return e};var k=(e,t,i)=>(i=e!=null?X(te(e)):{},D(t||!e||!e.__esModule?v(i,"default",{value:e,enumerable:!0}):i,e)),ae=e=>D(v({},"__esModule",{value:!0}),e);var le={};re(le,{VirtualMenu:()=>ue});module.exports=ae(le);var n=k(require("react")),y=k(require("classnames")),w=require("@tanstack/react-virtual");var c=k(require("react")),ie=c.createContext({isInsideMenu:!1});function P(){return c.useContext(ie)}var L={1:24,2:32};var oe=n.memo(function({label:t,isHighlighted:i,id:u,style:l,tabIndex:S,"data-highlighted":h,"data-index":T,onMouseEnter:g,onMouseLeave:E,onClick:M,onKeyDown:R}){return n.createElement("div",{id:u,role:"menuitem",className:(0,y.default)("rt-reset","rt-BaseMenuItem","rt-VirtualMenuItem"),style:l,tabIndex:S,"data-highlighted":h,"data-index":T,onMouseEnter:g,onMouseLeave:E,onClick:M,onKeyDown:R},t)},(e,t)=>!(e.label!==t.label||e["data-highlighted"]!==t["data-highlighted"]||e.style.height!==t.style.height||e.style.transform!==t.style.transform||e.tabIndex!==t.tabIndex||e.id!==t.id));function K({items:e,itemLabel:t,renderItem:i,size:u,estimatedItemSize:l,overscan:S=5,onSelect:h,className:T,style:g,"aria-label":E}){let M=n.useId(),R=n.useRef(null),[C,d]=n.useState(-1),{isInsideMenu:j,size:A}=P(),I=l??L[u??A??"2"];if(!t&&!i)throw new Error("VirtualMenu requires either itemLabel or renderItem prop");let B=n.useMemo(()=>t?typeof t=="function"?t:r=>r[t]:null,[t]),m=n.useMemo(()=>e.length===0||C<0?-1:Math.min(C,e.length-1),[C,e.length]),q=n.useMemo(()=>typeof I=="function"?I:()=>I,[I]),p=(0,w.useVirtualizer)({count:e.length,getScrollElement:()=>R.current,estimateSize:q,overscan:S}),O=p.getVirtualItems(),b=n.useRef(e),x=n.useRef(h);b.current=e,x.current=h;let f=n.useRef(p.scrollToIndex);f.current=p.scrollToIndex;let z=n.useRef(m);z.current=m;let U=n.useCallback(r=>{let s=r.currentTarget.dataset.index;s!=null&&d(Number(s))},[]),W=n.useCallback(r=>{let s=r.currentTarget.dataset.index;if(s!=null){let a=Number(s),o=b.current;a>=0&&a<o.length&&x.current?.(o[a],a)}},[]),Y=n.useCallback(()=>{},[]),_=n.useCallback(r=>{if(r.key==="Enter"||r.key===" "){r.preventDefault();let s=r.currentTarget.dataset.index;if(s!=null){let a=Number(s),o=b.current;a>=0&&a<o.length&&x.current?.(o[a],a)}}},[]),F=n.useCallback(r=>{let s=b.current,a=z.current;switch(r.key){case"ArrowDown":{r.preventDefault();let o=a<s.length-1?a+1:0;d(o),f.current(o,{align:"auto"});break}case"ArrowUp":{r.preventDefault();let o=a>0?a-1:s.length-1;d(o),f.current(o,{align:"auto"});break}case"Home":{r.preventDefault(),d(0),f.current(0,{align:"start"});break}case"End":{r.preventDefault();let o=s.length-1;d(o),f.current(o,{align:"end"});break}case"Enter":case" ":{r.preventDefault(),a>=0&&a<s.length&&x.current?.(s[a],a);break}case"Tab":{r.preventDefault();break}case"Escape":{r.currentTarget.blur();break}}},[]),V=n.useCallback(r=>`${M}-item-${r}`,[M]),G=n.useMemo(()=>({overflow:"auto",position:"relative",...g}),[g]),H=p.getTotalSize(),J=n.useMemo(()=>({height:`${H}px`,width:"100%",position:"relative"}),[H]);return n.createElement("div",{ref:R,role:j?void 0:"menu","aria-label":E,"aria-activedescendant":m>=0?V(m):void 0,tabIndex:0,onKeyDown:F,className:(0,y.default)("rt-VirtualMenuRoot",T),style:G},n.createElement("div",{className:"rt-VirtualMenuViewport",style:J},O.map(r=>{let s=e[r.index],a=r.index,o=m===a,Q={height:r.size,transform:`translateY(${r.start}px)`},N={id:V(a),isHighlighted:o,style:Q,tabIndex:o?0:-1,"data-highlighted":o?!0:void 0,"data-index":a,onMouseEnter:U,onMouseLeave:Y,onClick:W,onKeyDown:_};return i?n.createElement(i,{key:r.key,item:s,index:a,...N}):n.createElement(oe,{key:r.key,label:B(s),...N})})))}K.displayName="VirtualMenu";var $=n.forwardRef(({className:e,children:t,...i},u)=>n.createElement("div",{ref:u,role:"menuitem",className:(0,y.default)("rt-reset","rt-BaseMenuItem","rt-VirtualMenuItem",e),...i},t));$.displayName="VirtualMenu.Item";var se=n.memo($,(e,t)=>{let i=e.style,u=t.style;return!(i?.height!==u?.height||i?.transform!==u?.transform||e["data-highlighted"]!==t["data-highlighted"]||e.tabIndex!==t.tabIndex||e.id!==t.id||e.className!==t.className||e.children!==t.children)}),ue=Object.assign(K,{Item:se});
+"use strict";"use client";var X=Object.create;var v=Object.defineProperty;var Z=Object.getOwnPropertyDescriptor;var ee=Object.getOwnPropertyNames;var te=Object.getPrototypeOf,ne=Object.prototype.hasOwnProperty;var re=(e,t)=>{for(var i in t)v(e,i,{get:t[i],enumerable:!0})},D=(e,t,i,u)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of ee(t))!ne.call(e,l)&&l!==i&&v(e,l,{get:()=>t[l],enumerable:!(u=Z(t,l))||u.enumerable});return e};var k=(e,t,i)=>(i=e!=null?X(te(e)):{},D(t||!e||!e.__esModule?v(i,"default",{value:e,enumerable:!0}):i,e)),ae=e=>D(v({},"__esModule",{value:!0}),e);var le={};re(le,{VirtualMenu:()=>ue});module.exports=ae(le);var n=k(require("react")),y=k(require("classnames")),w=require("@tanstack/react-virtual");var c=k(require("react")),ie=c.createContext({isInsideMenu:!1});function P(){return c.useContext(ie)}var L={1:24,2:32};var oe=n.memo(function({label:t,isHighlighted:i,id:u,style:l,tabIndex:S,"data-highlighted":h,"data-index":T,onMouseEnter:g,onMouseLeave:E,onClick:M,onKeyDown:R}){return n.createElement("div",{id:u,role:"menuitem",className:(0,y.default)("rt-reset","rt-BaseMenuItem","rt-VirtualMenuItem"),style:l,tabIndex:S,"data-highlighted":h,"data-index":T,onMouseEnter:g,onMouseLeave:E,onClick:M,onKeyDown:R},t)},(e,t)=>!(e.label!==t.label||e["data-highlighted"]!==t["data-highlighted"]||e.style.height!==t.style.height||e.style.transform!==t.style.transform||e.tabIndex!==t.tabIndex||e.id!==t.id));function K({items:e,itemLabel:t,renderItem:i,size:u,estimatedItemSize:l,overscan:S=5,onSelect:h,className:T,style:g,"aria-label":E}){let M=n.useId(),R=n.useRef(null),[C,d]=n.useState(-1),{isInsideMenu:j,size:A}=P(),I=l??L[u??A??"2"];if(!t&&!i)throw new Error("VirtualMenu requires either itemLabel or renderItem prop");let B=n.useMemo(()=>t?typeof t=="function"?t:r=>r[t]:null,[t]),m=n.useMemo(()=>e.length===0||C<0?-1:Math.min(C,e.length-1),[C,e.length]),q=n.useMemo(()=>typeof I=="function"?I:()=>I,[I]),p=(0,w.useVirtualizer)({count:e.length,getScrollElement:()=>R.current,estimateSize:q,overscan:S}),O=p.getVirtualItems(),b=n.useRef(e),x=n.useRef(h);b.current=e,x.current=h;let f=n.useRef(p.scrollToIndex);f.current=p.scrollToIndex;let z=n.useRef(m);z.current=m;let U=n.useCallback(r=>{let s=r.currentTarget.dataset.index;s!=null&&d(Number(s))},[]),W=n.useCallback(r=>{let s=r.currentTarget.dataset.index;if(s!=null){let a=Number(s),o=b.current;a>=0&&a<o.length&&x.current?.(o[a],a)}},[]),Y=n.useCallback(()=>{},[]),_=n.useCallback(r=>{if(r.key==="Enter"||r.key===" "){r.preventDefault();let s=r.currentTarget.dataset.index;if(s!=null){let a=Number(s),o=b.current;a>=0&&a<o.length&&x.current?.(o[a],a)}}},[]),F=n.useCallback(r=>{let s=b.current,a=z.current;switch(r.key){case"ArrowDown":{r.preventDefault();let o=a<s.length-1?a+1:0;d(o),f.current(o,{align:"auto"});break}case"ArrowUp":{r.preventDefault();let o=a>0?a-1:s.length-1;d(o),f.current(o,{align:"auto"});break}case"Home":{r.preventDefault(),d(0),f.current(0,{align:"start"});break}case"End":{r.preventDefault();let o=s.length-1;d(o),f.current(o,{align:"end"});break}case"Enter":case" ":{r.preventDefault(),a>=0&&a<s.length&&x.current?.(s[a],a);break}case"Tab":{r.preventDefault();break}case"Escape":{r.currentTarget.blur();break}}},[]),V=n.useCallback(r=>`${M}-item-${r}`,[M]),G=n.useMemo(()=>({overflow:"auto",position:"relative",...g}),[g]),H=p.getTotalSize(),J=n.useMemo(()=>({height:`${H}px`,width:"100%",position:"relative"}),[H]);return n.createElement("div",{ref:R,role:j?"group":"menu","aria-label":E,"aria-activedescendant":m>=0?V(m):void 0,tabIndex:0,onKeyDown:F,className:(0,y.default)("rt-VirtualMenuRoot",T),style:G},n.createElement("div",{className:"rt-VirtualMenuViewport",style:J},O.map(r=>{let s=e[r.index],a=r.index,o=m===a,Q={height:r.size,transform:`translateY(${r.start}px)`},N={id:V(a),isHighlighted:o,style:Q,tabIndex:o?0:-1,"data-highlighted":o?!0:void 0,"data-index":a,onMouseEnter:U,onMouseLeave:Y,onClick:W,onKeyDown:_};return i?n.createElement(i,{key:r.key,item:s,index:a,...N}):n.createElement(oe,{key:r.key,label:B(s),...N})})))}K.displayName="VirtualMenu";var $=n.forwardRef(({className:e,children:t,...i},u)=>n.createElement("div",{ref:u,role:"menuitem",className:(0,y.default)("rt-reset","rt-BaseMenuItem","rt-VirtualMenuItem",e),...i},t));$.displayName="VirtualMenu.Item";var se=n.memo($,(e,t)=>{let i=e.style,u=t.style;return!(i?.height!==u?.height||i?.transform!==u?.transform||e["data-highlighted"]!==t["data-highlighted"]||e.tabIndex!==t.tabIndex||e.id!==t.id||e.className!==t.className||e.children!==t.children)}),ue=Object.assign(K,{Item:se});
 //# sourceMappingURL=virtual-menu.js.map

package/dist/cjs/components/virtual-menu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/virtual-menu.tsx", "../../../src/components/_internal/menu-context.tsx"],
-  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { useMenuContext, menuSizeToItemHeight } from './_internal/menu-context.js';\n\n/**\n * VirtualMenu - A virtualized menu component for rendering large lists efficiently.\n *\n * Uses TanStack Virtual to render only visible items.\n * Works inside any container (DropdownMenu.Content, Popover.Content, etc.)\n *\n * @example\n * // Simple usage with itemLabel\n * <VirtualMenu\n *   items={items}\n *   itemLabel={(item) => item.name}\n *   onSelect={handleSelect}\n * />\n *\n * @example\n * // Custom rendering with renderItem\n * const UserItem = React.memo(({ item, ...props }) => (\n *   <VirtualMenu.Item {...props}>\n *     <Avatar src={item.avatar} />\n *     {item.name}\n *   </VirtualMenu.Item>\n * ));\n *\n * <VirtualMenu items={users} renderItem={UserItem} onSelect={handleSelect} />\n */\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/** Props passed to custom renderItem components */\ninterface VirtualMenuRenderItemProps<T> {\n  /** The item data */\n  item: T;\n  /** Index in the items array */\n  index: number;\n  /** Whether this item is currently highlighted */\n  isHighlighted: boolean;\n  /** Unique ID for accessibility */\n  id: string;\n  /** Positioning styles - must be applied */\n  style: React.CSSProperties;\n  /** Tab index for focus management */\n  tabIndex: number;\n  /** Data attribute for CSS styling */\n  'data-highlighted': true | undefined;\n  /** Data attribute for event delegation */\n  'data-index': number;\n  /** Mouse enter handler */\n  onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;\n  /** Mouse leave handler */\n  onMouseLeave: () => void;\n  /** Click handler */\n  onClick: (e: React.MouseEvent<HTMLElement>) => void;\n  /** Keyboard handler for Enter/Space activation */\n  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\n\ninterface VirtualMenuProps<T> {\n  /** Array of items to render */\n  items: T[];\n  /**\n   * Simple label accessor for basic text items.\n   * Can be a property key or a function.\n   * @example\n   * itemLabel=\"name\"\n   * itemLabel={(item) => item.name}\n   */\n  itemLabel?: keyof T | ((item: T) => React.ReactNode);\n  /**\n   * Custom component for rendering items.\n   * Must be memoized (React.memo) for optimal performance.\n   * @example\n   * const MyItem = React.memo(({ item, ...props }) => (\n   *   <VirtualMenu.Item {...props}>{item.name}</VirtualMenu.Item>\n   * ));\n   * <VirtualMenu items={items} renderItem={MyItem} />\n   */\n  renderItem?: React.ComponentType<VirtualMenuRenderItemProps<T>>;\n  /**\n   * Menu size - controls item height.\n   * Automatically inherited from parent DropdownMenu.Content/ContextMenu.Content.\n   * Only set manually when using VirtualMenu outside of a menu context.\n   * @default '2' (or inherited from context)\n   */\n  size?: '1' | '2';\n  /**\n   * Estimated height of each item in pixels.\n   * Can be a number (same for all) or a function (per-item).\n   * Usually not needed - height is automatically derived from size prop/context.\n   * Use this only for custom item heights (e.g., variable height items).\n   */\n  estimatedItemSize?: number | ((index: number) => number);\n  /** Number of items to render outside visible area */\n  overscan?: number;\n  /** Callback when an item is selected */\n  onSelect?: (item: T, index: number) => void;\n  /** Additional class name */\n  className?: string;\n  /** Additional styles */\n  style?: React.CSSProperties;\n  /** Accessible label for the menu */\n  'aria-label'?: string;\n}\n\n// ============================================================================\n// Internal Memoized Item Component\n// ============================================================================\n\ninterface SimpleItemProps {\n  label: React.ReactNode;\n  isHighlighted: boolean;\n  id: string;\n  style: React.CSSProperties;\n  tabIndex: number;\n  'data-highlighted': true | undefined;\n  'data-index': number;\n  onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;\n  onMouseLeave: () => void;\n  onClick: (e: React.MouseEvent<HTMLElement>) => void;\n  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\n\nconst SimpleItem = React.memo(\n  function SimpleItem({\n    label,\n    isHighlighted: _isHighlighted,\n    id,\n    style,\n    tabIndex,\n    'data-highlighted': dataHighlighted,\n    'data-index': dataIndex,\n    onMouseEnter,\n    onMouseLeave,\n    onClick,\n    onKeyDown,\n  }: SimpleItemProps) {\n    return (\n      <div\n        id={id}\n        role=\"menuitem\"\n        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-VirtualMenuItem')}\n        style={style}\n        tabIndex={tabIndex}\n        data-highlighted={dataHighlighted}\n        data-index={dataIndex}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n      >\n        {label}\n      </div>\n    );\n  },\n  (prev, next) => {\n    // Custom comparison - only re-render if these change\n    if (prev.label !== next.label) return false;\n    if (prev['data-highlighted'] !== next['data-highlighted']) return false;\n    if (prev.style.height !== next.style.height) return false;\n    if (prev.style.transform !== next.style.transform) return false;\n    if (prev.tabIndex !== next.tabIndex) return false;\n    if (prev.id !== next.id) return false;\n    // Event handlers are stable, skip comparison\n    return true;\n  },\n);\n\n// ============================================================================\n// VirtualMenu Component\n// ============================================================================\n\nfunction VirtualMenuRoot<T>({\n  items,\n  itemLabel,\n  renderItem: RenderItem,\n  size: sizeProp,\n  estimatedItemSize: estimatedItemSizeProp,\n  overscan = 5,\n  onSelect,\n  className,\n  style,\n  'aria-label': ariaLabel,\n}: VirtualMenuProps<T>) {\n  const menuId = React.useId();\n  const parentRef = React.useRef<HTMLDivElement>(null);\n  const [highlightedIndex, setHighlightedIndex] = React.useState<number>(-1);\n  const { isInsideMenu, size: contextSize } = useMenuContext();\n\n  // Resolve size: prop > context > default '2'\n  const resolvedSize = sizeProp ?? contextSize ?? '2';\n  \n  // Resolve item height: explicit prop > derived from size\n  const estimatedItemSize = estimatedItemSizeProp ?? menuSizeToItemHeight[resolvedSize];\n\n  // Validate props\n  if (!itemLabel && !RenderItem) {\n    throw new Error('VirtualMenu requires either itemLabel or renderItem prop');\n  }\n\n  // Normalize itemLabel to a function\n  const getLabel = React.useMemo(() => {\n    if (!itemLabel) return null;\n    if (typeof itemLabel === 'function') return itemLabel;\n    return (item: T) => item[itemLabel] as React.ReactNode;\n  }, [itemLabel]);\n\n  // Derive safe highlighted index\n  const safeHighlightedIndex = React.useMemo(() => {\n    if (items.length === 0) return -1;\n    if (highlightedIndex < 0) return -1;\n    return Math.min(highlightedIndex, items.length - 1);\n  }, [highlightedIndex, items.length]);\n\n  // Normalize estimatedItemSize to a function\n  const getItemSize = React.useMemo(\n    () =>\n      typeof estimatedItemSize === 'function'\n        ? estimatedItemSize\n        : () => estimatedItemSize,\n    [estimatedItemSize],\n  );\n\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize: getItemSize,\n    overscan,\n  });\n\n  const virtualItems = virtualizer.getVirtualItems();\n\n  // Refs for stable handler references\n  const itemsRef = React.useRef(items);\n  const onSelectRef = React.useRef(onSelect);\n  itemsRef.current = items;\n  onSelectRef.current = onSelect;\n\n  const scrollToIndexRef = React.useRef(virtualizer.scrollToIndex);\n  scrollToIndexRef.current = virtualizer.scrollToIndex;\n\n  const highlightedIndexRef = React.useRef(safeHighlightedIndex);\n  highlightedIndexRef.current = safeHighlightedIndex;\n\n  // Stable event handlers\n  const handleItemMouseEnter = React.useCallback((e: React.MouseEvent<HTMLElement>) => {\n    const index = e.currentTarget.dataset.index;\n    if (index != null) {\n      setHighlightedIndex(Number(index));\n    }\n  }, []);\n\n  const handleItemClick = React.useCallback((e: React.MouseEvent<HTMLElement>) => {\n    const index = e.currentTarget.dataset.index;\n    if (index != null) {\n      const idx = Number(index);\n      const currentItems = itemsRef.current;\n      if (idx >= 0 && idx < currentItems.length) {\n        onSelectRef.current?.(currentItems[idx], idx);\n      }\n    }\n  }, []);\n\n  const noop = React.useCallback(() => {}, []);\n\n  // Item-level keyboard handler for Enter/Space activation (satisfies a11y lint rule)\n  const handleItemKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      const index = e.currentTarget.dataset.index;\n      if (index != null) {\n        const idx = Number(index);\n        const currentItems = itemsRef.current;\n        if (idx >= 0 && idx < currentItems.length) {\n          onSelectRef.current?.(currentItems[idx], idx);\n        }\n      }\n    }\n  }, []);\n\n  // Keyboard navigation\n  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n    const currentItems = itemsRef.current;\n    const currentHighlightedIndex = highlightedIndexRef.current;\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        const nextIndex =\n          currentHighlightedIndex < currentItems.length - 1 ? currentHighlightedIndex + 1 : 0;\n        setHighlightedIndex(nextIndex);\n        scrollToIndexRef.current(nextIndex, { align: 'auto' });\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prevIndex =\n          currentHighlightedIndex > 0 ? currentHighlightedIndex - 1 : currentItems.length - 1;\n        setHighlightedIndex(prevIndex);\n        scrollToIndexRef.current(prevIndex, { align: 'auto' });\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        setHighlightedIndex(0);\n        scrollToIndexRef.current(0, { align: 'start' });\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        const lastIndex = currentItems.length - 1;\n        setHighlightedIndex(lastIndex);\n        scrollToIndexRef.current(lastIndex, { align: 'end' });\n        break;\n      }\n      case 'Enter':\n      case ' ': {\n        e.preventDefault();\n        if (currentHighlightedIndex >= 0 && currentHighlightedIndex < currentItems.length) {\n          onSelectRef.current?.(currentItems[currentHighlightedIndex], currentHighlightedIndex);\n        }\n        break;\n      }\n      case 'Tab': {\n        e.preventDefault();\n        break;\n      }\n      case 'Escape': {\n        (e.currentTarget as HTMLElement).blur();\n        break;\n      }\n    }\n  }, []);\n\n  // Item ID generator\n  const getItemId = React.useCallback(\n    (index: number) => `${menuId}-item-${index}`,\n    [menuId],\n  );\n\n  // Memoize styles\n  const rootStyle = React.useMemo(\n    () => ({\n      overflow: 'auto' as const,\n      position: 'relative' as const,\n      ...style,\n    }),\n    [style],\n  );\n\n  const totalSize = virtualizer.getTotalSize();\n  const viewportStyle = React.useMemo(\n    () => ({\n      height: `${totalSize}px`,\n      width: '100%' as const,\n      position: 'relative' as const,\n    }),\n    [totalSize],\n  );\n\n  return (\n    <div\n      ref={parentRef}\n      role={isInsideMenu ? undefined : 'menu'}\n      aria-label={ariaLabel}\n      aria-activedescendant={safeHighlightedIndex >= 0 ? getItemId(safeHighlightedIndex) : undefined}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n      className={classNames('rt-VirtualMenuRoot', className)}\n      style={rootStyle}\n    >\n      <div className=\"rt-VirtualMenuViewport\" style={viewportStyle}>\n        {virtualItems.map((virtualRow) => {\n          const item = items[virtualRow.index];\n          const index = virtualRow.index;\n          const isHighlighted = safeHighlightedIndex === index;\n\n          const itemStyle: React.CSSProperties = {\n            height: virtualRow.size,\n            transform: `translateY(${virtualRow.start}px)`,\n          };\n\n          const commonProps = {\n            id: getItemId(index),\n            isHighlighted,\n            style: itemStyle,\n            tabIndex: isHighlighted ? 0 : -1,\n            'data-highlighted': isHighlighted ? true as const : undefined,\n            'data-index': index,\n            onMouseEnter: handleItemMouseEnter,\n            onMouseLeave: noop,\n            onClick: handleItemClick,\n            onKeyDown: handleItemKeyDown,\n          };\n\n          // Use renderItem if provided, otherwise use SimpleItem with itemLabel\n          if (RenderItem) {\n            return (\n              <RenderItem\n                key={virtualRow.key}\n                item={item}\n                index={index}\n                {...commonProps}\n              />\n            );\n          }\n\n          return (\n            <SimpleItem\n              key={virtualRow.key}\n              label={getLabel!(item)}\n              {...commonProps}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nVirtualMenuRoot.displayName = 'VirtualMenu';\n\n// ============================================================================\n// VirtualMenu.Item Component (for custom renderItem usage)\n// ============================================================================\n\ninterface VirtualMenuItemProps extends React.ComponentPropsWithoutRef<'div'> {\n  children: React.ReactNode;\n  /** Data attribute for highlight styling */\n  'data-highlighted'?: true | undefined;\n  /** Data attribute for event delegation */\n  'data-index'?: number;\n}\n\nconst VirtualMenuItemInner = React.forwardRef<HTMLDivElement, VirtualMenuItemProps>(\n  ({ className, children, ...props }, forwardedRef) => {\n    return (\n      <div\n        ref={forwardedRef}\n        role=\"menuitem\"\n        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-VirtualMenuItem', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nVirtualMenuItemInner.displayName = 'VirtualMenu.Item';\n\n// Memoized with custom comparison\nconst VirtualMenuItem = React.memo(VirtualMenuItemInner, (prevProps, nextProps) => {\n  const prevStyle = prevProps.style as React.CSSProperties | undefined;\n  const nextStyle = nextProps.style as React.CSSProperties | undefined;\n  if (prevStyle?.height !== nextStyle?.height) return false;\n  if (prevStyle?.transform !== nextStyle?.transform) return false;\n  if (prevProps['data-highlighted'] !== nextProps['data-highlighted']) return false;\n  if (prevProps.tabIndex !== nextProps.tabIndex) return false;\n  if (prevProps.id !== nextProps.id) return false;\n  if (prevProps.className !== nextProps.className) return false;\n  if (prevProps.children !== nextProps.children) return false;\n  return true;\n});\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nconst VirtualMenu = Object.assign(VirtualMenuRoot, {\n  Item: VirtualMenuItem,\n});\n\nexport { VirtualMenu };\nexport type { VirtualMenuProps, VirtualMenuItemProps, VirtualMenuRenderItemProps };\n", "'use client';\n\nimport * as React from 'react';\nimport type { Responsive } from '../../props/prop-def.js';\n\n/**\n * Context to detect if a component is rendered inside a menu (DropdownMenu, ContextMenu, etc.)\n * Used by VirtualMenu to adjust its behavior:\n * - Skip role=\"menu\" when inside a parent menu (parent owns the role)\n * - Delegate certain keyboard handling to parent\n * - Use the correct item height based on menu size\n */\n\nexport type MenuSize = '1' | '2';\n\ninterface MenuContextValue {\n  /** Whether we're inside a menu that owns the menu role */\n  isInsideMenu: boolean;\n  /** Menu size for calculating item heights (resolved to non-responsive value) */\n  size?: MenuSize;\n}\n\nconst MenuContext = React.createContext<MenuContextValue>({ isInsideMenu: false });\n\ninterface MenuProviderProps {\n  children: React.ReactNode;\n  /** Menu size passed from parent (DropdownMenu.Content, ContextMenu.Content, etc.) */\n  size?: Responsive<MenuSize>;\n}\n\n/** Extract the base size from a potentially responsive value */\nfunction resolveSize(size: Responsive<MenuSize> | undefined): MenuSize | undefined {\n  if (!size) return undefined;\n  if (typeof size === 'string') return size;\n  // For responsive objects, use the 'initial' value\n  return size.initial;\n}\n\nexport function MenuProvider({ children, size }: MenuProviderProps) {\n  const resolvedSize = resolveSize(size);\n  const value = React.useMemo(() => ({ isInsideMenu: true, size: resolvedSize }), [resolvedSize]);\n  return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>;\n}\n\nexport function useMenuContext() {\n  return React.useContext(MenuContext);\n}\n\n/** Map menu size to item height in pixels */\nexport const menuSizeToItemHeight: Record<MenuSize, number> = {\n  '1': 24, // --space-5\n  '2': 32, // --space-6\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client';\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { useVirtualizer } from '@tanstack/react-virtual';\nimport { useMenuContext, menuSizeToItemHeight } from './_internal/menu-context.js';\n\n/**\n * VirtualMenu - A virtualized menu component for rendering large lists efficiently.\n *\n * Uses TanStack Virtual to render only visible items.\n * Works inside any container (DropdownMenu.Content, Popover.Content, etc.)\n *\n * @example\n * // Simple usage with itemLabel\n * <VirtualMenu\n *   items={items}\n *   itemLabel={(item) => item.name}\n *   onSelect={handleSelect}\n * />\n *\n * @example\n * // Custom rendering with renderItem\n * const UserItem = React.memo(({ item, ...props }) => (\n *   <VirtualMenu.Item {...props}>\n *     <Avatar src={item.avatar} />\n *     {item.name}\n *   </VirtualMenu.Item>\n * ));\n *\n * <VirtualMenu items={users} renderItem={UserItem} onSelect={handleSelect} />\n */\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/** Props passed to custom renderItem components */\ninterface VirtualMenuRenderItemProps<T> {\n  /** The item data */\n  item: T;\n  /** Index in the items array */\n  index: number;\n  /** Whether this item is currently highlighted */\n  isHighlighted: boolean;\n  /** Unique ID for accessibility */\n  id: string;\n  /** Positioning styles - must be applied */\n  style: React.CSSProperties;\n  /** Tab index for focus management */\n  tabIndex: number;\n  /** Data attribute for CSS styling */\n  'data-highlighted': true | undefined;\n  /** Data attribute for event delegation */\n  'data-index': number;\n  /** Mouse enter handler */\n  onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;\n  /** Mouse leave handler */\n  onMouseLeave: () => void;\n  /** Click handler */\n  onClick: (e: React.MouseEvent<HTMLElement>) => void;\n  /** Keyboard handler for Enter/Space activation */\n  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\n\ninterface VirtualMenuProps<T> {\n  /** Array of items to render */\n  items: T[];\n  /**\n   * Simple label accessor for basic text items.\n   * Can be a property key or a function.\n   * @example\n   * itemLabel=\"name\"\n   * itemLabel={(item) => item.name}\n   */\n  itemLabel?: keyof T | ((item: T) => React.ReactNode);\n  /**\n   * Custom component for rendering items.\n   * Must be memoized (React.memo) for optimal performance.\n   * @example\n   * const MyItem = React.memo(({ item, ...props }) => (\n   *   <VirtualMenu.Item {...props}>{item.name}</VirtualMenu.Item>\n   * ));\n   * <VirtualMenu items={items} renderItem={MyItem} />\n   */\n  renderItem?: React.ComponentType<VirtualMenuRenderItemProps<T>>;\n  /**\n   * Menu size - controls item height.\n   * Automatically inherited from parent DropdownMenu.Content/ContextMenu.Content.\n   * Only set manually when using VirtualMenu outside of a menu context.\n   * @default '2' (or inherited from context)\n   */\n  size?: '1' | '2';\n  /**\n   * Estimated height of each item in pixels.\n   * Can be a number (same for all) or a function (per-item).\n   * Usually not needed - height is automatically derived from size prop/context.\n   * Use this only for custom item heights (e.g., variable height items).\n   */\n  estimatedItemSize?: number | ((index: number) => number);\n  /** Number of items to render outside visible area */\n  overscan?: number;\n  /** Callback when an item is selected */\n  onSelect?: (item: T, index: number) => void;\n  /** Additional class name */\n  className?: string;\n  /** Additional styles */\n  style?: React.CSSProperties;\n  /** Accessible label for the menu */\n  'aria-label'?: string;\n}\n\n// ============================================================================\n// Internal Memoized Item Component\n// ============================================================================\n\ninterface SimpleItemProps {\n  label: React.ReactNode;\n  isHighlighted: boolean;\n  id: string;\n  style: React.CSSProperties;\n  tabIndex: number;\n  'data-highlighted': true | undefined;\n  'data-index': number;\n  onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;\n  onMouseLeave: () => void;\n  onClick: (e: React.MouseEvent<HTMLElement>) => void;\n  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n}\n\nconst SimpleItem = React.memo(\n  function SimpleItem({\n    label,\n    isHighlighted: _isHighlighted,\n    id,\n    style,\n    tabIndex,\n    'data-highlighted': dataHighlighted,\n    'data-index': dataIndex,\n    onMouseEnter,\n    onMouseLeave,\n    onClick,\n    onKeyDown,\n  }: SimpleItemProps) {\n    return (\n      <div\n        id={id}\n        role=\"menuitem\"\n        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-VirtualMenuItem')}\n        style={style}\n        tabIndex={tabIndex}\n        data-highlighted={dataHighlighted}\n        data-index={dataIndex}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n      >\n        {label}\n      </div>\n    );\n  },\n  (prev, next) => {\n    // Custom comparison - only re-render if these change\n    if (prev.label !== next.label) return false;\n    if (prev['data-highlighted'] !== next['data-highlighted']) return false;\n    if (prev.style.height !== next.style.height) return false;\n    if (prev.style.transform !== next.style.transform) return false;\n    if (prev.tabIndex !== next.tabIndex) return false;\n    if (prev.id !== next.id) return false;\n    // Event handlers are stable, skip comparison\n    return true;\n  },\n);\n\n// ============================================================================\n// VirtualMenu Component\n// ============================================================================\n\nfunction VirtualMenuRoot<T>({\n  items,\n  itemLabel,\n  renderItem: RenderItem,\n  size: sizeProp,\n  estimatedItemSize: estimatedItemSizeProp,\n  overscan = 5,\n  onSelect,\n  className,\n  style,\n  'aria-label': ariaLabel,\n}: VirtualMenuProps<T>) {\n  const menuId = React.useId();\n  const parentRef = React.useRef<HTMLDivElement>(null);\n  const [highlightedIndex, setHighlightedIndex] = React.useState<number>(-1);\n  const { isInsideMenu, size: contextSize } = useMenuContext();\n\n  // Resolve size: prop > context > default '2'\n  const resolvedSize = sizeProp ?? contextSize ?? '2';\n  \n  // Resolve item height: explicit prop > derived from size\n  const estimatedItemSize = estimatedItemSizeProp ?? menuSizeToItemHeight[resolvedSize];\n\n  // Validate props\n  if (!itemLabel && !RenderItem) {\n    throw new Error('VirtualMenu requires either itemLabel or renderItem prop');\n  }\n\n  // Normalize itemLabel to a function\n  const getLabel = React.useMemo(() => {\n    if (!itemLabel) return null;\n    if (typeof itemLabel === 'function') return itemLabel;\n    return (item: T) => item[itemLabel] as React.ReactNode;\n  }, [itemLabel]);\n\n  // Derive safe highlighted index\n  const safeHighlightedIndex = React.useMemo(() => {\n    if (items.length === 0) return -1;\n    if (highlightedIndex < 0) return -1;\n    return Math.min(highlightedIndex, items.length - 1);\n  }, [highlightedIndex, items.length]);\n\n  // Normalize estimatedItemSize to a function\n  const getItemSize = React.useMemo(\n    () =>\n      typeof estimatedItemSize === 'function'\n        ? estimatedItemSize\n        : () => estimatedItemSize,\n    [estimatedItemSize],\n  );\n\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize: getItemSize,\n    overscan,\n  });\n\n  const virtualItems = virtualizer.getVirtualItems();\n\n  // Refs for stable handler references\n  const itemsRef = React.useRef(items);\n  const onSelectRef = React.useRef(onSelect);\n  itemsRef.current = items;\n  onSelectRef.current = onSelect;\n\n  const scrollToIndexRef = React.useRef(virtualizer.scrollToIndex);\n  scrollToIndexRef.current = virtualizer.scrollToIndex;\n\n  const highlightedIndexRef = React.useRef(safeHighlightedIndex);\n  highlightedIndexRef.current = safeHighlightedIndex;\n\n  // Stable event handlers\n  const handleItemMouseEnter = React.useCallback((e: React.MouseEvent<HTMLElement>) => {\n    const index = e.currentTarget.dataset.index;\n    if (index != null) {\n      setHighlightedIndex(Number(index));\n    }\n  }, []);\n\n  const handleItemClick = React.useCallback((e: React.MouseEvent<HTMLElement>) => {\n    const index = e.currentTarget.dataset.index;\n    if (index != null) {\n      const idx = Number(index);\n      const currentItems = itemsRef.current;\n      if (idx >= 0 && idx < currentItems.length) {\n        onSelectRef.current?.(currentItems[idx], idx);\n      }\n    }\n  }, []);\n\n  const noop = React.useCallback(() => {}, []);\n\n  // Item-level keyboard handler for Enter/Space activation (satisfies a11y lint rule)\n  const handleItemKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      const index = e.currentTarget.dataset.index;\n      if (index != null) {\n        const idx = Number(index);\n        const currentItems = itemsRef.current;\n        if (idx >= 0 && idx < currentItems.length) {\n          onSelectRef.current?.(currentItems[idx], idx);\n        }\n      }\n    }\n  }, []);\n\n  // Keyboard navigation\n  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {\n    const currentItems = itemsRef.current;\n    const currentHighlightedIndex = highlightedIndexRef.current;\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        const nextIndex =\n          currentHighlightedIndex < currentItems.length - 1 ? currentHighlightedIndex + 1 : 0;\n        setHighlightedIndex(nextIndex);\n        scrollToIndexRef.current(nextIndex, { align: 'auto' });\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prevIndex =\n          currentHighlightedIndex > 0 ? currentHighlightedIndex - 1 : currentItems.length - 1;\n        setHighlightedIndex(prevIndex);\n        scrollToIndexRef.current(prevIndex, { align: 'auto' });\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        setHighlightedIndex(0);\n        scrollToIndexRef.current(0, { align: 'start' });\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        const lastIndex = currentItems.length - 1;\n        setHighlightedIndex(lastIndex);\n        scrollToIndexRef.current(lastIndex, { align: 'end' });\n        break;\n      }\n      case 'Enter':\n      case ' ': {\n        e.preventDefault();\n        if (currentHighlightedIndex >= 0 && currentHighlightedIndex < currentItems.length) {\n          onSelectRef.current?.(currentItems[currentHighlightedIndex], currentHighlightedIndex);\n        }\n        break;\n      }\n      case 'Tab': {\n        e.preventDefault();\n        break;\n      }\n      case 'Escape': {\n        (e.currentTarget as HTMLElement).blur();\n        break;\n      }\n    }\n  }, []);\n\n  // Item ID generator\n  const getItemId = React.useCallback(\n    (index: number) => `${menuId}-item-${index}`,\n    [menuId],\n  );\n\n  // Memoize styles\n  const rootStyle = React.useMemo(\n    () => ({\n      overflow: 'auto' as const,\n      position: 'relative' as const,\n      ...style,\n    }),\n    [style],\n  );\n\n  const totalSize = virtualizer.getTotalSize();\n  const viewportStyle = React.useMemo(\n    () => ({\n      height: `${totalSize}px`,\n      width: '100%' as const,\n      position: 'relative' as const,\n    }),\n    [totalSize],\n  );\n\n  return (\n    <div\n      ref={parentRef}\n      role={isInsideMenu ? 'group' : 'menu'}\n      aria-label={ariaLabel}\n      aria-activedescendant={safeHighlightedIndex >= 0 ? getItemId(safeHighlightedIndex) : undefined}\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n      className={classNames('rt-VirtualMenuRoot', className)}\n      style={rootStyle}\n    >\n      <div className=\"rt-VirtualMenuViewport\" style={viewportStyle}>\n        {virtualItems.map((virtualRow) => {\n          const item = items[virtualRow.index];\n          const index = virtualRow.index;\n          const isHighlighted = safeHighlightedIndex === index;\n\n          const itemStyle: React.CSSProperties = {\n            height: virtualRow.size,\n            transform: `translateY(${virtualRow.start}px)`,\n          };\n\n          const commonProps = {\n            id: getItemId(index),\n            isHighlighted,\n            style: itemStyle,\n            tabIndex: isHighlighted ? 0 : -1,\n            'data-highlighted': isHighlighted ? true as const : undefined,\n            'data-index': index,\n            onMouseEnter: handleItemMouseEnter,\n            onMouseLeave: noop,\n            onClick: handleItemClick,\n            onKeyDown: handleItemKeyDown,\n          };\n\n          // Use renderItem if provided, otherwise use SimpleItem with itemLabel\n          if (RenderItem) {\n            return (\n              <RenderItem\n                key={virtualRow.key}\n                item={item}\n                index={index}\n                {...commonProps}\n              />\n            );\n          }\n\n          return (\n            <SimpleItem\n              key={virtualRow.key}\n              label={getLabel!(item)}\n              {...commonProps}\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nVirtualMenuRoot.displayName = 'VirtualMenu';\n\n// ============================================================================\n// VirtualMenu.Item Component (for custom renderItem usage)\n// ============================================================================\n\ninterface VirtualMenuItemProps extends React.ComponentPropsWithoutRef<'div'> {\n  children: React.ReactNode;\n  /** Data attribute for highlight styling */\n  'data-highlighted'?: true | undefined;\n  /** Data attribute for event delegation */\n  'data-index'?: number;\n}\n\nconst VirtualMenuItemInner = React.forwardRef<HTMLDivElement, VirtualMenuItemProps>(\n  ({ className, children, ...props }, forwardedRef) => {\n    return (\n      <div\n        ref={forwardedRef}\n        role=\"menuitem\"\n        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-VirtualMenuItem', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nVirtualMenuItemInner.displayName = 'VirtualMenu.Item';\n\n// Memoized with custom comparison\nconst VirtualMenuItem = React.memo(VirtualMenuItemInner, (prevProps, nextProps) => {\n  const prevStyle = prevProps.style as React.CSSProperties | undefined;\n  const nextStyle = nextProps.style as React.CSSProperties | undefined;\n  if (prevStyle?.height !== nextStyle?.height) return false;\n  if (prevStyle?.transform !== nextStyle?.transform) return false;\n  if (prevProps['data-highlighted'] !== nextProps['data-highlighted']) return false;\n  if (prevProps.tabIndex !== nextProps.tabIndex) return false;\n  if (prevProps.id !== nextProps.id) return false;\n  if (prevProps.className !== nextProps.className) return false;\n  if (prevProps.children !== nextProps.children) return false;\n  return true;\n});\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nconst VirtualMenu = Object.assign(VirtualMenuRoot, {\n  Item: VirtualMenuItem,\n});\n\nexport { VirtualMenu };\nexport type { VirtualMenuProps, VirtualMenuItemProps, VirtualMenuRenderItemProps };\n", "'use client';\n\nimport * as React from 'react';\nimport type { Responsive } from '../../props/prop-def.js';\n\n/**\n * Context to detect if a component is rendered inside a menu (DropdownMenu, ContextMenu, etc.)\n * Used by VirtualMenu to adjust its behavior:\n * - Skip role=\"menu\" when inside a parent menu (parent owns the role)\n * - Delegate certain keyboard handling to parent\n * - Use the correct item height based on menu size\n */\n\nexport type MenuSize = '1' | '2';\n\ninterface MenuContextValue {\n  /** Whether we're inside a menu that owns the menu role */\n  isInsideMenu: boolean;\n  /** Menu size for calculating item heights (resolved to non-responsive value) */\n  size?: MenuSize;\n}\n\nconst MenuContext = React.createContext<MenuContextValue>({ isInsideMenu: false });\n\ninterface MenuProviderProps {\n  children: React.ReactNode;\n  /** Menu size passed from parent (DropdownMenu.Content, ContextMenu.Content, etc.) */\n  size?: Responsive<MenuSize>;\n}\n\n/** Extract the base size from a potentially responsive value */\nfunction resolveSize(size: Responsive<MenuSize> | undefined): MenuSize | undefined {\n  if (!size) return undefined;\n  if (typeof size === 'string') return size;\n  // For responsive objects, use the 'initial' value\n  return size.initial;\n}\n\nexport function MenuProvider({ children, size }: MenuProviderProps) {\n  const resolvedSize = resolveSize(size);\n  const value = React.useMemo(() => ({ isInsideMenu: true, size: resolvedSize }), [resolvedSize]);\n  return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>;\n}\n\nexport function useMenuContext() {\n  return React.useContext(MenuContext);\n}\n\n/** Map menu size to item height in pixels */\nexport const menuSizeToItemHeight: Record<MenuSize, number> = {\n  '1': 24, // --space-5\n  '2': 32, // --space-6\n};\n"],
+  "mappings": "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",
   "names": ["virtual_menu_exports", "__export", "VirtualMenu", "__toCommonJS", "React", "import_classnames", "import_react_virtual", "React", "MenuContext", "useMenuContext", "MenuContext", "menuSizeToItemHeight", "SimpleItem", "label", "_isHighlighted", "id", "style", "tabIndex", "dataHighlighted", "dataIndex", "onMouseEnter", "onMouseLeave", "onClick", "onKeyDown", "classNames", "prev", "next", "VirtualMenuRoot", "items", "itemLabel", "RenderItem", "sizeProp", "estimatedItemSizeProp", "overscan", "onSelect", "className", "ariaLabel", "menuId", "parentRef", "highlightedIndex", "setHighlightedIndex", "isInsideMenu", "contextSize", "useMenuContext", "estimatedItemSize", "menuSizeToItemHeight", "getLabel", "item", "safeHighlightedIndex", "getItemSize", "virtualizer", "virtualItems", "itemsRef", "onSelectRef", "scrollToIndexRef", "highlightedIndexRef", "handleItemMouseEnter", "e", "index", "handleItemClick", "idx", "currentItems", "noop", "handleItemKeyDown", "handleKeyDown", "currentHighlightedIndex", "nextIndex", "prevIndex", "lastIndex", "getItemId", "rootStyle", "totalSize", "viewportStyle", "virtualRow", "isHighlighted", "itemStyle", "commonProps", "VirtualMenuItemInner", "children", "props", "forwardedRef", "VirtualMenuItem", "prevProps", "nextProps", "prevStyle", "nextStyle", "VirtualMenu"]
 }