@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/Menu.jsx

@@ -0,0 +1,1042 @@
+import { filterDOMProps, useRenderProps } from "./utils.jsx";
+import { r as PopoverTriggerContext } from "./contexts.jsx";
+import { SharedElementTransition } from "./SharedElementTransition.jsx";
+import { CollectionRendererContext, Group, Header, Section, flattenCollectionEntries, isCollectionSection, useCollectionRenderer } from "./Collection.jsx";
+import { r as useVirtualizerContext } from "./Virtualizer2.jsx";
+import { getNormalizedDropTargetKey, mergePersistedKeysIntoVirtualRange, useDndPersistedKeys, useRenderDropIndicator } from "./DragAndDrop.jsx";
+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$1 } from "@proyecto-viviana/solidaria";
+import { createMenuState, createMenuTriggerState, createSelectionState } from "@proyecto-viviana/solid-stately";
+//#region src/Menu.tsx
+/**
+* Menu component for solidaria-components
+*
+* A pre-wired headless menu that combines state + aria hooks.
+* Port of react-aria-components/src/Menu.tsx
+*/
+const MenuContext = createContext(null);
+const MenuStateContext = createContext(null);
+const MenuTriggerContext = createContext(null);
+const RootMenuTriggerStateContext = createContext(null);
+const MenuItemContext = createContext(null);
+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);
+}
+/**
+* A menu trigger wraps a button and menu, handling the open/close state.
+*/
+function MenuTrigger(props) {
+	const [local, stateProps] = splitProps(props, ["slot"]);
+	const state = createMenuTriggerState({
+		get isOpen() {
+			return stateProps.isOpen;
+		},
+		get defaultOpen() {
+			return stateProps.defaultOpen;
+		},
+		get onOpenChange() {
+			return stateProps.onOpenChange;
+		}
+	});
+	const [isMousePressed, setMousePressed] = createSignal(false);
+	const onPressStart = (e) => {
+		if (e.pointerType !== "mouse" || typeof document === "undefined") return;
+		setMousePressed(true);
+		document.addEventListener("pointerup", () => {
+			setMousePressed(false);
+		}, {
+			once: true,
+			capture: true
+		});
+	};
+	const menuTrigger = createMenuTrigger({ get isDisabled() {
+		return stateProps.isDisabled;
+	} }, state);
+	return <RootMenuTriggerStateContext.Provider value={state}>
+      <MenuTriggerContext.Provider value={{
+		state,
+		get triggerProps() {
+			return menuTrigger.menuTriggerProps;
+		},
+		get menuProps() {
+			return menuTrigger.menuProps;
+		},
+		isPressed: isMousePressed,
+		onPressStart
+	}}>
+        {props.children}
+      </MenuTriggerContext.Provider>
+    </RootMenuTriggerStateContext.Provider>;
+}
+function SubmenuTrigger(props) {
+	const children = () => Array.isArray(props.children) ? props.children : [props.children];
+	const trigger = () => children()[0];
+	const content = () => children()[1];
+	const parentMenuItemContext = useContext(MenuItemContext);
+	const state = createMenuTriggerState({
+		get isOpen() {
+			return props.isOpen;
+		},
+		get defaultOpen() {
+			return props.defaultOpen;
+		},
+		get onOpenChange() {
+			return props.onOpenChange;
+		}
+	});
+	let triggerRef = null;
+	const triggerId = createUniqueId();
+	const menuId = createUniqueId();
+	let hoverTimeout;
+	let hasPointerHover = false;
+	const delay = () => props.delay ?? 200;
+	const clearHoverTimeout = () => {
+		if (hoverTimeout != null) {
+			window.clearTimeout(hoverTimeout);
+			hoverTimeout = void 0;
+		}
+	};
+	const openSubmenu = () => {
+		clearHoverTimeout();
+		state.open();
+	};
+	const queueOpenSubmenu = () => {
+		clearHoverTimeout();
+		const open = () => state.open();
+		if (typeof queueMicrotask === "function") queueMicrotask(open);
+		else Promise.resolve().then(open);
+	};
+	const scheduleOpen = () => {
+		clearHoverTimeout();
+		hoverTimeout = window.setTimeout(() => {
+			hoverTimeout = void 0;
+			state.open();
+		}, delay());
+	};
+	const schedulePointerOpen = (event) => {
+		hasPointerHover = true;
+		if (event.isTrusted === false) {
+			queueOpenSubmenu();
+			return;
+		}
+		scheduleOpen();
+	};
+	const openFromMouseHover = () => {
+		if (state.isOpen()) return;
+		if (hasPointerHover) scheduleOpen();
+		else queueOpenSubmenu();
+	};
+	onCleanup(clearHoverTimeout);
+	const menuTriggerContext = createMemo(() => ({
+		state,
+		triggerProps: {},
+		menuProps: {
+			id: menuId,
+			"aria-labelledby": triggerId
+		}
+	}));
+	const popoverTriggerContext = createMemo(() => ({
+		state: {
+			isOpen: () => state.isOpen(),
+			open: () => state.open(),
+			close: () => state.close(),
+			toggle: () => state.toggle()
+		},
+		triggerRef: () => triggerRef,
+		setTriggerRef: (el) => {
+			triggerRef = el;
+		},
+		triggerId,
+		trigger: "SubmenuTrigger"
+	}));
+	const itemContext = createMemo(() => ({
+		closeOnSelect: false,
+		onAction: () => openSubmenu(),
+		setItemRef: (el) => {
+			triggerRef = el;
+		},
+		props: () => ({
+			id: triggerId,
+			"aria-haspopup": "menu",
+			get "aria-expanded"() {
+				return state.isOpen() || void 0;
+			},
+			get "aria-controls"() {
+				return state.isOpen() ? menuId : void 0;
+			},
+			onPointerEnter: (event) => {
+				if (event.pointerType === "touch") return;
+				schedulePointerOpen(event);
+			},
+			onPointerOver: (event) => {
+				if (event.pointerType === "touch") return;
+				schedulePointerOpen(event);
+			},
+			onMouseEnter: openFromMouseHover,
+			onMouseOver: openFromMouseHover,
+			onKeyDown: (event) => {
+				if (event.key === "ArrowRight" || event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					openSubmenu();
+				} else if (event.key === "ArrowLeft" && state.isOpen()) {
+					event.preventDefault();
+					state.close();
+				}
+			}
+		})
+	}));
+	return <PopoverTriggerContext.Provider value={popoverTriggerContext()}>
+      <MenuTriggerContext.Provider value={menuTriggerContext()}>
+        <MenuItemContext.Provider value={{
+		...parentMenuItemContext,
+		...itemContext()
+	}}>
+          {trigger()}
+        </MenuItemContext.Provider>
+        {content()}
+      </MenuTriggerContext.Provider>
+    </PopoverTriggerContext.Provider>;
+}
+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 <button {...domProps} {...cleanTriggerProps()} {...cleanButtonProps()} {...cleanFocusProps()} {...cleanHoverProps()} type="button" class={renderProps.class()} style={renderProps.style()} aria-haspopup={resolvedTriggerProps()["aria-haspopup"]} aria-expanded={resolvedTriggerProps()["aria-expanded"]} aria-controls={resolvedTriggerProps()["aria-controls"]} aria-disabled={resolvedTriggerProps()["aria-disabled"]} data-open={state.isOpen() || void 0} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} data-pressed={context.isPressed?.() || buttonAria.isPressed() || void 0} data-hovered={isHovered() || void 0} data-disabled={local.isDisabled || void 0}>
+      {renderProps.renderChildren()}
+    </button>;
+}
+/**
+* A menu displays a list of actions or options for the user to choose from.
+*/
+function Menu(props) {
+	const [local, stateProps, ariaProps] = splitProps(props, [
+		"children",
+		"class",
+		"style",
+		"render",
+		"slot",
+		"renderEmptyState",
+		"ref",
+		"staticChildren"
+	], [
+		"items",
+		"getKey",
+		"getTextValue",
+		"getDisabled",
+		"disabledKeys",
+		"disabledBehavior",
+		"selectionMode",
+		"selectionBehavior",
+		"disallowEmptySelection",
+		"selectedKeys",
+		"defaultSelectedKeys",
+		"onSelectionChange",
+		"allowDuplicateSelectionEvents",
+		"onAction",
+		"onClose",
+		"shouldCloseOnSelect",
+		"dragAndDropHooks"
+	]);
+	const triggerContext = useContext(MenuTriggerContext);
+	const [menuRef, setMenuRef] = createSignal(null);
+	const [staticItems, setStaticItems] = createSignal([]);
+	const staticItemMap = /* @__PURE__ */ new Map();
+	const sectionSelectionMap = /* @__PURE__ */ new Map();
+	const itemCloseMap = /* @__PURE__ */ new Map();
+	const usesStaticChildren = () => local.staticChildren != null || stateProps.items == null;
+	const syncStaticItems = () => {
+		setStaticItems(Array.from(staticItemMap.values()));
+	};
+	const staticCollectionContext = {
+		registerItem(item) {
+			const previous = staticItemMap.get(item.id);
+			if (previous && previous.textValue === item.textValue && previous.isDisabled === item.isDisabled) return;
+			staticItemMap.set(item.id, item);
+			syncStaticItems();
+		},
+		unregisterItem(id) {
+			if (staticItemMap.delete(id)) syncStaticItems();
+		}
+	};
+	const sectionSelectionRegistry = {
+		registerItem(key, selection) {
+			sectionSelectionMap.set(key, selection);
+		},
+		unregisterItem(key, selection) {
+			if (sectionSelectionMap.get(key) === selection) sectionSelectionMap.delete(key);
+		},
+		selectItem(key, event) {
+			const selection = sectionSelectionMap.get(key);
+			if (!selection || selection.selectionMode() === "none") return false;
+			selection.select(key, event);
+			return true;
+		}
+	};
+	const itemCloseRegistry = {
+		registerItem(key, shouldCloseOnSelect) {
+			itemCloseMap.set(key, shouldCloseOnSelect);
+		},
+		unregisterItem(key, shouldCloseOnSelect) {
+			if (itemCloseMap.get(key) === shouldCloseOnSelect) itemCloseMap.delete(key);
+		},
+		shouldCloseOnSelect(key) {
+			return key == null ? void 0 : itemCloseMap.get(key)?.();
+		}
+	};
+	const handleAction = (key, value) => {
+		sectionSelectionRegistry.selectItem(key);
+		stateProps.onAction?.(key, usesStaticChildren() ? void 0 : value);
+	};
+	const flatItems = createMemo(() => {
+		return flattenCollectionEntries(stateProps.items ?? []);
+	});
+	const hasSections = createMemo(() => (stateProps.items ?? []).some((item) => isCollectionSection(item)));
+	const state = createMenuState({
+		get items() {
+			return usesStaticChildren() ? staticItems() : flatItems();
+		},
+		get getKey() {
+			return usesStaticChildren() ? (item) => item.id : stateProps.getKey;
+		},
+		get getTextValue() {
+			return usesStaticChildren() ? (item) => item.textValue ?? String(item.id) : stateProps.getTextValue;
+		},
+		get getDisabled() {
+			return usesStaticChildren() ? (item) => Boolean(item.isDisabled) : stateProps.getDisabled;
+		},
+		get disabledKeys() {
+			return stateProps.disabledKeys;
+		},
+		get disabledBehavior() {
+			return stateProps.disabledBehavior;
+		},
+		get selectionMode() {
+			return stateProps.selectionMode;
+		},
+		get selectionBehavior() {
+			return stateProps.selectionBehavior;
+		},
+		get disallowEmptySelection() {
+			return stateProps.disallowEmptySelection;
+		},
+		get selectedKeys() {
+			return stateProps.selectedKeys;
+		},
+		get defaultSelectedKeys() {
+			return stateProps.defaultSelectedKeys;
+		},
+		get onSelectionChange() {
+			return stateProps.onSelectionChange;
+		},
+		get allowDuplicateSelectionEvents() {
+			return stateProps.allowDuplicateSelectionEvents;
+		},
+		get onAction() {
+			return handleAction;
+		},
+		get onClose() {
+			return stateProps.onClose ?? (() => triggerContext?.state.close());
+		}
+	});
+	const resolveDisabled = () => {
+		const disabled = ariaProps.isDisabled;
+		if (typeof disabled === "function") return disabled();
+		return !!disabled;
+	};
+	const { menuProps, labelProps } = createMenu({
+		get isDisabled() {
+			return resolveDisabled();
+		},
+		get label() {
+			return ariaProps.label;
+		},
+		get onAction() {
+			return handleAction;
+		},
+		get onClose() {
+			return stateProps.onClose ?? (() => triggerContext?.state.close());
+		},
+		get shouldCloseOnSelect() {
+			return itemCloseRegistry.shouldCloseOnSelect(state.focusedKey()) ?? stateProps.shouldCloseOnSelect;
+		},
+		get "aria-label"() {
+			return ariaProps["aria-label"];
+		},
+		get "aria-labelledby"() {
+			return ariaProps["aria-labelledby"];
+		},
+		get "aria-describedby"() {
+			return ariaProps["aria-describedby"];
+		}
+	}, state);
+	createScrollIntoViewOnFocus({
+		focusedKey: () => state.focusedKey(),
+		isActive: () => state.isFocused(),
+		ref: () => menuRef()
+	});
+	const { isFocused, focusProps } = createFocusRing();
+	createInteractOutside({
+		ref: () => menuRef(),
+		onInteractOutside: () => {
+			if (triggerContext?.state.isOpen()) triggerContext.state.close();
+		},
+		get isDisabled() {
+			return !triggerContext?.state.isOpen();
+		}
+	});
+	const renderValues = createMemo(() => ({
+		isFocused: state.isFocused() || isFocused(),
+		isOpen: triggerContext?.state.isOpen() ?? true,
+		isEmpty: state.collection().size === 0
+	}));
+	const renderProps = useRenderProps({
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Menu"
+	}, renderValues);
+	const cleanMenuProps = () => {
+		const { ref: _ref1, ...rest } = menuProps;
+		return rest;
+	};
+	const cleanTriggerMenuProps = () => {
+		if (!triggerContext) return {};
+		const { ref: _ref2, ...rest } = triggerContext.menuProps;
+		return rest;
+	};
+	const cleanFocusProps = () => {
+		const { ref: _ref3, ...rest } = focusProps;
+		return rest;
+	};
+	const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));
+	const cleanLabelProps = () => {
+		const { ref: _ref4, ...rest } = labelProps;
+		return rest;
+	};
+	const setResolvedMenuRef = (el) => {
+		setMenuRef(el);
+		assignRef(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"));
+	const getDropTargetByIndex = (index, position) => {
+		const node = getItemNodes()[index];
+		if (!node) return null;
+		return {
+			type: "item",
+			key: node.key,
+			dropPosition: position
+		};
+	};
+	const hasDroppableDnd = createMemo(() => {
+		const hooks = stateProps.dragAndDropHooks;
+		return Boolean(hooks?.useDroppableCollectionState && hooks.useDroppableCollection && (hooks.dropTargetDelegate || parentCollectionRenderer?.dropTargetDelegate || hooks.ListDropTargetDelegate));
+	});
+	const hasDraggableDnd = 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?.({});
+	});
+	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, {
+			forceIncludeIndexes,
+			forceIncludeMaxSpan: 320
+		});
+	});
+	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 (!hasDroppableDnd()) return void 0;
+		const hooks = stateProps.dragAndDropHooks;
+		const activeDropState = dropState();
+		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 dropTargetDelegate = hooks.dropTargetDelegate ?? parentCollectionRenderer?.dropTargetDelegate ?? (hooks.ListDropTargetDelegate ? new hooks.ListDropTargetDelegate(() => state.collection(), () => menuRef(), {
+			layout: "stack",
+			orientation: "vertical",
+			direction: resolveDirection()
+		}) : void 0);
+		if (!dropTargetDelegate) return void 0;
+		return hooks.useDroppableCollection({
+			dropTargetDelegate,
+			keyboardDelegate: {
+				getFirstKey: () => state.collection().getFirstKey(),
+				getLastKey: () => state.collection().getLastKey(),
+				getKeyBelow: (key) => state.collection().getKeyAfter(key),
+				getKeyAbove: (key) => state.collection().getKeyBefore(key),
+				getKeyPageBelow: (key) => state.collection().getKeyAfter(key),
+				getKeyPageAbove: (key) => state.collection().getKeyBefore(key)
+			}
+		}, activeDropState, () => menuRef());
+	});
+	const isRootDropTarget = createMemo(() => {
+		return Boolean(dropState()?.target?.type === "root");
+	});
+	const dndRenderDropIndicator = createMemo(() => useRenderDropIndicator(stateProps.dragAndDropHooks, dropState()));
+	const dndDropIndicator = (index, position) => {
+		const target = getDropTargetByIndex(index, position);
+		if (!target || target.type !== "item") return void 0;
+		return dndRenderDropIndicator()?.(target);
+	};
+	const sectionedRenderEntries = createMemo(() => {
+		let globalIndex = 0;
+		return (stateProps.items ?? []).map((entry) => {
+			if (isCollectionSection(entry)) return {
+				type: "section",
+				section: entry,
+				items: entry.items.map((item) => ({
+					item,
+					index: globalIndex++
+				}))
+			};
+			return {
+				type: "item",
+				item: {
+					item: entry,
+					index: globalIndex++
+				}
+			};
+		});
+	});
+	const renderDynamicItem = (item) => typeof local.children === "function" ? local.children(item) : void 0;
+	const resolveStaticChild = (child) => {
+		return typeof child === "function" ? child() : child;
+	};
+	const renderStaticChildren = () => {
+		const staticChildren = local.staticChildren?.() ?? local.children;
+		if (Array.isArray(staticChildren)) return staticChildren.map(resolveStaticChild);
+		return resolveStaticChild(staticChildren);
+	};
+	const collectionRenderer = createMemo(() => ({
+		...parentCollectionRenderer,
+		renderItem: (item) => renderDynamicItem(item),
+		renderDropIndicator: (index, position) => dndDropIndicator(index, position) ?? parentCollectionRenderer?.renderDropIndicator?.(index, position)
+	}));
+	const menuItemContextValue = createMemo(() => stateProps.shouldCloseOnSelect !== void 0 ? { closeOnSelect: stateProps.shouldCloseOnSelect } : {});
+	const menuListChildren = () => <SharedElementTransition>
+      {state.collection().size === 0 && !usesStaticChildren() && local.renderEmptyState ? <div role="presentation" data-empty-state>
+          <div role="menuitem" style={{ display: "contents" }}>
+            {local.renderEmptyState()}
+          </div>
+        </div> : usesStaticChildren() ? renderStaticChildren() : hasSections() ? <For each={sectionedRenderEntries()}>
+          {(entry) => entry.type === "section" ? <div role="presentation" data-section-wrapper>
+                <Section class="solidaria-Menu-section">
+                  {entry.section.title != null && <Header class="solidaria-Menu-sectionHeader">{entry.section.title}</Header>}
+                  <Group class="solidaria-Menu-sectionGroup">
+                    <div role="group" aria-label={entry.section["aria-label"]}>
+                      <For each={entry.items}>
+                        {(indexedItem) => <>
+                            {collectionRenderer().renderDropIndicator?.(indexedItem.index, "before")}
+                            {collectionRenderer().renderDropIndicator?.(indexedItem.index, "on")}
+                            {renderDynamicItem(indexedItem.item)}
+                            {collectionRenderer().renderDropIndicator?.(indexedItem.index, "after")}
+                          </>}
+                      </For>
+                    </div>
+                  </Group>
+                </Section>
+              </div> : <>
+                {collectionRenderer().renderDropIndicator?.(entry.item.index, "before")}
+                {collectionRenderer().renderDropIndicator?.(entry.item.index, "on")}
+                {renderDynamicItem(entry.item.item)}
+                {collectionRenderer().renderDropIndicator?.(entry.item.index, "after")}
+              </>}
+        </For> : <>
+          {virtualRange()?.offsetTop ? <div role="presentation" aria-hidden="true" style={{ height: `${virtualRange().offsetTop}px` }} data-virtualizer-spacer="top" /> : null}
+          <For each={visibleItems()}>
+            {(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 <>
+                  {beforeIndicator()}
+                  {onIndicator()}
+                  {renderDynamicItem(item)}
+                  {afterIndicator()}
+                </>;
+	}}
+          </For>
+          {virtualRange()?.offsetBottom ? <div role="presentation" aria-hidden="true" style={{ height: `${virtualRange().offsetBottom}px` }} data-virtualizer-spacer="bottom" /> : null}
+        </>}
+    </SharedElementTransition>;
+	const menuListProps = () => ({
+		ref: setResolvedMenuRef,
+		...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,
+		children: menuListChildren()
+	});
+	const menuContent = () => <MenuContext.Provider value={{
+		state,
+		isDisabled: resolveDisabled,
+		dragAndDropHooks: stateProps.dragAndDropHooks,
+		dragState: dragState(),
+		dropState: dropState()
+	}}>
+      <MenuStateContext.Provider value={state}>
+        <MenuSectionSelectionRegistryContext.Provider value={sectionSelectionRegistry}>
+          <MenuItemCloseRegistryContext.Provider value={itemCloseRegistry}>
+            <StaticMenuCollectionContext.Provider value={usesStaticChildren() ? staticCollectionContext : null}>
+              <MenuItemContext.Provider value={menuItemContextValue()}>
+                <CollectionRendererContext.Provider value={collectionRenderer()}>
+                  <>
+                    <Show when={ariaProps.label}>
+                      <span {...cleanLabelProps()}>{ariaProps.label}</span>
+                    </Show>
+                    {local.render ? local.render(menuListProps(), renderValues()) : <div ref={setResolvedMenuRef} {...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}>
+                        {menuListChildren()}
+                      </div>}
+                  </>
+                </CollectionRendererContext.Provider>
+              </MenuItemContext.Provider>
+            </StaticMenuCollectionContext.Provider>
+          </MenuItemCloseRegistryContext.Provider>
+        </MenuSectionSelectionRegistryContext.Provider>
+      </MenuStateContext.Provider>
+    </MenuContext.Provider>;
+	return <Show when={shouldRender()}>
+      <Show when={triggerContext} fallback={menuContent()}>
+        <FocusScope restoreFocus autoFocus>
+          {menuContent()}
+        </FocusScope>
+      </Show>
+    </Show>;
+}
+/**
+* An item in a menu.
+*/
+function MenuItem(props) {
+	const [local, ariaProps] = splitProps(props, [
+		"class",
+		"style",
+		"render",
+		"slot",
+		"id",
+		"item",
+		"textValue",
+		"onAction",
+		"href",
+		"target",
+		"rel",
+		"download",
+		"onHoverStart",
+		"onHoverEnd",
+		"onHoverChange",
+		"ref"
+	]);
+	const context = useContext(MenuStateContext);
+	if (!context) throw new Error("MenuItem must be used within a Menu");
+	const state = context;
+	const menuContext = useContext(MenuContext);
+	const itemContext = useContext(MenuItemContext);
+	const staticCollection = useContext(StaticMenuCollectionContext);
+	const sectionSelection = useContext(MenuSectionSelectionContext);
+	const sectionSelectionRegistry = useContext(MenuSectionSelectionRegistryContext);
+	const itemCloseRegistry = useContext(MenuItemCloseRegistryContext);
+	const [ref, setRef] = createSignal(null);
+	const contextProps = () => itemContext?.props?.() ?? {};
+	const combinedOnAction = () => {
+		local.onAction?.();
+		itemContext?.onAction?.();
+	};
+	const itemCloseOnSelect = () => ariaProps.closeOnSelect ?? sectionSelection?.shouldCloseOnSelect() ?? itemContext?.closeOnSelect;
+	const activeSectionSelection = () => sectionSelection && sectionSelection.selectionMode() !== "none" ? sectionSelection : null;
+	let registeredStaticKey = null;
+	let registeredSectionSelectionKey = null;
+	let registeredSectionSelection = null;
+	let registeredCloseKey = null;
+	let registeredCloseAccessor = null;
+	const unregisterSectionSelection = () => {
+		if (registeredSectionSelectionKey != null && registeredSectionSelection) {
+			sectionSelectionRegistry?.unregisterItem(registeredSectionSelectionKey, registeredSectionSelection);
+			registeredSectionSelectionKey = null;
+			registeredSectionSelection = null;
+		}
+	};
+	createEffect(() => {
+		if (!staticCollection) return;
+		if (registeredStaticKey != null && registeredStaticKey !== local.id) staticCollection.unregisterItem(registeredStaticKey);
+		registeredStaticKey = local.id;
+		staticCollection.registerItem({
+			id: local.id,
+			textValue: local.textValue ?? ariaProps["aria-label"],
+			isDisabled: resolveBoolean(ariaProps.isDisabled) || (sectionSelection?.isDisabled(local.id) ?? false)
+		});
+	});
+	onCleanup(() => {
+		if (registeredStaticKey != null) staticCollection?.unregisterItem(registeredStaticKey);
+	});
+	createEffect(() => {
+		const selection = activeSectionSelection();
+		if (!sectionSelectionRegistry || !selection) {
+			unregisterSectionSelection();
+			return;
+		}
+		if (registeredSectionSelectionKey === local.id && registeredSectionSelection === selection) return;
+		unregisterSectionSelection();
+		registeredSectionSelectionKey = local.id;
+		registeredSectionSelection = selection;
+		sectionSelectionRegistry.registerItem(local.id, selection);
+	});
+	onCleanup(unregisterSectionSelection);
+	const unregisterItemClose = () => {
+		if (registeredCloseKey != null && registeredCloseAccessor) {
+			itemCloseRegistry?.unregisterItem(registeredCloseKey, registeredCloseAccessor);
+			registeredCloseKey = null;
+			registeredCloseAccessor = null;
+		}
+	};
+	createEffect(() => {
+		if (!itemCloseRegistry) {
+			unregisterItemClose();
+			return;
+		}
+		if (registeredCloseKey === local.id && registeredCloseAccessor === itemCloseOnSelect) return;
+		unregisterItemClose();
+		registeredCloseKey = local.id;
+		registeredCloseAccessor = itemCloseOnSelect;
+		itemCloseRegistry.registerItem(local.id, itemCloseOnSelect);
+	});
+	onCleanup(unregisterItemClose);
+	const itemAria = createMenuItem({
+		key: local.id,
+		get id() {
+			return contextProps().id;
+		},
+		get isDisabled() {
+			return Boolean(ariaProps.isDisabled || sectionSelection?.isDisabled(local.id) || menuContext?.isDisabled());
+		},
+		get "aria-label"() {
+			return ariaProps["aria-label"] ?? local.textValue;
+		},
+		get "aria-controls"() {
+			return contextProps()["aria-controls"];
+		},
+		get "aria-haspopup"() {
+			return contextProps()["aria-haspopup"];
+		},
+		get "aria-expanded"() {
+			return contextProps()["aria-expanded"];
+		},
+		get onAction() {
+			return combinedOnAction;
+		},
+		get closeOnSelect() {
+			return itemCloseOnSelect();
+		},
+		get href() {
+			return local.href;
+		},
+		get target() {
+			return local.target;
+		},
+		get rel() {
+			return local.rel;
+		},
+		get download() {
+			return local.download;
+		}
+	}, state, () => ref());
+	const { isHovered, hoverProps } = createHover({
+		get isDisabled() {
+			return itemAria.isDisabled();
+		},
+		onHoverStart: local.onHoverStart,
+		onHoverEnd: local.onHoverEnd,
+		onHoverChange: local.onHoverChange
+	});
+	const renderValues = createMemo(() => {
+		const selection = activeSectionSelection();
+		return {
+			isSelected: selection?.isSelected(local.id) ?? itemAria.isSelected(),
+			selectionMode: selection?.selectionMode() ?? itemAria.selectionMode(),
+			isFocused: itemAria.isFocused(),
+			isFocusVisible: itemAria.isFocusVisible(),
+			isPressed: itemAria.isPressed(),
+			isHovered: isHovered(),
+			isDisabled: itemAria.isDisabled(),
+			hasSubmenu: Boolean(contextProps()["aria-haspopup"]),
+			isOpen: contextProps()["aria-expanded"] === true,
+			descriptionProps: itemAria.descriptionProps,
+			keyboardShortcutProps: itemAria.keyboardShortcutProps
+		};
+	});
+	const renderProps = useRenderProps({
+		get children() {
+			return props.children;
+		},
+		class: local.class,
+		style: local.style,
+		defaultClassName: "solidaria-Menu-item"
+	}, renderValues);
+	const hasPrimitiveLabel = () => {
+		return typeof props.children === "string" || typeof props.children === "number";
+	};
+	const cleanItemProps = () => {
+		const { ref: _ref1, ...rest } = itemAria.menuItemProps;
+		if (!hasPrimitiveLabel() && rest["aria-label"] == null) delete rest["aria-labelledby"];
+		const selection = activeSectionSelection();
+		const selectionMode = selection?.selectionMode();
+		if (selectionMode) {
+			rest.role = selectionMode === "single" ? "menuitemradio" : selectionMode === "multiple" ? "menuitemcheckbox" : "menuitem";
+			if (selectionMode !== "none") rest["aria-checked"] = selection?.isSelected(local.id) ?? false;
+			else delete rest["aria-checked"];
+			rest["data-selected"] = selection?.isSelected(local.id) || void 0;
+		}
+		return rest;
+	};
+	const cleanHoverProps = () => {
+		const { ref: _ref2, ...rest } = hoverProps;
+		return rest;
+	};
+	const domProps = createMemo(() => filterDOMProps(ariaProps, { global: true }));
+	const draggableItem = createMemo(() => {
+		if (!menuContext?.dragAndDropHooks?.useDraggableItem || !menuContext.dragState) return void 0;
+		return menuContext.dragAndDropHooks.useDraggableItem({ key: local.id }, menuContext.dragState);
+	});
+	const droppableItem = createMemo(() => {
+		if (!menuContext?.dragAndDropHooks?.useDroppableItem || !menuContext.dropState) return void 0;
+		return menuContext.dragAndDropHooks.useDroppableItem({ key: local.id }, menuContext.dropState, () => ref());
+	});
+	const isLink = () => !!local.href;
+	const cleanItemPropsForLink = () => {
+		const { href: _href, target: _target, rel: _rel, download: _download, ...rest } = cleanItemProps();
+		return rest;
+	};
+	const linkDomProps = () => {
+		const all = cleanItemProps();
+		const result = {};
+		if (all.href !== void 0) result.href = all.href;
+		if (all.target !== void 0) result.target = all.target;
+		if (all.rel !== void 0) result.rel = all.rel;
+		if (all.download !== void 0) result.download = all.download;
+		return result;
+	};
+	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
+		};
+	};
+	const childContent = () => hasPrimitiveLabel() ? <span {...itemAria.labelProps}>{renderProps.renderChildren()}</span> : renderProps.renderChildren();
+	const setResolvedItemRef = (el) => {
+		setRef(el);
+		itemContext?.setItemRef?.(el);
+		if (el) assignRef(local.ref, el);
+	};
+	const menuItemProps = () => ({
+		ref: setResolvedItemRef,
+		...mergeProps$1(cleanItemProps(), contextProps(), domProps(), cleanHoverProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}),
+		class: renderProps.class(),
+		style: renderProps.style(),
+		...dataAttrs(),
+		children: childContent()
+	});
+	const linkMenuItemProps = () => ({
+		...mergeProps$1(cleanItemPropsForLink(), contextProps(), domProps(), cleanHoverProps(), linkDomProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {}),
+		class: renderProps.class(),
+		style: renderProps.style(),
+		...dataAttrs(),
+		children: childContent()
+	});
+	if (local.render && !isLink()) return local.render(menuItemProps(), renderValues());
+	return <Show when={isLink()} fallback={<div ref={(el) => {
+		setRef(el);
+		itemContext?.setItemRef?.(el);
+		assignRef(local.ref, el);
+	}} {...mergeProps$1(cleanItemProps(), contextProps(), domProps(), cleanHoverProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {})} class={renderProps.class()} style={renderProps.style()} {...dataAttrs()}>
+          {childContent()}
+        </div>}>
+      {local.render ? local.render(linkMenuItemProps(), renderValues()) : <a ref={(el) => {
+		setRef(el);
+		itemContext?.setItemRef?.(el);
+		assignRef(local.ref, el);
+	}} {...mergeProps$1(cleanItemPropsForLink(), contextProps(), domProps(), cleanHoverProps(), linkDomProps(), draggableItem()?.dragProps ?? {}, droppableItem()?.dropProps ?? {})} class={renderProps.class()} style={renderProps.style()} {...dataAttrs()}>
+          {childContent()}
+        </a>}
+    </Show>;
+}
+/**
+* Section primitive alias for Menu composition parity.
+*/
+function MenuSection(props) {
+	const [selectionProps, sectionProps] = splitProps(props, [
+		"selectionMode",
+		"selectionBehavior",
+		"disallowEmptySelection",
+		"selectedKeys",
+		"defaultSelectedKeys",
+		"onSelectionChange",
+		"disabledKeys",
+		"disabledBehavior",
+		"allowDuplicateSelectionEvents",
+		"shouldCloseOnSelect"
+	]);
+	const selectionState = createSelectionState({
+		get selectionMode() {
+			return selectionProps.selectionMode ?? "none";
+		},
+		get selectionBehavior() {
+			return selectionProps.selectionBehavior;
+		},
+		get disallowEmptySelection() {
+			return selectionProps.disallowEmptySelection;
+		},
+		get selectedKeys() {
+			return selectionProps.selectionMode ? selectionProps.selectedKeys : void 0;
+		},
+		get defaultSelectedKeys() {
+			return selectionProps.selectionMode ? selectionProps.defaultSelectedKeys : void 0;
+		},
+		get onSelectionChange() {
+			return selectionProps.selectionMode ? selectionProps.onSelectionChange : void 0;
+		},
+		get disabledKeys() {
+			return selectionProps.disabledKeys;
+		},
+		get disabledBehavior() {
+			return selectionProps.disabledBehavior;
+		},
+		get allowDuplicateSelectionEvents() {
+			return selectionProps.allowDuplicateSelectionEvents;
+		}
+	});
+	const sectionSelection = {
+		selectionMode: selectionState.selectionMode,
+		isSelected: selectionState.isSelected,
+		isDisabled: selectionState.isDisabled,
+		select(key, event) {
+			selectionState.select(key, event);
+		},
+		shouldCloseOnSelect() {
+			return selectionProps.shouldCloseOnSelect;
+		}
+	};
+	return <MenuSectionSelectionContext.Provider value={sectionSelection}>
+      <Section {...sectionProps} />
+    </MenuSectionSelectionContext.Provider>;
+}
+Menu.Item = MenuItem;
+//#endregion
+export { Menu, MenuButton, MenuContext, MenuItem, MenuSection, MenuStateContext, MenuTrigger, MenuTriggerContext, RootMenuTriggerStateContext, SubmenuTrigger };
+
+//# sourceMappingURL=Menu.jsx.map