@womp/kookie-ui 0.23.0 → 0.25.0

package/src/components/tooltip.tsx

@@ -10,6 +10,30 @@ import { tooltipPropDefs } from './tooltip.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
+/** The rest before a tooltip opens, in milliseconds. */
+const TOOLTIP_DELAY = 200;
+
+/** True inside a `TooltipProvider`, so a Tooltip knows it need not bring its own. */
+const TooltipProviderContext = React.createContext(false);
+
+interface TooltipProviderProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider> {}
+
+/**
+ * Groups the tooltips inside it: the first one waits `delayDuration` (200ms), and the next ones
+ * open at once while the pointer moves between them. Put it once near the root of the app.
+ * A Tooltip outside one still works, with the same delay, but each one waits on its own.
+ */
+function TooltipProvider({ delayDuration = TOOLTIP_DELAY, children, ...props }: TooltipProviderProps) {
+  return (
+    <TooltipProviderContext.Provider value={true}>
+      <TooltipPrimitive.Provider delayDuration={delayDuration} {...props}>
+        {children}
+      </TooltipPrimitive.Provider>
+    </TooltipProviderContext.Provider>
+  );
+}
+TooltipProvider.displayName = 'TooltipProvider';
+
 type TooltipElement = React.ElementRef<typeof TooltipPrimitive.Content>;
 type TooltipOwnProps = GetPropDefTypes<typeof tooltipPropDefs>;
 interface TooltipProps
@@ -34,7 +58,8 @@ const Tooltip = React.forwardRef<TooltipElement, TooltipProps>((props, forwarded
     ...tooltipContentProps
   } = extractProps(props, tooltipPropDefs);
   const rootProps = { open, defaultOpen, onOpenChange, delayDuration, disableHoverableContent };
-  return (
+  const hasProvider = React.useContext(TooltipProviderContext);
+  const tooltip = (
     <TooltipPrimitive.Root {...rootProps}>
       <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
       <TooltipPrimitive.Portal container={container} forceMount={forceMount}>
@@ -56,8 +81,10 @@ const Tooltip = React.forwardRef<TooltipElement, TooltipProps>((props, forwarded
       </TooltipPrimitive.Portal>
     </TooltipPrimitive.Root>
   );
+  // Radix needs a provider above every tooltip. Outside a TooltipProvider, bring one.
+  return hasProvider ? tooltip : <TooltipPrimitive.Provider delayDuration={TOOLTIP_DELAY}>{tooltip}</TooltipPrimitive.Provider>;
 });
 Tooltip.displayName = 'Tooltip';
 
-export { Tooltip };
-export type { TooltipProps };
+export { Tooltip, TooltipProvider };
+export type { TooltipProps, TooltipProviderProps };

package/src/components/virtual-menu.css

@@ -47,3 +47,83 @@
   /* - cursor, user-select */
   /* - transition */
 }
+
+/*
+ * On its own (in a Popover, a panel), the list is not inside a menu surface, so it sets the
+ * menu row tokens itself at its `size`. The class is only added outside a menu.
+ */
+.kui-VirtualMenuRoot:where(.kui-r-size-1, .kui-r-size-2, .kui-r-size-3, .kui-r-size-4) {
+  --base-menu-item-height: max(24px, calc(var(--base-menu-line-height) + 2 * var(--base-menu-item-padding-y)));
+  --base-menu-item-padding-x: calc(
+    var(--base-menu-item-px) + min(var(--radius-full, 0px), var(--base-menu-item-px-pill) - var(--base-menu-item-px))
+  );
+  --base-menu-item-padding-left: var(--base-menu-item-padding-x);
+  --base-menu-item-padding-right: var(--base-menu-item-padding-x);
+  --base-menu-content-padding: 0px;
+
+  & :where(.kui-BaseMenuItem[data-highlighted]) {
+    background-color: var(--accent-4);
+  }
+
+  @media (prefers-contrast: more) {
+    & :where(.kui-BaseMenuItem[data-highlighted]) {
+      background-color: var(--accent-solid);
+      color: var(--accent-solid-contrast);
+    }
+  }
+
+  @media (forced-colors: active) {
+    & :where(.kui-BaseMenuItem[data-highlighted]) {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+  }
+}
+
+.kui-VirtualMenuRoot:where(.kui-r-size-1) {
+  --base-menu-item-padding-y: var(--row-inset-1);
+  --base-menu-item-px: var(--control-px-1);
+  --base-menu-item-px-pill: var(--control-px-pill-1);
+  --base-menu-item-gap: var(--control-gap-1);
+  --base-menu-item-radius: var(--radius-row-1);
+  --base-menu-icon-size: var(--icon-size-1);
+  --base-menu-font-size: var(--font-size-1);
+  --base-menu-line-height: var(--line-height-1);
+  --base-menu-letter-spacing: var(--letter-spacing-1);
+}
+
+.kui-VirtualMenuRoot:where(.kui-r-size-2) {
+  --base-menu-item-padding-y: var(--row-inset-2);
+  --base-menu-item-px: var(--control-px-2);
+  --base-menu-item-px-pill: var(--control-px-pill-2);
+  --base-menu-item-gap: var(--control-gap-2);
+  --base-menu-item-radius: var(--radius-row-2);
+  --base-menu-icon-size: var(--icon-size-2);
+  --base-menu-font-size: var(--font-size-2);
+  --base-menu-line-height: var(--line-height-2);
+  --base-menu-letter-spacing: var(--letter-spacing-2);
+}
+
+.kui-VirtualMenuRoot:where(.kui-r-size-3) {
+  --base-menu-item-padding-y: var(--row-inset-3);
+  --base-menu-item-px: var(--control-px-3);
+  --base-menu-item-px-pill: var(--control-px-pill-3);
+  --base-menu-item-gap: var(--control-gap-3);
+  --base-menu-item-radius: var(--radius-row-3);
+  --base-menu-icon-size: var(--icon-size-3);
+  --base-menu-font-size: var(--font-size-3);
+  --base-menu-line-height: var(--line-height-3);
+  --base-menu-letter-spacing: var(--letter-spacing-3);
+}
+
+.kui-VirtualMenuRoot:where(.kui-r-size-4) {
+  --base-menu-item-padding-y: var(--row-inset-4);
+  --base-menu-item-px: var(--control-px-4);
+  --base-menu-item-px-pill: var(--control-px-pill-4);
+  --base-menu-item-gap: var(--control-gap-4);
+  --base-menu-item-radius: var(--radius-row-4);
+  --base-menu-icon-size: var(--icon-size-4);
+  --base-menu-font-size: var(--font-size-4);
+  --base-menu-line-height: var(--line-height-4);
+  --base-menu-letter-spacing: var(--letter-spacing-4);
+}

package/src/components/virtual-menu.tsx

@@ -3,7 +3,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useMenuContext, getMenuItemHeight } from './_internal/menu-context.js';
+import { useLayoutEffect } from 'radix-ui/internal';
+import { useMenuContext, useMenuClose, getMenuItemHeight } from './_internal/menu-context.js';
 
 import type { MenuSize } from './_internal/menu-context.js';
 
@@ -55,37 +56,58 @@ interface VirtualMenuRenderItemProps<T> {
   'data-highlighted': true | undefined;
   /** Data attribute for event delegation */
   'data-index': number;
+  /** Number of items in the whole list, since only some rows are mounted */
+  'aria-setsize': number;
+  /** Position of this row in the whole list, from 1 */
+  'aria-posinset': number;
   /** Mouse enter handler */
   onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;
   /** Mouse leave handler */
-  onMouseLeave: () => void;
+  onMouseLeave: (e: React.MouseEvent<HTMLElement>) => void;
   /** Click handler */
   onClick: (e: React.MouseEvent<HTMLElement>) => void;
   /** Keyboard handler for Enter/Space activation */
   onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
 }
 
-interface VirtualMenuProps<T> {
+/** How rows are drawn: one of `itemLabel` or `renderItem` is required. */
+type VirtualMenuRowProps<T> =
+  | {
+      /**
+       * Simple label accessor for basic text items.
+       * Can be a property key or a function.
+       * @example
+       * itemLabel="name"
+       * itemLabel={(item) => item.name}
+       */
+      itemLabel: keyof T | ((item: T) => React.ReactNode);
+      renderItem?: undefined;
+    }
+  | {
+      itemLabel?: undefined;
+      /**
+       * Custom component for rendering items.
+       * Must be memoized (React.memo) for optimal performance.
+       * @example
+       * const MyItem = React.memo(({ item, ...props }) => (
+       *   <VirtualMenu.Item {...props}>{item.name}</VirtualMenu.Item>
+       * ));
+       * <VirtualMenu items={items} renderItem={MyItem} />
+       */
+      renderItem: React.ComponentType<VirtualMenuRenderItemProps<T>>;
+    };
+
+/** Attributes of the list element that pass through, such as `id`, `aria-labelledby` or `data-*`. */
+type VirtualMenuDivProps = Omit<
+  React.ComponentPropsWithoutRef<'div'>,
+  'children' | 'onSelect' | 'role' | 'tabIndex' | 'aria-activedescendant'
+>;
+
+type VirtualMenuProps<T> = VirtualMenuDivProps & VirtualMenuRowProps<T> & VirtualMenuOwnProps<T>;
+
+interface VirtualMenuOwnProps<T> {
   /** Array of items to render */
   items: T[];
-  /**
-   * Simple label accessor for basic text items.
-   * Can be a property key or a function.
-   * @example
-   * itemLabel="name"
-   * itemLabel={(item) => item.name}
-   */
-  itemLabel?: keyof T | ((item: T) => React.ReactNode);
-  /**
-   * Custom component for rendering items.
-   * Must be memoized (React.memo) for optimal performance.
-   * @example
-   * const MyItem = React.memo(({ item, ...props }) => (
-   *   <VirtualMenu.Item {...props}>{item.name}</VirtualMenu.Item>
-   * ));
-   * <VirtualMenu items={items} renderItem={MyItem} />
-   */
-  renderItem?: React.ComponentType<VirtualMenuRenderItemProps<T>>;
   /**
    * Menu size - controls item height.
    * Automatically inherited from parent DropdownMenu.Content/ContextMenu.Content.
@@ -104,18 +126,24 @@ interface VirtualMenuProps<T> {
   overscan?: number;
   /** Callback when an item is selected */
   onSelect?: (item: T, index: number) => void;
-  /** Additional class name */
-  className?: string;
-  /** Additional styles */
-  style?: React.CSSProperties;
-  /** Accessible label for the menu */
-  'aria-label'?: string;
 }
 
 // ============================================================================
 // Internal Memoized Item Component
 // ============================================================================
 
+/**
+ * Rows get a new style object every render, so style is compared by the two values the
+ * list sets. Every other prop is compared shallowly, so aria-*, data-* and handlers update.
+ */
+function areRowPropsEqual<P extends { style?: React.CSSProperties }>(prev: P, next: P) {
+  if (prev.style?.height !== next.style?.height) return false;
+  if (prev.style?.transform !== next.style?.transform) return false;
+  const prevKeys = Object.keys(prev) as (keyof P)[];
+  if (prevKeys.length !== Object.keys(next).length) return false;
+  return prevKeys.every((key) => key === 'style' || Object.is(prev[key], next[key]));
+}
+
 interface SimpleItemProps {
   label: React.ReactNode;
   isHighlighted: boolean;
@@ -124,8 +152,10 @@ interface SimpleItemProps {
   tabIndex: number;
   'data-highlighted': true | undefined;
   'data-index': number;
+  'aria-setsize': number;
+  'aria-posinset': number;
   onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;
-  onMouseLeave: () => void;
+  onMouseLeave: (e: React.MouseEvent<HTMLElement>) => void;
   onClick: (e: React.MouseEvent<HTMLElement>) => void;
   onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
 }
@@ -139,6 +169,8 @@ const SimpleItem = React.memo(
     tabIndex,
     'data-highlighted': dataHighlighted,
     'data-index': dataIndex,
+    'aria-setsize': setSize,
+    'aria-posinset': posInSet,
     onMouseEnter,
     onMouseLeave,
     onClick,
@@ -153,6 +185,8 @@ const SimpleItem = React.memo(
         tabIndex={tabIndex}
         data-highlighted={dataHighlighted}
         data-index={dataIndex}
+        aria-setsize={setSize}
+        aria-posinset={posInSet}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         onClick={onClick}
@@ -162,47 +196,84 @@ const SimpleItem = React.memo(
       </div>
     );
   },
-  (prev, next) => {
-    // Custom comparison - only re-render if these change
-    if (prev.label !== next.label) return false;
-    if (prev['data-highlighted'] !== next['data-highlighted']) return false;
-    if (prev.style.height !== next.style.height) return false;
-    if (prev.style.transform !== next.style.transform) return false;
-    if (prev.tabIndex !== next.tabIndex) return false;
-    if (prev.id !== next.id) return false;
-    // Event handlers are stable, skip comparison
-    return true;
-  },
+  areRowPropsEqual,
 );
 
 // ============================================================================
 // VirtualMenu Component
 // ============================================================================
 
-function VirtualMenuRoot<T>({
-  items,
-  itemLabel,
-  renderItem: RenderItem,
-  size: sizeProp,
-  estimatedItemSize: estimatedItemSizeProp,
-  overscan = 5,
-  onSelect,
-  className,
-  style,
-  'aria-label': ariaLabel,
-}: VirtualMenuProps<T>) {
+/**
+ * Measures the row height the menu's CSS draws (--base-menu-item-height), so rows follow
+ * the theme scale instead of the fixed 100% table. Returns undefined until measured.
+ */
+function useMeasuredRowHeight(
+  rootRef: React.RefObject<HTMLDivElement | null>,
+  enabled: boolean,
+  size: MenuSize | undefined,
+) {
+  const [height, setHeight] = React.useState<number | undefined>(undefined);
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!enabled || !root) return;
+    const probe = document.createElement('div');
+    probe.className = 'kui-reset kui-BaseMenuItem kui-VirtualMenuItem';
+    probe.setAttribute('aria-hidden', 'true');
+    probe.style.visibility = 'hidden';
+    probe.textContent = '\u00a0';
+    root.appendChild(probe);
+    const measured = probe.getBoundingClientRect().height;
+    probe.remove();
+    setHeight(measured > 0 ? measured : undefined);
+  }, [rootRef, enabled, size]);
+  return enabled ? height : undefined;
+}
+
+function VirtualMenuRootInner<T>(
+  {
+    items,
+    itemLabel,
+    renderItem: RenderItem,
+    size: sizeProp,
+    estimatedItemSize: estimatedItemSizeProp,
+    overscan = 5,
+    onSelect,
+    className,
+    style,
+    onKeyDown,
+    onFocus,
+    ...rootProps
+  }: VirtualMenuProps<T>,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+) {
   const menuId = React.useId();
   const parentRef = React.useRef<HTMLDivElement>(null);
   const [highlightedIndex, setHighlightedIndex] = React.useState<number>(-1);
   const { isInsideMenu, size: contextSize, itemHeight: contextItemHeight } = useMenuContext();
+  const closeMenu = useMenuClose();
+
+  const setRootRef = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      parentRef.current = node;
+      if (typeof forwardedRef === 'function') forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [forwardedRef],
+  );
+
+  // Inside a menu, the CSS row height is measured so it tracks the theme scale.
+  const measuredItemHeight = useMeasuredRowHeight(
+    parentRef,
+    isInsideMenu && sizeProp == null && estimatedItemSizeProp == null,
+    contextSize,
+  );
 
-  // Resolve item height: explicit prop > own size > parent menu > default size '2'.
-  // Heights follow the theme scaling, like the --base-menu-item-height token.
+  // Resolve item height: explicit prop > own size > measured CSS row > parent menu > default size '2'.
   const estimatedItemSize =
     estimatedItemSizeProp ??
     (sizeProp
       ? getMenuItemHeight(sizeProp)
-      : (contextItemHeight ?? getMenuItemHeight(contextSize ?? '2')));
+      : (measuredItemHeight ?? contextItemHeight ?? getMenuItemHeight(contextSize ?? '2')));
 
   // Validate props
   if (!itemLabel && !RenderItem) {
@@ -241,11 +312,45 @@ function VirtualMenuRoot<T>({
 
   const virtualItems = virtualizer.getVirtualItems();
 
+  // Re-measure cached rows when the resolved row height changes.
+  useLayoutEffect(() => {
+    virtualizer.measure();
+  }, [virtualizer, estimatedItemSize]);
+
+  // Inside a menu, the menu focuses its own content on open (and a submenu on keyboard
+  // open). Hand that focus to the list so arrow keys reach the rows.
+  React.useEffect(() => {
+    const root = parentRef.current;
+    if (!isInsideMenu || !root) return;
+    const content = root.closest<HTMLElement>('[data-radix-menu-content]');
+    if (!content) return;
+    const handleFocusIn = (event: FocusEvent) => {
+      if (event.target === content) root.focus({ preventScroll: true });
+    };
+    content.addEventListener('focusin', handleFocusIn);
+    if (document.activeElement === content) root.focus({ preventScroll: true });
+    return () => content.removeEventListener('focusin', handleFocusIn);
+  }, [isInsideMenu]);
+
   // Refs for stable handler references
+  const onKeyDownRef = React.useRef(onKeyDown);
+  const onFocusRef = React.useRef(onFocus);
+  onKeyDownRef.current = onKeyDown;
+  onFocusRef.current = onFocus;
   const itemsRef = React.useRef(items);
   const onSelectRef = React.useRef(onSelect);
+  const closeMenuRef = React.useRef(closeMenu);
   itemsRef.current = items;
   onSelectRef.current = onSelect;
+  closeMenuRef.current = closeMenu;
+
+  // Choosing a row calls onSelect, then closes the parent menu like a menu item does.
+  const selectIndex = React.useCallback((idx: number) => {
+    const currentItems = itemsRef.current;
+    if (idx < 0 || idx >= currentItems.length) return;
+    onSelectRef.current?.(currentItems[idx], idx);
+    closeMenuRef.current?.();
+  }, []);
 
   const scrollToIndexRef = React.useRef(virtualizer.scrollToIndex);
   scrollToIndexRef.current = virtualizer.scrollToIndex;
@@ -263,34 +368,29 @@ function VirtualMenuRoot<T>({
 
   const handleItemClick = React.useCallback((e: React.MouseEvent<HTMLElement>) => {
     const index = e.currentTarget.dataset.index;
-    if (index != null) {
-      const idx = Number(index);
-      const currentItems = itemsRef.current;
-      if (idx >= 0 && idx < currentItems.length) {
-        onSelectRef.current?.(currentItems[idx], idx);
-      }
-    }
-  }, []);
+    if (index != null) selectIndex(Number(index));
+  }, [selectIndex]);
 
-  const noop = React.useCallback(() => {}, []);
+  // Leaving a row clears its highlight, as a Radix item does on pointer leave.
+  const handleItemMouseLeave = React.useCallback((e: React.MouseEvent<HTMLElement>) => {
+    const index = Number(e.currentTarget.dataset.index);
+    setHighlightedIndex((current) => (current === index ? -1 : current));
+  }, []);
 
   // Item-level keyboard handler for Enter/Space activation (satisfies a11y lint rule)
   const handleItemKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLElement>) => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
+      e.stopPropagation();
       const index = e.currentTarget.dataset.index;
-      if (index != null) {
-        const idx = Number(index);
-        const currentItems = itemsRef.current;
-        if (idx >= 0 && idx < currentItems.length) {
-          onSelectRef.current?.(currentItems[idx], idx);
-        }
-      }
+      if (index != null) selectIndex(Number(index));
     }
-  }, []);
+  }, [selectIndex]);
 
   // Keyboard navigation
-  const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {
+  const handleKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
+    onKeyDownRef.current?.(e);
+    if (e.defaultPrevented) return;
     const currentItems = itemsRef.current;
     const currentHighlightedIndex = highlightedIndexRef.current;
 
@@ -327,20 +427,33 @@ function VirtualMenuRoot<T>({
       case 'Enter':
       case ' ': {
         e.preventDefault();
-        if (currentHighlightedIndex >= 0 && currentHighlightedIndex < currentItems.length) {
-          onSelectRef.current?.(currentItems[currentHighlightedIndex], currentHighlightedIndex);
-        }
+        selectIndex(currentHighlightedIndex);
         break;
       }
       case 'Tab': {
-        e.preventDefault();
+        // Inside a menu, Tab does not leave it. On its own, the list is one tab stop.
+        if (isInsideMenu) e.preventDefault();
         break;
       }
       case 'Escape': {
-        (e.currentTarget as HTMLElement).blur();
+        // Inside a menu, the menu handles Escape and returns focus to its trigger.
+        if (!isInsideMenu) e.currentTarget.blur();
         break;
       }
+      default: {
+        // The parent menu's typeahead would move focus off the list onto one of its items.
+        if (isInsideMenu && e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
+          e.stopPropagation();
+        }
+      }
     }
+  }, [selectIndex, isInsideMenu]);
+
+  // Keyboard focus on the list highlights the first row when none is highlighted.
+  const handleFocus = React.useCallback((e: React.FocusEvent<HTMLDivElement>) => {
+    onFocusRef.current?.(e);
+    if (e.target !== e.currentTarget) return;
+    if (highlightedIndexRef.current < 0 && itemsRef.current.length > 0) setHighlightedIndex(0);
   }, []);
 
   // Item ID generator
@@ -371,13 +484,19 @@ function VirtualMenuRoot<T>({
 
   return (
     <div
-      ref={parentRef}
+      {...rootProps}
+      ref={setRootRef}
       role={isInsideMenu ? 'group' : 'menu'}
-      aria-label={ariaLabel}
       aria-activedescendant={safeHighlightedIndex >= 0 ? getItemId(safeHighlightedIndex) : undefined}
       tabIndex={0}
       onKeyDown={handleKeyDown}
-      className={classNames('kui-VirtualMenuRoot', className)}
+      onFocus={handleFocus}
+      className={classNames(
+        'kui-VirtualMenuRoot',
+        // On its own, the list draws menu rows at its own size (virtual-menu.css).
+        !isInsideMenu && `kui-r-size-${sizeProp ?? '2'}`,
+        className,
+      )}
       style={rootStyle}
     >
       <div className="kui-VirtualMenuViewport" style={viewportStyle}>
@@ -395,11 +514,14 @@ function VirtualMenuRoot<T>({
             id: getItemId(index),
             isHighlighted,
             style: itemStyle,
-            tabIndex: isHighlighted ? 0 : -1,
+            // The list holds focus and points aria-activedescendant at the row, so it is the only tab stop.
+            tabIndex: -1,
             'data-highlighted': isHighlighted ? true as const : undefined,
             'data-index': index,
+            'aria-setsize': items.length,
+            'aria-posinset': index + 1,
             onMouseEnter: handleItemMouseEnter,
-            onMouseLeave: noop,
+            onMouseLeave: handleItemMouseLeave,
             onClick: handleItemClick,
             onKeyDown: handleItemKeyDown,
           };
@@ -429,6 +551,9 @@ function VirtualMenuRoot<T>({
   );
 }
 
+const VirtualMenuRoot = React.forwardRef(VirtualMenuRootInner) as (<T>(
+  props: VirtualMenuProps<T> & React.RefAttributes<HTMLDivElement>,
+) => React.ReactElement) & { displayName?: string };
 VirtualMenuRoot.displayName = 'VirtualMenu';
 
 // ============================================================================
@@ -460,19 +585,8 @@ const VirtualMenuItemInner = React.forwardRef<HTMLDivElement, VirtualMenuItemPro
 
 VirtualMenuItemInner.displayName = 'VirtualMenu.Item';
 
-// Memoized with custom comparison
-const VirtualMenuItem = React.memo(VirtualMenuItemInner, (prevProps, nextProps) => {
-  const prevStyle = prevProps.style as React.CSSProperties | undefined;
-  const nextStyle = nextProps.style as React.CSSProperties | undefined;
-  if (prevStyle?.height !== nextStyle?.height) return false;
-  if (prevStyle?.transform !== nextStyle?.transform) return false;
-  if (prevProps['data-highlighted'] !== nextProps['data-highlighted']) return false;
-  if (prevProps.tabIndex !== nextProps.tabIndex) return false;
-  if (prevProps.id !== nextProps.id) return false;
-  if (prevProps.className !== nextProps.className) return false;
-  if (prevProps.children !== nextProps.children) return false;
-  return true;
-});
+// Style is compared by height and transform; every other prop shallowly.
+const VirtualMenuItem = React.memo(VirtualMenuItemInner, areRowPropsEqual);
 
 // ============================================================================
 // Exports

package/src/helpers/get-margin-styles.ts

@@ -7,21 +7,19 @@ import type { MarginProps } from '../props/margin.props.js';
 const marginValues = marginPropDefs.m.values;
 const marginValueSet: ReadonlySet<string> = new Set(marginValues);
 
-// Static table so the common case — a component with no margin props at all —
+// Built once from the prop defs, so the custom properties are the ones the
+// stylesheet reads. The common case, a component with no margin props at all,
 // is seven property reads and nothing else.
+const MARGIN_KEYS = ['m', 'mx', 'my', 'mt', 'mr', 'mb', 'ml'] as const;
 const MARGIN_PROPS: ReadonlyArray<{
   key: keyof MarginProps;
   className: string;
   customProperties: `--${string}`[];
-}> = [
-  { key: 'm', className: 'kui-r-m', customProperties: ['--margin'] },
-  { key: 'mx', className: 'kui-r-mx', customProperties: ['--margin-left', '--margin-right'] },
-  { key: 'my', className: 'kui-r-my', customProperties: ['--margin-top', '--margin-bottom'] },
-  { key: 'mt', className: 'kui-r-mt', customProperties: ['--margin-top'] },
-  { key: 'mr', className: 'kui-r-mr', customProperties: ['--margin-right'] },
-  { key: 'mb', className: 'kui-r-mb', customProperties: ['--margin-bottom'] },
-  { key: 'ml', className: 'kui-r-ml', customProperties: ['--margin-left'] },
-];
+}> = MARGIN_KEYS.map((key) => ({
+  key,
+  className: marginPropDefs[key].className,
+  customProperties: [...marginPropDefs[key].customProperties] as `--${string}`[],
+}));
 
 export function getMarginStyles(props: MarginProps) {
   let classes: string[] | undefined;