@lobehub/ui 5.64.2 → 6.0.0-beta.10

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/overflow/OverflowList.mjs

@@ -0,0 +1,71 @@
+"use client";
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/internal/overflow/OverflowList.tsx
+const fitCount = (widths, restWidth, containerWidth) => {
+	if (containerWidth <= 0) return 0;
+	if (widths.reduce((sum, width) => sum + width, 0) <= containerWidth) return widths.length;
+	let used = restWidth;
+	let count = 0;
+	for (const width of widths) {
+		if (used + width > containerWidth) break;
+		used += width;
+		count += 1;
+	}
+	return count;
+};
+const hiddenStyle = {
+	insetBlockStart: 0,
+	insetInlineStart: 0,
+	pointerEvents: "none",
+	position: "absolute",
+	visibility: "hidden"
+};
+const OverflowList = ({ classNames, data, itemKey, maxCount, renderItem, renderRest }) => {
+	const responsive = maxCount === "responsive";
+	const rootRef = useRef(null);
+	const [fitted, setFitted] = useState(data.length);
+	useLayoutEffect(() => {
+		const root = rootRef.current;
+		if (!responsive || !root) return;
+		const measure = () => {
+			const items = [...root.querySelectorAll(":scope > [data-overflow-item]")];
+			const rest = root.querySelector(":scope > [data-overflow-rest]");
+			setFitted(fitCount(items.map((item) => item.getBoundingClientRect().width), rest?.getBoundingClientRect().width ?? 0, root.clientWidth));
+		};
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(root);
+		return () => observer.disconnect();
+	}, [responsive, data]);
+	const count = responsive ? Math.min(fitted, data.length) : typeof maxCount === "number" ? Math.min(Math.max(maxCount, 0), data.length) : data.length;
+	const rendered = responsive ? data : data.slice(0, count);
+	const omitted = data.slice(count);
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames?.root,
+		ref: rootRef,
+		style: { position: "relative" },
+		children: [rendered.map((item, index) => {
+			const hidden = index >= count;
+			return /* @__PURE__ */ jsx("div", {
+				"aria-hidden": hidden || void 0,
+				className: classNames?.item,
+				"data-overflow-item": "",
+				style: hidden ? hiddenStyle : void 0,
+				children: renderItem(item, index)
+			}, itemKey(item, index));
+		}), (omitted.length > 0 || responsive) && /* @__PURE__ */ jsx("div", {
+			"aria-hidden": omitted.length === 0 || void 0,
+			className: clsx$1(classNames?.item, classNames?.rest),
+			"data-overflow-rest": "",
+			style: omitted.length === 0 ? hiddenStyle : void 0,
+			children: renderRest(omitted.length > 0 ? omitted : data)
+		})]
+	});
+};
+//#endregion
+export { OverflowList, fitCount };
+
+//# sourceMappingURL=OverflowList.mjs.map

package/es/internal/overflow/OverflowList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowList.mjs","names":["clsx"],"sources":["../../../src/internal/overflow/OverflowList.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type Key, type ReactNode, useLayoutEffect, useRef, useState } from 'react';\n\nexport const fitCount = (widths: number[], restWidth: number, containerWidth: number) => {\n  if (containerWidth <= 0) return 0;\n  const total = widths.reduce((sum, width) => sum + width, 0);\n  if (total <= containerWidth) return widths.length;\n  let used = restWidth;\n  let count = 0;\n  for (const width of widths) {\n    if (used + width > containerWidth) break;\n    used += width;\n    count += 1;\n  }\n  return count;\n};\n\nexport interface OverflowListProps<T> {\n  classNames?: { item?: string; rest?: string; root?: string };\n  data: T[];\n  itemKey: (item: T, index: number) => Key;\n  maxCount?: number | 'responsive';\n  renderItem: (item: T, index: number) => ReactNode;\n  renderRest: (omitted: T[]) => ReactNode;\n}\n\nconst hiddenStyle = {\n  insetBlockStart: 0,\n  insetInlineStart: 0,\n  pointerEvents: 'none',\n  position: 'absolute',\n  visibility: 'hidden',\n} as const;\n\nexport const OverflowList = <T,>({\n  classNames,\n  data,\n  itemKey,\n  maxCount,\n  renderItem,\n  renderRest,\n}: OverflowListProps<T>) => {\n  const responsive = maxCount === 'responsive';\n  const rootRef = useRef<HTMLDivElement>(null);\n  const [fitted, setFitted] = useState(data.length);\n\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    if (!responsive || !root) return;\n    const measure = () => {\n      const items = [...root.querySelectorAll<HTMLElement>(':scope > [data-overflow-item]')];\n      const rest = root.querySelector<HTMLElement>(':scope > [data-overflow-rest]');\n      setFitted(\n        fitCount(\n          items.map((item) => item.getBoundingClientRect().width),\n          rest?.getBoundingClientRect().width ?? 0,\n          root.clientWidth,\n        ),\n      );\n    };\n    measure();\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(measure);\n    observer.observe(root);\n    return () => observer.disconnect();\n  }, [responsive, data]);\n\n  const count = responsive\n    ? Math.min(fitted, data.length)\n    : typeof maxCount === 'number'\n      ? Math.min(Math.max(maxCount, 0), data.length)\n      : data.length;\n  const rendered = responsive ? data : data.slice(0, count);\n  const omitted = data.slice(count);\n\n  return (\n    <div className={classNames?.root} ref={rootRef} style={{ position: 'relative' }}>\n      {rendered.map((item, index) => {\n        const hidden = index >= count;\n        return (\n          <div\n            aria-hidden={hidden || undefined}\n            className={classNames?.item}\n            data-overflow-item=\"\"\n            key={itemKey(item, index)}\n            style={hidden ? hiddenStyle : undefined}\n          >\n            {renderItem(item, index)}\n          </div>\n        );\n      })}\n      {(omitted.length > 0 || responsive) && (\n        <div\n          aria-hidden={omitted.length === 0 || undefined}\n          className={clsx(classNames?.item, classNames?.rest)}\n          data-overflow-rest=\"\"\n          style={omitted.length === 0 ? hiddenStyle : undefined}\n        >\n          {renderRest(omitted.length > 0 ? omitted : data)}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAKA,MAAa,YAAY,QAAkB,WAAmB,mBAA2B;CACvF,IAAI,kBAAkB,GAAG,OAAO;CAEhC,IADc,OAAO,QAAQ,KAAK,UAAU,MAAM,OAAO,CACjD,KAAK,gBAAgB,OAAO,OAAO;CAC3C,IAAI,OAAO;CACX,IAAI,QAAQ;CACZ,KAAK,MAAM,SAAS,QAAQ;EAC1B,IAAI,OAAO,QAAQ,gBAAgB;EACnC,QAAQ;EACR,SAAS;CACX;CACA,OAAO;AACT;AAWA,MAAM,cAAc;CAClB,iBAAiB;CACjB,kBAAkB;CAClB,eAAe;CACf,UAAU;CACV,YAAY;AACd;AAEA,MAAa,gBAAoB,EAC/B,YACA,MACA,SACA,UACA,YACA,iBAC0B;CAC1B,MAAM,aAAa,aAAa;CAChC,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK,MAAM;CAEhD,sBAAsB;EACpB,MAAM,OAAO,QAAQ;EACrB,IAAI,CAAC,cAAc,CAAC,MAAM;EAC1B,MAAM,gBAAgB;GACpB,MAAM,QAAQ,CAAC,GAAG,KAAK,iBAA8B,+BAA+B,CAAC;GACrF,MAAM,OAAO,KAAK,cAA2B,+BAA+B;GAC5E,UACE,SACE,MAAM,KAAK,SAAS,KAAK,sBAAsB,CAAC,CAAC,KAAK,GACtD,MAAM,sBAAsB,CAAC,CAAC,SAAS,GACvC,KAAK,WACP,CACF;EACF;EACA,QAAQ;EACR,IAAI,OAAO,mBAAmB,aAAa;EAC3C,MAAM,WAAW,IAAI,eAAe,OAAO;EAC3C,SAAS,QAAQ,IAAI;EACrB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,YAAY,IAAI,CAAC;CAErB,MAAM,QAAQ,aACV,KAAK,IAAI,QAAQ,KAAK,MAAM,IAC5B,OAAO,aAAa,WAClB,KAAK,IAAI,KAAK,IAAI,UAAU,CAAC,GAAG,KAAK,MAAM,IAC3C,KAAK;CACX,MAAM,WAAW,aAAa,OAAO,KAAK,MAAM,GAAG,KAAK;CACxD,MAAM,UAAU,KAAK,MAAM,KAAK;CAEhC,OACE,qBAAC,OAAD;EAAK,WAAW,YAAY;EAAM,KAAK;EAAS,OAAO,EAAE,UAAU,WAAW;EAA9E,UAAA,CACG,SAAS,KAAK,MAAM,UAAU;GAC7B,MAAM,SAAS,SAAS;GACxB,OACE,oBAAC,OAAD;IACE,eAAa,UAAU,KAAA;IACvB,WAAW,YAAY;IACvB,sBAAmB;IAEnB,OAAO,SAAS,cAAc,KAAA;IAE7B,UAAA,WAAW,MAAM,KAAK;GACpB,GAJE,QAAQ,MAAM,KAAK,CAIrB;EAET,CAAC,IACC,QAAQ,SAAS,KAAK,eACtB,oBAAC,OAAD;GACE,eAAa,QAAQ,WAAW,KAAK,KAAA;GACrC,WAAWA,OAAK,YAAY,MAAM,YAAY,IAAI;GAClD,sBAAmB;GACnB,OAAO,QAAQ,WAAW,IAAI,cAAc,KAAA;GAE3C,UAAA,WAAW,QAAQ,SAAS,IAAI,UAAU,IAAI;EAC5C,CAAA,CAEJ;;AAET"}

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 { useMergeRefs } from "../../utils/mergeRefs.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 { 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 { 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';\nimport { useMergeRefs } from '@/utils/mergeRefs';\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