@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/dist/Menu.js

@@ -1,12 +1,26 @@
-import { filterDOMProps, useRenderProps } from "./utils.js";
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Menu.tsx
+import { assignRef as assignRef$1, dataAttr, filterDOMProps, isAriaTrue, useRenderProps } from "./utils.js";
 import { r as PopoverTriggerContext } from "./contexts.js";
 import { SharedElementTransition } from "./SharedElementTransition.js";
-import { CollectionRendererContext, Group, Header, Section, flattenCollectionEntries, isCollectionSection, useCollectionRenderer } from "./Collection.js";
-import { r as useVirtualizerContext } from "./Virtualizer2.js";
-import { getNormalizedDropTargetKey, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.js";
-import { createComponent, effect, getNextElement, insert, memo, mergeProps, runHydrationEvents, setAttribute, setStyleProperty, spread, template, use } from "solid-js/web";
-import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, onCleanup, splitProps, useContext } from "solid-js";
-import { FocusScope, createButton, createFocusRing, createHover, createInteractOutside, createMenu, createMenuItem, createMenuTrigger, createScrollIntoViewOnFocus, mergeProps as mergeProps$2 } from "@proyecto-viviana/solidaria";
+import { CollectionRendererContext, Group, Header, Section, flattenCollectionEntries, isCollectionSection, renderCollectionDropSlots, useCollectionRenderer, useCollectionRoot } from "./Collection.js";
+import { o as useVirtualizerContext, t as PersistedVirtualItem } from "./Virtualizer2.js";
+import { getNormalizedDropTargetKey, indexesOutsideRange, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.js";
+import { OverlayContext } from "./Popover.js";
+import { claimElement, createComponent, effect, getNextElement, insert, memo, ref, runHydrationEvents, scope, setAttribute, spread, template } from "@solidjs/web";
+import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, onCleanup, useContext } from "solid-js";
+import { FocusScope, createFocusRing, createHover, createInteractOutside, createMenu, createMenuItem, createMenuTrigger, createScrollIntoViewOnFocus, mergeProps as mergeProps$1, useLocale } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import { createMenuState, createMenuTriggerState, createSelectionState } from "@proyecto-viviana/solid-stately";
 //#region src/Menu.tsx
 /**
@@ -15,7 +29,13 @@ import { createMenuState, createMenuTriggerState, createSelectionState } from "@
 * A pre-wired headless menu that combines state + aria hooks.
 * Port of react-aria-components/src/Menu.tsx
 */
-var _tmpl$ = /*#__PURE__*/ template(`<button>`), _tmpl$2 = /*#__PURE__*/ template(`<div role=presentation data-empty-state><div role=menuitem style=display:contents>`), _tmpl$3 = /*#__PURE__*/ template(`<div role=group>`), _tmpl$4 = /*#__PURE__*/ template(`<div role=presentation data-section-wrapper>`), _tmpl$5 = /*#__PURE__*/ template(`<div role=presentation aria-hidden=true data-virtualizer-spacer=top>`), _tmpl$6 = /*#__PURE__*/ template(`<div role=presentation aria-hidden=true data-virtualizer-spacer=bottom>`), _tmpl$7 = /*#__PURE__*/ template(`<span>`), _tmpl$8 = /*#__PURE__*/ template(`<div>`), _tmpl$9 = /*#__PURE__*/ template(`<a>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div role=group>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div role=presentation data-section-wrapper>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div role=presentation data-empty-state><div role=menuitem style=display:contents>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<a>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<div inert style=position:relative;width:0;height:0><div data-testid=loadMoreSentinel style=position:absolute;height:1px;width:1px>`);
 const MenuContext = createContext(null);
 const MenuStateContext = createContext(null);
 const MenuTriggerContext = createContext(null);
@@ -25,11 +45,6 @@ const StaticMenuCollectionContext = createContext(null);
 const MenuSectionSelectionContext = createContext(null);
 const MenuSectionSelectionRegistryContext = createContext(null);
 const MenuItemCloseRegistryContext = createContext(null);
-function assignRef(ref, el) {
-	if (!ref) return;
-	if (typeof ref === "function") ref(el);
-	else ref.current = el;
-}
 function resolveBoolean(value) {
 	return typeof value === "function" ? Boolean(value()) : Boolean(value);
 }
@@ -47,8 +62,12 @@ function MenuTrigger(props) {
 		},
 		get onOpenChange() {
 			return stateProps.onOpenChange;
+		},
+		get trigger() {
+			return stateProps.trigger;
 		}
 	});
+	const [triggerRef, setTriggerRef] = createSignal(null);
 	const [isMousePressed, setMousePressed] = createSignal(false);
 	const onPressStart = (e) => {
 		if (e.pointerType !== "mouse" || typeof document === "undefined") return;
@@ -60,13 +79,21 @@ function MenuTrigger(props) {
 			capture: true
 		});
 	};
-	const menuTrigger = createMenuTrigger({ get isDisabled() {
-		return stateProps.isDisabled;
-	} }, state);
-	return createComponent(RootMenuTriggerStateContext.Provider, {
+	const menuTrigger = createMenuTrigger({
+		get isDisabled() {
+			return stateProps.isDisabled;
+		},
+		get type() {
+			return stateProps.type;
+		},
+		get trigger() {
+			return stateProps.trigger;
+		}
+	}, state, triggerRef);
+	return createComponent(RootMenuTriggerStateContext, {
 		value: state,
 		get children() {
-			return createComponent(MenuTriggerContext.Provider, {
+			return createComponent(MenuTriggerContext, {
 				value: {
 					state,
 					get triggerProps() {
@@ -75,11 +102,36 @@ function MenuTrigger(props) {
 					get menuProps() {
 						return menuTrigger.menuProps;
 					},
+					triggerRef,
+					setTriggerRef,
+					isDisabled: () => Boolean(stateProps.isDisabled),
 					isPressed: isMousePressed,
 					onPressStart
 				},
 				get children() {
-					return props.children;
+					return createComponent(PopoverTriggerContext, {
+						get value() {
+							return {
+								state,
+								triggerRef,
+								setTriggerRef,
+								triggerId: String(menuTrigger.menuTriggerProps.id),
+								trigger: "MenuTrigger",
+								get triggerProps() {
+									return mergeProps$1(menuTrigger.menuTriggerProps, { onPressStart: (event) => {
+										onPressStart(event);
+										menuTrigger.menuTriggerProps.onPressStart?.(event);
+									} });
+								},
+								get overlayProps() {
+									return { "aria-labelledby": menuTrigger.menuProps["aria-labelledby"] };
+								}
+							};
+						},
+						get children() {
+							return props.children;
+						}
+					});
 				}
 			});
 		}
@@ -90,6 +142,7 @@ function SubmenuTrigger(props) {
 	const trigger = () => children()[0];
 	const content = () => children()[1];
 	const parentMenuItemContext = useContext(MenuItemContext);
+	const locale = useLocale();
 	const state = createMenuTriggerState({
 		get isOpen() {
 			return props.isOpen;
@@ -164,7 +217,8 @@ function SubmenuTrigger(props) {
 			triggerRef = el;
 		},
 		triggerId,
-		trigger: "SubmenuTrigger"
+		trigger: "SubmenuTrigger",
+		overlayProps: { "aria-labelledby": triggerId }
 	}));
 	const itemContext = createMemo(() => ({
 		closeOnSelect: false,
@@ -176,7 +230,7 @@ function SubmenuTrigger(props) {
 			id: triggerId,
 			"aria-haspopup": "menu",
 			get "aria-expanded"() {
-				return state.isOpen() || void 0;
+				return state.isOpen() ? "true" : void 0;
 			},
 			get "aria-controls"() {
 				return state.isOpen() ? menuId : void 0;
@@ -192,27 +246,29 @@ function SubmenuTrigger(props) {
 			onMouseEnter: openFromMouseHover,
 			onMouseOver: openFromMouseHover,
 			onKeyDown: (event) => {
-				if (event.key === "ArrowRight" || event.key === "Enter" || event.key === " ") {
+				const openKey = locale().direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+				const closeKey = locale().direction === "rtl" ? "ArrowRight" : "ArrowLeft";
+				if (event.key === openKey || event.key === "Enter" || event.key === " ") {
 					event.preventDefault();
 					openSubmenu();
-				} else if (event.key === "ArrowLeft" && state.isOpen()) {
+				} else if (event.key === closeKey && state.isOpen()) {
 					event.preventDefault();
 					state.close();
 				}
 			}
 		})
 	}));
-	return createComponent(PopoverTriggerContext.Provider, {
+	return createComponent(PopoverTriggerContext, {
 		get value() {
 			return popoverTriggerContext();
 		},
 		get children() {
-			return createComponent(MenuTriggerContext.Provider, {
+			return createComponent(MenuTriggerContext, {
 				get value() {
 					return menuTriggerContext();
 				},
 				get children() {
-					return [createComponent(MenuItemContext.Provider, {
+					return [createComponent(MenuItemContext, {
 						get value() {
 							return {
 								...parentMenuItemContext,
@@ -222,117 +278,14 @@ function SubmenuTrigger(props) {
 						get children() {
 							return trigger();
 						}
-					}), memo(() => content())];
+					}), memo(() => {
+						return content();
+					})];
 				}
 			});
 		}
 	});
 }
-function MenuButton(props) {
-	const [local, domProps] = splitProps(props, [
-		"class",
-		"style",
-		"slot",
-		"isDisabled",
-		"children"
-	]);
-	const context = useContext(MenuTriggerContext);
-	if (!context) throw new Error("MenuButton must be used within a MenuTrigger");
-	const { state } = context;
-	const buttonAria = createButton({
-		get isDisabled() {
-			return local.isDisabled;
-		},
-		onPressStart(e) {
-			context.onPressStart?.(e);
-		},
-		onPress() {
-			state.toggle();
-		}
-	});
-	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
-	const { isHovered, hoverProps } = createHover({ get isDisabled() {
-		return local.isDisabled;
-	} });
-	const renderValues = createMemo(() => ({
-		isOpen: state.isOpen(),
-		isFocused: isFocused(),
-		isFocusVisible: isFocusVisible(),
-		isPressed: context.isPressed?.() || buttonAria.isPressed(),
-		isHovered: isHovered(),
-		isDisabled: !!local.isDisabled
-	}));
-	const renderProps = useRenderProps({
-		get children() {
-			return props.children;
-		},
-		class: local.class,
-		style: local.style,
-		defaultClassName: "solidaria-MenuButton"
-	}, renderValues);
-	const resolvedTriggerProps = () => context.triggerProps;
-	const cleanTriggerProps = () => {
-		const { ref: _ref1, "aria-haspopup": _ariaHasPopup, "aria-expanded": _ariaExpanded, "aria-controls": _ariaControls, "aria-disabled": _ariaDisabled, ...rest } = resolvedTriggerProps();
-		return rest;
-	};
-	const cleanButtonProps = () => {
-		const { ref: _ref2, ...rest } = buttonAria.buttonProps;
-		return rest;
-	};
-	const cleanFocusProps = () => {
-		const { ref: _ref3, ...rest } = focusProps;
-		return rest;
-	};
-	const cleanHoverProps = () => {
-		const { ref: _ref4, ...rest } = hoverProps;
-		return rest;
-	};
-	return (() => {
-		var _el$ = getNextElement(_tmpl$);
-		spread(_el$, mergeProps(domProps, cleanTriggerProps, cleanButtonProps, cleanFocusProps, cleanHoverProps, {
-			"type": "button",
-			get ["class"]() {
-				return renderProps.class();
-			},
-			get style() {
-				return renderProps.style();
-			},
-			get ["aria-haspopup"]() {
-				return resolvedTriggerProps()["aria-haspopup"];
-			},
-			get ["aria-expanded"]() {
-				return resolvedTriggerProps()["aria-expanded"];
-			},
-			get ["aria-controls"]() {
-				return resolvedTriggerProps()["aria-controls"];
-			},
-			get ["aria-disabled"]() {
-				return resolvedTriggerProps()["aria-disabled"];
-			},
-			get ["data-open"]() {
-				return state.isOpen() || void 0;
-			},
-			get ["data-focused"]() {
-				return isFocused() || void 0;
-			},
-			get ["data-focus-visible"]() {
-				return isFocusVisible() || void 0;
-			},
-			get ["data-pressed"]() {
-				return context.isPressed?.() || buttonAria.isPressed() || void 0;
-			},
-			get ["data-hovered"]() {
-				return isHovered() || void 0;
-			},
-			get ["data-disabled"]() {
-				return local.isDisabled || void 0;
-			}
-		}), false, true);
-		insert(_el$, () => renderProps.renderChildren());
-		runHydrationEvents();
-		return _el$;
-	})();
-}
 /**
 * A menu displays a list of actions or options for the user to choose from.
 */
@@ -366,8 +319,11 @@ function Menu(props) {
 		"dragAndDropHooks"
 	]);
 	const triggerContext = useContext(MenuTriggerContext);
+	const popoverTriggerContext = useContext(PopoverTriggerContext);
+	const overlayContext = useContext(OverlayContext);
+	const locale = useLocale();
 	const [menuRef, setMenuRef] = createSignal(null);
-	const [staticItems, setStaticItems] = createSignal([]);
+	const [staticItems, setStaticItems] = createSignal([], { ownedWrite: true });
 	const staticItemMap = /* @__PURE__ */ new Map();
 	const sectionSelectionMap = /* @__PURE__ */ new Map();
 	const itemCloseMap = /* @__PURE__ */ new Map();
@@ -478,11 +434,14 @@ function Menu(props) {
 		get label() {
 			return ariaProps.label;
 		},
+		get autoFocus() {
+			return ariaProps.autoFocus ?? triggerContext?.menuProps.autoFocus;
+		},
 		get onAction() {
 			return handleAction;
 		},
 		get onClose() {
-			return stateProps.onClose ?? (() => triggerContext?.state.close());
+			return stateProps.onClose ?? triggerContext?.menuProps.onClose ?? (() => triggerContext?.state.close());
 		},
 		get shouldCloseOnSelect() {
 			return itemCloseRegistry.shouldCloseOnSelect(state.focusedKey()) ?? stateProps.shouldCloseOnSelect;
@@ -496,7 +455,7 @@ function Menu(props) {
 		get "aria-describedby"() {
 			return ariaProps["aria-describedby"];
 		}
-	}, state);
+	}, state, () => menuRef());
 	createScrollIntoViewOnFocus({
 		focusedKey: () => state.focusedKey(),
 		isActive: () => state.isFocused(),
@@ -528,7 +487,9 @@ function Menu(props) {
 	};
 	const cleanTriggerMenuProps = () => {
 		if (!triggerContext) return {};
-		const { ref: _ref2, ...rest } = triggerContext.menuProps;
+		const { ref: _ref2, autoFocus: _autoFocus, onClose: _onClose, "aria-labelledby": triggerLabelledBy, ...rest } = triggerContext.menuProps;
+		if (triggerLabelledBy && popoverTriggerContext?.trigger === "SubmenuTrigger") rest["aria-labelledby"] = triggerLabelledBy;
+		else if (!ariaProps.label && !ariaProps["aria-label"] && !ariaProps["aria-labelledby"]) rest["aria-labelledby"] = triggerLabelledBy;
 		return rest;
 	};
 	const cleanFocusProps = () => {
@@ -542,9 +503,8 @@ function Menu(props) {
 	};
 	const setResolvedMenuRef = (el) => {
 		setMenuRef(el);
-		assignRef(local.ref, el);
+		assignRef$1(local.ref, el);
 	};
-	const shouldRender = () => triggerContext ? triggerContext.state.isOpen() : true;
 	const parentCollectionRenderer = useCollectionRenderer();
 	const virtualizer = useVirtualizerContext();
 	const getItemNodes = createMemo(() => Array.from(state.collection()).filter((node) => node.type === "item"));
@@ -561,64 +521,54 @@ function Menu(props) {
 		const hooks = stateProps.dragAndDropHooks;
 		return Boolean(hooks?.useDroppableCollectionState && hooks.useDroppableCollection && (hooks.dropTargetDelegate || parentCollectionRenderer?.dropTargetDelegate || hooks.ListDropTargetDelegate));
 	});
-	const hasDraggableDnd = createMemo(() => {
+	const dragStateValue = createMemo(() => {
 		const hooks = stateProps.dragAndDropHooks;
 		return Boolean(hooks?.useDraggableCollectionState && hooks.useDraggableCollection);
-	});
-	const dragState = createMemo(() => {
-		if (!hasDraggableDnd()) return void 0;
-		return stateProps.dragAndDropHooks?.useDraggableCollectionState?.({ items: flatItems() });
-	});
-	const dropState = createMemo(() => {
-		if (!hasDroppableDnd()) return void 0;
-		return stateProps.dragAndDropHooks?.useDroppableCollectionState?.({});
-	});
+	})() ? stateProps.dragAndDropHooks?.useDraggableCollectionState?.({
+		items: flatItems(),
+		collection: state.collection(),
+		selectedKeys: state.selectionManager.selectedKeys,
+		isSelected: (key) => state.selectionManager.isSelected(key)
+	}) : void 0;
+	const dragState = () => dragStateValue;
+	const dropStateValue = hasDroppableDnd() ? stateProps.dragAndDropHooks?.useDroppableCollectionState?.({ get collection() {
+		return state.collection();
+	} }) : void 0;
+	const dropState = () => dropStateValue;
 	const persistedKeys = useDndPersistedKeys({ focusedKey: state.focusedKey }, stateProps.dragAndDropHooks, dropState(), state.collection());
 	const virtualRange = createMemo(() => {
 		if (!virtualizer || !parentCollectionRenderer?.isVirtualized || hasSections()) return null;
 		const dynamicItems = stateProps.items ?? [];
 		const baseRange = virtualizer.getVisibleRange(dynamicItems.length);
 		const itemNodes = getItemNodes();
-		const persistedIndexes = Array.from(persistedKeys()).map((key) => itemNodes.findIndex((node) => node.key === key)).filter((index) => index >= 0);
 		const dropTarget = dropState()?.target;
 		const normalizedDropKey = getNormalizedDropTargetKey(dropTarget, state.collection());
-		const focusedKey = state.focusedKey();
-		const focusedIndex = focusedKey != null ? itemNodes.findIndex((node) => node.key === focusedKey) : -1;
-		const forceIncludeIndexes = [
-			dropTarget?.type === "item" ? itemNodes.findIndex((node) => node.key === dropTarget.key) : -1,
-			normalizedDropKey != null ? itemNodes.findIndex((node) => node.key === normalizedDropKey) : -1,
-			dropTarget?.type === "item" ? -1 : focusedIndex
-		].filter((index) => index >= 0);
-		return mergePersistedKeysIntoVirtualRange(baseRange, persistedIndexes, dynamicItems.length, virtualizer, 80, {
+		const forceIncludeIndexes = [dropTarget?.type === "item" ? itemNodes.findIndex((node) => node.key === dropTarget.key) : -1, normalizedDropKey != null ? itemNodes.findIndex((node) => node.key === normalizedDropKey) : -1].filter((index) => index >= 0);
+		return mergePersistedKeysIntoVirtualRange(baseRange, [], dynamicItems.length, virtualizer, 80, {
 			forceIncludeIndexes,
 			forceIncludeMaxSpan: 320
 		});
 	});
+	const persistedOutsideIndexes = createMemo(() => {
+		const range = virtualRange();
+		if (!range) return [];
+		const itemNodes = getItemNodes();
+		const persistedIndexes = Array.from(persistedKeys()).map((key) => itemNodes.findIndex((node) => node.key === key)).filter((index) => index >= 0);
+		return indexesOutsideRange(range, persistedIndexes);
+	});
 	const visibleItems = createMemo(() => {
 		const range = virtualRange();
 		const items = stateProps.items ?? [];
 		if (!range) return items;
 		return items.slice(range.start, range.end);
 	});
-	createEffect(() => {
-		if (!hasDraggableDnd()) return;
-		const hooks = stateProps.dragAndDropHooks;
-		const activeDragState = dragState();
-		if (!hooks?.useDraggableCollection || !activeDragState) return;
-		hooks.useDraggableCollection({}, activeDragState, () => menuRef());
-	});
-	const droppableCollection = createMemo(() => {
+	if (stateProps.dragAndDropHooks?.useDraggableCollection && dragStateValue) stateProps.dragAndDropHooks.useDraggableCollection({}, dragStateValue, () => menuRef());
+	const droppableCollectionValue = (() => {
 		if (!hasDroppableDnd()) return void 0;
 		const hooks = stateProps.dragAndDropHooks;
-		const activeDropState = dropState();
+		const activeDropState = dropStateValue;
 		if (!hooks?.useDroppableCollection || !activeDropState) return void 0;
-		const resolveDirection = () => {
-			const menuEl = menuRef();
-			if (menuEl && typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
-				if (window.getComputedStyle(menuEl).direction === "rtl") return "rtl";
-			}
-			return typeof document !== "undefined" && document.dir === "rtl" ? "rtl" : "ltr";
-		};
+		const resolveDirection = () => locale().direction;
 		const dropTargetDelegate = hooks.dropTargetDelegate ?? parentCollectionRenderer?.dropTargetDelegate ?? (hooks.ListDropTargetDelegate ? new hooks.ListDropTargetDelegate(() => state.collection(), () => menuRef(), {
 			layout: "stack",
 			orientation: "vertical",
@@ -636,7 +586,8 @@ function Menu(props) {
 				getKeyPageAbove: (key) => state.collection().getKeyBefore(key)
 			}
 		}, activeDropState, () => menuRef());
-	});
+	})();
+	const droppableCollection = () => droppableCollectionValue;
 	const isRootDropTarget = createMemo(() => {
 		return Boolean(dropState()?.target?.type === "root");
 	});
@@ -680,97 +631,197 @@ function Menu(props) {
 		renderItem: (item) => renderDynamicItem(item),
 		renderDropIndicator: (index, position) => dndDropIndicator(index, position) ?? parentCollectionRenderer?.renderDropIndicator?.(index, position)
 	}));
+	const CollectionRoot = useCollectionRoot();
 	const menuItemContextValue = createMemo(() => stateProps.shouldCloseOnSelect !== void 0 ? { closeOnSelect: stateProps.shouldCloseOnSelect } : {});
 	const menuListChildren = () => createComponent(SharedElementTransition, { get children() {
-		return memo(() => !!(state.collection().size === 0 && !usesStaticChildren() && local.renderEmptyState))() ? (() => {
-			var _el$2 = getNextElement(_tmpl$2), _el$3 = _el$2.firstChild;
-			insert(_el$3, () => local.renderEmptyState());
-			return _el$2;
-		})() : memo(() => !!usesStaticChildren())() ? renderStaticChildren() : memo(() => !!hasSections())() ? createComponent(For, {
-			get each() {
-				return sectionedRenderEntries();
-			},
-			children: (entry) => entry.type === "section" ? (() => {
-				var _el$4 = getNextElement(_tmpl$4);
-				insert(_el$4, createComponent(Section, {
-					"class": "solidaria-Menu-section",
-					get children() {
-						return [memo(() => memo(() => entry.section.title != null)() && createComponent(Header, {
-							"class": "solidaria-Menu-sectionHeader",
-							get children() {
-								return entry.section.title;
-							}
-						})), createComponent(Group, {
-							"class": "solidaria-Menu-sectionGroup",
+		return [memo(() => {
+			return memo(() => {
+				return !!parentCollectionRenderer?.isVirtualized;
+			})() ? createComponent(CollectionRoot, {
+				get collection() {
+					return memo(() => {
+						return !!virtualRange();
+					})() ? stateProps.items ?? [] : [];
+				},
+				scrollRef: () => menuRef(),
+				get persistedKeys() {
+					return persistedKeys();
+				},
+				get children() {
+					return memo(() => {
+						return !!usesStaticChildren();
+					})() ? renderStaticChildren() : memo(() => {
+						return !!hasSections();
+					})() ? createComponent(For, {
+						get each() {
+							return sectionedRenderEntries();
+						},
+						children: (entry) => entry.type === "section" ? (() => {
+							var _el$ = getNextElement(_tmpl$2);
+							insert(_el$, createComponent(Section, {
+								class: "solidaria-Menu-section",
+								get children() {
+									return [memo(() => {
+										return memo(() => {
+											return entry.section.title != null;
+										})() && createComponent(Header, {
+											class: "solidaria-Menu-sectionHeader",
+											get children() {
+												return entry.section.title;
+											}
+										});
+									}), createComponent(Group, {
+										class: "solidaria-Menu-sectionGroup",
+										get children() {
+											var _el$2 = getNextElement(_tmpl$);
+											insert(_el$2, createComponent(For, {
+												get each() {
+													return entry.items;
+												},
+												children: (indexedItem) => renderCollectionDropSlots({
+													index: indexedItem.index,
+													lastIndex: getItemNodes().length - 1,
+													renderDropIndicator: (i, position) => collectionRenderer().renderDropIndicator?.(i, position),
+													children: renderDynamicItem(indexedItem.item)
+												})
+											}));
+											effect(() => entry.section["aria-label"], (_v$) => {
+												setAttribute(_el$2, "aria-label", _v$);
+											});
+											return _el$2;
+										}
+									})];
+								}
+							}));
+							return _el$;
+						})() : renderCollectionDropSlots({
+							index: entry.item.index,
+							lastIndex: getItemNodes().length - 1,
+							renderDropIndicator: (i, position) => collectionRenderer().renderDropIndicator?.(i, position),
+							children: renderDynamicItem(entry.item.item)
+						})
+					}) : [createComponent(For, {
+						get each() {
+							return visibleItems();
+						},
+						children: (item, index) => {
+							const itemIndex = () => (virtualRange()?.start ?? 0) + index();
+							return renderCollectionDropSlots({
+								index: itemIndex(),
+								lastIndex: getItemNodes().length - 1,
+								renderDropIndicator: (i, position) => collectionRenderer().renderDropIndicator?.(i, position),
+								children: renderDynamicItem(item)
+							});
+						}
+					}), createComponent(For, {
+						get each() {
+							return persistedOutsideIndexes();
+						},
+						children: (index) => createComponent(PersistedVirtualItem, {
+							index,
 							get children() {
-								var _el$5 = getNextElement(_tmpl$3);
-								insert(_el$5, createComponent(For, {
-									get each() {
-										return entry.items;
-									},
-									children: (indexedItem) => [
-										memo(() => collectionRenderer().renderDropIndicator?.(indexedItem.index, "before")),
-										memo(() => collectionRenderer().renderDropIndicator?.(indexedItem.index, "on")),
-										memo(() => renderDynamicItem(indexedItem.item)),
-										memo(() => collectionRenderer().renderDropIndicator?.(indexedItem.index, "after"))
-									]
-								}));
-								effect(() => setAttribute(_el$5, "aria-label", entry.section["aria-label"]));
-								return _el$5;
+								return renderCollectionDropSlots({
+									index,
+									lastIndex: getItemNodes().length - 1,
+									renderDropIndicator: (i, position) => collectionRenderer().renderDropIndicator?.(i, position),
+									children: renderDynamicItem((stateProps.items ?? [])[index])
+								});
 							}
-						})];
-					}
-				}));
-				return _el$4;
-			})() : [
-				memo(() => collectionRenderer().renderDropIndicator?.(entry.item.index, "before")),
-				memo(() => collectionRenderer().renderDropIndicator?.(entry.item.index, "on")),
-				memo(() => renderDynamicItem(entry.item.item)),
-				memo(() => collectionRenderer().renderDropIndicator?.(entry.item.index, "after"))
-			]
-		}) : [
-			memo(() => memo(() => !!virtualRange()?.offsetTop)() ? (() => {
-				var _el$6 = getNextElement(_tmpl$5);
-				effect((_$p) => setStyleProperty(_el$6, "height", `${virtualRange().offsetTop}px`));
-				return _el$6;
-			})() : null),
-			createComponent(For, {
+						})
+					})];
+				}
+			}) : memo(() => {
+				return !!usesStaticChildren();
+			})() ? renderStaticChildren() : memo(() => {
+				return !!hasSections();
+			})() ? createComponent(For, {
+				get each() {
+					return sectionedRenderEntries();
+				},
+				children: (entry) => entry.type === "section" ? (() => {
+					var _el$3 = getNextElement(_tmpl$2);
+					insert(_el$3, createComponent(Section, {
+						class: "solidaria-Menu-section",
+						get children() {
+							return [memo(() => {
+								return memo(() => {
+									return entry.section.title != null;
+								})() && createComponent(Header, {
+									class: "solidaria-Menu-sectionHeader",
+									get children() {
+										return entry.section.title;
+									}
+								});
+							}), createComponent(Group, {
+								class: "solidaria-Menu-sectionGroup",
+								get children() {
+									var _el$4 = getNextElement(_tmpl$);
+									insert(_el$4, createComponent(For, {
+										get each() {
+											return entry.items;
+										},
+										children: (indexedItem) => renderCollectionDropSlots({
+											index: indexedItem.index,
+											lastIndex: getItemNodes().length - 1,
+											renderDropIndicator: (i, position) => collectionRenderer().renderDropIndicator?.(i, position),
+											children: renderDynamicItem(indexedItem.item)
+										})
+									}));
+									effect(() => entry.section["aria-label"], (_v$) => {
+										setAttribute(_el$4, "aria-label", _v$);
+									});
+									return _el$4;
+								}
+							})];
+						}
+					}));
+					return _el$3;
+				})() : renderCollectionDropSlots({
+					index: entry.item.index,
+					lastIndex: getItemNodes().length - 1,
+					renderDropIndicator: (i, position) => collectionRenderer().renderDropIndicator?.(i, position),
+					children: renderDynamicItem(entry.item.item)
+				})
+			}) : createComponent(For, {
 				get each() {
 					return visibleItems();
 				},
 				children: (item, index) => {
 					const itemIndex = () => (virtualRange()?.start ?? 0) + index();
-					const beforeIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex(), "before");
-					const onIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex(), "on");
-					const afterIndicator = () => collectionRenderer().renderDropIndicator?.(itemIndex(), "after");
-					return [
-						memo(beforeIndicator),
-						memo(onIndicator),
-						memo(() => renderDynamicItem(item)),
-						memo(afterIndicator)
-					];
+					return renderCollectionDropSlots({
+						index: itemIndex(),
+						lastIndex: getItemNodes().length - 1,
+						renderDropIndicator: (i, position) => collectionRenderer().renderDropIndicator?.(i, position),
+						children: renderDynamicItem(item)
+					});
 				}
-			}),
-			memo(() => memo(() => !!virtualRange()?.offsetBottom)() ? (() => {
-				var _el$7 = getNextElement(_tmpl$6);
-				effect((_$p) => setStyleProperty(_el$7, "height", `${virtualRange().offsetBottom}px`));
-				return _el$7;
-			})() : null)
-		];
+			});
+		}), memo(() => {
+			return memo(() => {
+				return !!(state.collection().size === 0 && local.renderEmptyState);
+			})() ? (() => {
+				var _el$5 = getNextElement(_tmpl$3);
+				var _el$6 = _el$5.firstChild;
+				insert(_el$6, scope(() => {
+					return local.renderEmptyState();
+				}));
+				return _el$5;
+			})() : null;
+		})];
 	} });
 	const menuListProps = () => ({
 		ref: setResolvedMenuRef,
-		...mergeProps$2(domProps(), cleanMenuProps(), cleanTriggerMenuProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {}),
+		...mergeProps$1(domProps(), cleanMenuProps(), cleanTriggerMenuProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {}),
 		class: renderProps.class(),
 		style: renderProps.style(),
 		slot: local.slot,
-		"data-focused": state.isFocused() || void 0,
-		"data-disabled": resolveDisabled() || void 0,
-		"data-empty": state.collection().size === 0 || void 0,
-		"data-drop-target": isRootDropTarget() || void 0,
+		"data-focused": dataAttr(state.isFocused()),
+		"data-disabled": dataAttr(resolveDisabled()),
+		"data-empty": dataAttr(state.collection().size === 0),
+		"data-drop-target": dataAttr(isRootDropTarget()),
 		children: menuListChildren()
 	});
-	const menuContent = () => createComponent(MenuContext.Provider, {
+	const menuContent = () => createComponent(MenuContext, {
 		get value() {
 			return {
 				state,
@@ -781,26 +832,26 @@ function Menu(props) {
 			};
 		},
 		get children() {
-			return createComponent(MenuStateContext.Provider, {
+			return createComponent(MenuStateContext, {
 				value: state,
 				get children() {
-					return createComponent(MenuSectionSelectionRegistryContext.Provider, {
+					return createComponent(MenuSectionSelectionRegistryContext, {
 						value: sectionSelectionRegistry,
 						get children() {
-							return createComponent(MenuItemCloseRegistryContext.Provider, {
+							return createComponent(MenuItemCloseRegistryContext, {
 								value: itemCloseRegistry,
 								get children() {
-									return createComponent(StaticMenuCollectionContext.Provider, {
+									return createComponent(StaticMenuCollectionContext, {
 										get value() {
 											return usesStaticChildren() ? staticCollectionContext : null;
 										},
 										get children() {
-											return createComponent(MenuItemContext.Provider, {
+											return createComponent(MenuItemContext, {
 												get value() {
 													return menuItemContextValue();
 												},
 												get children() {
-													return createComponent(CollectionRendererContext.Provider, {
+													return createComponent(CollectionRendererContext, {
 														get value() {
 															return collectionRenderer();
 														},
@@ -810,42 +861,54 @@ function Menu(props) {
 																	return ariaProps.label;
 																},
 																get children() {
-																	var _el$8 = getNextElement(_tmpl$7);
-																	spread(_el$8, mergeProps(cleanLabelProps), false, true);
-																	insert(_el$8, () => ariaProps.label);
+																	var _el$7 = getNextElement(_tmpl$4);
+																	spread(_el$7, cleanLabelProps, true);
+																	insert(_el$7, () => {
+																		return ariaProps.label;
+																	});
 																	runHydrationEvents();
-																	return _el$8;
+																	return _el$7;
 																}
-															}), memo(() => memo(() => !!local.render)() ? local.render(menuListProps(), renderValues()) : (() => {
-																var _el$9 = getNextElement(_tmpl$8);
-																use(setResolvedMenuRef, _el$9);
-																spread(_el$9, mergeProps(() => mergeProps$2(domProps(), cleanMenuProps(), cleanTriggerMenuProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {}), {
-																	get ["class"]() {
-																		return renderProps.class();
-																	},
-																	get style() {
-																		return renderProps.style();
-																	},
-																	get slot() {
-																		return local.slot;
-																	},
-																	get ["data-focused"]() {
-																		return state.isFocused() || void 0;
-																	},
-																	get ["data-disabled"]() {
-																		return resolveDisabled() || void 0;
-																	},
-																	get ["data-empty"]() {
-																		return state.collection().size === 0 || void 0;
-																	},
-																	get ["data-drop-target"]() {
-																		return isRootDropTarget() || void 0;
-																	}
-																}), false, true);
-																insert(_el$9, menuListChildren);
-																runHydrationEvents();
-																return _el$9;
-															})())];
+															}), memo(() => {
+																return memo(() => {
+																	return !!local.render;
+																})() ? local.render(menuListProps(), renderValues()) : (() => {
+																	var _el$8 = getNextElement(_tmpl$5);
+																	ref(() => {
+																		return setResolvedMenuRef;
+																	}, _el$8);
+																	spread(_el$8, [() => {
+																		return mergeProps$1(domProps(), cleanMenuProps(), cleanTriggerMenuProps(), cleanFocusProps(), droppableCollection()?.collectionProps ?? {});
+																	}, {
+																		get "class"() {
+																			return renderProps.class();
+																		},
+																		get style() {
+																			return renderProps.style();
+																		},
+																		get slot() {
+																			return local.slot;
+																		},
+																		get "data-focused"() {
+																			return dataAttr(state.isFocused());
+																		},
+																		get "data-disabled"() {
+																			return dataAttr(resolveDisabled());
+																		},
+																		get "data-empty"() {
+																			return dataAttr(state.collection().size === 0);
+																		},
+																		get "data-drop-target"() {
+																			return dataAttr(isRootDropTarget());
+																		}
+																	}], true);
+																	insert(_el$8, scope(() => {
+																		return menuListChildren();
+																	}));
+																	runHydrationEvents();
+																	return _el$8;
+																})();
+															})];
 														}
 													});
 												}
@@ -860,24 +923,18 @@ function Menu(props) {
 			});
 		}
 	});
+	const shouldRender = () => overlayContext != null || !triggerContext ? true : triggerContext.state.isOpen();
 	return createComponent(Show, {
 		get when() {
 			return shouldRender();
 		},
 		get children() {
-			return createComponent(Show, {
-				when: triggerContext,
-				get fallback() {
-					return menuContent();
-				},
+			return overlayContext != null || !triggerContext ? createComponent(FocusScope, { get children() {
+				return menuContent();
+			} }) : createComponent(FocusScope, {
+				restoreFocus: true,
 				get children() {
-					return createComponent(FocusScope, {
-						restoreFocus: true,
-						autoFocus: true,
-						get children() {
-							return menuContent();
-						}
-					});
+					return menuContent();
 				}
 			});
 		}
@@ -914,7 +971,7 @@ function MenuItem(props) {
 	const sectionSelection = useContext(MenuSectionSelectionContext);
 	const sectionSelectionRegistry = useContext(MenuSectionSelectionRegistryContext);
 	const itemCloseRegistry = useContext(MenuItemCloseRegistryContext);
-	const [ref, setRef] = createSignal(null);
+	const [ref$1, setRef] = createSignal(null);
 	const contextProps = () => itemContext?.props?.() ?? {};
 	const combinedOnAction = () => {
 		local.onAction?.();
@@ -935,29 +992,34 @@ function MenuItem(props) {
 		}
 	};
 	createEffect(() => {
-		if (!staticCollection) return;
-		if (registeredStaticKey != null && registeredStaticKey !== local.id) staticCollection.unregisterItem(registeredStaticKey);
-		registeredStaticKey = local.id;
-		staticCollection.registerItem({
+		if (!staticCollection) return null;
+		return {
 			id: local.id,
 			textValue: local.textValue ?? ariaProps["aria-label"],
 			isDisabled: resolveBoolean(ariaProps.isDisabled) || (sectionSelection?.isDisabled(local.id) ?? false)
-		});
+		};
+	}, (item) => {
+		if (!staticCollection || !item) return;
+		if (registeredStaticKey != null && registeredStaticKey !== item.id) staticCollection.unregisterItem(registeredStaticKey);
+		registeredStaticKey = item.id;
+		staticCollection.registerItem(item);
 	});
 	onCleanup(() => {
 		if (registeredStaticKey != null) staticCollection?.unregisterItem(registeredStaticKey);
 	});
-	createEffect(() => {
-		const selection = activeSectionSelection();
+	createEffect(() => ({
+		selection: activeSectionSelection(),
+		id: local.id
+	}), ({ selection, id }) => {
 		if (!sectionSelectionRegistry || !selection) {
 			unregisterSectionSelection();
 			return;
 		}
-		if (registeredSectionSelectionKey === local.id && registeredSectionSelection === selection) return;
+		if (registeredSectionSelectionKey === id && registeredSectionSelection === selection) return;
 		unregisterSectionSelection();
-		registeredSectionSelectionKey = local.id;
+		registeredSectionSelectionKey = id;
 		registeredSectionSelection = selection;
-		sectionSelectionRegistry.registerItem(local.id, selection);
+		sectionSelectionRegistry.registerItem(id, selection);
 	});
 	onCleanup(unregisterSectionSelection);
 	const unregisterItemClose = () => {
@@ -967,16 +1029,20 @@ function MenuItem(props) {
 			registeredCloseAccessor = null;
 		}
 	};
-	createEffect(() => {
-		if (!itemCloseRegistry) {
+	createEffect(() => ({
+		id: local.id,
+		shouldClose: itemCloseOnSelect,
+		registry: itemCloseRegistry
+	}), ({ id, shouldClose, registry }) => {
+		if (!registry) {
 			unregisterItemClose();
 			return;
 		}
-		if (registeredCloseKey === local.id && registeredCloseAccessor === itemCloseOnSelect) return;
+		if (registeredCloseKey === id && registeredCloseAccessor === shouldClose) return;
 		unregisterItemClose();
-		registeredCloseKey = local.id;
-		registeredCloseAccessor = itemCloseOnSelect;
-		itemCloseRegistry.registerItem(local.id, itemCloseOnSelect);
+		registeredCloseKey = id;
+		registeredCloseAccessor = shouldClose;
+		registry.registerItem(id, shouldClose);
 	});
 	onCleanup(unregisterItemClose);
 	const itemAria = createMenuItem({
@@ -1017,7 +1083,7 @@ function MenuItem(props) {
 		get download() {
 			return local.download;
 		}
-	}, state, () => ref());
+	}, state, () => ref$1());
 	const { isHovered, hoverProps } = createHover({
 		get isDisabled() {
 			return itemAria.isDisabled();
@@ -1037,7 +1103,7 @@ function MenuItem(props) {
 			isHovered: isHovered(),
 			isDisabled: itemAria.isDisabled(),
 			hasSubmenu: Boolean(contextProps()["aria-haspopup"]),
-			isOpen: contextProps()["aria-expanded"] === true,
+			isOpen: isAriaTrue(contextProps()["aria-expanded"]),
 			descriptionProps: itemAria.descriptionProps,
 			keyboardShortcutProps: itemAria.keyboardShortcutProps
 		};
@@ -1077,7 +1143,7 @@ function MenuItem(props) {
 	});
 	const droppableItem = createMemo(() => {
 		if (!menuContext?.dragAndDropHooks?.useDroppableItem || !menuContext.dropState) return void 0;
-		return menuContext.dragAndDropHooks.useDroppableItem({ key: local.id }, menuContext.dropState, () => ref());
+		return menuContext.dragAndDropHooks.useDroppableItem({ key: local.id }, menuContext.dropState, () => ref$1());
 	});
 	const isLink = () => !!local.href;
 	const cleanItemPropsForLink = () => {
@@ -1096,40 +1162,46 @@ function MenuItem(props) {
 	const dataAttrs = () => {
 		const selection = activeSectionSelection();
 		return {
-			"data-focused": itemAria.isFocused() || void 0,
-			"data-focus-visible": itemAria.isFocusVisible() || void 0,
-			"data-pressed": itemAria.isPressed() || void 0,
-			"data-hovered": isHovered() || void 0,
-			"data-disabled": itemAria.isDisabled() || void 0,
-			"data-selected": (selection?.isSelected(local.id) ?? itemAria.isSelected()) || void 0,
-			"data-has-submenu": Boolean(contextProps()["aria-haspopup"]) || void 0,
-			"data-open": contextProps()["aria-expanded"] === true || void 0,
-			"data-dragging": draggableItem()?.isDragging || void 0,
-			"data-drop-target": droppableItem()?.isDropTarget || void 0
+			"data-focused": dataAttr(itemAria.isFocused()),
+			"data-focus-visible": dataAttr(itemAria.isFocusVisible()),
+			"data-pressed": dataAttr(itemAria.isPressed()),
+			"data-hovered": dataAttr(isHovered()),
+			"data-disabled": dataAttr(itemAria.isDisabled()),
+			"data-selected": dataAttr(selection?.isSelected(local.id) ?? itemAria.isSelected()),
+			"data-has-submenu": dataAttr(Boolean(contextProps()["aria-haspopup"])),
+			"data-open": dataAttr(isAriaTrue(contextProps()["aria-expanded"])),
+			"data-dragging": dataAttr(!!draggableItem()?.isDragging),
+			"data-drop-target": dataAttr(!!droppableItem()?.isDropTarget)
 		};
 	};
 	const childContent = () => hasPrimitiveLabel() ? (() => {
-		var _el$0 = getNextElement(_tmpl$7);
-		spread(_el$0, mergeProps(() => itemAria.labelProps), false, true);
-		insert(_el$0, () => renderProps.renderChildren());
+		var _el$9 = getNextElement(_tmpl$4);
+		spread(_el$9, () => {
+			return itemAria.labelProps;
+		}, true);
+		insert(_el$9, scope(() => {
+			return renderProps.renderChildren();
+		}));
 		runHydrationEvents();
-		return _el$0;
+		return _el$9;
 	})() : renderProps.renderChildren();
 	const setResolvedItemRef = (el) => {
 		setRef(el);
 		itemContext?.setItemRef?.(el);
-		if (el) assignRef(local.ref, el);
+		if (el) assignRef$1(local.ref, el);
+		const dragRef = (draggableItem()?.dragProps)?.ref;
+		if (el && typeof dragRef === "function") dragRef(el);
 	};
 	const menuItemProps = () => ({
 		ref: setResolvedItemRef,
-		...mergeProps$2(cleanItemProps(), contextProps(), domProps(), cleanHoverProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}),
+		...mergeProps$1(cleanItemProps(), contextProps(), domProps(), cleanHoverProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}),
 		class: renderProps.class(),
 		style: renderProps.style(),
 		...dataAttrs(),
 		children: childContent()
 	});
 	const linkMenuItemProps = () => ({
-		...mergeProps$2(cleanItemPropsForLink(), contextProps(), domProps(), cleanHoverProps(), linkDomProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}),
+		...mergeProps$1(cleanItemPropsForLink(), contextProps(), domProps(), cleanHoverProps(), linkDomProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}),
 		class: renderProps.class(),
 		style: renderProps.style(),
 		...dataAttrs(),
@@ -1141,45 +1213,58 @@ function MenuItem(props) {
 			return isLink();
 		},
 		get fallback() {
-			return (() => {
-				var _el$1 = getNextElement(_tmpl$8);
-				use((el) => {
-					setRef(el);
-					itemContext?.setItemRef?.(el);
-					assignRef(local.ref, el);
-				}, _el$1);
-				spread(_el$1, mergeProps(() => mergeProps$2(cleanItemProps(), contextProps(), domProps(), cleanHoverProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}), {
-					get ["class"]() {
+			var _el$10 = getNextElement(_tmpl$5);
+			ref(() => {
+				return setResolvedItemRef;
+			}, _el$10);
+			spread(_el$10, [
+				() => {
+					return mergeProps$1(cleanItemProps(), contextProps(), domProps(), cleanHoverProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {});
+				},
+				{
+					get "class"() {
 						return renderProps.class();
 					},
 					get style() {
 						return renderProps.style();
 					}
-				}, dataAttrs), false, true);
-				insert(_el$1, childContent);
-				runHydrationEvents();
-				return _el$1;
-			})();
+				},
+				dataAttrs
+			], true);
+			insert(_el$10, scope(() => {
+				return childContent();
+			}));
+			runHydrationEvents();
+			return _el$10;
 		},
 		get children() {
-			return memo(() => !!local.render)() ? local.render(linkMenuItemProps(), renderValues()) : (() => {
-				var _el$10 = getNextElement(_tmpl$9);
-				use((el) => {
-					setRef(el);
-					itemContext?.setItemRef?.(el);
-					assignRef(local.ref, el);
-				}, _el$10);
-				spread(_el$10, mergeProps(() => mergeProps$2(cleanItemPropsForLink(), contextProps(), domProps(), cleanHoverProps(), linkDomProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}), {
-					get ["class"]() {
-						return renderProps.class();
+			return memo(() => {
+				return !!local.render;
+			})() ? local.render(linkMenuItemProps(), renderValues()) : (() => {
+				var _el$11 = getNextElement(_tmpl$6);
+				ref(() => {
+					return setResolvedItemRef;
+				}, _el$11);
+				claimElement(_el$11);
+				spread(_el$11, [
+					() => {
+						return mergeProps$1(cleanItemPropsForLink(), contextProps(), domProps(), cleanHoverProps(), linkDomProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {});
 					},
-					get style() {
-						return renderProps.style();
-					}
-				}, dataAttrs), false, true);
-				insert(_el$10, childContent);
+					{
+						get "class"() {
+							return renderProps.class();
+						},
+						get style() {
+							return renderProps.style();
+						}
+					},
+					dataAttrs
+				], true);
+				insert(_el$11, scope(() => {
+					return childContent();
+				}));
 				runHydrationEvents();
-				return _el$10;
+				return _el$11;
 			})();
 		}
 	});
@@ -1240,15 +1325,109 @@ function MenuSection(props) {
 			return selectionProps.shouldCloseOnSelect;
 		}
 	};
-	return createComponent(MenuSectionSelectionContext.Provider, {
+	return createComponent(MenuSectionSelectionContext, {
 		value: sectionSelection,
 		get children() {
 			return createComponent(Section, sectionProps);
 		}
 	});
 }
+/**
+* Load more sentinel item for menu collections.
+* Port of RAC `MenuLoadMoreItem` (`react-aria-components/src/Menu.tsx`).
+*/
+function MenuLoadMoreItem(props) {
+	const state = useContext(MenuStateContext);
+	const [sentinel, setSentinel] = createSignal(null);
+	const [collectionEpoch, setCollectionEpoch] = createSignal(0);
+	let seenCollectionSize;
+	const [local, domProps] = splitProps(props, [
+		"onLoadMore",
+		"isLoading",
+		"scrollOffset",
+		"children",
+		"class",
+		"style",
+		"ref",
+		"slot"
+	]);
+	const scrollOffsetValue = createMemo(() => local.scrollOffset ?? 1);
+	createEffect(() => state?.collection()?.size ?? 0, (size) => {
+		if (seenCollectionSize === void 0 || seenCollectionSize === 0) {
+			seenCollectionSize = size;
+			return;
+		}
+		if (size !== seenCollectionSize) {
+			seenCollectionSize = size;
+			setCollectionEpoch((n) => n + 1);
+		}
+	});
+	createEffect(() => ({
+		current: sentinel(),
+		scrollOffset: scrollOffsetValue(),
+		epoch: collectionEpoch()
+	}), ({ current, scrollOffset }) => {
+		if (!current || typeof IntersectionObserver !== "function") return;
+		const onLoadMore = local.onLoadMore;
+		const margin = 100 * scrollOffset;
+		const rootMargin = `0px ${margin}% ${margin}% ${margin}%`;
+		const observer = new IntersectionObserver((entries) => {
+			for (const entry of entries) if (entry.isIntersecting && onLoadMore) onLoadMore();
+		}, { rootMargin });
+		observer.observe(current);
+		return () => observer.disconnect();
+	});
+	const isLoading = () => !!local.isLoading;
+	const renderProps = useRenderProps({
+		get children() {
+			return local.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Menu-loadMore"
+	}, () => ({ isLoading: isLoading() }));
+	return [(() => {
+		var _el$12 = getNextElement(_tmpl$7);
+		var _el$13 = _el$12.firstChild;
+		ref(() => {
+			return setSentinel;
+		}, _el$13);
+		return _el$12;
+	})(), createComponent(Show, {
+		get when() {
+			return memo(() => {
+				return !!isLoading();
+			})() ? local.children : isLoading();
+		},
+		get children() {
+			var _el$14 = getNextElement(_tmpl$5);
+			ref(() => {
+				return (el) => assignRef$1(local.ref, el);
+			}, _el$14);
+			spread(_el$14, [() => {
+				return filterDOMProps(domProps, { global: true });
+			}, {
+				role: "menuitem",
+				tabindex: -1,
+				get "class"() {
+					return renderProps.class();
+				},
+				get style() {
+					return renderProps.style();
+				},
+				"data-loading": true
+			}], true);
+			insert(_el$14, scope(() => {
+				return renderProps.renderChildren();
+			}));
+			runHydrationEvents();
+			return _el$14;
+		}
+	})];
+}
 Menu.Item = MenuItem;
+Menu.LoadMoreItem = MenuLoadMoreItem;
 //#endregion
-export { Menu, MenuButton, MenuContext, MenuItem, MenuSection, MenuStateContext, MenuTrigger, MenuTriggerContext, RootMenuTriggerStateContext, SubmenuTrigger };
+export { Menu, MenuContext, MenuItem, MenuLoadMoreItem, MenuSection, MenuStateContext, MenuTrigger, MenuTriggerContext, RootMenuTriggerStateContext, SubmenuTrigger };
 
 //# sourceMappingURL=Menu.js.map