@lobehub/ui 5.57.3 → 6.0.0-beta.1

package/es/internal/menu/renderUtils.mjs

@@ -0,0 +1,45 @@
+import Icon from "../../Icon/Icon.mjs";
+import { isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/internal/menu/renderUtils.tsx
+const getItemKey = (item, fallback) => {
+	if (item && "key" in item && item.key !== void 0) return item.key;
+	return fallback;
+};
+const getItemLabel = (item) => {
+	if (item.label !== void 0) return item.label;
+	if ("title" in item && item.title !== void 0) return item.title;
+	return item.key;
+};
+const renderIcon = (icon, size) => {
+	if (!icon) return null;
+	if (isValidElement(icon)) return icon;
+	return /* @__PURE__ */ jsx(Icon, {
+		icon,
+		size
+	});
+};
+const hasAnyIcon = (items, recursive = false) => {
+	return items.some((item) => {
+		if (!item) return false;
+		if (item.type === "checkbox") return true;
+		if ("icon" in item && item.icon) return true;
+		if (recursive && "children" in item && item.children) return hasAnyIcon(item.children, true);
+		return false;
+	});
+};
+const hasCheckboxAndIcon = (items) => {
+	let hasCheckbox = false;
+	let hasIcon = false;
+	for (const item of items) {
+		if (!item) continue;
+		if (item.type === "checkbox") hasCheckbox = true;
+		if ("icon" in item && item.icon) hasIcon = true;
+		if (hasCheckbox && hasIcon) return true;
+	}
+	return false;
+};
+//#endregion
+export { getItemKey, getItemLabel, hasAnyIcon, hasCheckboxAndIcon, renderIcon };
+
+//# sourceMappingURL=renderUtils.mjs.map

package/es/internal/menu/renderUtils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderUtils.mjs","names":[],"sources":["../../../src/internal/menu/renderUtils.tsx"],"sourcesContent":["import type { Key, ReactNode } from 'react';\nimport { isValidElement } from 'react';\n\nimport Icon, { type IconSize } from '@/Icon';\n\nimport type { BaseMenuItemType } from './baseItem';\nimport type { MenuCheckboxItemType } from './checkboxItem';\nimport type { MenuItemType, SubMenuType } from './type';\n\nexport type IconSpaceMode = 'global' | 'group';\n\nexport type IconAlign = 'center' | 'start';\n\nexport interface RenderOptions {\n  iconAlign?: IconAlign;\n  iconSpaceMode?: IconSpaceMode;\n  indicatorOnRight?: boolean;\n  reserveIconSpace?: boolean;\n}\n\nexport interface RenderItemContentOptions {\n  iconAlign?: IconAlign;\n  indicatorOnRight?: boolean;\n  reserveIconSpace?: boolean;\n  submenu?: boolean;\n}\n\ntype KeyableItem = { key?: Key };\n\nexport const getItemKey = (item: KeyableItem, fallback: string): Key => {\n  if (item && 'key' in item && item.key !== undefined) return item.key;\n  return fallback;\n};\n\ntype LabelableItem = {\n  key?: Key;\n  label?: ReactNode;\n  title?: ReactNode;\n};\n\nexport const getItemLabel = (\n  item: MenuItemType | SubMenuType | MenuCheckboxItemType | LabelableItem,\n): ReactNode => {\n  if (item.label !== undefined) return item.label;\n  if ('title' in item && item.title !== undefined) return item.title;\n  return item.key;\n};\n\nexport const renderIcon = (icon: MenuItemType['icon'], size?: IconSize): ReactNode => {\n  if (!icon) return null;\n  if (isValidElement(icon)) return icon;\n  return <Icon icon={icon} size={size} />;\n};\n\nexport const hasAnyIcon = (items: BaseMenuItemType[], recursive = false): boolean => {\n  return items.some((item) => {\n    if (!item) return false;\n    if ((item as MenuCheckboxItemType).type === 'checkbox') return true;\n    if ('icon' in item && item.icon) return true;\n    if (recursive && 'children' in item && item.children) {\n      return hasAnyIcon(item.children as BaseMenuItemType[], true);\n    }\n    return false;\n  });\n};\n\nexport const hasCheckboxAndIcon = (items: BaseMenuItemType[]): boolean => {\n  let hasCheckbox = false;\n  let hasIcon = false;\n  for (const item of items) {\n    if (!item) continue;\n    if ((item as MenuCheckboxItemType).type === 'checkbox') {\n      hasCheckbox = true;\n    }\n    if ('icon' in item && item.icon) {\n      hasIcon = true;\n    }\n    if (hasCheckbox && hasIcon) return true;\n  }\n  return false;\n};\n"],"mappings":";;;;AA6BA,MAAa,cAAc,MAAmB,aAA0B;CACtE,IAAI,QAAQ,SAAS,QAAQ,KAAK,QAAQ,KAAA,GAAW,OAAO,KAAK;CACjE,OAAO;AACT;AAQA,MAAa,gBACX,SACc;CACd,IAAI,KAAK,UAAU,KAAA,GAAW,OAAO,KAAK;CAC1C,IAAI,WAAW,QAAQ,KAAK,UAAU,KAAA,GAAW,OAAO,KAAK;CAC7D,OAAO,KAAK;AACd;AAEA,MAAa,cAAc,MAA4B,SAA+B;CACpF,IAAI,CAAC,MAAM,OAAO;CAClB,IAAI,eAAe,IAAI,GAAG,OAAO;CACjC,OAAO,oBAAC,MAAD;EAAY;EAAY;CAAO,CAAA;AACxC;AAEA,MAAa,cAAc,OAA2B,YAAY,UAAmB;CACnF,OAAO,MAAM,MAAM,SAAS;EAC1B,IAAI,CAAC,MAAM,OAAO;EAClB,IAAK,KAA8B,SAAS,YAAY,OAAO;EAC/D,IAAI,UAAU,QAAQ,KAAK,MAAM,OAAO;EACxC,IAAI,aAAa,cAAc,QAAQ,KAAK,UAC1C,OAAO,WAAW,KAAK,UAAgC,IAAI;EAE7D,OAAO;CACT,CAAC;AACH;AAEA,MAAa,sBAAsB,UAAuC;CACxE,IAAI,cAAc;CAClB,IAAI,UAAU;CACd,KAAK,MAAM,QAAQ,OAAO;EACxB,IAAI,CAAC,MAAM;EACX,IAAK,KAA8B,SAAS,YAC1C,cAAc;EAEhB,IAAI,UAAU,QAAQ,KAAK,MACzB,UAAU;EAEZ,IAAI,eAAe,SAAS,OAAO;CACrC;CACA,OAAO;AACT"}

package/es/internal/menu/switchItem.d.mts

@@ -0,0 +1,25 @@
+import { IconProps } from "../../Icon/type.mjs";
+import "../../Icon/index.mjs";
+import { Key, ReactNode } from "react";
+//#region src/internal/menu/switchItem.d.ts
+/**
+ * Switch menu item shared by DropdownMenu / ContextMenu.
+ * Similar to checkbox but renders as a toggle switch.
+ */
+export interface MenuSwitchItemType {
+  checked?: boolean;
+  closeOnClick?: boolean;
+  danger?: boolean;
+  defaultChecked?: boolean;
+  desc?: ReactNode;
+  disabled?: boolean;
+  extra?: ReactNode;
+  icon?: IconProps['icon'];
+  key: Key;
+  label?: ReactNode;
+  onCheckedChange?: (checked: boolean) => void;
+  title?: ReactNode;
+  type: 'switch';
+}
+//#endregion
+//# sourceMappingURL=switchItem.d.mts.map

package/es/internal/menu/type.d.mts

@@ -0,0 +1,35 @@
+import { IconProps } from "../../Icon/type.mjs";
+import "../../Icon/index.mjs";
+import { MenuInfo, RcMenuDividerType, RcMenuItemGroupType, RcMenuItemType, RcSubMenuType } from "./itemInterface.mjs";
+import { Key, ReactNode } from "react";
+//#region src/internal/menu/type.d.ts
+export interface MenuItemType extends RcMenuItemType {
+  /**
+   * Whether to close the menu when this item is clicked.
+   * Set to `false` to keep the menu open (useful for items with Upload, file picker, etc.)
+   * @default true
+   */
+  closeOnClick?: boolean;
+  danger?: boolean;
+  desc?: ReactNode;
+  icon?: IconProps['icon'];
+  loading?: boolean;
+  title?: string;
+}
+export interface SubMenuType<T extends MenuItemType = MenuItemType> extends Omit<RcSubMenuType, 'children'> {
+  children: ItemType<T>[];
+  desc?: ReactNode;
+  icon?: IconProps['icon'];
+}
+export interface MenuItemGroupType<T extends MenuItemType = MenuItemType> extends Omit<RcMenuItemGroupType, 'children'> {
+  children?: ItemType<T>[];
+  key?: Key;
+}
+export interface MenuDividerType extends RcMenuDividerType {
+  dashed?: boolean;
+  key?: Key;
+}
+export type ItemType<T extends MenuItemType = MenuItemType> = T | SubMenuType<T> | MenuItemGroupType<T> | MenuDividerType | null;
+export type GenericItemType<T = unknown> = T extends (infer U extends MenuItemType) ? unknown extends U ? ItemType : ItemType<U> : ItemType;
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/internal/panelStyles.mjs

@@ -0,0 +1,67 @@
+import { focusRing } from "../styles/stylex/focusRing.mjs";
+//#region src/internal/panelStyles.ts
+const styles = {
+	label: {
+		kMwMTN: "lb53gy9q",
+		kGuDYH: "lb1k6wstc",
+		k63SB2: "lb1s688f",
+		kb6lSQ: "lb9pfba7",
+		kP9fke: "lbtvhhri",
+		$$css: true
+	},
+	nav: {
+		kGNEyG: "lb6s0dn4",
+		kWkggS: "lbjbqb8w lb1gowcop",
+		kKwaWg: "lb18o3ruo",
+		kaIpWk: "lb16rqkct",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbc342km",
+		kMwMTN: "lbc77et8 lb1bxu9lh",
+		kkrTdU: "lb1ypdohk",
+		k1xSpc: "lb3nfvp2",
+		kZKoxP: "lb1fgtraw",
+		kjj79g: "lbl56j7k",
+		kmVPX3: "lb1717udv",
+		kzqmXN: "lbgd8bvy",
+		$$css: true
+	},
+	popup: {
+		kWkggS: "lb1w937bt",
+		kaIpWk: "lbgqmno8",
+		kGVxlE: "lb4hq661",
+		kmVPX3: "lb1tamke2",
+		$$css: true
+	},
+	title: {
+		kWkggS: "lbjbqb8w",
+		kKwaWg: "lb18o3ruo",
+		ksu8eU: "lbng3xce",
+		kMzoRj: "lbc342km",
+		kMwMTN: "lb66ogz0",
+		kkrTdU: "lb1ypdohk",
+		kVVagm: "lbln7xf2",
+		kGuDYH: "lb1i1m3gp",
+		k63SB2: "lb1s688f",
+		kb6lSQ: "lbjat59b",
+		kLWn49: "lb1u7k74",
+		kmVPX3: "lb1717udv",
+		k9WMMc: "lb1yc453h",
+		$$css: true
+	},
+	titleMuted: {
+		kMwMTN: "lb53gy9q",
+		k63SB2: "lbo1l8bm",
+		$$css: true
+	}
+};
+const panelStyles = {
+	label: styles.label,
+	nav: [focusRing.info, styles.nav],
+	popup: styles.popup,
+	title: [focusRing.info, styles.title],
+	titleMuted: styles.titleMuted
+};
+//#endregion
+export { panelStyles };
+
+//# sourceMappingURL=panelStyles.mjs.map

package/es/internal/panelStyles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelStyles.mjs","names":[],"sources":["../../src/internal/panelStyles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { focusRing } from '@/styles/stylex/focusRing';\n\nconst styles = stylex.create({\n  label: {\n    color: cssVar.colorTextTertiary,\n    fontSize: 10,\n    fontWeight: 600,\n    letterSpacing: '0.08em',\n    textTransform: 'uppercase',\n  },\n  nav: {\n    alignItems: 'center',\n    backgroundColor: { 'default': 'transparent', ':hover': cssVar.colorFillTertiary },\n    backgroundImage: 'none',\n    borderRadius: '50%',\n    borderStyle: 'none',\n    borderWidth: 0,\n    color: { 'default': cssVar.colorTextSecondary, ':hover': cssVar.colorText },\n    cursor: 'pointer',\n    display: 'inline-flex',\n    height: 28,\n    justifyContent: 'center',\n    padding: 0,\n    width: 28,\n  },\n  popup: {\n    backgroundColor: cssVar.colorBgElevated,\n    borderRadius: 16,\n    boxShadow: `${cssVar.boxShadow}, var(--lobe-ring)`,\n    padding: 16,\n  },\n  title: {\n    backgroundColor: 'transparent',\n    backgroundImage: 'none',\n    borderStyle: 'none',\n    borderWidth: 0,\n    color: cssVar.colorText,\n    cursor: 'pointer',\n    font: 'inherit',\n    fontSize: 22,\n    fontWeight: 600,\n    letterSpacing: '-0.01em',\n    lineHeight: 1.2,\n    padding: 0,\n    textAlign: 'start',\n  },\n  titleMuted: {\n    color: cssVar.colorTextTertiary,\n    fontWeight: 400,\n  },\n});\n\nexport const panelStyles = {\n  label: styles.label,\n  nav: [focusRing.info, styles.nav],\n  popup: styles.popup,\n  title: [focusRing.info, styles.title],\n  titleMuted: styles.titleMuted,\n};\n"],"mappings":";;AAIA,MAAM,SAAS;CACb,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAa,cAAc;CACzB,OAAO,OAAO;CACd,KAAK,CAAC,UAAU,MAAM,OAAO,GAAG;CAChC,OAAO,OAAO;CACd,OAAO,CAAC,UAAU,MAAM,OAAO,KAAK;CACpC,YAAY,OAAO;AACrB"}

package/es/internal/virtual/MenuVirtualList.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { VirtualScrollArea } from "./VirtualScrollArea.mjs";
+import { useMenuVirtualList } from "./useMenuVirtualList.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/internal/virtual/MenuVirtualList.tsx
+const MenuVirtualList = ({ children, getItemLabel, keepMounted, ...rest }) => {
+	const { keepMountedIndices, viewportProps, viewportRef, virtualChildren, virtualizerRef } = useMenuVirtualList({
+		children,
+		enabled: true,
+		getItemLabel,
+		keepMounted
+	});
+	return /* @__PURE__ */ jsx(VirtualScrollArea, {
+		...rest,
+		keepMounted: keepMountedIndices,
+		viewportProps: {
+			ref: viewportRef,
+			...viewportProps
+		},
+		virtualizerRef,
+		children: virtualChildren
+	});
+};
+MenuVirtualList.displayName = "MenuVirtualList";
+//#endregion
+export { MenuVirtualList };
+
+//# sourceMappingURL=MenuVirtualList.mjs.map

package/es/internal/virtual/MenuVirtualList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuVirtualList.mjs","names":[],"sources":["../../../src/internal/virtual/MenuVirtualList.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode } from 'react';\n\nimport type { VirtualListProps } from './type';\nimport { useMenuVirtualList } from './useMenuVirtualList';\nimport { VirtualScrollArea, type VirtualScrollAreaProps } from './VirtualScrollArea';\n\nexport interface MenuVirtualListProps\n  extends\n    Omit<VirtualScrollAreaProps, 'viewport' | 'viewportProps' | 'virtualizerRef'>,\n    Pick<VirtualListProps, 'getItemLabel' | 'keepMounted'> {\n  children: ReactNode;\n}\n\nexport const MenuVirtualList = ({\n  children,\n  getItemLabel,\n  keepMounted,\n  ...rest\n}: MenuVirtualListProps) => {\n  const { keepMountedIndices, viewportProps, viewportRef, virtualChildren, virtualizerRef } =\n    useMenuVirtualList({ children, enabled: true, getItemLabel, keepMounted });\n\n  return (\n    <VirtualScrollArea\n      {...rest}\n      keepMounted={keepMountedIndices}\n      viewportProps={{ ref: viewportRef, ...viewportProps }}\n      virtualizerRef={virtualizerRef}\n    >\n      {virtualChildren}\n    </VirtualScrollArea>\n  );\n};\n\nMenuVirtualList.displayName = 'MenuVirtualList';\n"],"mappings":";;;;;AAeA,MAAa,mBAAmB,EAC9B,UACA,cACA,aACA,GAAG,WACuB;CAC1B,MAAM,EAAE,oBAAoB,eAAe,aAAa,iBAAiB,mBACvE,mBAAmB;EAAE;EAAU,SAAS;EAAM;EAAc;CAAY,CAAC;CAE3E,OACE,oBAAC,mBAAD;EACE,GAAI;EACJ,aAAa;EACb,eAAe;GAAE,KAAK;GAAa,GAAG;EAAc;EACpC;EAEf,UAAA;CACgB,CAAA;AAEvB;AAEA,gBAAgB,cAAc"}

package/es/internal/virtual/VirtualScrollArea.d.mts

@@ -0,0 +1,3 @@
+import "../../ScrollArea/atoms.mjs";
+import { ReactElement, ReactNode, Ref } from "react";
+import "virtua";

package/es/internal/virtual/VirtualScrollArea.mjs

@@ -0,0 +1,87 @@
+"use client";
+import { styleProps } from "../../styles/stylex/props.mjs";
+import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewportImpl } from "../../ScrollArea/atoms.mjs";
+import { Children, cloneElement, useCallback, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMergeRefs } from "react-merge-refs";
+import { Virtualizer } from "virtua";
+//#region src/internal/virtual/VirtualScrollArea.tsx
+const styles = {
+	root: {
+		kUOVxO: "lba2rfrd",
+		k1xSpc: "lb78zum5",
+		kCS8Yb: "lb1t1x2f9",
+		kXwgrk: "lbdt5ytf",
+		kzQI83: "lb1iyjqo2",
+		kmuXW: "lbs83m0k",
+		kAzted: "lb2lwn1j",
+		$$css: true
+	},
+	viewport: {
+		kg3NbH: "lb9xwowr",
+		kCS8Yb: "lb1t1x2f9",
+		kzQI83: "lb1iyjqo2",
+		kmuXW: "lbs83m0k",
+		kZKoxP: "lbt7dq6l",
+		kAzted: "lb2lwn1j",
+		$$css: true
+	}
+};
+const INITIAL_ROW_COUNT = 20;
+const VirtualScrollArea = ({ children, className, itemSize, keepMounted, viewport, viewportProps, virtualizerRef, ...rest }) => {
+	const viewportRef = useRef(null);
+	const mergedViewportRef = useMergeRefs([viewportRef, viewportProps?.ref]);
+	const list = /* @__PURE__ */ jsx(Virtualizer, {
+		itemSize,
+		keepMounted,
+		ref: virtualizerRef,
+		scrollRef: viewportRef,
+		ssrCount: Math.min(INITIAL_ROW_COUNT, Children.count(children)),
+		children
+	});
+	const viewportElement = /* @__PURE__ */ jsx(ScrollAreaViewportImpl, {
+		tabIndex: -1,
+		...viewportProps,
+		ref: mergedViewportRef,
+		xstyle: styles.viewport
+	});
+	return /* @__PURE__ */ jsxs(ScrollAreaRoot, {
+		"data-virtual": "",
+		...rest,
+		className: styleProps(styles.root, className).className,
+		children: [cloneElement(viewport ?? viewportElement, {
+			children: list,
+			...viewport && { render: viewportElement }
+		}), /* @__PURE__ */ jsx(ScrollAreaScrollbar, { children: /* @__PURE__ */ jsx(ScrollAreaThumb, {}) })]
+	});
+};
+VirtualScrollArea.displayName = "VirtualScrollArea";
+function usePointerScrollGuard() {
+	const pointerScrollRef = useRef(false);
+	const timeoutRef = useRef(null);
+	const markPointerScroll = useCallback(() => {
+		pointerScrollRef.current = true;
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		timeoutRef.current = setTimeout(() => {
+			pointerScrollRef.current = false;
+		}, 120);
+	}, []);
+	useEffect(() => {
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, []);
+	return {
+		markPointerScroll,
+		pointerScrollRef,
+		scrollGuardProps: {
+			onPointerDown: markPointerScroll,
+			onTouchMove: markPointerScroll,
+			onWheel: markPointerScroll
+		}
+	};
+}
+//#endregion
+export { VirtualScrollArea, usePointerScrollGuard };
+
+//# sourceMappingURL=VirtualScrollArea.mjs.map

package/es/internal/virtual/VirtualScrollArea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualScrollArea.mjs","names":[],"sources":["../../../src/internal/virtual/VirtualScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport {\n  Children,\n  cloneElement,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\nimport { Virtualizer, type VirtualizerHandle } from 'virtua';\n\nimport {\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaViewportImpl,\n  type ScrollAreaViewportProps,\n} from '@/ScrollArea/atoms';\nimport { styleProps } from '@/styles/stylex/props';\n\n// `--lobe-virtual-scroll-inset` is the inline padding of the box the scroll area sits in: the\n// root bleeds out by it so the scrollbar hugs that box's edge, and the viewport pads the rows back.\nconst styles = stylex.create({\n  root: {\n    marginInline: 'calc(-1 * var(--lobe-virtual-scroll-inset, 0px))',\n    display: 'flex',\n    flexBasis: '0%',\n    flexDirection: 'column',\n    flexGrow: 1,\n    flexShrink: 1,\n    minHeight: 0,\n  },\n  viewport: {\n    paddingInline: 'var(--lobe-virtual-scroll-inset, 0)',\n    flexBasis: '0%',\n    flexGrow: 1,\n    flexShrink: 1,\n    height: 'auto',\n    minHeight: 0,\n  },\n});\n\n// Rows mounted on the very first render, before the viewport is measured, so Base UI's\n// list navigation sees the leading rows (not a pinned footer item) when it focuses on open.\nconst INITIAL_ROW_COUNT = 20;\n\nexport interface VirtualScrollAreaProps extends Omit<ScrollAreaRootProps, 'children'> {\n  children: ReactNode;\n  itemSize?: number;\n  keepMounted?: readonly number[];\n  /**\n   * Element that owns the scrolling box (e.g. a Base UI `Select.List`); it is rendered\n   * through the ScrollArea viewport so its own props and role win.\n   */\n  viewport?: ReactElement<{ children?: ReactNode; render?: ReactElement }>;\n  viewportProps?: ScrollAreaViewportProps;\n  virtualizerRef?: Ref<VirtualizerHandle>;\n}\n\nexport const VirtualScrollArea = ({\n  children,\n  className,\n  itemSize,\n  keepMounted,\n  viewport,\n  viewportProps,\n  virtualizerRef,\n  ...rest\n}: VirtualScrollAreaProps) => {\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n  const mergedViewportRef = useMergeRefs([viewportRef, viewportProps?.ref]);\n\n  const list = (\n    <Virtualizer\n      itemSize={itemSize}\n      keepMounted={keepMounted}\n      ref={virtualizerRef}\n      scrollRef={viewportRef}\n      ssrCount={Math.min(INITIAL_ROW_COUNT, Children.count(children))}\n    >\n      {children}\n    </Virtualizer>\n  );\n  const viewportElement = (\n    <ScrollAreaViewportImpl\n      tabIndex={-1}\n      {...viewportProps}\n      ref={mergedViewportRef}\n      xstyle={styles.viewport}\n    />\n  );\n\n  return (\n    <ScrollAreaRoot\n      data-virtual=\"\"\n      {...rest}\n      className={styleProps(styles.root, className as string).className}\n    >\n      {cloneElement(viewport ?? viewportElement, {\n        children: list,\n        ...(viewport && { render: viewportElement }),\n      })}\n      <ScrollAreaScrollbar>\n        <ScrollAreaThumb />\n      </ScrollAreaScrollbar>\n    </ScrollAreaRoot>\n  );\n};\n\nVirtualScrollArea.displayName = 'VirtualScrollArea';\n\n// Base UI scrolls the highlighted item into view after focusing it; while the pointer drives\n// the scroll that would yank the list back, so callers consult `pointerScrollRef` first.\nexport function usePointerScrollGuard() {\n  const pointerScrollRef = useRef(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const markPointerScroll = useCallback(() => {\n    pointerScrollRef.current = true;\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    timeoutRef.current = setTimeout(() => {\n      pointerScrollRef.current = false;\n    }, 120);\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    };\n  }, []);\n\n  return {\n    markPointerScroll,\n    pointerScrollRef,\n    scrollGuardProps: {\n      onPointerDown: markPointerScroll,\n      onTouchMove: markPointerScroll,\n      onWheel: markPointerScroll,\n    },\n  };\n}\n"],"mappings":";;;;;;;;AAWA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAIA,MAAM,oBAAoB;AAgB1B,MAAa,qBAAqB,EAChC,UACA,WACA,UACA,aACA,UACA,eACA,gBACA,GAAG,WACyB;CAC5B,MAAM,cAAc,OAA8B,IAAI;CACtD,MAAM,oBAAoB,aAAa,CAAC,aAAa,eAAe,GAAG,CAAC;CACxE,MAAM,OAAO,oBAAC,aAAD;EAAuB;EAAuB;EAAa,KAAK;EAAgB,WAAW;EAAa,UAAU,KAAK,IAAI,mBAAmB,SAAS,MAAM,QAAQ,CAAC;EAC9K;CACU,CAAA;CACf,MAAM,kBAAkB,oBAAC,wBAAD;EAAwB,UAAU;EAAI,GAAI;EAAe,KAAK;EAAmB,QAAQ,OAAO;CAAW,CAAA;CACnI,OAAO,qBAAC,gBAAD;EAAgB,gBAAa;EAAG,GAAI;EAAM,WAAW,WAAW,OAAO,MAAM,SAAmB,CAAC,CAAC;EAAlG,UAAA,CACF,aAAa,YAAY,iBAAiB;GAC3C,UAAU;GACV,GAAI,YAAY,EACd,QAAQ,gBACV;EACF,CAAC,GACC,oBAAC,qBAAD,EAAA,UACE,oBAAC,iBAAD,CAAkB,CAAA,EACC,CAAA,CACP;;AACpB;AACA,kBAAkB,cAAc;AAIhC,SAAgB,wBAAwB;CACtC,MAAM,mBAAmB,OAAO,KAAK;CACrC,MAAM,aAAa,OAA6C,IAAI;CACpE,MAAM,oBAAoB,kBAAkB;EAC1C,iBAAiB,UAAU;EAC3B,IAAI,WAAW,SAAS,aAAa,WAAW,OAAO;EACvD,WAAW,UAAU,iBAAiB;GACpC,iBAAiB,UAAU;EAC7B,GAAG,GAAG;CACR,GAAG,CAAC,CAAC;CACL,gBAAgB;EACd,aAAa;GACX,IAAI,WAAW,SAAS,aAAa,WAAW,OAAO;EACzD;CACF,GAAG,CAAC,CAAC;CACL,OAAO;EACL;EACA;EACA,kBAAkB;GAChB,eAAe;GACf,aAAa;GACb,SAAS;EACX;CACF;AACF"}

package/es/internal/virtual/type.d.mts

@@ -0,0 +1,25 @@
+import { ReactElement } from "react";
+//#region src/internal/virtual/type.d.ts
+export interface VirtualListProps {
+  /**
+   * Typeahead label for a child row. Defaults to the row's `label` prop, then `aria-label`,
+   * then the flattened text of its children.
+   */
+  getItemLabel?: (child: ReactElement, index: number) => string | undefined;
+  /**
+   * Extra child indices to keep mounted while virtualized, on top of the highlighted row.
+   */
+  keepMounted?: readonly number[];
+  /**
+   * Row height hint for the virtualizer; rows are still measured after mount.
+   */
+  listItemHeight?: number;
+  /**
+   * Only mount the rows near the scroll position. Use for long flat lists (hundreds of rows);
+   * groups and submenus keep working but are kept mounted as one row.
+   * @default false
+   */
+  virtual?: boolean;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/internal/virtual/useMenuVirtualList.mjs

@@ -0,0 +1,256 @@
+"use client";
+import { usePointerScrollGuard } from "./VirtualScrollArea.mjs";
+import { Children, cloneElement, isValidElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
+//#region src/internal/virtual/useMenuVirtualList.tsx
+const LIST_ITEM_SELECTOR = "[role^=\"menuitem\"], [role=\"option\"]";
+const INDEX_ATTRIBUTE = "data-virtual-index";
+const MAX_JUMP_FRAMES = 60;
+const flattenText = (node) => {
+	if (node == null || typeof node === "boolean") return "";
+	if (typeof node === "string" || typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map(flattenText).join("");
+	if (isValidElement(node)) return flattenText(node.props.children);
+	return "";
+};
+const readEntry = (child, index, getItemLabel) => {
+	if (!isValidElement(child)) return {
+		disabled: true,
+		label: ""
+	};
+	const props = child.props;
+	const label = getItemLabel?.(child, index) ?? props.label ?? props["aria-label"] ?? flattenText(props.children);
+	return {
+		disabled: Boolean(props.disabled) || props["aria-disabled"] === true || props["aria-disabled"] === "true",
+		label: label.trim()
+	};
+};
+const findMatch = (entries, query, startIndex) => {
+	if (entries.length === 0) return -1;
+	const lowerQuery = query.toLowerCase();
+	const start = (startIndex % entries.length + entries.length) % entries.length;
+	for (let offset = 0; offset < entries.length; offset += 1) {
+		const index = (start + offset) % entries.length;
+		const entry = entries[index];
+		if (!entry.disabled && entry.label.toLowerCase().startsWith(lowerQuery)) return index;
+	}
+	return -1;
+};
+const findEdge = (entries, fromEnd) => {
+	if (fromEnd) {
+		for (let index = entries.length - 1; index >= 0; index -= 1) if (!entries[index].disabled) return index;
+		return -1;
+	}
+	return entries.findIndex((entry) => !entry.disabled);
+};
+function useMenuVirtualList({ children, enabled, getItemLabel, keepMounted, typeaheadResetMs = 500 }) {
+	const viewportRef = useRef(null);
+	const virtualizerRef = useRef(null);
+	const focusedItemRef = useRef(null);
+	const activeIndexRef = useRef(null);
+	const [activeIndex, setActiveIndex] = useState(null);
+	const jumpTargetRef = useRef(null);
+	const [jumpTarget, setJumpTarget] = useState(null);
+	const { pointerScrollRef, scrollGuardProps } = usePointerScrollGuard();
+	const entries = useMemo(() => enabled ? Children.map(children, (child, index) => readEntry(child, index, getItemLabel)) ?? [] : [], [
+		children,
+		enabled,
+		getItemLabel
+	]);
+	const guardScrollIntoView = useCallback((item) => {
+		if (Object.hasOwn(item, "scrollIntoView")) return;
+		item.scrollIntoView = (...args) => {
+			if (!pointerScrollRef.current) HTMLElement.prototype.scrollIntoView.call(item, ...args);
+		};
+	}, [pointerScrollRef]);
+	const parkFocus = useCallback(() => {
+		const viewport = viewportRef.current;
+		if (viewport && !viewport.contains(document.activeElement)) viewport.focus({ preventScroll: true });
+	}, []);
+	const settleScrollRef = useRef(-1);
+	const focusJumpTarget = useCallback(() => {
+		const index = jumpTargetRef.current;
+		const viewport = viewportRef.current;
+		if (index === null || !viewport) return false;
+		parkFocus();
+		const scrollTop = viewport.scrollTop;
+		const settled = scrollTop === settleScrollRef.current;
+		settleScrollRef.current = scrollTop;
+		if (!settled) return false;
+		const child = viewport.querySelector(`[${INDEX_ATTRIBUTE}="${index}"]`);
+		const target = child && (child.matches(LIST_ITEM_SELECTOR) ? child : child.querySelector(LIST_ITEM_SELECTOR));
+		if (!target) return false;
+		guardScrollIntoView(target);
+		focusedItemRef.current = target;
+		target.focus({ preventScroll: true });
+		return true;
+	}, [guardScrollIntoView, parkFocus]);
+	useEffect(() => {
+		const viewport = viewportRef.current;
+		if (!enabled || !viewport) return;
+		const observer = new MutationObserver(() => {
+			if (jumpTargetRef.current !== null) {
+				focusJumpTarget();
+				return;
+			}
+			const focusedItem = focusedItemRef.current;
+			const active = document.activeElement;
+			if (focusedItem && !focusedItem.isConnected && active === document.body) {
+				focusedItemRef.current = null;
+				viewport.focus({ preventScroll: true });
+				return;
+			}
+			if (focusedItem && active === focusedItem) focusedItem.dispatchEvent(new FocusEvent("focusin", { bubbles: true }));
+		});
+		observer.observe(viewport, {
+			childList: true,
+			subtree: true
+		});
+		return () => observer.disconnect();
+	}, [enabled, focusJumpTarget]);
+	const jumpFrameRef = useRef(null);
+	useEffect(() => {
+		return () => {
+			if (jumpFrameRef.current !== null) cancelAnimationFrame(jumpFrameRef.current);
+		};
+	}, []);
+	const jumpTo = useCallback((index) => {
+		activeIndexRef.current = index;
+		jumpTargetRef.current = index;
+		setActiveIndex(index);
+		setJumpTarget(index);
+		viewportRef.current?.focus({ preventScroll: true });
+		settleScrollRef.current = -1;
+		virtualizerRef.current?.scrollToIndex(index, { align: "nearest" });
+		if (jumpFrameRef.current !== null) cancelAnimationFrame(jumpFrameRef.current);
+		let frames = 0;
+		const kick = () => {
+			jumpFrameRef.current = null;
+			focusJumpTarget();
+			frames += 1;
+			if (jumpTargetRef.current !== null && frames < MAX_JUMP_FRAMES) jumpFrameRef.current = requestAnimationFrame(kick);
+			else if (jumpTargetRef.current !== null) {
+				jumpTargetRef.current = null;
+				setJumpTarget(null);
+			}
+		};
+		jumpFrameRef.current = requestAnimationFrame(kick);
+	}, [focusJumpTarget]);
+	const queryRef = useRef("");
+	const lastMatchRef = useRef(null);
+	const resetTimeoutRef = useRef(null);
+	const resetQuery = useCallback(() => {
+		queryRef.current = "";
+		if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);
+		resetTimeoutRef.current = null;
+	}, []);
+	useEffect(() => {
+		return () => {
+			if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);
+		};
+	}, []);
+	const handleKeyDownCapture = useCallback((event) => {
+		if (!enabled || entries.length === 0) return;
+		if (event.target instanceof HTMLElement && event.target.matches("input, textarea")) return;
+		if (event.key === "Home" || event.key === "End") {
+			const fromEnd = event.key === "End";
+			const index = findEdge(entries, fromEnd);
+			if (index === -1) return;
+			event.preventDefault();
+			event.stopPropagation();
+			resetQuery();
+			jumpTo(index);
+			return;
+		}
+		if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;
+		if (event.key === " " && queryRef.current === "") return;
+		event.preventDefault();
+		event.stopPropagation();
+		const isNewSession = queryRef.current === "";
+		if (entries.every((entry) => entry.disabled || entry.label[0]?.toLowerCase() !== entry.label[1]?.toLowerCase()) && queryRef.current === event.key) queryRef.current = "";
+		queryRef.current += event.key;
+		if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);
+		resetTimeoutRef.current = setTimeout(resetQuery, typeaheadResetMs);
+		const previous = isNewSession || queryRef.current.length === 1 ? activeIndexRef.current ?? lastMatchRef.current ?? -1 : lastMatchRef.current ?? activeIndexRef.current ?? -1;
+		const startIndex = queryRef.current.length === 1 ? previous + 1 : previous;
+		const index = findMatch(entries, queryRef.current, startIndex);
+		if (index !== -1) {
+			lastMatchRef.current = index;
+			jumpTo(index);
+		} else if (event.key !== " ") resetQuery();
+	}, [
+		enabled,
+		entries,
+		jumpTo,
+		resetQuery,
+		typeaheadResetMs
+	]);
+	const virtualChildren = useMemo(() => {
+		if (!enabled) return children;
+		return Children.map(children, (child, index) => {
+			if (!isValidElement(child)) return child;
+			const { onFocus } = child.props;
+			return cloneElement(child, {
+				[INDEX_ATTRIBUTE]: index,
+				onFocus: (event) => {
+					onFocus?.(event);
+					const item = event.target.closest(LIST_ITEM_SELECTOR);
+					if (item && event.currentTarget.contains(item)) {
+						focusedItemRef.current = item;
+						guardScrollIntoView(item);
+					}
+					activeIndexRef.current = index;
+					setActiveIndex(index);
+					if (jumpTargetRef.current === index) {
+						jumpTargetRef.current = null;
+						setJumpTarget(null);
+					}
+				}
+			});
+		});
+	}, [
+		children,
+		enabled,
+		guardScrollIntoView
+	]);
+	const keepMountedIndices = useMemo(() => {
+		if (!enabled) return void 0;
+		const count = Children.count(children);
+		const indices = new Set(keepMounted);
+		if (activeIndex !== null) indices.add(activeIndex);
+		if (jumpTarget !== null) indices.add(jumpTarget);
+		const inRange = [...indices].filter((index) => index >= 0 && index < count);
+		return inRange.length ? inRange : void 0;
+	}, [
+		activeIndex,
+		children,
+		enabled,
+		jumpTarget,
+		keepMounted
+	]);
+	const handleBlur = useCallback((event) => {
+		if (jumpTargetRef.current === null) return;
+		const viewport = viewportRef.current;
+		if (!viewport) return;
+		if (event.relatedTarget && viewport.contains(event.relatedTarget)) return;
+		viewport.focus({ preventScroll: true });
+	}, []);
+	return {
+		keepMountedIndices,
+		viewportProps: useMemo(() => ({
+			...scrollGuardProps,
+			onBlur: handleBlur,
+			onKeyDownCapture: handleKeyDownCapture
+		}), [
+			handleBlur,
+			handleKeyDownCapture,
+			scrollGuardProps
+		]),
+		viewportRef,
+		virtualChildren,
+		virtualizerRef
+	};
+}
+//#endregion
+export { findEdge, findMatch, flattenText, useMenuVirtualList };
+
+//# sourceMappingURL=useMenuVirtualList.mjs.map

package/es/internal/virtual/useMenuVirtualList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuVirtualList.mjs","names":[],"sources":["../../../src/internal/virtual/useMenuVirtualList.tsx"],"sourcesContent":["'use client';\n\nimport type React from 'react';\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { VirtualizerHandle } from 'virtua';\n\nimport type { VirtualListProps } from './type';\nimport { usePointerScrollGuard } from './VirtualScrollArea';\n\nconst LIST_ITEM_SELECTOR = '[role^=\"menuitem\"], [role=\"option\"]';\nconst INDEX_ATTRIBUTE = 'data-virtual-index';\nconst MAX_JUMP_FRAMES = 60;\n\ninterface VirtualChildProps {\n  'aria-disabled'?: boolean | 'true' | 'false';\n  'aria-label'?: string;\n  'children'?: React.ReactNode;\n  'disabled'?: boolean;\n  'label'?: string;\n  'onFocus'?: (event: React.FocusEvent<HTMLElement>) => void;\n}\n\nexport interface ListEntry {\n  disabled: boolean;\n  label: string;\n}\n\nexport interface UseMenuVirtualListParams extends Pick<\n  VirtualListProps,\n  'getItemLabel' | 'keepMounted'\n> {\n  children: React.ReactNode;\n  enabled: boolean | undefined;\n  /**\n   * Idle time after which the typeahead query resets; matches Base UI's per-component value.\n   * @default 500\n   */\n  typeaheadResetMs?: number;\n}\n\nexport const flattenText = (node: React.ReactNode): string => {\n  if (node == null || typeof node === 'boolean') return '';\n  if (typeof node === 'string' || typeof node === 'number') return String(node);\n  if (Array.isArray(node)) return node.map(flattenText).join('');\n  if (isValidElement<{ children?: React.ReactNode }>(node)) return flattenText(node.props.children);\n  return '';\n};\n\nconst readEntry = (\n  child: React.ReactNode,\n  index: number,\n  getItemLabel: UseMenuVirtualListParams['getItemLabel'],\n): ListEntry => {\n  if (!isValidElement<VirtualChildProps>(child)) return { disabled: true, label: '' };\n  const props = child.props;\n  const label =\n    getItemLabel?.(child, index) ??\n    props.label ??\n    props['aria-label'] ??\n    flattenText(props.children);\n  const disabled =\n    Boolean(props.disabled) || props['aria-disabled'] === true || props['aria-disabled'] === 'true';\n  return { disabled, label: label.trim() };\n};\n\nexport const findMatch = (entries: ListEntry[], query: string, startIndex: number) => {\n  if (entries.length === 0) return -1;\n  const lowerQuery = query.toLowerCase();\n  const start = ((startIndex % entries.length) + entries.length) % entries.length;\n  for (let offset = 0; offset < entries.length; offset += 1) {\n    const index = (start + offset) % entries.length;\n    const entry = entries[index];\n    if (!entry.disabled && entry.label.toLowerCase().startsWith(lowerQuery)) return index;\n  }\n  return -1;\n};\n\nexport const findEdge = (entries: ListEntry[], fromEnd: boolean) => {\n  if (fromEnd) {\n    for (let index = entries.length - 1; index >= 0; index -= 1) {\n      if (!entries[index].disabled) return index;\n    }\n    return -1;\n  }\n  return entries.findIndex((entry) => !entry.disabled);\n};\n\nexport function useMenuVirtualList({\n  children,\n  enabled,\n  getItemLabel,\n  keepMounted,\n  typeaheadResetMs = 500,\n}: UseMenuVirtualListParams) {\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n  const virtualizerRef = useRef<VirtualizerHandle | null>(null);\n  const focusedItemRef = useRef<HTMLElement | null>(null);\n  const activeIndexRef = useRef<number | null>(null);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  // A Home/End/typeahead target stays mounted until focus actually lands on it, so the\n  // focusin resync (which re-sets the active index to the still-focused old row) can't unmount\n  // it mid-scroll on a large jump.\n  const jumpTargetRef = useRef<number | null>(null);\n  const [jumpTarget, setJumpTarget] = useState<number | null>(null);\n  const { pointerScrollRef, scrollGuardProps } = usePointerScrollGuard();\n\n  const entries = useMemo(\n    () =>\n      enabled\n        ? (Children.map(children, (child, index) => readEntry(child, index, getItemLabel)) ?? [])\n        : [],\n    [children, enabled, getItemLabel],\n  );\n\n  // Base UI scrolls the focused item into view right after focusing it; while the pointer is\n  // scrolling that would yank the list back, so the item's scrollIntoView checks the guard.\n  const guardScrollIntoView = useCallback(\n    (item: HTMLElement) => {\n      if (Object.hasOwn(item, 'scrollIntoView')) return;\n      item.scrollIntoView = (...args) => {\n        if (!pointerScrollRef.current) HTMLElement.prototype.scrollIntoView.call(item, ...args);\n      };\n    },\n    [pointerScrollRef],\n  );\n\n  // Keeps focus inside the popup on the viewport, so a row unmounting under the old focus never\n  // drops focus to the body mid-jump — Base UI Menu closes on focus-out.\n  const parkFocus = useCallback(() => {\n    const viewport = viewportRef.current;\n    if (viewport && !viewport.contains(document.activeElement)) {\n      viewport.focus({ preventScroll: true });\n    }\n  }, []);\n\n  const settleScrollRef = useRef(-1);\n  // Focus the jump target only once the scroll has settled on it (its row is mounted and the\n  // offset stopped changing), so we never focus a row that's about to unmount and orphan focus.\n  const focusJumpTarget = useCallback(() => {\n    const index = jumpTargetRef.current;\n    const viewport = viewportRef.current;\n    if (index === null || !viewport) return false;\n    parkFocus();\n    const scrollTop = viewport.scrollTop;\n    const settled = scrollTop === settleScrollRef.current;\n    settleScrollRef.current = scrollTop;\n    if (!settled) return false;\n    const child = viewport.querySelector<HTMLElement>(`[${INDEX_ATTRIBUTE}=\"${index}\"]`);\n    const target =\n      child &&\n      (child.matches(LIST_ITEM_SELECTOR)\n        ? child\n        : child.querySelector<HTMLElement>(LIST_ITEM_SELECTOR));\n    if (!target) return false;\n    guardScrollIntoView(target);\n    focusedItemRef.current = target;\n    target.focus({ preventScroll: true });\n    return true;\n  }, [guardScrollIntoView, parkFocus]);\n\n  // The virtualizer shifts its window in response to keyboard nav and jumps, so react to every\n  // DOM change: finish a pending jump the moment its target mounts, otherwise keep Base UI's\n  // highlight index in step by re-firing focusin on the still-focused row (or, if it was\n  // unmounted, park focus on the viewport so the popup keydown handlers stay reachable).\n  useEffect(() => {\n    const viewport = viewportRef.current;\n    if (!enabled || !viewport) return;\n    const observer = new MutationObserver(() => {\n      if (jumpTargetRef.current !== null) {\n        focusJumpTarget();\n        return;\n      }\n      const focusedItem = focusedItemRef.current;\n      const active = document.activeElement;\n      if (focusedItem && !focusedItem.isConnected && active === document.body) {\n        focusedItemRef.current = null;\n        viewport.focus({ preventScroll: true });\n        return;\n      }\n      if (focusedItem && active === focusedItem) {\n        focusedItem.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));\n      }\n    });\n    observer.observe(viewport, { childList: true, subtree: true });\n    return () => observer.disconnect();\n  }, [enabled, focusJumpTarget]);\n\n  const jumpFrameRef = useRef<number | null>(null);\n  useEffect(() => {\n    return () => {\n      if (jumpFrameRef.current !== null) cancelAnimationFrame(jumpFrameRef.current);\n    };\n  }, []);\n\n  const jumpTo = useCallback(\n    (index: number) => {\n      activeIndexRef.current = index;\n      jumpTargetRef.current = index;\n      setActiveIndex(index);\n      setJumpTarget(index);\n      // Park focus on the viewport (inside the popup) before scrolling, so the row being\n      // unmounted underneath the old focus never drops focus to the body — which would trip\n      // Base UI Menu's focus-out close mid-jump.\n      viewportRef.current?.focus({ preventScroll: true });\n      settleScrollRef.current = -1;\n      virtualizerRef.current?.scrollToIndex(index, { align: 'nearest' });\n      // The MutationObserver finishes the jump on mount; kick it in case the target is already\n      // mounted (a short jump) and produces no mutation.\n      if (jumpFrameRef.current !== null) cancelAnimationFrame(jumpFrameRef.current);\n      let frames = 0;\n      const kick = () => {\n        jumpFrameRef.current = null;\n        focusJumpTarget();\n        frames += 1;\n        // Loop until the real focus event lands (which clears `jumpTargetRef` in onFocus), so a\n        // mid-scroll remount that orphans focus is recovered on the next frame; cap so a target\n        // that never mounts can't spin forever.\n        if (jumpTargetRef.current !== null && frames < MAX_JUMP_FRAMES) {\n          jumpFrameRef.current = requestAnimationFrame(kick);\n        } else if (jumpTargetRef.current !== null) {\n          jumpTargetRef.current = null;\n          setJumpTarget(null);\n        }\n      };\n      jumpFrameRef.current = requestAnimationFrame(kick);\n    },\n    [focusJumpTarget],\n  );\n\n  const queryRef = useRef('');\n  const lastMatchRef = useRef<number | null>(null);\n  const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const resetQuery = useCallback(() => {\n    queryRef.current = '';\n    if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);\n    resetTimeoutRef.current = null;\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);\n    };\n  }, []);\n\n  // Runs in the capture phase so Base UI's own Home/End and typeahead, which only see the\n  // mounted rows, never get the event. Mirrors `useTypeahead`: printable keys accumulate for\n  // `typeaheadResetMs`, a lone space activates while a space mid-query keeps typing, rapid\n  // repeats of one letter cycle through matches, and the search starts after the focused row\n  // and wraps.\n  const handleKeyDownCapture = useCallback(\n    (event: React.KeyboardEvent<HTMLElement>) => {\n      if (!enabled || entries.length === 0) return;\n      if (event.target instanceof HTMLElement && event.target.matches('input, textarea')) return;\n\n      if (event.key === 'Home' || event.key === 'End') {\n        const fromEnd = event.key === 'End';\n        const index = findEdge(entries, fromEnd);\n        if (index === -1) return;\n        event.preventDefault();\n        event.stopPropagation();\n        resetQuery();\n        jumpTo(index);\n        return;\n      }\n\n      if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;\n      if (event.key === ' ' && queryRef.current === '') return;\n      event.preventDefault();\n      event.stopPropagation();\n\n      const isNewSession = queryRef.current === '';\n      const allowRapidRepeat = entries.every(\n        (entry) =>\n          entry.disabled || entry.label[0]?.toLowerCase() !== entry.label[1]?.toLowerCase(),\n      );\n      if (allowRapidRepeat && queryRef.current === event.key) {\n        queryRef.current = '';\n      }\n      queryRef.current += event.key;\n      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);\n      resetTimeoutRef.current = setTimeout(resetQuery, typeaheadResetMs);\n\n      const previous =\n        isNewSession || queryRef.current.length === 1\n          ? (activeIndexRef.current ?? lastMatchRef.current ?? -1)\n          : (lastMatchRef.current ?? activeIndexRef.current ?? -1);\n      const startIndex = queryRef.current.length === 1 ? previous + 1 : previous;\n      const index = findMatch(entries, queryRef.current, startIndex);\n      if (index !== -1) {\n        lastMatchRef.current = index;\n        jumpTo(index);\n      } else if (event.key !== ' ') {\n        resetQuery();\n      }\n    },\n    [enabled, entries, jumpTo, resetQuery, typeaheadResetMs],\n  );\n\n  const virtualChildren = useMemo(() => {\n    if (!enabled) return children;\n    return Children.map(children, (child, index) => {\n      if (!isValidElement<VirtualChildProps>(child)) return child;\n      const { onFocus } = child.props;\n      const extraProps: Record<string, unknown> = {\n        [INDEX_ATTRIBUTE]: index,\n        onFocus: (event: React.FocusEvent<HTMLElement>) => {\n          onFocus?.(event);\n          const item = (event.target as HTMLElement).closest<HTMLElement>(LIST_ITEM_SELECTOR);\n          if (item && event.currentTarget.contains(item)) {\n            focusedItemRef.current = item;\n            guardScrollIntoView(item);\n          }\n          activeIndexRef.current = index;\n          setActiveIndex(index);\n          if (jumpTargetRef.current === index) {\n            jumpTargetRef.current = null;\n            setJumpTarget(null);\n          }\n        },\n      };\n      return cloneElement(child, extraProps);\n    });\n  }, [children, enabled, guardScrollIntoView]);\n\n  const keepMountedIndices = useMemo(() => {\n    if (!enabled) return undefined;\n    const count = Children.count(children);\n    const indices = new Set(keepMounted);\n    if (activeIndex !== null) indices.add(activeIndex);\n    if (jumpTarget !== null) indices.add(jumpTarget);\n    const inRange = [...indices].filter((index) => index >= 0 && index < count);\n    return inRange.length ? inRange : undefined;\n  }, [activeIndex, children, enabled, jumpTarget, keepMounted]);\n\n  // While a jump is in flight, a row unmounting under focus fires blur → focus to the body,\n  // which trips Base UI Menu's focus-out close. Catch it and pull focus back to the viewport\n  // (still inside the popup) synchronously before the close can run.\n  const handleBlur = useCallback((event: React.FocusEvent<HTMLElement>) => {\n    if (jumpTargetRef.current === null) return;\n    const viewport = viewportRef.current;\n    if (!viewport) return;\n    if (event.relatedTarget && viewport.contains(event.relatedTarget)) return;\n    viewport.focus({ preventScroll: true });\n  }, []);\n\n  const viewportProps = useMemo(\n    () => ({ ...scrollGuardProps, onBlur: handleBlur, onKeyDownCapture: handleKeyDownCapture }),\n    [handleBlur, handleKeyDownCapture, scrollGuardProps],\n  );\n\n  return { keepMountedIndices, viewportProps, viewportRef, virtualChildren, virtualizerRef };\n}\n"],"mappings":";;;;AAkBA,MAAM,qBAAqB;AAC3B,MAAM,kBAAkB;AACxB,MAAM,kBAAkB;AA6BxB,MAAa,eAAe,SAAkC;CAC5D,IAAI,QAAQ,QAAQ,OAAO,SAAS,WAAW,OAAO;CACtD,IAAI,OAAO,SAAS,YAAY,OAAO,SAAS,UAAU,OAAO,OAAO,IAAI;CAC5E,IAAI,MAAM,QAAQ,IAAI,GAAG,OAAO,KAAK,IAAI,WAAW,CAAC,CAAC,KAAK,EAAE;CAC7D,IAAI,eAA+C,IAAI,GAAG,OAAO,YAAY,KAAK,MAAM,QAAQ;CAChG,OAAO;AACT;AAEA,MAAM,aACJ,OACA,OACA,iBACc;CACd,IAAI,CAAC,eAAkC,KAAK,GAAG,OAAO;EAAE,UAAU;EAAM,OAAO;CAAG;CAClF,MAAM,QAAQ,MAAM;CACpB,MAAM,QACJ,eAAe,OAAO,KAAK,KAC3B,MAAM,SACN,MAAM,iBACN,YAAY,MAAM,QAAQ;CAG5B,OAAO;EAAE,UADP,QAAQ,MAAM,QAAQ,KAAK,MAAM,qBAAqB,QAAQ,MAAM,qBAAqB;EACxE,OAAO,MAAM,KAAK;CAAE;AACzC;AAEA,MAAa,aAAa,SAAsB,OAAe,eAAuB;CACpF,IAAI,QAAQ,WAAW,GAAG,OAAO;CACjC,MAAM,aAAa,MAAM,YAAY;CACrC,MAAM,SAAU,aAAa,QAAQ,SAAU,QAAQ,UAAU,QAAQ;CACzE,KAAK,IAAI,SAAS,GAAG,SAAS,QAAQ,QAAQ,UAAU,GAAG;EACzD,MAAM,SAAS,QAAQ,UAAU,QAAQ;EACzC,MAAM,QAAQ,QAAQ;EACtB,IAAI,CAAC,MAAM,YAAY,MAAM,MAAM,YAAY,CAAC,CAAC,WAAW,UAAU,GAAG,OAAO;CAClF;CACA,OAAO;AACT;AAEA,MAAa,YAAY,SAAsB,YAAqB;CAClE,IAAI,SAAS;EACX,KAAK,IAAI,QAAQ,QAAQ,SAAS,GAAG,SAAS,GAAG,SAAS,GACxD,IAAI,CAAC,QAAQ,MAAM,CAAC,UAAU,OAAO;EAEvC,OAAO;CACT;CACA,OAAO,QAAQ,WAAW,UAAU,CAAC,MAAM,QAAQ;AACrD;AAEA,SAAgB,mBAAmB,EACjC,UACA,SACA,cACA,aACA,mBAAmB,OACQ;CAC3B,MAAM,cAAc,OAA8B,IAAI;CACtD,MAAM,iBAAiB,OAAiC,IAAI;CAC5D,MAAM,iBAAiB,OAA2B,IAAI;CACtD,MAAM,iBAAiB,OAAsB,IAAI;CACjD,MAAM,CAAC,aAAa,kBAAkB,SAAwB,IAAI;CAIlE,MAAM,gBAAgB,OAAsB,IAAI;CAChD,MAAM,CAAC,YAAY,iBAAiB,SAAwB,IAAI;CAChE,MAAM,EAAE,kBAAkB,qBAAqB,sBAAsB;CAErE,MAAM,UAAU,cAEZ,UACK,SAAS,IAAI,WAAW,OAAO,UAAU,UAAU,OAAO,OAAO,YAAY,CAAC,KAAK,CAAC,IACrF,CAAC,GACP;EAAC;EAAU;EAAS;CAAY,CAClC;CAIA,MAAM,sBAAsB,aACzB,SAAsB;EACrB,IAAI,OAAO,OAAO,MAAM,gBAAgB,GAAG;EAC3C,KAAK,kBAAkB,GAAG,SAAS;GACjC,IAAI,CAAC,iBAAiB,SAAS,YAAY,UAAU,eAAe,KAAK,MAAM,GAAG,IAAI;EACxF;CACF,GACA,CAAC,gBAAgB,CACnB;CAIA,MAAM,YAAY,kBAAkB;EAClC,MAAM,WAAW,YAAY;EAC7B,IAAI,YAAY,CAAC,SAAS,SAAS,SAAS,aAAa,GACvD,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC;CAE1C,GAAG,CAAC,CAAC;CAEL,MAAM,kBAAkB,OAAO,EAAE;CAGjC,MAAM,kBAAkB,kBAAkB;EACxC,MAAM,QAAQ,cAAc;EAC5B,MAAM,WAAW,YAAY;EAC7B,IAAI,UAAU,QAAQ,CAAC,UAAU,OAAO;EACxC,UAAU;EACV,MAAM,YAAY,SAAS;EAC3B,MAAM,UAAU,cAAc,gBAAgB;EAC9C,gBAAgB,UAAU;EAC1B,IAAI,CAAC,SAAS,OAAO;EACrB,MAAM,QAAQ,SAAS,cAA2B,IAAI,gBAAgB,IAAI,MAAM,GAAG;EACnF,MAAM,SACJ,UACC,MAAM,QAAQ,kBAAkB,IAC7B,QACA,MAAM,cAA2B,kBAAkB;EACzD,IAAI,CAAC,QAAQ,OAAO;EACpB,oBAAoB,MAAM;EAC1B,eAAe,UAAU;EACzB,OAAO,MAAM,EAAE,eAAe,KAAK,CAAC;EACpC,OAAO;CACT,GAAG,CAAC,qBAAqB,SAAS,CAAC;CAMnC,gBAAgB;EACd,MAAM,WAAW,YAAY;EAC7B,IAAI,CAAC,WAAW,CAAC,UAAU;EAC3B,MAAM,WAAW,IAAI,uBAAuB;GAC1C,IAAI,cAAc,YAAY,MAAM;IAClC,gBAAgB;IAChB;GACF;GACA,MAAM,cAAc,eAAe;GACnC,MAAM,SAAS,SAAS;GACxB,IAAI,eAAe,CAAC,YAAY,eAAe,WAAW,SAAS,MAAM;IACvE,eAAe,UAAU;IACzB,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC;IACtC;GACF;GACA,IAAI,eAAe,WAAW,aAC5B,YAAY,cAAc,IAAI,WAAW,WAAW,EAAE,SAAS,KAAK,CAAC,CAAC;EAE1E,CAAC;EACD,SAAS,QAAQ,UAAU;GAAE,WAAW;GAAM,SAAS;EAAK,CAAC;EAC7D,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,SAAS,eAAe,CAAC;CAE7B,MAAM,eAAe,OAAsB,IAAI;CAC/C,gBAAgB;EACd,aAAa;GACX,IAAI,aAAa,YAAY,MAAM,qBAAqB,aAAa,OAAO;EAC9E;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,SAAS,aACZ,UAAkB;EACjB,eAAe,UAAU;EACzB,cAAc,UAAU;EACxB,eAAe,KAAK;EACpB,cAAc,KAAK;EAInB,YAAY,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC;EAClD,gBAAgB,UAAU;EAC1B,eAAe,SAAS,cAAc,OAAO,EAAE,OAAO,UAAU,CAAC;EAGjE,IAAI,aAAa,YAAY,MAAM,qBAAqB,aAAa,OAAO;EAC5E,IAAI,SAAS;EACb,MAAM,aAAa;GACjB,aAAa,UAAU;GACvB,gBAAgB;GAChB,UAAU;GAIV,IAAI,cAAc,YAAY,QAAQ,SAAS,iBAC7C,aAAa,UAAU,sBAAsB,IAAI;QAC5C,IAAI,cAAc,YAAY,MAAM;IACzC,cAAc,UAAU;IACxB,cAAc,IAAI;GACpB;EACF;EACA,aAAa,UAAU,sBAAsB,IAAI;CACnD,GACA,CAAC,eAAe,CAClB;CAEA,MAAM,WAAW,OAAO,EAAE;CAC1B,MAAM,eAAe,OAAsB,IAAI;CAC/C,MAAM,kBAAkB,OAA6C,IAAI;CACzE,MAAM,aAAa,kBAAkB;EACnC,SAAS,UAAU;EACnB,IAAI,gBAAgB,SAAS,aAAa,gBAAgB,OAAO;EACjE,gBAAgB,UAAU;CAC5B,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,aAAa;GACX,IAAI,gBAAgB,SAAS,aAAa,gBAAgB,OAAO;EACnE;CACF,GAAG,CAAC,CAAC;CAOL,MAAM,uBAAuB,aAC1B,UAA4C;EAC3C,IAAI,CAAC,WAAW,QAAQ,WAAW,GAAG;EACtC,IAAI,MAAM,kBAAkB,eAAe,MAAM,OAAO,QAAQ,iBAAiB,GAAG;EAEpF,IAAI,MAAM,QAAQ,UAAU,MAAM,QAAQ,OAAO;GAC/C,MAAM,UAAU,MAAM,QAAQ;GAC9B,MAAM,QAAQ,SAAS,SAAS,OAAO;GACvC,IAAI,UAAU,IAAI;GAClB,MAAM,eAAe;GACrB,MAAM,gBAAgB;GACtB,WAAW;GACX,OAAO,KAAK;GACZ;EACF;EAEA,IAAI,MAAM,IAAI,WAAW,KAAK,MAAM,WAAW,MAAM,WAAW,MAAM,QAAQ;EAC9E,IAAI,MAAM,QAAQ,OAAO,SAAS,YAAY,IAAI;EAClD,MAAM,eAAe;EACrB,MAAM,gBAAgB;EAEtB,MAAM,eAAe,SAAS,YAAY;EAK1C,IAJyB,QAAQ,OAC9B,UACC,MAAM,YAAY,MAAM,MAAM,EAAE,EAAE,YAAY,MAAM,MAAM,MAAM,EAAE,EAAE,YAAY,CAEjE,KAAK,SAAS,YAAY,MAAM,KACjD,SAAS,UAAU;EAErB,SAAS,WAAW,MAAM;EAC1B,IAAI,gBAAgB,SAAS,aAAa,gBAAgB,OAAO;EACjE,gBAAgB,UAAU,WAAW,YAAY,gBAAgB;EAEjE,MAAM,WACJ,gBAAgB,SAAS,QAAQ,WAAW,IACvC,eAAe,WAAW,aAAa,WAAW,KAClD,aAAa,WAAW,eAAe,WAAW;EACzD,MAAM,aAAa,SAAS,QAAQ,WAAW,IAAI,WAAW,IAAI;EAClE,MAAM,QAAQ,UAAU,SAAS,SAAS,SAAS,UAAU;EAC7D,IAAI,UAAU,IAAI;GAChB,aAAa,UAAU;GACvB,OAAO,KAAK;EACd,OAAO,IAAI,MAAM,QAAQ,KACvB,WAAW;CAEf,GACA;EAAC;EAAS;EAAS;EAAQ;EAAY;CAAgB,CACzD;CAEA,MAAM,kBAAkB,cAAc;EACpC,IAAI,CAAC,SAAS,OAAO;EACrB,OAAO,SAAS,IAAI,WAAW,OAAO,UAAU;GAC9C,IAAI,CAAC,eAAkC,KAAK,GAAG,OAAO;GACtD,MAAM,EAAE,YAAY,MAAM;GAkB1B,OAAO,aAAa,OAAO;KAhBxB,kBAAkB;IACnB,UAAU,UAAyC;KACjD,UAAU,KAAK;KACf,MAAM,OAAQ,MAAM,OAAuB,QAAqB,kBAAkB;KAClF,IAAI,QAAQ,MAAM,cAAc,SAAS,IAAI,GAAG;MAC9C,eAAe,UAAU;MACzB,oBAAoB,IAAI;KAC1B;KACA,eAAe,UAAU;KACzB,eAAe,KAAK;KACpB,IAAI,cAAc,YAAY,OAAO;MACnC,cAAc,UAAU;MACxB,cAAc,IAAI;KACpB;IACF;GAEkC,CAAC;EACvC,CAAC;CACH,GAAG;EAAC;EAAU;EAAS;CAAmB,CAAC;CAE3C,MAAM,qBAAqB,cAAc;EACvC,IAAI,CAAC,SAAS,OAAO,KAAA;EACrB,MAAM,QAAQ,SAAS,MAAM,QAAQ;EACrC,MAAM,UAAU,IAAI,IAAI,WAAW;EACnC,IAAI,gBAAgB,MAAM,QAAQ,IAAI,WAAW;EACjD,IAAI,eAAe,MAAM,QAAQ,IAAI,UAAU;EAC/C,MAAM,UAAU,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,UAAU,SAAS,KAAK,QAAQ,KAAK;EAC1E,OAAO,QAAQ,SAAS,UAAU,KAAA;CACpC,GAAG;EAAC;EAAa;EAAU;EAAS;EAAY;CAAW,CAAC;CAK5D,MAAM,aAAa,aAAa,UAAyC;EACvE,IAAI,cAAc,YAAY,MAAM;EACpC,MAAM,WAAW,YAAY;EAC7B,IAAI,CAAC,UAAU;EACf,IAAI,MAAM,iBAAiB,SAAS,SAAS,MAAM,aAAa,GAAG;EACnE,SAAS,MAAM,EAAE,eAAe,KAAK,CAAC;CACxC,GAAG,CAAC,CAAC;CAOL,OAAO;EAAE;EAAoB,eALP,eACb;GAAE,GAAG;GAAkB,QAAQ;GAAY,kBAAkB;EAAqB,IACzF;GAAC;GAAY;GAAsB;EAAgB,CAGZ;EAAG;EAAa;EAAiB;CAAe;AAC3F"}