@wirekyt/solid 0.0.1 → 0.0.2

package/dist/menu.js

@@ -0,0 +1,441 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { a as mergeProps$2, d as createContext$1, i as useMachine, l as createSplitProps, r as normalizeProps, u as composeRefs } from "./core-7QKBNp9p.js";
+import { t as runIfFn } from "./run-if-fn-CjvD7VzQ.js";
+import { t as wire } from "./factory-D2A7xdtl.js";
+import { a as useLocaleContext, l as useEnvironmentContext } from "./providers-B-Vi5wQ7.js";
+import { a as splitPresenceProps, i as usePresence, n as usePresenceContext, t as PresenceProvider } from "./presence-CE6lXCu5.js";
+import { Show, createEffect, createMemo, createUniqueId, onCleanup, onMount } from "solid-js";
+import { createComponent, mergeProps as mergeProps$1 } from "solid-js/web";
+import * as menu from "@wirekyt/dom/machines/menu";
+import { anatomy as menuAnatomy } from "@wirekyt/dom/machines/menu";
+//#region src/components/menu/use-context.ts
+const [MenuProvider, useMenuContext] = createContext$1({
+	hookName: "useMenuContext",
+	providerName: "<MenuProvider />",
+	strict: false
+});
+//#endregion
+//#region src/components/menu/arrow.tsx
+const MenuArrow = (props) => {
+	const context = useMenuContext();
+	const mergedProps = mergeProps$2(() => context().getArrowProps(), props);
+	return createComponent(wire.div, mergedProps);
+};
+//#endregion
+//#region src/components/menu/arrow-tip.tsx
+const MenuArrowTip = (props) => {
+	const context = useMenuContext();
+	const mergedProps = mergeProps$2(() => context().getArrowTipProps(), props);
+	return createComponent(wire.div, mergedProps);
+};
+//#endregion
+//#region src/components/menu/use-item-context.ts
+const [MenuItemProvider, useMenuItemContext] = createContext$1({
+	hookName: "useMenuItemContext",
+	providerName: "<MenuItemProvider />"
+});
+//#endregion
+//#region src/components/menu/use-option-item-props-context.ts
+const [MenuItemPropsProvider, useMenuItemPropsContext] = createContext$1({
+	hookName: "useMenuItemPropsContext",
+	providerName: "<MenuItemPropsProvider />"
+});
+//#endregion
+//#region src/components/menu/checkbox-item.tsx
+const MenuCheckboxItem = (props) => {
+	const [partialOptionItemProps, localProps] = createSplitProps()(props, [
+		"checked",
+		"closeOnSelect",
+		"disabled",
+		"onCheckedChange",
+		"value",
+		"valueText"
+	]);
+	const optionItemProps = mergeProps$2(partialOptionItemProps, { type: "checkbox" });
+	const context = useMenuContext();
+	const mergedProps = mergeProps$2(() => context().getOptionItemProps(optionItemProps), localProps);
+	const optionItemState = createMemo(() => context().getOptionItemState(optionItemProps));
+	return createComponent(MenuItemPropsProvider, {
+		value: optionItemProps,
+		get children() {
+			return createComponent(MenuItemProvider, {
+				value: optionItemState,
+				get children() {
+					return createComponent(wire.div, mergedProps);
+				}
+			});
+		}
+	});
+};
+//#endregion
+//#region src/components/menu/content.tsx
+const MenuContent = (props) => {
+	const context = useMenuContext();
+	const presenceContext = usePresenceContext();
+	const mergedProps = mergeProps$2(() => context().getContentProps(), () => presenceContext().presenceProps, props);
+	return createComponent(Show, {
+		get when() {
+			return !presenceContext().unmounted;
+		},
+		get children() {
+			return createComponent(wire.div, mergeProps$1(mergedProps, { ref(r$) {
+				var _ref$ = composeRefs(presenceContext().ref, props.ref);
+				typeof _ref$ === "function" && _ref$(r$);
+			} }));
+		}
+	});
+};
+//#endregion
+//#region src/components/menu/context.tsx
+const MenuContext = (props) => props.children(useMenuContext());
+//#endregion
+//#region src/components/menu/context-trigger.tsx
+const MenuContextTrigger = (props) => {
+	const context = useMenuContext();
+	const mergedProps = mergeProps$2(() => context().getContextTriggerProps(), props);
+	return createComponent(wire.button, mergedProps);
+};
+//#endregion
+//#region src/components/menu/indicator.tsx
+const MenuIndicator = (props) => {
+	const context = useMenuContext();
+	const mergedProps = mergeProps$2(() => context().getIndicatorProps(), props);
+	return createComponent(wire.div, mergedProps);
+};
+//#endregion
+//#region src/components/menu/item.tsx
+const MenuItem = (props) => {
+	const [itemProps, localProps] = createSplitProps()(props, [
+		"closeOnSelect",
+		"disabled",
+		"value",
+		"valueText",
+		"onSelect"
+	]);
+	const context = useMenuContext();
+	const mergedProps = mergeProps$2(() => context().getItemProps(itemProps), localProps);
+	const itemState = createMemo(() => context().getItemState(itemProps));
+	createEffect(() => {
+		const cleanup = context().addItemListener({
+			id: itemState().id,
+			onSelect: itemProps.onSelect
+		});
+		onCleanup(() => cleanup?.());
+	});
+	return createComponent(MenuItemPropsProvider, {
+		value: itemProps,
+		get children() {
+			return createComponent(MenuItemProvider, {
+				value: itemState,
+				get children() {
+					return createComponent(wire.div, mergedProps);
+				}
+			});
+		}
+	});
+};
+//#endregion
+//#region src/components/menu/item-context.tsx
+const MenuItemContext = (props) => props.children(useMenuItemContext());
+//#endregion
+//#region src/components/menu/use-item-group-context.ts
+const [MenuItemGroupProvider, useMenuItemGroupContext] = createContext$1({
+	hookName: "useMenuItemGroupContext",
+	providerName: "<MenuItemGroupProvider />"
+});
+//#endregion
+//#region src/components/menu/item-group.tsx
+const MenuItemGroup = (props) => {
+	const [optionalItemGroupProps, localProps] = createSplitProps()(props, ["id"]);
+	const itemGroupProps = mergeProps$2({ id: createUniqueId() }, optionalItemGroupProps);
+	const menu = useMenuContext();
+	const mergedProps = mergeProps$2(() => menu().getItemGroupProps(itemGroupProps), localProps);
+	return createComponent(MenuItemGroupProvider, {
+		value: itemGroupProps,
+		get children() {
+			return createComponent(wire.div, mergedProps);
+		}
+	});
+};
+//#endregion
+//#region src/components/menu/item-group-label.tsx
+const MenuItemGroupLabel = (props) => {
+	const context = useMenuContext();
+	const itemGroupContext = useMenuItemGroupContext();
+	const mergedProps = mergeProps$2(context().getItemGroupLabelProps({ htmlFor: itemGroupContext.id }), props);
+	return createComponent(wire.div, mergedProps);
+};
+//#endregion
+//#region src/components/menu/item-indicator.tsx
+const MenuItemIndicator = (props) => {
+	const context = useMenuContext();
+	const itemProps = useMenuItemPropsContext();
+	const mergedProps = mergeProps$2(() => context().getItemIndicatorProps(itemProps), props);
+	return createComponent(wire.div, mergedProps);
+};
+//#endregion
+//#region src/components/menu/item-text.tsx
+const MenuItemText = (props) => {
+	const context = useMenuContext();
+	const itemProps = useMenuItemPropsContext();
+	const mergedProps = mergeProps$2(() => context().getItemTextProps(itemProps), props);
+	return createComponent(wire.div, mergedProps);
+};
+//#endregion
+//#region src/components/menu/positioner.tsx
+const MenuPositioner = (props) => {
+	const context = useMenuContext();
+	const presence = usePresenceContext();
+	const mergedProps = mergeProps$2(() => context().getPositionerProps(), props);
+	return createComponent(Show, {
+		get when() {
+			return !presence().unmounted;
+		},
+		get children() {
+			return createComponent(wire.div, mergedProps);
+		}
+	});
+};
+//#endregion
+//#region src/components/menu/radio-item.tsx
+const MenuRadioItem = (props) => {
+	const [partialItemProps, localProps] = createSplitProps()(props, [
+		"closeOnSelect",
+		"disabled",
+		"value",
+		"valueText"
+	]);
+	const context = useMenuContext();
+	const itemGroup = useMenuItemGroupContext();
+	const optionItemProps = mergeProps$2(partialItemProps, () => ({
+		type: "radio",
+		checked: itemGroup.value === partialItemProps.value,
+		onCheckedChange: () => itemGroup.onValueChange?.({ value: partialItemProps.value })
+	}));
+	const mergedProps = mergeProps$2(() => context().getOptionItemProps(optionItemProps), localProps);
+	const optionItemState = createMemo(() => context().getOptionItemState(optionItemProps));
+	return createComponent(MenuItemPropsProvider, {
+		value: optionItemProps,
+		get children() {
+			return createComponent(MenuItemProvider, {
+				value: optionItemState,
+				get children() {
+					return createComponent(wire.div, mergedProps);
+				}
+			});
+		}
+	});
+};
+//#endregion
+//#region src/components/menu/radio-item-group.tsx
+const MenuRadioItemGroup = (props) => {
+	const [optionalItemGroupProps, localProps] = createSplitProps()(props, [
+		"id",
+		"onValueChange",
+		"value"
+	]);
+	const context = useMenuContext();
+	const itemGroupProps = mergeProps$2({ id: createUniqueId() }, optionalItemGroupProps);
+	const mergedProps = mergeProps$2(() => context().getItemGroupProps(itemGroupProps), localProps);
+	return createComponent(MenuItemGroupProvider, {
+		value: itemGroupProps,
+		get children() {
+			return createComponent(wire.div, mergedProps);
+		}
+	});
+};
+//#endregion
+//#region src/components/menu/use.ts
+const useMenu = (props) => {
+	const id = createUniqueId();
+	const locale = useLocaleContext();
+	const environment = useEnvironmentContext();
+	const machineProps = createMemo(() => ({
+		id,
+		dir: locale().dir,
+		getRootNode: environment().getRootNode,
+		...runIfFn(props)
+	}));
+	const service = useMachine(menu.machine, machineProps);
+	return {
+		api: createMemo(() => menu.connect(service, normalizeProps)),
+		service
+	};
+};
+//#endregion
+//#region src/components/menu/use-machine-context.ts
+const [MenuMachineProvider, useMenuMachineContext] = createContext$1({
+	hookName: "useMenuMachineContext",
+	providerName: "<MenuMachineProvider />",
+	strict: false
+});
+//#endregion
+//#region src/components/menu/use-trigger-item-context.ts
+const [MenuTriggerItemProvider, useMenuTriggerItemContext] = createContext$1({
+	hookName: "useMenuMachineContext",
+	providerName: "<MenuMachineProvider />",
+	strict: false
+});
+//#endregion
+//#region src/components/menu/root.tsx
+const MenuRoot = (props) => {
+	const [presenceProps, menuProps] = splitPresenceProps(props);
+	const [useMenuProps, localProps] = createSplitProps()(menuProps, [
+		"anchorPoint",
+		"aria-label",
+		"closeOnSelect",
+		"composite",
+		"defaultHighlightedValue",
+		"defaultOpen",
+		"highlightedValue",
+		"id",
+		"ids",
+		"loopFocus",
+		"navigate",
+		"onEscapeKeyDown",
+		"onFocusOutside",
+		"onHighlightChange",
+		"onInteractOutside",
+		"onOpenChange",
+		"onPointerDownOutside",
+		"onRequestDismiss",
+		"onSelect",
+		"open",
+		"positioning",
+		"typeahead",
+		"triggerValue",
+		"defaultTriggerValue",
+		"onTriggerValueChange"
+	]);
+	const parentApi = useMenuContext();
+	const parentMachine = useMenuMachineContext();
+	const menu = useMenu(useMenuProps);
+	const presenceApi = usePresence(mergeProps$2(presenceProps, () => ({ present: menu.api().open })));
+	onMount(() => {
+		if (!parentMachine) return;
+		parentApi?.().setChild(menu.service);
+		menu.api().setParent(parentMachine);
+	});
+	const triggerItemContext = () => parentApi?.().getTriggerItemProps(menu.api());
+	return createComponent(MenuTriggerItemProvider, {
+		value: triggerItemContext,
+		get children() {
+			return createComponent(MenuMachineProvider, {
+				get value() {
+					return menu.service;
+				},
+				get children() {
+					return createComponent(MenuProvider, {
+						get value() {
+							return menu.api;
+						},
+						get children() {
+							return createComponent(PresenceProvider, {
+								value: presenceApi,
+								get children() {
+									return localProps.children;
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	});
+};
+//#endregion
+//#region src/components/menu/root-provider.tsx
+const MenuRootProvider = (props) => {
+	const parentApi = useMenuContext();
+	const parentMachine = useMenuMachineContext();
+	const [presenceProps, menuProps] = splitPresenceProps(props);
+	const presenceApi = usePresence(mergeProps$2(presenceProps, () => ({ present: menuProps.value.api().open })));
+	createEffect(() => {
+		if (!parentMachine) return;
+		parentApi?.().setChild(menuProps.value.service);
+		menuProps.value.api().setParent(parentMachine);
+	});
+	const triggerItemContext = () => parentApi?.().getTriggerItemProps(menuProps.value.api());
+	return createComponent(MenuTriggerItemProvider, {
+		value: triggerItemContext,
+		get children() {
+			return createComponent(MenuMachineProvider, {
+				get value() {
+					return menuProps.value.service;
+				},
+				get children() {
+					return createComponent(MenuProvider, {
+						get value() {
+							return menuProps.value.api;
+						},
+						get children() {
+							return createComponent(PresenceProvider, {
+								value: presenceApi,
+								get children() {
+									return menuProps.children;
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	});
+};
+//#endregion
+//#region src/components/menu/separator.tsx
+const MenuSeparator = (props) => {
+	const menu = useMenuContext();
+	const mergedProps = mergeProps$2(() => menu().getSeparatorProps(), props);
+	return createComponent(wire.hr, mergedProps);
+};
+//#endregion
+//#region src/components/menu/trigger.tsx
+const MenuTrigger = (props) => {
+	const [triggerProps, localProps] = createSplitProps()(props, ["value"]);
+	const api = useMenuContext();
+	const presenceApi = usePresenceContext();
+	const mergedProps = mergeProps$2(() => api().getTriggerProps(triggerProps), () => ({ "aria-controls": presenceApi().unmounted && null }), localProps);
+	return createComponent(wire.button, mergedProps);
+};
+//#endregion
+//#region src/components/menu/trigger-item.tsx
+const MenuTriggerItem = (props) => {
+	const getTriggerItemProps = useMenuTriggerItemContext();
+	const mergedProps = mergeProps$2(() => getTriggerItemProps?.(), props);
+	return createComponent(MenuItemPropsProvider, {
+		get value() {
+			return { value: mergedProps["data-value"] };
+		},
+		get children() {
+			return createComponent(wire.div, mergedProps);
+		}
+	});
+};
+//#endregion
+//#region src/components/menu/menu.ts
+var menu_exports = /* @__PURE__ */ __exportAll({
+	Arrow: () => MenuArrow,
+	ArrowTip: () => MenuArrowTip,
+	CheckboxItem: () => MenuCheckboxItem,
+	Content: () => MenuContent,
+	Context: () => MenuContext,
+	ContextTrigger: () => MenuContextTrigger,
+	Indicator: () => MenuIndicator,
+	Item: () => MenuItem,
+	ItemContext: () => MenuItemContext,
+	ItemGroup: () => MenuItemGroup,
+	ItemGroupLabel: () => MenuItemGroupLabel,
+	ItemIndicator: () => MenuItemIndicator,
+	ItemText: () => MenuItemText,
+	Positioner: () => MenuPositioner,
+	RadioItem: () => MenuRadioItem,
+	RadioItemGroup: () => MenuRadioItemGroup,
+	Root: () => MenuRoot,
+	RootProvider: () => MenuRootProvider,
+	Separator: () => MenuSeparator,
+	Trigger: () => MenuTrigger,
+	TriggerItem: () => MenuTriggerItem
+});
+//#endregion
+export { menu_exports as Menu, MenuArrow, MenuArrowTip, MenuCheckboxItem, MenuContent, MenuContext, MenuContextTrigger, MenuIndicator, MenuItem, MenuItemContext, MenuItemGroup, MenuItemGroupLabel, MenuItemIndicator, MenuItemText, MenuPositioner, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuRootProvider, MenuSeparator, MenuTrigger, MenuTriggerItem, menuAnatomy, useMenu, useMenuContext, useMenuItemContext };