@povio/ui 6.0.0-rc.2 → 6.0.0-rc.4

package/dist/{Select-BAlYMh4h.js → Select-DOrH8Q5O.js}

@@ -1,20 +1,16 @@
 import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
 import { t as UIConfig } from "./uiConfig.context-dxsO9puE.js";
-import { t as Check } from "./check-DYMBkp_Z.js";
 import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
-import { t as CheckboxCheckmark } from "./CheckboxCheckmark-C4yFclkZ.js";
 import { t as X } from "./x-B6vfz8Ps.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
 import { t as IconSlot } from "./IconSlot-Cuvpj1gd.js";
-import { l as $542a13ca2fa5b484$export$5b6b19405a83ff9d, m as $263ab7fc0f95ccdb$export$4feb769f8ddf26c5, p as $263ab7fc0f95ccdb$export$2dbbd341daed716d, t as $f2ff30fde7b014be$export$2e1e1122cf0cba88 } from "./Dialog-lFYX-7Ax.js";
+import { l as $542a13ca2fa5b484$export$5b6b19405a83ff9d, t as $f2ff30fde7b014be$export$2e1e1122cf0cba88 } from "./Dialog-lFYX-7Ax.js";
 import { n as $7705c033048f6da7$export$353f5b6fc5456de1 } from "./Button-C1YB5dOw.js";
 import { n as $dbdc5e6e7ce01b4b$export$c02625b26074192c, t as $dbdc5e6e7ce01b4b$export$72b9695b8216309a } from "./ComboBox-DFlz6HJ8.js";
 import { n as $41fb335299a4a39e$export$f5b8910cec6cf069 } from "./Input-BG0Xjw5X.js";
-import { i as $928221da08ecbc62$export$a11e76429ed99b4, t as $928221da08ecbc62$export$41f133550aa26f48 } from "./ListBox-CoUk0kkt.js";
-import { i as $a3be900807531178$re_export$useFilter, n as $a3be900807531178$re_export$ListLayout, r as $a3be900807531178$re_export$Rect } from "./exports-BNrTn8Tj.js";
+import { i as $a3be900807531178$re_export$useFilter } from "./exports-BNrTn8Tj.js";
 import "./popoverAnimation-DEZSvKP8.js";
-import { t as Spinner } from "./Spinner-CFj5Iu77.js";
 import { t as Button } from "./Button-DU1Q8GDB.js";
 import { BottomSheet } from "./components/bottom-sheet.js";
 import { t as useBreakpoint } from "./useBreakpoint-DOUmXVZ2.js";
@@ -22,25 +18,20 @@ import { r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "./import-D_3dPATF.js
 import { n as FormFieldLabel, t as FormField } from "./FormField-DyqEbqx3.js";
 import { a as inputSizeDefinition, t as inputBaseDefinition } from "./input.cva-AHLI_M3K.js";
 import "./i18n-BjNKHh_D.js";
-import { n as useStaticInputHandoff, t as getStaticInputFocusTarget } from "./useStaticInputHandoff-DyYxfwv6.js";
 import { n as InputClear, t as TooltipWrapper } from "./TooltipWrapper-BrftXInI.js";
 import { t as popoverDefinition } from "./popover.cva-Ciu9Ro5G.js";
+import { n as useStaticInputHandoff, t as getStaticInputFocusTarget } from "./useStaticInputHandoff-DyYxfwv6.js";
 import { InputFrame } from "./components/input-frame.js";
+import { t as Input } from "./Input-CPPDOg7b.js";
 import { Tag } from "./components/tag.js";
 import { n as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "./selectDesktop.cva-CGBkscBY.js";
-import { t as selectListBoxItemDefinition } from "./selectItem.cva-Ch6oK4jP.js";
-import { t as useIntersectionObserver } from "./useIntersectionObserver-DYfHnGGU.js";
-import { t as Input } from "./Input-BdCci6BF.js";
-import $ahdqC$react, { Fragment, createContext, use, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, Suspense, createContext, lazy, use, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useVirtualizerState } from "react-stately/useVirtualizerState";
-import { useScrollView } from "react-aria/private/virtualizer/ScrollView";
-import { VirtualizerItem } from "react-aria/private/virtualizer/VirtualizerItem";
 import { usePreventScroll } from "react-aria";
 import { useLabel } from "@react-aria/label";
-import { useTranslation } from "react-i18next";
 import { useFocusVisible, useFocusWithin, useHover } from "@react-aria/interactions";
+import { useTranslation } from "react-i18next";
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/search.mjs
 /**
 * @license lucide-react v1.43.0 - ISC
@@ -64,96 +55,6 @@ const __iconData = {
 __iconData.node;
 const Search = createLucideIcon(__iconData);
 //#endregion
-//#region ../../node_modules/.bun/react-aria-components@1.22.1+67f6792bdf102c28/node_modules/react-aria-components/dist/private/Virtualizer.mjs
-const $143fb904d86051ce$var$VirtualizerContext = /*#__PURE__*/ createContext(null);
-const $143fb904d86051ce$var$VirtualizerOptionsContext = /*#__PURE__*/ createContext(null);
-function $143fb904d86051ce$export$89be5a243e59c4b2(props) {
-	let { children, layout: layoutProp, layoutOptions, shouldObserveItemSize } = props;
-	let layout = useMemo(() => typeof layoutProp === "function" ? new layoutProp() : layoutProp, [layoutProp]);
-	let renderer = useMemo(() => ({
-		isVirtualized: true,
-		layoutDelegate: layout,
-		dropTargetDelegate: layout.getDropTargetFromPoint ? layout : void 0,
-		CollectionRoot: $143fb904d86051ce$var$CollectionRoot,
-		CollectionBranch: $143fb904d86051ce$var$CollectionBranch
-	}), [layout]);
-	return /*#__PURE__*/ $ahdqC$react.createElement($263ab7fc0f95ccdb$export$4feb769f8ddf26c5.Provider, { value: renderer }, /*#__PURE__*/ $ahdqC$react.createElement($143fb904d86051ce$var$VirtualizerOptionsContext.Provider, { value: {
-		layout,
-		layoutOptions,
-		shouldObserveItemSize
-	} }, children));
-}
-function $143fb904d86051ce$var$CollectionRoot({ collection, persistedKeys, scrollRef, renderDropIndicator }) {
-	let { layout, layoutOptions, shouldObserveItemSize } = useContext($143fb904d86051ce$var$VirtualizerOptionsContext);
-	let layoutOptions2 = layout.useLayoutOptions?.();
-	let state = useVirtualizerState({
-		allowsWindowScrolling: true,
-		layout,
-		collection,
-		renderView: (type, item) => {
-			return item?.render?.(item);
-		},
-		onVisibleRectChange(rect) {
-			let element = scrollRef?.current;
-			if (element) {
-				element.scrollLeft = rect.x;
-				element.scrollTop = rect.y;
-			}
-		},
-		persistedKeys,
-		layoutOptions: useMemo(() => layoutOptions && layoutOptions2 ? {
-			...layoutOptions,
-			...layoutOptions2
-		} : layoutOptions || layoutOptions2, [layoutOptions, layoutOptions2])
-	});
-	let { contentProps } = useScrollView({
-		onVisibleRectChange: state.setVisibleRect,
-		onSizeChange: state.setSize,
-		contentSize: state.contentSize,
-		onScrollStart: state.startScrolling,
-		onScrollEnd: state.endScrolling,
-		allowsWindowScrolling: true
-	}, scrollRef);
-	return /*#__PURE__*/ $ahdqC$react.createElement("div", contentProps, /*#__PURE__*/ $ahdqC$react.createElement($143fb904d86051ce$var$VirtualizerContext.Provider, { value: state }, $143fb904d86051ce$var$renderChildren(null, state.visibleViews, renderDropIndicator, shouldObserveItemSize)));
-}
-function $143fb904d86051ce$var$CollectionBranch({ parent, renderDropIndicator }) {
-	let parentView = useContext($143fb904d86051ce$var$VirtualizerContext).virtualizer.getVisibleView(parent.key);
-	let { shouldObserveItemSize } = useContext($143fb904d86051ce$var$VirtualizerOptionsContext);
-	return $143fb904d86051ce$var$renderChildren(parentView, Array.from(parentView.children), renderDropIndicator, shouldObserveItemSize);
-}
-function $143fb904d86051ce$var$renderChildren(parent, children, renderDropIndicator, shouldObserveItemSize) {
-	return children.map((view) => $143fb904d86051ce$var$renderWrapper(parent, view, renderDropIndicator, shouldObserveItemSize));
-}
-function $143fb904d86051ce$var$renderWrapper(parent, reusableView, renderDropIndicator, shouldObserveItemSize) {
-	let rendered = /*#__PURE__*/ $ahdqC$react.createElement(VirtualizerItem, {
-		key: reusableView.key,
-		layoutInfo: reusableView.layoutInfo,
-		virtualizer: reusableView.virtualizer,
-		parent: parent?.layoutInfo,
-		shouldObserveItemSize
-	}, reusableView.rendered);
-	let { collection, layout } = reusableView.virtualizer;
-	let node = reusableView.content;
-	if (node?.type === "item" && renderDropIndicator && layout.getDropTargetLayoutInfo) rendered = /*#__PURE__*/ $ahdqC$react.createElement($ahdqC$react.Fragment, { key: reusableView.key }, $143fb904d86051ce$var$renderDropIndicatorWrapper(parent, reusableView, {
-		type: "item",
-		key: reusableView.content.key,
-		dropPosition: "before"
-	}, renderDropIndicator), rendered, $263ab7fc0f95ccdb$export$2dbbd341daed716d(collection, node, (target) => $143fb904d86051ce$var$renderDropIndicatorWrapper(parent, reusableView, target, renderDropIndicator)));
-	return rendered;
-}
-function $143fb904d86051ce$var$renderDropIndicatorWrapper(parent, reusableView, target, renderDropIndicator) {
-	let indicator = renderDropIndicator(target);
-	if (indicator) {
-		let layoutInfo = reusableView.virtualizer.layout.getDropTargetLayoutInfo(target);
-		indicator = /*#__PURE__*/ $ahdqC$react.createElement(VirtualizerItem, {
-			layoutInfo,
-			virtualizer: reusableView.virtualizer,
-			parent: parent?.layoutInfo
-		}, indicator);
-	}
-	return indicator;
-}
-//#endregion
 //#region src/components/inputs/Selection/shared/SelectInputTags.tsx
 const SelectInputTags = ({ selectedItems, isDisabled, selectedTagsType, collapseAfter, onRemove }) => {
 	const { displayedItems, remainingCount } = useMemo(() => {
@@ -797,258 +698,21 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 	});
 };
 //#endregion
-//#region src/components/inputs/Selection/shared/SelectListBoxItem.tsx
-const SelectListBoxItem = ({ isSearchable, isNewItem, newItemRender, id, label, content, isDisabled }) => {
-	const selectListItemCva = UIOverrides.useCva("select.listBoxItemCva", selectListBoxItemDefinition);
-	const ref = useRef(null);
-	const { t } = useTranslation("ui");
-	const { selectedIds, isMultiple } = SelectContext.useSelect();
-	const itemContent = useMemo(() => {
-		if (isNewItem) return newItemRender?.(label) ?? `${t(($) => $.ui.autocomplete.createNewBtn)} '${label}'`;
-		return content ?? label;
-	}, [
-		isNewItem,
-		newItemRender,
-		label,
-		content,
-		t
-	]);
-	return /* @__PURE__ */ jsxs($928221da08ecbc62$export$a11e76429ed99b4, {
-		ref,
-		id,
-		textValue: label,
-		isDisabled,
-		className: selectListItemCva({
-			isSingle: !isMultiple,
-			isNewItem
-		}),
-		children: [
-			isMultiple && !isSearchable && /* @__PURE__ */ jsx(CheckboxCheckmark, {
-				variant: "default",
-				className: "group-focus-visible:outline-none!"
-			}),
-			isMultiple && isSearchable && /* @__PURE__ */ jsx("div", {
-				className: "group",
-				"data-rac": "",
-				"data-selected": selectedIds.includes(id) || void 0,
-				children: /* @__PURE__ */ jsx(CheckboxCheckmark, {
-					variant: "default",
-					className: "group-focus-visible:outline-none!"
-				})
-			}),
-			itemContent,
-			!isMultiple && /* @__PURE__ */ jsx("span", {
-				"aria-hidden": true,
-				className: "pointer-events-none absolute right-2 flex size-3.5 items-center justify-center opacity-0 group-selected:opacity-100",
-				children: /* @__PURE__ */ jsx(Check, { className: "size-4" })
-			})
-		]
-	});
-};
-//#endregion
-//#region src/components/inputs/Selection/shared/SelectListBoxItemSelectAll.tsx
-const SelectListBoxItemSelectAll = ({ id, label, isDisabled }) => {
-	const selectListItemCva = UIOverrides.useCva("select.listBoxItemCva", selectListBoxItemDefinition);
-	const ref = useRef(null);
-	const { t } = useTranslation("ui");
-	const { selectableListItems, selectedIds } = SelectContext.useSelect();
-	return /* @__PURE__ */ jsxs($928221da08ecbc62$export$a11e76429ed99b4, {
-		ref,
-		id,
-		textValue: label || t(($) => $.ui.select.allOption),
-		isDisabled,
-		className: selectListItemCva({}),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "group",
-			"data-rac": "",
-			"data-selected": selectedIds.length === selectableListItems.length || void 0,
-			"data-indeterminate": selectedIds.length > 0 && selectedIds.length < selectableListItems.length || void 0,
-			children: /* @__PURE__ */ jsx(CheckboxCheckmark, {
-				variant: "default",
-				className: "group-focus-visible:outline-none!"
-			})
-		}), t(($) => $.ui.select.allOption)]
-	});
-};
-//#endregion
-//#region src/components/inputs/Selection/shared/SelectListBoxLoadingItem.tsx
-const SelectListBoxLoadingItem = ({ id, label, onLoadMore }) => {
-	const selectListItemCva = UIOverrides.useCva("select.listBoxItemCva", selectListBoxItemDefinition);
-	const { t } = useTranslation("ui");
-	const { isDebouncing, isLoading, hasLoadMore } = SelectContext.useSelect();
-	const onIntersection = useCallback(() => {
-		if (!isDebouncing && !isLoading && hasLoadMore) onLoadMore?.();
-	}, [
-		isDebouncing,
-		isLoading,
-		hasLoadMore,
-		onLoadMore
-	]);
-	const { ref } = useIntersectionObserver({
-		onIntersection,
-		rootMargin: "40px"
-	});
-	return /* @__PURE__ */ jsx($928221da08ecbc62$export$a11e76429ed99b4, {
-		id,
-		textValue: label || t(($) => $.ui.loadingState.text),
-		isDisabled: true,
-		className: selectListItemCva({}),
-		children: /* @__PURE__ */ jsx("div", {
-			ref,
-			className: "flex flex-1 justify-center text-muted-foreground",
-			children: /* @__PURE__ */ jsx(Spinner, {})
-		})
-	});
-};
-//#endregion
-//#region src/components/inputs/Selection/shared/SelectListBox.tsx
-var ReversedListLayout = class extends $a3be900807531178$re_export$ListLayout {
-	reverseLayoutInfo(layoutInfo) {
-		const reversedLayoutInfo = layoutInfo.copy();
-		reversedLayoutInfo.rect.y = this.getContentSize().height - reversedLayoutInfo.rect.maxY;
-		return reversedLayoutInfo;
-	}
-	getLayoutInfo(key) {
-		const layoutInfo = super.getLayoutInfo(key);
-		return layoutInfo ? this.reverseLayoutInfo(layoutInfo) : null;
-	}
-	getVisibleLayoutInfos(rect) {
-		const mirroredRect = new $a3be900807531178$re_export$Rect(rect.x, Math.max(0, this.getContentSize().height - rect.maxY), rect.width, rect.height);
-		return super.getVisibleLayoutInfos(mirroredRect).map((layoutInfo) => this.reverseLayoutInfo(layoutInfo));
-	}
-};
-const SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true, isReversed = false, virtualizerOptions, totalItems, newItemRender, onLoadMore, className, onClose, ...props }) => {
-	const { fieldState, onChange, listItems, selectableListItems, selectedIds, isMultiple, onClear, onSelectAll, hasLoadMore, isLoading } = SelectContext.useSelect();
-	const listBoxRef = useRef(null);
-	const hasRequestedAtTopRef = useRef(false);
-	const isReverseScrollAnchoredRef = useRef(!isReversed);
-	const reverseScrollBottomOffsetRef = useRef(0);
-	const previousLoadedItemIdsRef = useRef([]);
-	const shouldVirtualize = !!virtualizerOptions || (totalItems ?? listItems.length) > 100 || hasLoadMore;
-	const usesReversedLayout = isReversed && isSearchable && shouldVirtualize;
-	const displayedListItems = isReversed && !usesReversedLayout ? listItems.toReversed() : listItems;
-	const loadedItemIds = useMemo(() => listItems.filter((item) => item.id !== LoadingItemId).map((item) => item.id), [listItems]);
-	const loadMoreResetKey = loadedItemIds.join("\0");
-	useLayoutEffect(() => {
-		hasRequestedAtTopRef.current = false;
-	}, [loadMoreResetKey]);
-	useLayoutEffect(() => {
-		const previousLoadedItemIds = previousLoadedItemIdsRef.current;
-		const preservesExistingItems = previousLoadedItemIds.length > 0 && previousLoadedItemIds.every((itemId, index) => loadedItemIds[index] === itemId);
-		previousLoadedItemIdsRef.current = loadedItemIds;
-		if (!preservesExistingItems) reverseScrollBottomOffsetRef.current = 0;
-		const listBox = listBoxRef.current;
-		if (!listBox) {
-			isReverseScrollAnchoredRef.current = true;
-			return;
-		}
-		if (!isReversed) {
-			listBox.scrollTop = 0;
-			isReverseScrollAnchoredRef.current = true;
-			return;
-		}
-		isReverseScrollAnchoredRef.current = false;
-		const finishAnchoring = () => {
-			if (listBox.scrollHeight <= listBox.clientHeight) return false;
-			listBox.scrollTop = listBox.scrollHeight - listBox.clientHeight - reverseScrollBottomOffsetRef.current;
-			isReverseScrollAnchoredRef.current = true;
-			return true;
-		};
-		let scrollFrame = requestAnimationFrame(() => {
-			scrollFrame = requestAnimationFrame(() => {
-				if (!finishAnchoring()) isReverseScrollAnchoredRef.current = true;
-			});
-		});
-		return () => {
-			cancelAnimationFrame(scrollFrame);
-			reverseScrollBottomOffsetRef.current = listBox.scrollHeight - listBox.clientHeight - listBox.scrollTop;
-		};
-	}, [
-		isReversed,
-		loadMoreResetKey,
-		loadedItemIds
-	]);
-	const onSelectionChange = (value) => {
-		const ids = Array.from(value);
-		if (!isMultiple && ids.length === 0) {
-			if (fieldState.value) {
-				onClose?.();
-				onChange(fieldState.value);
-			}
-			return;
-		}
-		if (isMultiple && ids.includes("all-item-id")) {
-			if (ids.length > selectableListItems.length) onClear();
-			else onSelectAll();
-			return;
-		}
-		if (isMultiple) onChange(ids);
-		else {
-			onClose?.();
-			onChange(ids[0]);
-		}
-	};
-	const requestLoadMore = useCallback(() => {
-		if (isLoading) return;
-		if (isReversed && (!isReverseScrollAnchoredRef.current || (listBoxRef.current?.scrollTop ?? 0) > 1 || hasRequestedAtTopRef.current)) return;
-		if (isReversed) hasRequestedAtTopRef.current = true;
-		onLoadMore?.();
-	}, [
-		isLoading,
-		isReversed,
-		onLoadMore
-	]);
-	const onScroll = (event) => {
-		if (!isReversed || !hasLoadMore || !isReverseScrollAnchoredRef.current) return;
-		if (event.currentTarget.scrollTop > 48) hasRequestedAtTopRef.current = false;
-		else requestLoadMore();
-	};
-	const renderItem = (item) => {
-		if (item.isSelectAllItem) return /* @__PURE__ */ jsx(SelectListBoxItemSelectAll, { ...item }, item.id);
-		if (item.isLoadingItem) return /* @__PURE__ */ jsx(SelectListBoxLoadingItem, {
-			...item,
-			onLoadMore: requestLoadMore
-		}, item.id);
-		return /* @__PURE__ */ jsx(SelectListBoxItem, {
-			...item,
-			isSearchable,
-			isNewItem: item.isNewItem,
-			newItemRender
-		}, item.id);
-	};
-	if (shouldVirtualize) return /* @__PURE__ */ jsx($143fb904d86051ce$export$89be5a243e59c4b2, {
-		layout: usesReversedLayout ? ReversedListLayout : $a3be900807531178$re_export$ListLayout,
-		layoutOptions: virtualizerOptions,
-		children: /* @__PURE__ */ jsx($928221da08ecbc62$export$41f133550aa26f48, {
-			ref: listBoxRef,
-			...props,
-			"aria-label": label,
-			selectionMode,
-			className: clsx("flex-1 p-1 outline-none", isScrollable ? "max-h-full overflow-y-auto overflow-x-hidden" : "overflow-hidden", className),
-			items: displayedListItems,
-			selectedKeys: selectedIds,
-			onSelectionChange,
-			onScroll,
-			escapeKeyBehavior: "none",
-			shouldSelectOnPressUp: true,
-			children: renderItem
-		})
-	});
-	return /* @__PURE__ */ jsx($928221da08ecbc62$export$41f133550aa26f48, {
-		ref: listBoxRef,
-		...props,
-		"aria-label": label,
-		selectionMode,
-		className: clsx("flex-1 p-1 outline-none", isScrollable ? "max-h-full overflow-y-auto overflow-x-hidden" : "overflow-hidden", className),
-		items: displayedListItems,
-		selectedKeys: selectedIds,
-		onSelectionChange,
-		onScroll,
-		escapeKeyBehavior: "none",
-		shouldSelectOnPressUp: true,
-		children: renderItem
-	});
+//#region src/components/inputs/Selection/shared/SelectListBox.lazy.tsx
+const loadSelectListBox = () => import("./SelectListBox-PITCjHi6.js");
+const SelectListBoxRenderer = lazy(() => loadSelectListBox().then(({ SelectListBox }) => ({ default: SelectListBox })));
+/** Fetches the list box chunk ahead of the list opening (hover, focus). */
+const preloadSelectListBox = () => {
+	loadSelectListBox();
 };
+/**
+* List box (items, virtualizer and list layouts) that only loads when a select opens.
+* The popover and bottom sheet already render nothing while closed, so the fallback is empty.
+*/
+const SelectListBox = (props) => /* @__PURE__ */ jsx(Suspense, {
+	fallback: null,
+	children: /* @__PURE__ */ jsx(SelectListBoxRenderer, { ...props })
+});
 //#endregion
 //#region src/components/inputs/Selection/shared/SelectDesktop.tsx
 const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }) => {
@@ -1076,6 +740,8 @@ const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, i
 	const [popoverWidth, setPopoverWidth] = useState(void 0);
 	const [isPopoverAbove, setIsPopoverAbove] = useState(false);
 	const { fieldState, isOpen, setIsOpen, onInputChange, onChange, onClear, onSelectAll, listItems, selectableListItems, selectedIds, isMultiple } = SelectContext.useSelect();
+	const [hasOpened, setHasOpened] = useState(isOpen);
+	if (isOpen && !hasOpened) setHasOpened(true);
 	usePreventScroll({ isDisabled: !isOpen });
 	useLayoutEffect(() => {
 		if (!isOpen || !wrapperRef.current) return;
@@ -1167,8 +833,14 @@ const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, i
 					className: clsx("group w-full", containerClassName)
 				},
 				as,
-				onMouseEnter,
-				onFocusCapture,
+				onMouseEnter: (event) => {
+					preloadSelectListBox();
+					onMouseEnter?.(event);
+				},
+				onFocusCapture: (event) => {
+					preloadSelectListBox();
+					onFocusCapture?.(event);
+				},
 				ref: wrapperRef,
 				children: [customTrigger ? /* @__PURE__ */ jsx($f2ff30fde7b014be$export$2e1e1122cf0cba88, {
 					...dialogTriggerProps,
@@ -1205,7 +877,7 @@ const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, i
 					},
 					fieldProps,
 					headerProps
-				}), (!isSearchable || showPopover) && /* @__PURE__ */ jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, {
+				}), hasOpened && (!isSearchable || showPopover) && /* @__PURE__ */ jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, {
 					ref: popoverRef,
 					triggerRef,
 					isOpen,
@@ -1309,7 +981,10 @@ const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, contai
 		labelProps,
 		className: clsx("group w-full", containerClassName),
 		onMouseEnter,
-		onFocusCapture,
+		onFocusCapture: (event) => {
+			preloadSelectListBox();
+			onFocusCapture?.(event);
+		},
 		children: /* @__PURE__ */ jsxs($f2ff30fde7b014be$export$2e1e1122cf0cba88, {
 			...dialogTriggerProps,
 			children: [customTrigger ? /* @__PURE__ */ jsx("div", {
@@ -1609,4 +1284,4 @@ function Select(props) {
 	return /* @__PURE__ */ jsx(SelectInner, { ...props });
 }
 //#endregion
-export { useKeyInteractions as a, getKeyInteractionAction as i, SelectInner as n, useDebounceCallback as o, createKeyInteractionsHandler as r, Select as t };
+export { useKeyInteractions as a, LoadingItemId as c, getKeyInteractionAction as i, SelectAllItemId as l, SelectInner as n, SelectContext as o, createKeyInteractionsHandler as r, useDebounceCallback as s, Select as t };

package/dist/{Select.bound-CQPG2sWV.js → Select.bound-RxqOhlbq.js}

@@ -1,4 +1,4 @@
-import { n as SelectInner } from "./Select-BAlYMh4h.js";
+import { n as SelectInner } from "./Select-DOrH8Q5O.js";
 import { r as $a8ea2faf2ebe4d2f$re_export$mergeRefs } from "./import-D_3dPATF.js";
 import { t as FieldController } from "./form.binding-B-2id68q.js";
 import { memo } from "react";