@jinmi/ui 0.0.0-stage → 6.0.2

package/es/base-ui/panelStyles.mjs

@@ -0,0 +1,95 @@
+import { focusRing } from "./focusRing.mjs";
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/panelStyles.ts
+const panelStyles = createStaticStyles(({ css, cssVar }) => ({
+	label: css`
+    font-size: 10px;
+    font-weight: 600;
+    color: ${cssVar.colorTextTertiary};
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  `,
+	nav: css`
+    ${focusRing};
+    cursor: pointer;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+
+    color: ${cssVar.colorTextSecondary};
+
+    background: none;
+
+    &:hover {
+      color: ${cssVar.colorText};
+      background: ${cssVar.colorFillTertiary};
+    }
+  `,
+	pill: css`
+    ${focusRing};
+    cursor: pointer;
+
+    display: inline-flex;
+    gap: 6px;
+    align-items: center;
+    justify-content: center;
+
+    height: 32px;
+    padding-inline: 14px;
+    border: 0;
+    border-radius: 999px;
+
+    font: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    color: ${cssVar.colorBgContainer};
+
+    background: ${cssVar.colorText};
+  `,
+	pillGhost: css`
+    color: ${cssVar.colorText};
+    background: ${cssVar.colorFillTertiary};
+
+    &:hover {
+      background: ${cssVar.colorFillSecondary};
+    }
+  `,
+	popup: css`
+    padding: 16px;
+    border-radius: 16px;
+    background: ${cssVar.colorBgElevated};
+    box-shadow: ${cssVar.boxShadow}, var(--jinmi-ring);
+  `,
+	title: css`
+    ${focusRing};
+    cursor: pointer;
+
+    padding: 0;
+    border: 0;
+
+    font: inherit;
+    font-size: 22px;
+    font-weight: 600;
+    line-height: 1.2;
+    color: ${cssVar.colorText};
+    text-align: start;
+    letter-spacing: -0.01em;
+
+    background: none;
+  `,
+	titleMuted: css`
+    font-weight: 400;
+    color: ${cssVar.colorTextTertiary};
+  `
+}));
+//#endregion
+export { panelStyles };
+
+//# sourceMappingURL=panelStyles.mjs.map

package/es/base-ui/panelStyles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelStyles.mjs","names":[],"sources":["../../src/base-ui/panelStyles.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const panelStyles = createStaticStyles(({ css, cssVar }) => ({\n  label: css`\n    font-size: 10px;\n    font-weight: 600;\n    color: ${cssVar.colorTextTertiary};\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n  `,\n  nav: css`\n    ${focusRing};\n    cursor: pointer;\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 28px;\n    height: 28px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n\n    color: ${cssVar.colorTextSecondary};\n\n    background: none;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillTertiary};\n    }\n  `,\n  pill: css`\n    ${focusRing};\n    cursor: pointer;\n\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    height: 32px;\n    padding-inline: 14px;\n    border: 0;\n    border-radius: 999px;\n\n    font: inherit;\n    font-size: 13px;\n    font-weight: 500;\n    color: ${cssVar.colorBgContainer};\n\n    background: ${cssVar.colorText};\n  `,\n  pillGhost: css`\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorFillTertiary};\n\n    &:hover {\n      background: ${cssVar.colorFillSecondary};\n    }\n  `,\n  popup: css`\n    padding: 16px;\n    border-radius: 16px;\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadow}, var(--jinmi-ring);\n  `,\n  title: css`\n    ${focusRing};\n    cursor: pointer;\n\n    padding: 0;\n    border: 0;\n\n    font: inherit;\n    font-size: 22px;\n    font-weight: 600;\n    line-height: 1.2;\n    color: ${cssVar.colorText};\n    text-align: start;\n    letter-spacing: -0.01em;\n\n    background: none;\n  `,\n  titleMuted: css`\n    font-weight: 400;\n    color: ${cssVar.colorTextTertiary};\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,cAAc,oBAAoB,EAAE,KAAK,cAAc;CAClE,OAAO,GAAG;;;aAGC,OAAO,kBAAkB;;;;CAIpC,KAAK,GAAG;MACJ,UAAU;;;;;;;;;;;;;aAaH,OAAO,mBAAmB;;;;;eAKxB,OAAO,UAAU;oBACZ,OAAO,kBAAkB;;;CAG3C,MAAM,GAAG;MACL,UAAU;;;;;;;;;;;;;;;;aAgBH,OAAO,iBAAiB;;kBAEnB,OAAO,UAAU;;CAEjC,WAAW,GAAG;aACH,OAAO,UAAU;kBACZ,OAAO,kBAAkB;;;oBAGvB,OAAO,mBAAmB;;;CAG5C,OAAO,GAAG;;;kBAGM,OAAO,gBAAgB;kBACvB,OAAO,UAAU;;CAEjC,OAAO,GAAG;MACN,UAAU;;;;;;;;;;aAUH,OAAO,UAAU;;;;;;CAM5B,YAAY,GAAG;;aAEJ,OAAO,kBAAkB;;AAEtC,EAAE"}

package/es/base-ui/virtual/MenuVirtualList.d.mts

@@ -0,0 +1,3 @@
+import "./type.mjs";
+import "./VirtualScrollArea.mjs";
+import { ReactNode } from "react";

package/es/base-ui/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/base-ui/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/base-ui/virtual/MenuVirtualList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuVirtualList.mjs","names":[],"sources":["../../../src/base-ui/virtual/MenuVirtualList.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { type ReactNode } from 'react';\r\n\r\nimport type { VirtualListProps } from './type';\r\nimport { useMenuVirtualList } from './useMenuVirtualList';\r\nimport { VirtualScrollArea, type VirtualScrollAreaProps } from './VirtualScrollArea';\r\n\r\nexport interface MenuVirtualListProps\r\n  extends\r\n    Omit<VirtualScrollAreaProps, 'viewport' | 'viewportProps' | 'virtualizerRef'>,\r\n    Pick<VirtualListProps, 'getItemLabel' | 'keepMounted'> {\r\n  children: ReactNode;\r\n}\r\n\r\nexport const MenuVirtualList = ({\r\n  children,\r\n  getItemLabel,\r\n  keepMounted,\r\n  ...rest\r\n}: MenuVirtualListProps) => {\r\n  const { keepMountedIndices, viewportProps, viewportRef, virtualChildren, virtualizerRef } =\r\n    useMenuVirtualList({ children, enabled: true, getItemLabel, keepMounted });\r\n\r\n  return (\r\n    <VirtualScrollArea\r\n      {...rest}\r\n      keepMounted={keepMountedIndices}\r\n      viewportProps={{ ref: viewportRef, ...viewportProps }}\r\n      virtualizerRef={virtualizerRef}\r\n    >\r\n      {virtualChildren}\r\n    </VirtualScrollArea>\r\n  );\r\n};\r\n\r\nMenuVirtualList.displayName = 'MenuVirtualList';\r\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/base-ui/virtual/VirtualScrollArea.d.mts

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

package/es/base-ui/virtual/VirtualScrollArea.mjs

@@ -0,0 +1,82 @@
+"use client";
+import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "../ScrollArea/atoms.mjs";
+import { Children, cloneElement, useCallback, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createStaticStyles, cx } from "antd-style";
+import { useMergeRefs } from "react-merge-refs";
+import { Virtualizer } from "virtua";
+//#region src/base-ui/virtual/VirtualScrollArea.tsx
+const styles = createStaticStyles(({ css }) => ({
+	root: css`
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    min-height: 0;
+    margin-inline: calc(-1 * var(--jinmi-virtual-scroll-inset, 0px));
+  `,
+	viewport: css`
+    flex: 1;
+    height: auto;
+    min-height: 0;
+    padding-inline: var(--jinmi-virtual-scroll-inset, 0);
+  `
+}));
+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(ScrollAreaViewport, {
+		tabIndex: -1,
+		...viewportProps,
+		className: cx(styles.viewport, viewportProps?.className),
+		ref: mergedViewportRef
+	});
+	return /* @__PURE__ */ jsxs(ScrollAreaRoot, {
+		"data-virtual": "",
+		...rest,
+		className: cx(styles.root, 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/base-ui/virtual/VirtualScrollArea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualScrollArea.mjs","names":[],"sources":["../../../src/base-ui/virtual/VirtualScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cx } from 'antd-style';\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  ScrollAreaViewport,\n  type ScrollAreaViewportProps,\n} from '@/base-ui/ScrollArea/atoms';\n\n// `--jinmi-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 = createStaticStyles(({ css }) => ({\n  root: css`\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    min-height: 0;\n    margin-inline: calc(-1 * var(--jinmi-virtual-scroll-inset, 0px));\n  `,\n  viewport: css`\n    flex: 1;\n    height: auto;\n    min-height: 0;\n    padding-inline: var(--jinmi-virtual-scroll-inset, 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    <ScrollAreaViewport\n      tabIndex={-1}\n      {...viewportProps}\n      className={cx(styles.viewport, viewportProps?.className as string)}\n      ref={mergedViewportRef}\n    />\n  );\n\n  return (\n    <ScrollAreaRoot data-virtual=\"\" {...rest} className={cx(styles.root, className as string)}>\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":";;;;;;;;AA2BA,MAAM,SAAS,oBAAoB,EAAE,WAAW;CAC9C,MAAM,GAAG;;;;;;;;CAQT,UAAU,GAAG;;;;;;AAMf,EAAE;AAIF,MAAM,oBAAoB;AAe1B,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;CAExE,MAAM,OACJ,oBAAC,aAAD;EACY;EACG;EACb,KAAK;EACL,WAAW;EACX,UAAU,KAAK,IAAI,mBAAmB,SAAS,MAAM,QAAQ,CAAC;EAE7D;CACU,CAAA;CAEf,MAAM,kBACJ,oBAAC,oBAAD;EACE,UAAU;EACV,GAAI;EACJ,WAAW,GAAG,OAAO,UAAU,eAAe,SAAmB;EACjE,KAAK;CACN,CAAA;CAGH,OACE,qBAAC,gBAAD;EAAgB,gBAAa;EAAG,GAAI;EAAM,WAAW,GAAG,OAAO,MAAM,SAAmB;EAAxF,UAAA,CACG,aAAa,YAAY,iBAAiB;GACzC,UAAU;GACV,GAAI,YAAY,EAAE,QAAQ,gBAAgB;EAC5C,CAAC,GACD,oBAAC,qBAAD,EAAA,UACE,oBAAC,iBAAD,CAAkB,CAAA,EACC,CAAA,CACP;;AAEpB;AAEA,kBAAkB,cAAc;AAIhC,SAAgB,wBAAwB;CACtC,MAAM,mBAAmB,OAAO,KAAK;CACrC,MAAM,aAAa,OAA6C,IAAI;CAEpE,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;CAEL,gBAAgB;EACd,aAAa;GACX,IAAI,WAAW,SAAS,aAAa,WAAW,OAAO;EACzD;CACF,GAAG,CAAC,CAAC;CAEL,OAAO;EACL;EACA;EACA,kBAAkB;GAChB,eAAe;GACf,aAAa;GACb,SAAS;EACX;CACF;AACF"}

package/es/base-ui/virtual/index.d.mts

@@ -0,0 +1,5 @@
+import { VirtualListProps } from "./type.mjs";
+import "./VirtualScrollArea.mjs";
+import "./MenuVirtualList.mjs";
+import "./useMenuVirtualList.mjs";
+export type { VirtualListProps };

package/es/base-ui/virtual/type.d.mts

@@ -0,0 +1,26 @@
+import { ReactElement } from "react";
+//#region src/base-ui/virtual/type.d.ts
+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
+export { VirtualListProps };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/virtual/useMenuVirtualList.d.mts

@@ -0,0 +1,3 @@
+import "./type.mjs";
+import React from "react";
+import "virtua";

package/es/base-ui/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/base-ui/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/base-ui/virtual/useMenuVirtualList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuVirtualList.mjs","names":[],"sources":["../../../src/base-ui/virtual/useMenuVirtualList.tsx"],"sourcesContent":["'use client';\r\n\r\nimport type React from 'react';\r\nimport {\r\n  Children,\r\n  cloneElement,\r\n  isValidElement,\r\n  useCallback,\r\n  useEffect,\r\n  useMemo,\r\n  useRef,\r\n  useState,\r\n} from 'react';\r\nimport type { VirtualizerHandle } from 'virtua';\r\n\r\nimport type { VirtualListProps } from './type';\r\nimport { usePointerScrollGuard } from './VirtualScrollArea';\r\n\r\nconst LIST_ITEM_SELECTOR = '[role^=\"menuitem\"], [role=\"option\"]';\r\nconst INDEX_ATTRIBUTE = 'data-virtual-index';\r\nconst MAX_JUMP_FRAMES = 60;\r\n\r\ninterface VirtualChildProps {\r\n  'aria-disabled'?: boolean | 'true' | 'false';\r\n  'aria-label'?: string;\r\n  'children'?: React.ReactNode;\r\n  'disabled'?: boolean;\r\n  'label'?: string;\r\n  'onFocus'?: (event: React.FocusEvent<HTMLElement>) => void;\r\n}\r\n\r\nexport interface ListEntry {\r\n  disabled: boolean;\r\n  label: string;\r\n}\r\n\r\nexport interface UseMenuVirtualListParams extends Pick<\r\n  VirtualListProps,\r\n  'getItemLabel' | 'keepMounted'\r\n> {\r\n  children: React.ReactNode;\r\n  enabled: boolean | undefined;\r\n  /**\r\n   * Idle time after which the typeahead query resets; matches Base UI's per-component value.\r\n   * @default 500\r\n   */\r\n  typeaheadResetMs?: number;\r\n}\r\n\r\nexport const flattenText = (node: React.ReactNode): string => {\r\n  if (node == null || typeof node === 'boolean') return '';\r\n  if (typeof node === 'string' || typeof node === 'number') return String(node);\r\n  if (Array.isArray(node)) return node.map(flattenText).join('');\r\n  if (isValidElement<{ children?: React.ReactNode }>(node)) return flattenText(node.props.children);\r\n  return '';\r\n};\r\n\r\nconst readEntry = (\r\n  child: React.ReactNode,\r\n  index: number,\r\n  getItemLabel: UseMenuVirtualListParams['getItemLabel'],\r\n): ListEntry => {\r\n  if (!isValidElement<VirtualChildProps>(child)) return { disabled: true, label: '' };\r\n  const props = child.props;\r\n  const label =\r\n    getItemLabel?.(child, index) ??\r\n    props.label ??\r\n    props['aria-label'] ??\r\n    flattenText(props.children);\r\n  const disabled =\r\n    Boolean(props.disabled) || props['aria-disabled'] === true || props['aria-disabled'] === 'true';\r\n  return { disabled, label: label.trim() };\r\n};\r\n\r\nexport const findMatch = (entries: ListEntry[], query: string, startIndex: number) => {\r\n  if (entries.length === 0) return -1;\r\n  const lowerQuery = query.toLowerCase();\r\n  const start = ((startIndex % entries.length) + entries.length) % entries.length;\r\n  for (let offset = 0; offset < entries.length; offset += 1) {\r\n    const index = (start + offset) % entries.length;\r\n    const entry = entries[index];\r\n    if (!entry.disabled && entry.label.toLowerCase().startsWith(lowerQuery)) return index;\r\n  }\r\n  return -1;\r\n};\r\n\r\nexport const findEdge = (entries: ListEntry[], fromEnd: boolean) => {\r\n  if (fromEnd) {\r\n    for (let index = entries.length - 1; index >= 0; index -= 1) {\r\n      if (!entries[index].disabled) return index;\r\n    }\r\n    return -1;\r\n  }\r\n  return entries.findIndex((entry) => !entry.disabled);\r\n};\r\n\r\nexport function useMenuVirtualList({\r\n  children,\r\n  enabled,\r\n  getItemLabel,\r\n  keepMounted,\r\n  typeaheadResetMs = 500,\r\n}: UseMenuVirtualListParams) {\r\n  const viewportRef = useRef<HTMLDivElement | null>(null);\r\n  const virtualizerRef = useRef<VirtualizerHandle | null>(null);\r\n  const focusedItemRef = useRef<HTMLElement | null>(null);\r\n  const activeIndexRef = useRef<number | null>(null);\r\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\r\n  // A Home/End/typeahead target stays mounted until focus actually lands on it, so the\r\n  // focusin resync (which re-sets the active index to the still-focused old row) can't unmount\r\n  // it mid-scroll on a large jump.\r\n  const jumpTargetRef = useRef<number | null>(null);\r\n  const [jumpTarget, setJumpTarget] = useState<number | null>(null);\r\n  const { pointerScrollRef, scrollGuardProps } = usePointerScrollGuard();\r\n\r\n  const entries = useMemo(\r\n    () =>\r\n      enabled\r\n        ? (Children.map(children, (child, index) => readEntry(child, index, getItemLabel)) ?? [])\r\n        : [],\r\n    [children, enabled, getItemLabel],\r\n  );\r\n\r\n  // Base UI scrolls the focused item into view right after focusing it; while the pointer is\r\n  // scrolling that would yank the list back, so the item's scrollIntoView checks the guard.\r\n  const guardScrollIntoView = useCallback(\r\n    (item: HTMLElement) => {\r\n      if (Object.hasOwn(item, 'scrollIntoView')) return;\r\n      item.scrollIntoView = (...args) => {\r\n        if (!pointerScrollRef.current) HTMLElement.prototype.scrollIntoView.call(item, ...args);\r\n      };\r\n    },\r\n    [pointerScrollRef],\r\n  );\r\n\r\n  // Keeps focus inside the popup on the viewport, so a row unmounting under the old focus never\r\n  // drops focus to the body mid-jump — Base UI Menu closes on focus-out.\r\n  const parkFocus = useCallback(() => {\r\n    const viewport = viewportRef.current;\r\n    if (viewport && !viewport.contains(document.activeElement)) {\r\n      viewport.focus({ preventScroll: true });\r\n    }\r\n  }, []);\r\n\r\n  const settleScrollRef = useRef(-1);\r\n  // Focus the jump target only once the scroll has settled on it (its row is mounted and the\r\n  // offset stopped changing), so we never focus a row that's about to unmount and orphan focus.\r\n  const focusJumpTarget = useCallback(() => {\r\n    const index = jumpTargetRef.current;\r\n    const viewport = viewportRef.current;\r\n    if (index === null || !viewport) return false;\r\n    parkFocus();\r\n    const scrollTop = viewport.scrollTop;\r\n    const settled = scrollTop === settleScrollRef.current;\r\n    settleScrollRef.current = scrollTop;\r\n    if (!settled) return false;\r\n    const child = viewport.querySelector<HTMLElement>(`[${INDEX_ATTRIBUTE}=\"${index}\"]`);\r\n    const target =\r\n      child &&\r\n      (child.matches(LIST_ITEM_SELECTOR)\r\n        ? child\r\n        : child.querySelector<HTMLElement>(LIST_ITEM_SELECTOR));\r\n    if (!target) return false;\r\n    guardScrollIntoView(target);\r\n    focusedItemRef.current = target;\r\n    target.focus({ preventScroll: true });\r\n    return true;\r\n  }, [guardScrollIntoView, parkFocus]);\r\n\r\n  // The virtualizer shifts its window in response to keyboard nav and jumps, so react to every\r\n  // DOM change: finish a pending jump the moment its target mounts, otherwise keep Base UI's\r\n  // highlight index in step by re-firing focusin on the still-focused row (or, if it was\r\n  // unmounted, park focus on the viewport so the popup keydown handlers stay reachable).\r\n  useEffect(() => {\r\n    const viewport = viewportRef.current;\r\n    if (!enabled || !viewport) return;\r\n    const observer = new MutationObserver(() => {\r\n      if (jumpTargetRef.current !== null) {\r\n        focusJumpTarget();\r\n        return;\r\n      }\r\n      const focusedItem = focusedItemRef.current;\r\n      const active = document.activeElement;\r\n      if (focusedItem && !focusedItem.isConnected && active === document.body) {\r\n        focusedItemRef.current = null;\r\n        viewport.focus({ preventScroll: true });\r\n        return;\r\n      }\r\n      if (focusedItem && active === focusedItem) {\r\n        focusedItem.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));\r\n      }\r\n    });\r\n    observer.observe(viewport, { childList: true, subtree: true });\r\n    return () => observer.disconnect();\r\n  }, [enabled, focusJumpTarget]);\r\n\r\n  const jumpFrameRef = useRef<number | null>(null);\r\n  useEffect(() => {\r\n    return () => {\r\n      if (jumpFrameRef.current !== null) cancelAnimationFrame(jumpFrameRef.current);\r\n    };\r\n  }, []);\r\n\r\n  const jumpTo = useCallback(\r\n    (index: number) => {\r\n      activeIndexRef.current = index;\r\n      jumpTargetRef.current = index;\r\n      setActiveIndex(index);\r\n      setJumpTarget(index);\r\n      // Park focus on the viewport (inside the popup) before scrolling, so the row being\r\n      // unmounted underneath the old focus never drops focus to the body — which would trip\r\n      // Base UI Menu's focus-out close mid-jump.\r\n      viewportRef.current?.focus({ preventScroll: true });\r\n      settleScrollRef.current = -1;\r\n      virtualizerRef.current?.scrollToIndex(index, { align: 'nearest' });\r\n      // The MutationObserver finishes the jump on mount; kick it in case the target is already\r\n      // mounted (a short jump) and produces no mutation.\r\n      if (jumpFrameRef.current !== null) cancelAnimationFrame(jumpFrameRef.current);\r\n      let frames = 0;\r\n      const kick = () => {\r\n        jumpFrameRef.current = null;\r\n        focusJumpTarget();\r\n        frames += 1;\r\n        // Loop until the real focus event lands (which clears `jumpTargetRef` in onFocus), so a\r\n        // mid-scroll remount that orphans focus is recovered on the next frame; cap so a target\r\n        // that never mounts can't spin forever.\r\n        if (jumpTargetRef.current !== null && frames < MAX_JUMP_FRAMES) {\r\n          jumpFrameRef.current = requestAnimationFrame(kick);\r\n        } else if (jumpTargetRef.current !== null) {\r\n          jumpTargetRef.current = null;\r\n          setJumpTarget(null);\r\n        }\r\n      };\r\n      jumpFrameRef.current = requestAnimationFrame(kick);\r\n    },\r\n    [focusJumpTarget],\r\n  );\r\n\r\n  const queryRef = useRef('');\r\n  const lastMatchRef = useRef<number | null>(null);\r\n  const resetTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n  const resetQuery = useCallback(() => {\r\n    queryRef.current = '';\r\n    if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);\r\n    resetTimeoutRef.current = null;\r\n  }, []);\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);\r\n    };\r\n  }, []);\r\n\r\n  // Runs in the capture phase so Base UI's own Home/End and typeahead, which only see the\r\n  // mounted rows, never get the event. Mirrors `useTypeahead`: printable keys accumulate for\r\n  // `typeaheadResetMs`, a lone space activates while a space mid-query keeps typing, rapid\r\n  // repeats of one letter cycle through matches, and the search starts after the focused row\r\n  // and wraps.\r\n  const handleKeyDownCapture = useCallback(\r\n    (event: React.KeyboardEvent<HTMLElement>) => {\r\n      if (!enabled || entries.length === 0) return;\r\n      if (event.target instanceof HTMLElement && event.target.matches('input, textarea')) return;\r\n\r\n      if (event.key === 'Home' || event.key === 'End') {\r\n        const fromEnd = event.key === 'End';\r\n        const index = findEdge(entries, fromEnd);\r\n        if (index === -1) return;\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n        resetQuery();\r\n        jumpTo(index);\r\n        return;\r\n      }\r\n\r\n      if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;\r\n      if (event.key === ' ' && queryRef.current === '') return;\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n\r\n      const isNewSession = queryRef.current === '';\r\n      const allowRapidRepeat = entries.every(\r\n        (entry) =>\r\n          entry.disabled || entry.label[0]?.toLowerCase() !== entry.label[1]?.toLowerCase(),\r\n      );\r\n      if (allowRapidRepeat && queryRef.current === event.key) {\r\n        queryRef.current = '';\r\n      }\r\n      queryRef.current += event.key;\r\n      if (resetTimeoutRef.current) clearTimeout(resetTimeoutRef.current);\r\n      resetTimeoutRef.current = setTimeout(resetQuery, typeaheadResetMs);\r\n\r\n      const previous =\r\n        isNewSession || queryRef.current.length === 1\r\n          ? (activeIndexRef.current ?? lastMatchRef.current ?? -1)\r\n          : (lastMatchRef.current ?? activeIndexRef.current ?? -1);\r\n      const startIndex = queryRef.current.length === 1 ? previous + 1 : previous;\r\n      const index = findMatch(entries, queryRef.current, startIndex);\r\n      if (index !== -1) {\r\n        lastMatchRef.current = index;\r\n        jumpTo(index);\r\n      } else if (event.key !== ' ') {\r\n        resetQuery();\r\n      }\r\n    },\r\n    [enabled, entries, jumpTo, resetQuery, typeaheadResetMs],\r\n  );\r\n\r\n  const virtualChildren = useMemo(() => {\r\n    if (!enabled) return children;\r\n    return Children.map(children, (child, index) => {\r\n      if (!isValidElement<VirtualChildProps>(child)) return child;\r\n      const { onFocus } = child.props;\r\n      const extraProps: Record<string, unknown> = {\r\n        [INDEX_ATTRIBUTE]: index,\r\n        onFocus: (event: React.FocusEvent<HTMLElement>) => {\r\n          onFocus?.(event);\r\n          const item = (event.target as HTMLElement).closest<HTMLElement>(LIST_ITEM_SELECTOR);\r\n          if (item && event.currentTarget.contains(item)) {\r\n            focusedItemRef.current = item;\r\n            guardScrollIntoView(item);\r\n          }\r\n          activeIndexRef.current = index;\r\n          setActiveIndex(index);\r\n          if (jumpTargetRef.current === index) {\r\n            jumpTargetRef.current = null;\r\n            setJumpTarget(null);\r\n          }\r\n        },\r\n      };\r\n      return cloneElement(child, extraProps);\r\n    });\r\n  }, [children, enabled, guardScrollIntoView]);\r\n\r\n  const keepMountedIndices = useMemo(() => {\r\n    if (!enabled) return undefined;\r\n    const count = Children.count(children);\r\n    const indices = new Set(keepMounted);\r\n    if (activeIndex !== null) indices.add(activeIndex);\r\n    if (jumpTarget !== null) indices.add(jumpTarget);\r\n    const inRange = [...indices].filter((index) => index >= 0 && index < count);\r\n    return inRange.length ? inRange : undefined;\r\n  }, [activeIndex, children, enabled, jumpTarget, keepMounted]);\r\n\r\n  // While a jump is in flight, a row unmounting under focus fires blur → focus to the body,\r\n  // which trips Base UI Menu's focus-out close. Catch it and pull focus back to the viewport\r\n  // (still inside the popup) synchronously before the close can run.\r\n  const handleBlur = useCallback((event: React.FocusEvent<HTMLElement>) => {\r\n    if (jumpTargetRef.current === null) return;\r\n    const viewport = viewportRef.current;\r\n    if (!viewport) return;\r\n    if (event.relatedTarget && viewport.contains(event.relatedTarget)) return;\r\n    viewport.focus({ preventScroll: true });\r\n  }, []);\r\n\r\n  const viewportProps = useMemo(\r\n    () => ({ ...scrollGuardProps, onBlur: handleBlur, onKeyDownCapture: handleKeyDownCapture }),\r\n    [handleBlur, handleKeyDownCapture, scrollGuardProps],\r\n  );\r\n\r\n  return { keepMountedIndices, viewportProps, viewportRef, virtualChildren, virtualizerRef };\r\n}\r\n"],"mappings":"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"}

package/es/base-ui/zIndex/constants.mjs

@@ -0,0 +1,11 @@
+//#region src/base-ui/zIndex/constants.ts
+const Z_INDEX_LAYER = {
+	floating: 1100,
+	modal: 1200,
+	toast: 1e5,
+	step: 10
+};
+//#endregion
+export { Z_INDEX_LAYER };
+
+//# sourceMappingURL=constants.mjs.map

package/es/base-ui/zIndex/constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.mjs","names":[],"sources":["../../../src/base-ui/zIndex/constants.ts"],"sourcesContent":["export const Z_INDEX_LAYER = {\r\n  floating: 1100,\r\n  modal: 1200,\r\n  toast: 100_000,\r\n  step: 10,\r\n} as const;\r\n\r\nexport type LayerTier = 'floating' | 'modal' | 'toast';\r\n"],"mappings":";AAAA,MAAa,gBAAgB;CAC3B,UAAU;CACV,OAAO;CACP,OAAO;CACP,MAAM;AACR"}

package/es/base-ui/zIndex/manager.mjs

@@ -0,0 +1,21 @@
+import { Z_INDEX_LAYER } from "./constants.mjs";
+//#region src/base-ui/zIndex/manager.ts
+let mainTop = 0;
+let toastTop = 0;
+let warnedMainOverflow = false;
+function acquireLayerZIndex(tier) {
+	if (tier === "toast") {
+		toastTop = Math.max(toastTop, Z_INDEX_LAYER.toast) + Z_INDEX_LAYER.step;
+		return toastTop;
+	}
+	mainTop = Math.max(mainTop, Z_INDEX_LAYER[tier]) + Z_INDEX_LAYER.step;
+	if (process.env.NODE_ENV !== "production" && !warnedMainOverflow && mainTop >= Z_INDEX_LAYER.toast) {
+		warnedMainOverflow = true;
+		console.warn(`[lobe-ui z-index] main stack reached toast tier (${mainTop}); unexpected nesting depth`);
+	}
+	return mainTop;
+}
+//#endregion
+export { acquireLayerZIndex };
+
+//# sourceMappingURL=manager.mjs.map

package/es/base-ui/zIndex/manager.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"manager.mjs","names":[],"sources":["../../../src/base-ui/zIndex/manager.ts"],"sourcesContent":["import { type LayerTier, Z_INDEX_LAYER } from './constants';\r\n\r\nlet mainTop = 0;\r\nlet toastTop = 0;\r\nlet warnedMainOverflow = false;\r\n\r\nexport function acquireLayerZIndex(tier: LayerTier): number {\r\n  if (tier === 'toast') {\r\n    toastTop = Math.max(toastTop, Z_INDEX_LAYER.toast) + Z_INDEX_LAYER.step;\r\n    return toastTop;\r\n  }\r\n  mainTop = Math.max(mainTop, Z_INDEX_LAYER[tier]) + Z_INDEX_LAYER.step;\r\n  if (\r\n    process.env.NODE_ENV !== 'production' &&\r\n    !warnedMainOverflow &&\r\n    mainTop >= Z_INDEX_LAYER.toast\r\n  ) {\r\n    warnedMainOverflow = true;\r\n\r\n    console.warn(\r\n      `[lobe-ui z-index] main stack reached toast tier (${mainTop}); unexpected nesting depth`,\r\n    );\r\n  }\r\n  return mainTop;\r\n}\r\n\r\nexport function __resetLayerZIndexForTests(): void {\r\n  mainTop = 0;\r\n  toastTop = 0;\r\n  warnedMainOverflow = false;\r\n}\r\n\r\nexport function __seedMainTopForTests(value: number): void {\r\n  mainTop = value;\r\n}\r\n"],"mappings":";;AAEA,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,qBAAqB;AAEzB,SAAgB,mBAAmB,MAAyB;CAC1D,IAAI,SAAS,SAAS;EACpB,WAAW,KAAK,IAAI,UAAU,cAAc,KAAK,IAAI,cAAc;EACnE,OAAO;CACT;CACA,UAAU,KAAK,IAAI,SAAS,cAAc,KAAK,IAAI,cAAc;CACjE,IACE,QAAQ,IAAI,aAAa,gBACzB,CAAC,sBACD,WAAW,cAAc,OACzB;EACA,qBAAqB;EAErB,QAAQ,KACN,oDAAoD,QAAQ,4BAC9D;CACF;CACA,OAAO;AACT"}