@solid2-aria/components 0.0.0-stage → 0.0.1

package/dist/browser/menu.js

@@ -0,0 +1,597 @@
+/*
+ * 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.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-aria-components/src/Menu.tsx.
+ * Modified for Solid Aria: adapted collection ownership, contexts, accessibility primitives, and reactive properties for Solid 2; uses Solid class props and press responders for custom triggers.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { DEFAULT_SLOT, assignRef, createContextProps, createRenderProps, createSlot, createSlottedContext, dom } from "./utils.js";
+import { FieldInputContext, SelectableCollectionContext } from "./autocomplete.js";
+import { CollectionRendererContext, SectionContext } from "./collection.js";
+import { TextContext } from "./text.js";
+import { SelectionIndicatorContext } from "./selection-indicator.js";
+import { HeaderContext } from "./header.js";
+import { OverlayTriggerStateContext } from "./overlay-contexts.js";
+import { PopoverContext } from "./popover.js";
+import { KeyboardContext } from "./keyboard.js";
+import { applyRef, createComponent, dynamic, getNextElement, insert, memo, mergeProps, ref, scope, template } from "@solidjs/web";
+import { mergeProps as mergeProps$1 } from "@solid2-aria/core/utils/merge-props";
+import { Show, createContext, createMemo, createSignal, merge, omit, untrack, useContext } from "solid-js";
+import { BaseCollection, CollectionNode, ItemNode, LoaderNode, SectionNode } from "@solid2-aria/core/collections/base-collection";
+import { Collection, CollectionBuilder, createBranchComponent, createLeafComponent } from "@solid2-aria/core/collections/collection-builder";
+import { filterDOMProps } from "@solid2-aria/core/utils/filter-dom-props";
+import { createHover } from "@solid2-aria/core/interactions/create-hover";
+import { isTruthy } from "@solid2-aria/core/utils/truthy";
+import { createIsHidden } from "@solid2-aria/core/collections/hidden";
+import { createLoadMoreSentinel } from "@solid2-aria/core/utils/create-load-more-sentinel";
+import { createMenuTriggerState } from "@solid2-aria/stately/menu/create-menu-trigger-state";
+import { PressResponder } from "@solid2-aria/core/interactions/press-responder";
+import { createMenu } from "@solid2-aria/core/menu/create-menu";
+import { createMenuItem } from "@solid2-aria/core/menu/create-menu-item";
+import { createMenuSection } from "@solid2-aria/core/menu/create-menu-section";
+import { createMenuTrigger } from "@solid2-aria/core/menu/create-menu-trigger";
+import { createSubmenuTrigger } from "@solid2-aria/core/menu/create-submenu-trigger";
+import { createSubmenuTriggerState } from "@solid2-aria/stately/menu/create-submenu-trigger-state";
+import { createMultipleSelectionState } from "@solid2-aria/stately/selection/create-multiple-selection-state";
+import { SelectionManager } from "@solid2-aria/stately/selection/selection-manager";
+import { createTreeState } from "@solid2-aria/stately/tree/create-tree-state";
+// src/menu.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div role=menuitem style=display:contents>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div inert style=height:0;position:relative;width:0><div data-testid=loadMoreSentinel style=height:1px;position:absolute;width:1px>`);
+const MenuContext = createContext(null);
+const MenuStateContext = createContext(null);
+const RootMenuTriggerStateContext = createContext(null);
+const SelectionManagerContext = createContext(null);
+const MenuItemContext = createContext(null);
+const SubmenuContext = createContext(null);
+const SubmenuCaptureContext = createContext(false);
+function MenuTrigger(props) {
+	const [scrollRef, setScrollRef] = createSignal(null, { ownedWrite: true });
+	if (createIsHidden()) return null;
+	const state = createMenuTriggerState(props);
+	const [ref, setRef] = createSignal(null, { ownedWrite: true });
+	const aria = createMenuTrigger(mergeProps$1(props, { get type() {
+		return "menu";
+	} }), state, ref);
+	return createComponent(MenuContext, {
+		get value() {
+			return mergeProps$1(merge(() => aria.menuProps ?? {}), { ref: (element) => {
+				setScrollRef(element);
+			} });
+		},
+		get children() {
+			return createComponent(OverlayTriggerStateContext, {
+				value: state,
+				get children() {
+					return createComponent(RootMenuTriggerStateContext, {
+						value: state,
+						get children() {
+							return createComponent(PopoverContext, {
+								get value() {
+									return mergeProps$1({
+										get placement() {
+											return "bottom start";
+										},
+										scrollRef,
+										trigger: "MenuTrigger",
+										triggerRef: ref
+									}, {
+										get "aria-labelledby"() {
+											return aria.menuProps["aria-labelledby"];
+										},
+										get offset() {
+											return props.trigger === "contextMenu" ? 0 : void 0;
+										}
+									});
+								},
+								get children() {
+									return createComponent(PressResponder, mergeProps(() => {
+										return merge(() => aria.menuTriggerProps ?? {});
+									}, {
+										get isPressed() {
+											return state.isOpen;
+										},
+										ref: (element) => {
+											setRef(element);
+										},
+										get children() {
+											return props.children;
+										}
+									}));
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	});
+}
+function Menu(input) {
+	const [props, , setRef] = createContextProps(input, untrack(() => input.ref), MenuContext);
+	return createComponent(CollectionBuilder, {
+		createCollection: () => new BaseCollection(),
+		get content() {
+			return createComponent(Collection, props);
+		},
+		children: (collection) => createComponent(MenuInner, {
+			props,
+			collection,
+			menuRef: setRef
+		})
+	});
+}
+function MenuInner(input) {
+	const [props, ref, setRef] = createContextProps(untrack(() => input.props), untrack(() => input.menuRef), SelectableCollectionContext);
+	const renderer = useContext(CollectionRendererContext);
+	const Root = renderer.CollectionRoot;
+	const state = createTreeState(mergeProps$1(omit(props, "items", "filter"), {
+		children: void 0,
+		get collection() {
+			return props.filter ? input.collection.filter(props.filter) : input.collection;
+		}
+	}));
+	const trigger = useContext(RootMenuTriggerStateContext) ?? createMenuTriggerState({});
+	const aria = createMenu(mergeProps$1(omit(props, "items", "children"), {
+		get isVirtualized() {
+			return renderer.isVirtualized;
+		},
+		get onClose() {
+			return props.onClose ?? trigger.close;
+		}
+	}), state, ref);
+	const render = createRenderProps(mergeProps$1(props, {
+		children: void 0,
+		defaultClass: "solid2-aria-Menu",
+		values: { get isEmpty() {
+			return state.collection.size === 0;
+		} }
+	}));
+	return createComponent(dom.div, mergeProps(() => {
+		return mergeProps$1(filterDOMProps(props, { global: true }), render, merge(() => aria.menuProps ?? {}));
+	}, {
+		ref: (element) => {
+			setRef(element);
+		},
+		get slot() {
+			return props.slot ?? void 0;
+		},
+		get "data-empty"() {
+			return state.collection.size === 0 || void 0;
+		},
+		get children() {
+			return [createComponent(MenuStateContext, {
+				value: state,
+				get children() {
+					return createComponent(SelectionManagerContext, {
+						get value() {
+							return untrack(() => state.selectionManager);
+						},
+						get children() {
+							return createComponent(RootMenuTriggerStateContext, {
+								value: trigger,
+								get children() {
+									return createComponent(SubmenuContext, {
+										value: {
+											parentMenuRef: ref,
+											get shouldUseVirtualFocus() {
+												return props.shouldUseVirtualFocus;
+											}
+										},
+										get children() {
+											return createComponent(MenuItemContext, {
+												value: { get shouldCloseOnSelect() {
+													return props.shouldCloseOnSelect;
+												} },
+												get children() {
+													return createComponent(SelectableCollectionContext, {
+														value: null,
+														get children() {
+															return createComponent(FieldInputContext, {
+																value: null,
+																get children() {
+																	return createComponent(SectionContext, {
+																		value: {
+																			name: "MenuSection",
+																			render: (sectionProps, sectionRef, node, defaultClass) => MenuSectionInner(sectionProps, sectionRef, node, defaultClass)
+																		},
+																		get children() {
+																			return createComponent(Root, {
+																				get collection() {
+																					return state.collection;
+																				},
+																				scrollRef: ref
+																			});
+																		}
+																	});
+																}
+															});
+														}
+													});
+												}
+											});
+										}
+									});
+								}
+							});
+						}
+					});
+				}
+			}), memo(() => {
+				return memo(() => {
+					return !!(state.collection.size === 0 && props.renderEmptyState);
+				})() ? (() => {
+					var _el$ = getNextElement(_tmpl$);
+					insert(_el$, scope(() => {
+						return props.renderEmptyState();
+					}));
+					return _el$;
+				})() : null;
+			})];
+		}
+	}));
+}
+var GroupSelectionManager = class extends SelectionManager {
+	parent;
+	constructor(parent, state) {
+		super(parent.collection, state);
+		this.parent = parent;
+	}
+	get focusedKey() {
+		return this.parent.focusedKey;
+	}
+	get isFocused() {
+		return this.parent.isFocused;
+	}
+	setFocusedKey(key, strategy) {
+		this.parent.setFocusedKey(key, strategy);
+	}
+	setFocused(value) {
+		this.parent.setFocused(value);
+	}
+	get childFocusStrategy() {
+		return this.parent.childFocusStrategy;
+	}
+};
+function MenuSectionInner(props, ref, node, defaultClass = "solid2-aria-MenuSection") {
+	const state = useContext(MenuStateContext);
+	const parent = useContext(SelectionManagerContext);
+	if (!state || !parent) throw new Error("MenuSection must be rendered in a Menu.");
+	const Branch = useContext(CollectionRendererContext).CollectionBranch;
+	const [registerHeading, heading] = createSlot();
+	const aria = createMenuSection({
+		get "aria-label"() {
+			return props["aria-label"] ?? void 0;
+		},
+		get heading() {
+			return heading();
+		}
+	});
+	const selection = createMultipleSelectionState(props);
+	const manager = createMemo(() => props.selectionMode === null || props.selectionMode === void 0 ? parent : new GroupSelectionManager(parent, selection));
+	const context = createSlottedContext(MenuItemContext);
+	return createComponent(dom.section, mergeProps(() => {
+		return mergeProps$1(omit(filterDOMProps(props, { global: true }), "id"), merge(() => aria.groupProps ?? {}));
+	}, {
+		ref(r$) {
+			var _ref$ = ref;
+			typeof _ref$ === "function" || Array.isArray(_ref$) ? applyRef(_ref$, r$) : ref = r$;
+		},
+		get render() {
+			return props.render;
+		},
+		get "class"() {
+			return props.class ?? defaultClass;
+		},
+		get style() {
+			return props.style;
+		},
+		get children() {
+			return createComponent(HeaderContext, {
+				get value() {
+					return mergeProps$1(merge(() => aria.headingProps ?? {}), { registerSlot: registerHeading });
+				},
+				get children() {
+					return createComponent(SelectionManagerContext, {
+						get value() {
+							return untrack(manager);
+						},
+						get children() {
+							return createComponent(MenuItemContext, {
+								value: { get shouldCloseOnSelect() {
+									return props.shouldCloseOnSelect ?? context?.shouldCloseOnSelect;
+								} },
+								get children() {
+									return createComponent(Branch, {
+										get collection() {
+											return state.collection;
+										},
+										parent: node
+									});
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	}));
+}
+const MenuSectionCollection = createBranchComponent(SectionNode, MenuSectionInner);
+const MenuItemCollection = createLeafComponent(ItemNode, (input, forwardedRef, node) => {
+	const [props, ref, setRef] = createContextProps(input, forwardedRef, MenuItemContext);
+	const context = createSlottedContext(MenuItemContext);
+	const state = useContext(MenuStateContext);
+	if (!state) throw new Error("MenuItem must be rendered in a Menu.");
+	const manager = useContext(SelectionManagerContext) ?? state.selectionManager;
+	const renderer = useContext(CollectionRendererContext);
+	const aria = createMenuItem(mergeProps$1(omit(props, "id", "onAction"), context ? omit(context, "id", "onAction") : void 0, {
+		get isVirtualized() {
+			return renderer.isVirtualized;
+		},
+		get key() {
+			return node.key;
+		},
+		selectionManager: manager
+	}), state, ref);
+	const hover = createHover(mergeProps$1(props, { get isDisabled() {
+		return aria.isDisabled;
+	} }));
+	const values = {
+		get hasSubmenu() {
+			return !!context?.["aria-haspopup"];
+		},
+		get isDisabled() {
+			return aria.isDisabled;
+		},
+		get isFocusVisible() {
+			return aria.isFocusVisible;
+		},
+		get isFocused() {
+			return aria.isFocused;
+		},
+		get isHovered() {
+			return hover.isHovered;
+		},
+		get isOpen() {
+			return context?.isOpen === true;
+		},
+		get isPressed() {
+			return aria.isPressed;
+		},
+		get isSelected() {
+			return aria.isSelected;
+		},
+		get selectionBehavior() {
+			return manager.selectionBehavior;
+		},
+		get selectionMode() {
+			return manager.selectionMode;
+		}
+	};
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-MenuItem",
+		values
+	}));
+	const Element = dynamic(() => isTruthy(props.href) ? dom.a : dom.div);
+	return createComponent(Element, mergeProps(() => {
+		return mergeProps$1(omit(filterDOMProps(props, { global: true }), "id", "onClick"), render, merge(() => aria.menuItemProps ?? {}), merge(() => hover.hoverProps ?? {}));
+	}, {
+		ref: (element) => {
+			setRef(element);
+		},
+		get "data-selected"() {
+			return aria.isSelected || void 0;
+		},
+		get "data-disabled"() {
+			return aria.isDisabled || void 0;
+		},
+		get "data-hovered"() {
+			return hover.isHovered || void 0;
+		},
+		get "data-focused"() {
+			return aria.isFocused || void 0;
+		},
+		get "data-focus-visible"() {
+			return aria.isFocusVisible || void 0;
+		},
+		get "data-pressed"() {
+			return aria.isPressed || void 0;
+		},
+		get "data-has-submenu"() {
+			return values.hasSubmenu || void 0;
+		},
+		get "data-open"() {
+			return values.isOpen || void 0;
+		},
+		get "data-selection-mode"() {
+			return memo(() => {
+				return manager.selectionMode === "none";
+			})() ? void 0 : manager.selectionMode;
+		},
+		get children() {
+			return createComponent(TextContext, {
+				value: { slots: {
+					get [DEFAULT_SLOT]() {
+						return aria.labelProps;
+					},
+					get description() {
+						return aria.descriptionProps;
+					},
+					get label() {
+						return aria.labelProps;
+					}
+				} },
+				get children() {
+					return createComponent(KeyboardContext, {
+						get value() {
+							return aria.keyboardShortcutProps;
+						},
+						get children() {
+							return createComponent(SelectionIndicatorContext, {
+								value: { get isSelected() {
+									return aria.isSelected;
+								} },
+								get children() {
+									return render.children;
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	}));
+});
+var SubmenuTriggerNode = class extends CollectionNode {
+	static type = "submenutrigger";
+	filter(collection, target, filter) {
+		const item = this.firstChildKey === null || this.firstChildKey === void 0 ? null : collection.getItem(this.firstChildKey);
+		if (item && filter(item.textValue, this)) {
+			const clone = this.clone();
+			target.addDescendants(clone, collection);
+			return clone;
+		}
+		return null;
+	}
+};
+const SubmenuTriggerCollection = createBranchComponent(SubmenuTriggerNode, (props, forwardedRef, item) => {
+	const [submenuRef, setSubmenuRef] = createSignal(null, { ownedWrite: true });
+	const state = useContext(MenuStateContext);
+	const root = useContext(RootMenuTriggerStateContext);
+	const parent = useContext(SubmenuContext);
+	if (!state || !root || !parent) throw new Error("SubmenuTrigger must be rendered in a Menu.");
+	const Branch = useContext(CollectionRendererContext).CollectionBranch;
+	const trigger = createSubmenuTriggerState({ triggerKey: item.key }, root);
+	const [itemRef, setItemRef] = createSignal(null, { ownedWrite: true });
+	const aria = createSubmenuTrigger(mergeProps$1(props, parent, { submenuRef }), trigger, itemRef);
+	return createComponent(MenuItemContext, {
+		get value() {
+			return mergeProps$1(merge(() => aria.submenuTriggerProps ?? {}), {
+				onAction: void 0,
+				ref: (element) => {
+					setItemRef(element);
+				}
+			});
+		},
+		get children() {
+			return createComponent(MenuContext, {
+				get value() {
+					return mergeProps$1(merge(() => aria.submenuProps ?? {}), { ref: (element) => {
+						setSubmenuRef(element);
+					} });
+				},
+				get children() {
+					return createComponent(OverlayTriggerStateContext, {
+						value: trigger,
+						get children() {
+							return createComponent(PopoverContext, {
+								get value() {
+									return mergeProps$1(merge(() => aria.popoverProps ?? {}), {
+										get "aria-labelledby"() {
+											return aria.submenuProps["aria-labelledby"];
+										},
+										get placement() {
+											return "end top";
+										},
+										trigger: "SubmenuTrigger",
+										triggerRef: itemRef
+									});
+								},
+								get children() {
+									return [createComponent(Branch, {
+										get collection() {
+											return state.collection;
+										},
+										parent: item
+									}), createComponent(SubmenuCaptureContext, {
+										value: true,
+										get children() {
+											return props.renderPopover();
+										}
+									})];
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	});
+}, (props) => untrack(() => props.children[0]));
+const MenuLoadMoreItemCollection = createLeafComponent(LoaderNode, (props, forwardedRef, _node) => {
+	const state = useContext(MenuStateContext);
+	if (!state) throw new Error("MenuLoadMoreItem must be rendered in a Menu.");
+	const [sentinel, setSentinel] = createSignal(null, { ownedWrite: true });
+	createLoadMoreSentinel(mergeProps$1(props, { get collection() {
+		return state.collection;
+	} }), sentinel);
+	const render = createRenderProps(mergeProps$1(props, {
+		defaultClass: "solid2-aria-MenuLoadingIndicator",
+		values: void 0
+	}));
+	return [(() => {
+		var _el$2 = getNextElement(_tmpl$2);
+		var _el$3 = _el$2.firstChild;
+		ref(() => {
+			return (element) => {
+				setSentinel(element);
+			};
+		}, _el$3);
+		return _el$2;
+	})(), createComponent(Show, {
+		get when() {
+			return props.isLoading;
+		},
+		get children() {
+			return createComponent(dom.div, mergeProps(() => {
+				return filterDOMProps(props, { global: true });
+			}, render, {
+				ref: (element) => {
+					assignRef(forwardedRef, element);
+				},
+				role: "menuitem",
+				tabindex: -1,
+				get children() {
+					return render.children;
+				}
+			}));
+		}
+	})];
+});
+function MenuSection(props) {
+	return createComponent(MenuSectionCollection, mergeProps(props, { ref: (element) => {
+		assignRef(untrack(() => props.ref), element);
+	} }));
+}
+function MenuItem(props) {
+	if (useContext(SubmenuCaptureContext) && !createIsHidden()) return null;
+	return createComponent(MenuItemCollection, mergeProps(props, { ref: (element) => {
+		assignRef(untrack(() => props.ref), element);
+	} }));
+}
+function SubmenuTrigger(props) {
+	return createComponent(SubmenuTriggerCollection, mergeProps(props, {
+		renderPopover: () => props.children[1],
+		ref: (element) => {
+			assignRef(untrack(() => props.ref), element);
+		}
+	}));
+}
+function MenuLoadMoreItem(props) {
+	return createComponent(MenuLoadMoreItemCollection, mergeProps(props, { ref: (element) => {
+		assignRef(untrack(() => props.ref), element);
+	} }));
+}
+export { Menu, MenuContext, MenuItem, MenuLoadMoreItem, MenuSection, MenuStateContext, MenuTrigger, RootMenuTriggerStateContext, SubmenuTrigger };
+
+//# sourceMappingURL=menu.js.map