@sprawlify/solid 0.0.78 → 0.0.79

package/dist/components/dropdown-menu/index.js

@@ -0,0 +1,462 @@
+import { t as __exportAll } from "../../chunk-BN_g-Awi.js";
+import { i as useMachine, n as normalizeProps, r as mergeProps$2 } from "../../core-Crxbs6Ki.js";
+import { t as runIfFn } from "../../run-if-fn-CTrSA35K.js";
+import { t as createContext$1 } from "../../create-context-DPb5Yv_u.js";
+import { i as useLocaleContext, o as useEnvironmentContext } from "../../providers-CdwYAas1.js";
+import { t as sprawlify } from "../../factory-Ce76k0aC.js";
+import { t as dropdownMenuAnatomy } from "../../dropdown-menu-anatomy-C1luUwqi.js";
+import { t as createSplitProps } from "../../create-split-props-DgGDQfdT.js";
+import "../../render-strategy-CNUvDuT1.js";
+import { t as composeRefs } from "../../compose-refs-C-e3esqD.js";
+import { a as splitPresenceProps, i as usePresence, n as usePresenceContext, t as PresenceProvider } from "../../presence-BBn_Rd1l.js";
+import { Show, createEffect, createMemo, createUniqueId, onCleanup, onMount } from "solid-js";
+import { createComponent, mergeProps as mergeProps$1 } from "solid-js/web";
+import * as dropdownMenu from "@sprawlify/primitives/machines/dropdown-menu";
+
+//#region src/components/dropdown-menu/use-dropdown-menu-context.ts
+const [DropdownMenuProvider, useDropdownMenuContext] = createContext$1({
+	hookName: "useDropdownMenuContext",
+	providerName: "<DropdownMenuProvider />",
+	strict: false
+});
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-arrow.tsx
+const DropdownMenuArrow = (props) => {
+	const context = useDropdownMenuContext();
+	const mergedProps = mergeProps$2(() => context().getArrowProps(), props);
+	return createComponent(sprawlify.div, mergedProps);
+};
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-arrow-tip.tsx
+const DropdownMenuArrowTip = (props) => {
+	const context = useDropdownMenuContext();
+	const mergedProps = mergeProps$2(() => context().getArrowTipProps(), props);
+	return createComponent(sprawlify.div, mergedProps);
+};
+
+//#endregion
+//#region src/components/dropdown-menu/use-dropdown-menu-item-context.ts
+const [DropdownMenuItemProvider, useDropdownMenuItemContext] = createContext$1({
+	hookName: "useDropdownMenuItemContext",
+	providerName: "<DropdownMenuItemProvider />"
+});
+
+//#endregion
+//#region src/components/dropdown-menu/use-dropdown-menu-option-item-props-context.ts
+const [DropdownMenuItemPropsProvider, useDropdownMenuItemPropsContext] = createContext$1({
+	hookName: "useDropdownMenuItemPropsContext",
+	providerName: "<DropdownMenuItemPropsProvider />"
+});
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-checkbox-item.tsx
+const DropdownMenuCheckboxItem = (props) => {
+	const [partialOptionItemProps, localProps] = createSplitProps()(props, [
+		"checked",
+		"closeOnSelect",
+		"disabled",
+		"onCheckedChange",
+		"value",
+		"valueText"
+	]);
+	const optionItemProps = mergeProps$2(partialOptionItemProps, { type: "checkbox" });
+	const context = useDropdownMenuContext();
+	const mergedProps = mergeProps$2(() => context().getOptionItemProps(optionItemProps), localProps);
+	const optionItemState = createMemo(() => context().getItemState(optionItemProps));
+	return createComponent(DropdownMenuItemPropsProvider, {
+		value: optionItemProps,
+		get children() {
+			return createComponent(DropdownMenuItemProvider, {
+				value: optionItemState,
+				get children() {
+					return createComponent(sprawlify.div, mergedProps);
+				}
+			});
+		}
+	});
+};
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-content.tsx
+const DropdownMenuContent = (props) => {
+	const context = useDropdownMenuContext();
+	const presenceContext = usePresenceContext();
+	const mergedProps = mergeProps$2(() => context().getContentProps(), () => presenceContext().presenceProps, props);
+	return createComponent(Show, {
+		get when() {
+			return !presenceContext().unmounted;
+		},
+		get children() {
+			return createComponent(sprawlify.div, mergeProps$1(mergedProps, { ref(r$) {
+				var _ref$ = composeRefs(presenceContext().ref, props.ref);
+				typeof _ref$ === "function" && _ref$(r$);
+			} }));
+		}
+	});
+};
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-context.tsx
+const DropdownMenuContext = (props) => props.children(useDropdownMenuContext());
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-indicator.tsx
+const DropdownMenuIndicator = (props) => {
+	const context = useDropdownMenuContext();
+	const mergedProps = mergeProps$2(() => context().getIndicatorProps(), props);
+	return createComponent(sprawlify.div, mergedProps);
+};
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-item.tsx
+const DropdownMenuItem = (props) => {
+	const [itemProps, localProps] = createSplitProps()(props, [
+		"closeOnSelect",
+		"disabled",
+		"value",
+		"valueText",
+		"onSelect"
+	]);
+	const context = useDropdownMenuContext();
+	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(DropdownMenuItemPropsProvider, {
+		value: itemProps,
+		get children() {
+			return createComponent(DropdownMenuItemProvider, {
+				value: itemState,
+				get children() {
+					return createComponent(sprawlify.div, mergedProps);
+				}
+			});
+		}
+	});
+};
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-item-context.tsx
+const DropdownMenuItemContext = (props) => props.children(useDropdownMenuItemContext());
+
+//#endregion
+//#region src/components/dropdown-menu/use-dropdown-menu-item-group-context.ts
+const [DropdownMenuItemGroupProvider, useDropdownMenuItemGroupContext] = createContext$1({
+	hookName: "useDropdownMenuItemGroupContext",
+	providerName: "<DropdownMenuItemGroupProvider />"
+});
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-item-group.tsx
+const DropdownMenuItemGroup = (props) => {
+	const [optionalItemGroupProps, localProps] = createSplitProps()(props, ["id"]);
+	const itemGroupProps = mergeProps$2({ id: createUniqueId() }, optionalItemGroupProps);
+	const dropdownMenu = useDropdownMenuContext();
+	const mergedProps = mergeProps$2(() => dropdownMenu().getItemGroupProps(itemGroupProps), localProps);
+	return createComponent(DropdownMenuItemGroupProvider, {
+		value: itemGroupProps,
+		get children() {
+			return createComponent(sprawlify.div, mergedProps);
+		}
+	});
+};
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-item-group-label.tsx
+const DropdownMenuItemGroupLabel = (props) => {
+	const context = useDropdownMenuContext();
+	const itemGroupContext = useDropdownMenuItemGroupContext();
+	const mergedProps = mergeProps$2(context().getItemGroupLabelProps({ htmlFor: itemGroupContext.id }), props);
+	return createComponent(sprawlify.div, mergedProps);
+};
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-item-indicator.tsx
+const DropdownMenuItemIndicator = (props) => {
+	const context = useDropdownMenuContext();
+	const itemProps = useDropdownMenuItemPropsContext();
+	const mergedProps = mergeProps$2(() => context().getItemIndicatorProps(itemProps), props);
+	return createComponent(sprawlify.div, mergedProps);
+};
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-item-text.tsx
+const DropdownMenuItemText = (props) => {
+	const context = useDropdownMenuContext();
+	const itemProps = useDropdownMenuItemPropsContext();
+	const mergedProps = mergeProps$2(() => context().getItemTextProps(itemProps), props);
+	return createComponent(sprawlify.div, mergedProps);
+};
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-positioner.tsx
+const DropdownMenuPositioner = (props) => {
+	const context = useDropdownMenuContext();
+	const presence = usePresenceContext();
+	const mergedProps = mergeProps$2(() => context().getPositionerProps(), props);
+	return createComponent(Show, {
+		get when() {
+			return !presence().unmounted;
+		},
+		get children() {
+			return createComponent(sprawlify.div, mergedProps);
+		}
+	});
+};
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-radio-item.tsx
+const DropdownMenuRadioItem = (props) => {
+	const [partialItemProps, localProps] = createSplitProps()(props, [
+		"closeOnSelect",
+		"disabled",
+		"value",
+		"valueText"
+	]);
+	const context = useDropdownMenuContext();
+	const itemGroup = useDropdownMenuItemGroupContext();
+	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(DropdownMenuItemPropsProvider, {
+		value: optionItemProps,
+		get children() {
+			return createComponent(DropdownMenuItemProvider, {
+				value: optionItemState,
+				get children() {
+					return createComponent(sprawlify.div, mergedProps);
+				}
+			});
+		}
+	});
+};
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-radio-item-group.tsx
+const DropdownMenuRadioItemGroup = (props) => {
+	const [optionalItemGroupProps, localProps] = createSplitProps()(props, [
+		"id",
+		"onValueChange",
+		"value"
+	]);
+	const context = useDropdownMenuContext();
+	const itemGroupProps = mergeProps$2({ id: createUniqueId() }, optionalItemGroupProps);
+	const mergedProps = mergeProps$2(() => context().getItemGroupProps(itemGroupProps), localProps);
+	return createComponent(DropdownMenuItemGroupProvider, {
+		value: itemGroupProps,
+		get children() {
+			return createComponent(sprawlify.div, mergedProps);
+		}
+	});
+};
+
+//#endregion
+//#region src/components/dropdown-menu/use-dropdown-menu.ts
+const useDropdownMenu = (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(dropdownMenu.machine, machineProps);
+	return {
+		api: createMemo(() => dropdownMenu.connect(service, normalizeProps)),
+		service
+	};
+};
+
+//#endregion
+//#region src/components/dropdown-menu/use-dropdown-menu-machine-context.ts
+const [DropdownMenuMachineProvider, useDropdownMenuMachineContext] = createContext$1({
+	hookName: "useDropdownMenuMachineContext",
+	providerName: "<DropdownMenuMachineProvider />",
+	strict: false
+});
+
+//#endregion
+//#region src/components/dropdown-menu/use-dropdown-menu-trigger-item-context.ts
+const [DropdownMenuTriggerItemProvider, useDropdownMenuTriggerItemContext] = createContext$1({
+	hookName: "useDropdownMenuTriggerItemContext",
+	providerName: "<DropdownMenuTriggerItemProvider />",
+	strict: false
+});
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-root.tsx
+const DropdownMenuRoot = (props) => {
+	const [presenceProps, dropdownMenuProps] = splitPresenceProps(props);
+	const [useDropdownMenuProps, localProps] = createSplitProps()(dropdownMenuProps, [
+		"anchorPoint",
+		"aria-label",
+		"closeOnSelect",
+		"composite",
+		"defaultHighlightedValue",
+		"defaultOpen",
+		"highlightedValue",
+		"id",
+		"ids",
+		"loopFocus",
+		"navigate",
+		"onEscapeKeyDown",
+		"onFocusOutside",
+		"onHighlightChange",
+		"onInteractOutside",
+		"onOpenChange",
+		"onPointerDownOutside",
+		"onRequestDismiss",
+		"onSelect",
+		"open",
+		"positioning",
+		"typeahead"
+	]);
+	const parentApi = useDropdownMenuContext();
+	const parentMachine = useDropdownMenuMachineContext();
+	const dropdownMenu = useDropdownMenu(useDropdownMenuProps);
+	const presenceApi = usePresence(mergeProps$2(presenceProps, () => ({ present: dropdownMenu.api().open })));
+	onMount(() => {
+		if (!parentMachine) return;
+		parentApi?.().setChild(dropdownMenu.service);
+		dropdownMenu.api().setParent(parentMachine);
+	});
+	const triggerItemContext = () => parentApi?.().getTriggerItemProps(dropdownMenu.api());
+	return createComponent(DropdownMenuTriggerItemProvider, {
+		value: triggerItemContext,
+		get children() {
+			return createComponent(DropdownMenuMachineProvider, {
+				get value() {
+					return dropdownMenu.service;
+				},
+				get children() {
+					return createComponent(DropdownMenuProvider, {
+						get value() {
+							return dropdownMenu.api;
+						},
+						get children() {
+							return createComponent(PresenceProvider, {
+								value: presenceApi,
+								get children() {
+									return localProps.children;
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	});
+};
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-root-provider.tsx
+const DropdownMenuRootProvider = (props) => {
+	const parentApi = useDropdownMenuContext();
+	const parentMachine = useDropdownMenuMachineContext();
+	const [presenceProps, dropdownMenuProps] = splitPresenceProps(props);
+	const presenceApi = usePresence(mergeProps$2(presenceProps, () => ({ present: dropdownMenuProps.value.api().open })));
+	createEffect(() => {
+		if (!parentMachine) return;
+		parentApi?.().setChild(dropdownMenuProps.value.service);
+		dropdownMenuProps.value.api().setParent(parentMachine);
+	});
+	const triggerItemContext = () => parentApi?.().getTriggerItemProps(dropdownMenuProps.value.api());
+	return createComponent(DropdownMenuTriggerItemProvider, {
+		value: triggerItemContext,
+		get children() {
+			return createComponent(DropdownMenuMachineProvider, {
+				get value() {
+					return dropdownMenuProps.value.service;
+				},
+				get children() {
+					return createComponent(DropdownMenuProvider, {
+						get value() {
+							return dropdownMenuProps.value.api;
+						},
+						get children() {
+							return createComponent(PresenceProvider, {
+								value: presenceApi,
+								get children() {
+									return dropdownMenuProps.children;
+								}
+							});
+						}
+					});
+				}
+			});
+		}
+	});
+};
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-separator.tsx
+const DropdownMenuSeparator = (props) => {
+	const dropdownMenu = useDropdownMenuContext();
+	const mergedProps = mergeProps$2(() => dropdownMenu().getSeparatorProps(), props);
+	return createComponent(sprawlify.hr, mergedProps);
+};
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-trigger.tsx
+const DropdownMenuTrigger = (props) => {
+	const api = useDropdownMenuContext();
+	const presenceApi = usePresenceContext();
+	const mergedProps = mergeProps$2(() => api().getTriggerProps(), () => ({ "aria-controls": presenceApi().unmounted && null }), props);
+	return createComponent(sprawlify.button, mergedProps);
+};
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu-trigger-item.tsx
+const DropdownMenuTriggerItem = (props) => {
+	const getTriggerItemProps = useDropdownMenuTriggerItemContext();
+	const mergedProps = mergeProps$2(() => getTriggerItemProps?.(), props);
+	return createComponent(DropdownMenuItemPropsProvider, {
+		get value() {
+			return { value: mergedProps["data-value"] };
+		},
+		get children() {
+			return createComponent(sprawlify.div, mergedProps);
+		}
+	});
+};
+
+//#endregion
+//#region src/components/dropdown-menu/dropdown-menu.ts
+var dropdown_menu_exports = /* @__PURE__ */ __exportAll({
+	Arrow: () => DropdownMenuArrow,
+	ArrowTip: () => DropdownMenuArrowTip,
+	CheckboxItem: () => DropdownMenuCheckboxItem,
+	Content: () => DropdownMenuContent,
+	Context: () => DropdownMenuContext,
+	Indicator: () => DropdownMenuIndicator,
+	Item: () => DropdownMenuItem,
+	ItemContext: () => DropdownMenuItemContext,
+	ItemGroup: () => DropdownMenuItemGroup,
+	ItemGroupLabel: () => DropdownMenuItemGroupLabel,
+	ItemIndicator: () => DropdownMenuItemIndicator,
+	ItemText: () => DropdownMenuItemText,
+	Positioner: () => DropdownMenuPositioner,
+	RadioItem: () => DropdownMenuRadioItem,
+	RadioItemGroup: () => DropdownMenuRadioItemGroup,
+	Root: () => DropdownMenuRoot,
+	RootProvider: () => DropdownMenuRootProvider,
+	Separator: () => DropdownMenuSeparator,
+	Trigger: () => DropdownMenuTrigger,
+	TriggerItem: () => DropdownMenuTriggerItem
+});
+
+//#endregion
+export { dropdown_menu_exports as DropdownMenu, DropdownMenuArrow, DropdownMenuArrowTip, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuContext, DropdownMenuIndicator, DropdownMenuItem, DropdownMenuItemContext, DropdownMenuItemGroup, DropdownMenuItemGroupLabel, DropdownMenuItemIndicator, DropdownMenuItemText, DropdownMenuPositioner, DropdownMenuRadioItem, DropdownMenuRadioItemGroup, DropdownMenuRoot, DropdownMenuRootProvider, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem, dropdownMenuAnatomy, useDropdownMenu, useDropdownMenuContext, useDropdownMenuItemContext };