@wirekyt/react 0.0.1 → 0.0.2

package/dist/menu.js

@@ -0,0 +1,469 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { c as createSplitProps, l as useComposedRefs, t as useEffectOnce, u as createContext$1 } from "./utils-CqLmqrgj.js";
+import { n as useEnvironmentContext } from "./environment-BTgKwk5E.js";
+import { a as useMachine, i as normalizeProps, t as mergeProps } from "./core-CEYOEcVI.js";
+import { n as wire } from "./factory-Nm__-4xn.js";
+import { a as useLocaleContext } from "./providers-FEHnDTvb.js";
+import { a as splitPresenceProps, i as usePresence, n as usePresenceContext, t as PresenceProvider } from "./presence-I8Rceflw.js";
+import { forwardRef, useCallback, useEffect, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+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({
+	name: "MenuContext",
+	hookName: "useMenuContext",
+	providerName: "<MenuProvider />",
+	strict: false
+});
+//#endregion
+//#region src/components/menu/arrow.tsx
+const MenuArrow = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useMenuContext().getArrowProps(), props);
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref
+	});
+});
+MenuArrow.displayName = "MenuArrow";
+//#endregion
+//#region src/components/menu/arrow-tip.tsx
+const MenuArrowTip = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useMenuContext().getArrowTipProps(), props);
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref
+	});
+});
+MenuArrowTip.displayName = "MenuArrowTip";
+//#endregion
+//#region src/components/menu/use-item-context.ts
+const [MenuItemProvider, useMenuItemContext] = createContext$1({
+	name: "MenuItemContext",
+	hookName: "useMenuItemContext",
+	providerName: "<MenuItemProvider />"
+});
+//#endregion
+//#region src/components/menu/use-option-item-props-context.ts
+const [MenuItemPropsProvider, useMenuItemPropsContext] = createContext$1({
+	name: "MenuItemPropsContext",
+	hookName: "useMenuItemPropsContext",
+	providerName: "<MenuItemPropsProvider />"
+});
+//#endregion
+//#region src/components/menu/checkbox-item.tsx
+const splitOptionItemProps$1 = createSplitProps();
+const MenuCheckboxItem = forwardRef((props, ref) => {
+	const [partialOptionItemProps, localProps] = splitOptionItemProps$1(props, [
+		"checked",
+		"closeOnSelect",
+		"disabled",
+		"onCheckedChange",
+		"value",
+		"valueText"
+	]);
+	const optionItemProps = {
+		...partialOptionItemProps,
+		type: "checkbox"
+	};
+	const menu = useMenuContext();
+	const mergedProps = mergeProps(menu.getOptionItemProps(optionItemProps), localProps);
+	return /* @__PURE__ */ jsx(MenuItemPropsProvider, {
+		value: optionItemProps,
+		children: /* @__PURE__ */ jsx(MenuItemProvider, {
+			value: menu.getOptionItemState(optionItemProps),
+			children: /* @__PURE__ */ jsx(wire.div, {
+				...mergedProps,
+				ref
+			})
+		})
+	});
+});
+MenuCheckboxItem.displayName = "MenuCheckboxItem";
+//#endregion
+//#region src/components/menu/content.tsx
+const MenuContent = forwardRef((props, ref) => {
+	const menu = useMenuContext();
+	const presence = usePresenceContext();
+	const mergedProps = mergeProps(menu.getContentProps(), presence.getPresenceProps(), props);
+	const composedRefs = useComposedRefs(presence.ref, ref);
+	if (presence.unmounted) return null;
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref: composedRefs
+	});
+});
+MenuContent.displayName = "MenuContent";
+//#endregion
+//#region src/components/menu/context.tsx
+const MenuContext = (props) => props.children(useMenuContext());
+//#endregion
+//#region src/components/menu/context-trigger.tsx
+const MenuContextTrigger = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useMenuContext().getContextTriggerProps(), props);
+	return /* @__PURE__ */ jsx(wire.button, {
+		...mergedProps,
+		ref
+	});
+});
+MenuContextTrigger.displayName = "MenuContextTrigger";
+//#endregion
+//#region src/components/menu/indicator.tsx
+const MenuIndicator = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useMenuContext().getIndicatorProps(), props);
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref
+	});
+});
+MenuIndicator.displayName = "MenuIndicator";
+//#endregion
+//#region src/components/menu/item.tsx
+const splitItemBaseProps = createSplitProps();
+const MenuItem = forwardRef((props, ref) => {
+	const [itemProps, localProps] = splitItemBaseProps(props, [
+		"closeOnSelect",
+		"disabled",
+		"value",
+		"valueText",
+		"onSelect"
+	]);
+	const menu = useMenuContext();
+	const mergedProps = mergeProps(menu.getItemProps(itemProps), localProps);
+	const itemState = menu.getItemState(itemProps);
+	useEffect(() => {
+		return menu.addItemListener({
+			id: itemState.id,
+			onSelect: itemProps.onSelect
+		});
+	}, [itemState.id, itemProps.onSelect]);
+	return /* @__PURE__ */ jsx(MenuItemPropsProvider, {
+		value: itemProps,
+		children: /* @__PURE__ */ jsx(MenuItemProvider, {
+			value: itemState,
+			children: /* @__PURE__ */ jsx(wire.div, {
+				...mergedProps,
+				ref
+			})
+		})
+	});
+});
+MenuItem.displayName = "MenuItem";
+//#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({
+	name: "MenuItemGroupContext",
+	hookName: "useMenuItemGroupContext",
+	providerName: "<MenuItemGroupProvider />"
+});
+//#endregion
+//#region src/components/menu/item-group.tsx
+const splitItemGroupProps$1 = createSplitProps();
+const MenuItemGroup = forwardRef((props, ref) => {
+	const [optionalItemGroupProps, localProps] = splitItemGroupProps$1(props, ["id"]);
+	const menu = useMenuContext();
+	const itemGroupProps = {
+		id: useId(),
+		...optionalItemGroupProps
+	};
+	const mergedProps = mergeProps(menu.getItemGroupProps(itemGroupProps), localProps);
+	return /* @__PURE__ */ jsx(MenuItemGroupProvider, {
+		value: itemGroupProps,
+		children: /* @__PURE__ */ jsx(wire.div, {
+			...mergedProps,
+			ref
+		})
+	});
+});
+MenuItemGroup.displayName = "MenuItemGroup";
+//#endregion
+//#region src/components/menu/item-group-label.tsx
+const MenuItemGroupLabel = forwardRef((props, ref) => {
+	const menu = useMenuContext();
+	const itemGroup = useMenuItemGroupContext();
+	const mergedProps = mergeProps(menu.getItemGroupLabelProps({ htmlFor: itemGroup.id }), props);
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref
+	});
+});
+MenuItemGroupLabel.displayName = "MenuItemGroupLabel";
+//#endregion
+//#region src/components/menu/item-indicator.tsx
+const MenuItemIndicator = forwardRef((props, ref) => {
+	const menu = useMenuContext();
+	const itemProps = useMenuItemPropsContext();
+	const mergedProps = mergeProps(menu.getItemIndicatorProps(itemProps), props);
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref
+	});
+});
+MenuItemIndicator.displayName = "MenuItemIndicator";
+//#endregion
+//#region src/components/menu/item-text.tsx
+const MenuItemText = forwardRef((props, ref) => {
+	const menu = useMenuContext();
+	const itemProps = useMenuItemPropsContext();
+	const mergedProps = mergeProps(menu.getItemTextProps(itemProps), props);
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref
+	});
+});
+MenuItemText.displayName = "MenuItemText";
+//#endregion
+//#region src/components/menu/positioner.tsx
+const MenuPositioner = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useMenuContext().getPositionerProps(), props);
+	if (usePresenceContext().unmounted) return null;
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref
+	});
+});
+MenuPositioner.displayName = "MenuPositioner";
+//#endregion
+//#region src/components/menu/radio-item.tsx
+const splitOptionItemProps = createSplitProps();
+const MenuRadioItem = forwardRef((props, ref) => {
+	const [partialItemProps, localProps] = splitOptionItemProps(props, [
+		"closeOnSelect",
+		"disabled",
+		"value",
+		"valueText"
+	]);
+	const menu = useMenuContext();
+	const itemGroup = useMenuItemGroupContext();
+	const optionItemProps = {
+		...partialItemProps,
+		checked: itemGroup.value === partialItemProps.value,
+		type: "radio",
+		onCheckedChange: () => itemGroup.onValueChange?.({ value: partialItemProps.value })
+	};
+	const mergedProps = mergeProps(menu.getOptionItemProps(optionItemProps), localProps);
+	return /* @__PURE__ */ jsx(MenuItemPropsProvider, {
+		value: optionItemProps,
+		children: /* @__PURE__ */ jsx(MenuItemProvider, {
+			value: menu.getOptionItemState(optionItemProps),
+			children: /* @__PURE__ */ jsx(wire.div, {
+				...mergedProps,
+				ref
+			})
+		})
+	});
+});
+MenuRadioItem.displayName = "MenuRadioItem";
+//#endregion
+//#region src/components/menu/radio-item-group.tsx
+const splitItemGroupProps = createSplitProps();
+const MenuRadioItemGroup = forwardRef((props, ref) => {
+	const [optionalItemGroupProps, localProps] = splitItemGroupProps(props, [
+		"id",
+		"onValueChange",
+		"value"
+	]);
+	const menu = useMenuContext();
+	const itemGroupProps = {
+		id: useId(),
+		...optionalItemGroupProps
+	};
+	const mergedProps = mergeProps(menu.getItemGroupProps({ id: itemGroupProps.id }), localProps);
+	return /* @__PURE__ */ jsx(MenuItemGroupProvider, {
+		value: itemGroupProps,
+		children: /* @__PURE__ */ jsx(wire.div, {
+			...mergedProps,
+			ref
+		})
+	});
+});
+MenuRadioItemGroup.displayName = "MenuRadioItemGroup";
+//#endregion
+//#region src/components/menu/use.ts
+const useMenu = (props) => {
+	const id = useId();
+	const { getRootNode } = useEnvironmentContext();
+	const { dir } = useLocaleContext();
+	const machineProps = {
+		id,
+		dir,
+		getRootNode,
+		...props
+	};
+	const service = useMachine(menu.machine, machineProps);
+	return {
+		api: menu.connect(service, normalizeProps),
+		service
+	};
+};
+//#endregion
+//#region src/components/menu/use-machine-context.ts
+const [MenuMachineProvider, useMenuMachineContext] = createContext$1({
+	name: "MenuMachineContext",
+	hookName: "useMenuMachineContext",
+	providerName: "<MenuMachineProvider />",
+	strict: false
+});
+//#endregion
+//#region src/components/menu/use-trigger-item-context.ts
+const [MenuTriggerItemProvider, useMenuTriggerItemContext] = createContext$1({
+	name: "MenuMachineContext",
+	hookName: "useMenuMachineContext",
+	providerName: "<MenuMachineProvider />",
+	strict: false
+});
+//#endregion
+//#region src/components/menu/root.tsx
+const splitRootProps = createSplitProps();
+const MenuRoot = (props) => {
+	const [presenceProps, menuProps] = splitPresenceProps(props);
+	const [useMenuProps, localProps] = splitRootProps(menuProps, [
+		"anchorPoint",
+		"aria-label",
+		"closeOnSelect",
+		"composite",
+		"defaultHighlightedValue",
+		"defaultOpen",
+		"highlightedValue",
+		"id",
+		"ids",
+		"loopFocus",
+		"navigate",
+		"onEscapeKeyDown",
+		"onFocusOutside",
+		"onHighlightChange",
+		"onInteractOutside",
+		"onOpenChange",
+		"onPointerDownOutside",
+		"onRequestDismiss",
+		"onSelect",
+		"onTriggerValueChange",
+		"open",
+		"positioning",
+		"triggerValue",
+		"defaultTriggerValue",
+		"typeahead"
+	]);
+	const parentApi = useMenuContext();
+	const parentMachine = useMenuMachineContext();
+	const { api, service } = useMenu(useMenuProps);
+	const presence = usePresence(mergeProps({ present: api.open }, presenceProps));
+	useEffectOnce(() => {
+		if (!parentMachine) return;
+		if (!parentApi) return;
+		parentApi.setChild(service);
+		api.setParent(parentMachine);
+	});
+	return /* @__PURE__ */ jsx(MenuTriggerItemProvider, {
+		value: useCallback(() => parentApi?.getTriggerItemProps(api), [api, parentApi]),
+		children: /* @__PURE__ */ jsx(MenuMachineProvider, {
+			value: service,
+			children: /* @__PURE__ */ jsx(MenuProvider, {
+				value: api,
+				children: /* @__PURE__ */ jsx(PresenceProvider, {
+					value: presence,
+					...localProps
+				})
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/menu/root-provider.tsx
+const MenuRootProvider = (props) => {
+	const parentApi = useMenuContext();
+	const parentMachine = useMenuMachineContext();
+	const [presenceProps, { value: menu, children }] = splitPresenceProps(props);
+	const { api, service } = menu;
+	const presence = usePresence(mergeProps({ present: api.open }, presenceProps));
+	useEffectOnce(() => {
+		if (!parentMachine) return;
+		if (!parentApi) return;
+		parentApi.setChild(service);
+		api.setParent(parentMachine);
+	});
+	return /* @__PURE__ */ jsx(MenuTriggerItemProvider, {
+		value: useCallback(() => parentApi?.getTriggerItemProps(api), [api, parentApi]),
+		children: /* @__PURE__ */ jsx(MenuMachineProvider, {
+			value: service,
+			children: /* @__PURE__ */ jsx(MenuProvider, {
+				value: api,
+				children: /* @__PURE__ */ jsx(PresenceProvider, {
+					value: presence,
+					children
+				})
+			})
+		})
+	});
+};
+//#endregion
+//#region src/components/menu/separator.tsx
+const MenuSeparator = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useMenuContext().getSeparatorProps(), props);
+	return /* @__PURE__ */ jsx(wire.hr, {
+		...mergedProps,
+		ref
+	});
+});
+MenuSeparator.displayName = "MenuSeparator";
+//#endregion
+//#region src/components/menu/trigger.tsx
+const splitTriggerProps = createSplitProps();
+const MenuTrigger = forwardRef((props, ref) => {
+	const [triggerProps, localProps] = splitTriggerProps(props, ["value"]);
+	const menu = useMenuContext();
+	const presence = usePresenceContext();
+	const triggerPropsRaw = menu.getTriggerProps(triggerProps);
+	const mergedProps = mergeProps({
+		...triggerPropsRaw,
+		"aria-controls": presence.unmounted ? void 0 : triggerPropsRaw["aria-controls"]
+	}, localProps);
+	return /* @__PURE__ */ jsx(wire.button, {
+		...mergedProps,
+		ref
+	});
+});
+MenuTrigger.displayName = "MenuTrigger";
+//#endregion
+//#region src/components/menu/trigger-item.tsx
+const MenuTriggerItem = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useMenuTriggerItemContext()?.() ?? {}, props);
+	return /* @__PURE__ */ jsx(MenuItemPropsProvider, {
+		value: { value: mergedProps["data-value"] },
+		children: /* @__PURE__ */ jsx(wire.div, {
+			...mergedProps,
+			ref
+		})
+	});
+});
+MenuTriggerItem.displayName = "MenuTriggerItem";
+//#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 };