@proyecto-viviana/solidaria-components 0.3.2 → 0.4.0

package/dist/Menu.js

@@ -0,0 +1,1254 @@
+import { filterDOMProps, 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 { 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
+*/
+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>`);
+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 createComponent(RootMenuTriggerStateContext.Provider, {
+		value: state,
+		get children() {
+			return createComponent(MenuTriggerContext.Provider, {
+				value: {
+					state,
+					get triggerProps() {
+						return menuTrigger.menuTriggerProps;
+					},
+					get menuProps() {
+						return menuTrigger.menuProps;
+					},
+					isPressed: isMousePressed,
+					onPressStart
+				},
+				get children() {
+					return props.children;
+				}
+			});
+		}
+	});
+}
+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 createComponent(PopoverTriggerContext.Provider, {
+		get value() {
+			return popoverTriggerContext();
+		},
+		get children() {
+			return createComponent(MenuTriggerContext.Provider, {
+				get value() {
+					return menuTriggerContext();
+				},
+				get children() {
+					return [createComponent(MenuItemContext.Provider, {
+						get value() {
+							return {
+								...parentMenuItemContext,
+								...itemContext()
+							};
+						},
+						get children() {
+							return trigger();
+						}
+					}), memo(() => 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.
+*/
+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 = () => 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",
+							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 _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, {
+				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)
+					];
+				}
+			}),
+			memo(() => memo(() => !!virtualRange()?.offsetBottom)() ? (() => {
+				var _el$7 = getNextElement(_tmpl$6);
+				effect((_$p) => setStyleProperty(_el$7, "height", `${virtualRange().offsetBottom}px`));
+				return _el$7;
+			})() : null)
+		];
+	} });
+	const menuListProps = () => ({
+		ref: setResolvedMenuRef,
+		...mergeProps$2(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 = () => createComponent(MenuContext.Provider, {
+		get value() {
+			return {
+				state,
+				isDisabled: resolveDisabled,
+				dragAndDropHooks: stateProps.dragAndDropHooks,
+				dragState: dragState(),
+				dropState: dropState()
+			};
+		},
+		get children() {
+			return createComponent(MenuStateContext.Provider, {
+				value: state,
+				get children() {
+					return createComponent(MenuSectionSelectionRegistryContext.Provider, {
+						value: sectionSelectionRegistry,
+						get children() {
+							return createComponent(MenuItemCloseRegistryContext.Provider, {
+								value: itemCloseRegistry,
+								get children() {
+									return createComponent(StaticMenuCollectionContext.Provider, {
+										get value() {
+											return usesStaticChildren() ? staticCollectionContext : null;
+										},
+										get children() {
+											return createComponent(MenuItemContext.Provider, {
+												get value() {
+													return menuItemContextValue();
+												},
+												get children() {
+													return createComponent(CollectionRendererContext.Provider, {
+														get value() {
+															return collectionRenderer();
+														},
+														get children() {
+															return [createComponent(Show, {
+																get when() {
+																	return ariaProps.label;
+																},
+																get children() {
+																	var _el$8 = getNextElement(_tmpl$7);
+																	spread(_el$8, mergeProps(cleanLabelProps), false, true);
+																	insert(_el$8, () => ariaProps.label);
+																	runHydrationEvents();
+																	return _el$8;
+																}
+															}), 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;
+															})())];
+														}
+													});
+												}
+											});
+										}
+									});
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	});
+	return createComponent(Show, {
+		get when() {
+			return shouldRender();
+		},
+		get children() {
+			return createComponent(Show, {
+				when: triggerContext,
+				get fallback() {
+					return menuContent();
+				},
+				get children() {
+					return createComponent(FocusScope, {
+						restoreFocus: true,
+						autoFocus: true,
+						get children() {
+							return menuContent();
+						}
+					});
+				}
+			});
+		}
+	});
+}
+/**
+* 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() ? (() => {
+		var _el$0 = getNextElement(_tmpl$7);
+		spread(_el$0, mergeProps(() => itemAria.labelProps), false, true);
+		insert(_el$0, () => renderProps.renderChildren());
+		runHydrationEvents();
+		return _el$0;
+	})() : renderProps.renderChildren();
+	const setResolvedItemRef = (el) => {
+		setRef(el);
+		itemContext?.setItemRef?.(el);
+		if (el) assignRef(local.ref, el);
+	};
+	const menuItemProps = () => ({
+		ref: setResolvedItemRef,
+		...mergeProps$2(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 ?? {}),
+		class: renderProps.class(),
+		style: renderProps.style(),
+		...dataAttrs(),
+		children: childContent()
+	});
+	if (local.render && !isLink()) return local.render(menuItemProps(), renderValues());
+	return createComponent(Show, {
+		get when() {
+			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"]() {
+						return renderProps.class();
+					},
+					get style() {
+						return renderProps.style();
+					}
+				}, dataAttrs), false, true);
+				insert(_el$1, childContent);
+				runHydrationEvents();
+				return _el$1;
+			})();
+		},
+		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();
+					},
+					get style() {
+						return renderProps.style();
+					}
+				}, dataAttrs), false, true);
+				insert(_el$10, childContent);
+				runHydrationEvents();
+				return _el$10;
+			})();
+		}
+	});
+}
+/**
+* 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 createComponent(MenuSectionSelectionContext.Provider, {
+		value: sectionSelection,
+		get children() {
+			return createComponent(Section, sectionProps);
+		}
+	});
+}
+Menu.Item = MenuItem;
+//#endregion
+export { Menu, MenuButton, MenuContext, MenuItem, MenuSection, MenuStateContext, MenuTrigger, MenuTriggerContext, RootMenuTriggerStateContext, SubmenuTrigger };
+
+//# sourceMappingURL=Menu.js.map