@sprawlify/primitives 0.0.62 → 0.0.63

package/dist/machines/combobox/index.mjs

@@ -1,12 +1,12 @@
-import { t as createAnatomy } from "../../create-anatomy-CArN8dVu.mjs";
-import { H as nextTick, I as scrollIntoView, L as clickIfLink, S as query, St as isOpeningInNewTab, W as raf, bt as isLeftClick, gt as isContextMenuEvent, ht as isComposingEvent, on as isAnchorElement, ut as getEventKey, vn as ariaAttr, vt as isDownloadingEvent, xn as setCaretToEnd, yn as dataAttr, z as observeAttributes } from "../../dom-query-CUb85Z22.mjs";
-import { At as remove, Y as match, ft as isEqual, mt as addOrRemove, rt as isBoolean, t as ensure, u as createSplitProps } from "../../utils-DSBXwmDm.mjs";
-import { s as ListCollection } from "../../collection-CjwZd09Z.mjs";
-import { o as setup } from "../../core-CujC6Y2H.mjs";
-import "../../interact-outside-xKQjln5u.mjs";
-import { n as trackDismissableElement } from "../../dismissable-D0YyXTJv.mjs";
-import { n as getPlacement, t as getPlacementStyles } from "../../popper-DbfXVgrC.mjs";
-import { t as createProps } from "../../create-props-SRSjdUTq.mjs";
+import { t as createAnatomy } from "../../create-anatomy-BVqM_FJ6.mjs";
+import { H as nextTick, I as scrollIntoView, L as clickIfLink, S as query, St as isOpeningInNewTab, W as raf, bt as isLeftClick, gt as isContextMenuEvent, ht as isComposingEvent, on as isAnchorElement, ut as getEventKey, vn as ariaAttr, vt as isDownloadingEvent, xn as setCaretToEnd, yn as dataAttr, z as observeAttributes } from "../../dom-query-CQFBCdpo.mjs";
+import { At as remove, Y as match, ft as isEqual, mt as addOrRemove, rt as isBoolean, t as ensure, u as createSplitProps } from "../../utils-Vs04rt8f.mjs";
+import { s as ListCollection } from "../../collection-DHyEg4g5.mjs";
+import { o as setup } from "../../core-owywCQ2e.mjs";
+import "../../interact-outside-CRmkKF6k.mjs";
+import { n as trackDismissableElement } from "../../dismissable-BlZazbp3.mjs";
+import { n as getPlacement, t as getPlacementStyles } from "../../popper-DxgokNha.mjs";
+import { t as createProps } from "../../create-props-Dtoa4OUk.mjs";
 
 //#region src/machines/combobox/combobox.anatomy.ts
 const anatomy = createAnatomy("combobox").parts("root", "clearTrigger", "content", "control", "input", "item", "itemGroup", "itemGroupLabel", "itemIndicator", "itemText", "label", "list", "positioner", "trigger");
@@ -61,7 +61,7 @@ const focusTriggerEl = (ctx) => {
 function connect(service, normalize) {
 	const { context, prop, state, send, scope, computed, event } = service;
 	const translations = prop("translations");
-	const collection$1 = prop("collection");
+	const collection = prop("collection");
 	const disabled = !!prop("disabled");
 	const interactive = computed("isInteractive");
 	const invalid = !!prop("invalid");
@@ -75,13 +75,13 @@ function connect(service, normalize) {
 		...prop("positioning"),
 		placement: context.get("currentPlacement")
 	});
-	function getItemState(props$1) {
-		const disabled$1 = collection$1.getItemDisabled(props$1.item);
-		const value = collection$1.getItemValue(props$1.item);
-		ensure(value, () => `[sprawlify-js] No value found for item ${JSON.stringify(props$1.item)}`);
+	function getItemState(props) {
+		const disabled = collection.getItemDisabled(props.item);
+		const value = collection.getItemValue(props.item);
+		ensure(value, () => `[sprawlify-js] No value found for item ${JSON.stringify(props.item)}`);
 		return {
 			value,
-			disabled: Boolean(disabled$1 || disabled$1),
+			disabled: Boolean(disabled || disabled),
 			highlighted: highlightedValue === value,
 			selected: context.get("value").includes(value)
 		};
@@ -173,9 +173,9 @@ function connect(service, normalize) {
 				"data-invalid": dataAttr(invalid),
 				"data-required": dataAttr(required),
 				"data-focus": dataAttr(focused),
-				onClick(event$1) {
+				onClick(event) {
 					if (composite) return;
-					event$1.preventDefault();
+					event.preventDefault();
 					getTriggerEl(scope)?.focus({ preventScroll: true });
 				}
 			});
@@ -225,8 +225,8 @@ function connect(service, normalize) {
 				"aria-expanded": open,
 				"data-state": open ? "open" : "closed",
 				"aria-activedescendant": highlightedValue ? getItemId(scope, highlightedValue) : void 0,
-				onClick(event$1) {
-					if (event$1.defaultPrevented) return;
+				onClick(event) {
+					if (event.defaultPrevented) return;
 					if (!prop("openOnClick")) return;
 					if (!interactive) return;
 					send({
@@ -242,56 +242,56 @@ function connect(service, normalize) {
 					if (disabled) return;
 					send({ type: "INPUT.BLUR" });
 				},
-				onChange(event$1) {
+				onChange(event) {
 					send({
 						type: "INPUT.CHANGE",
-						value: event$1.currentTarget.value,
+						value: event.currentTarget.value,
 						src: "input-change"
 					});
 				},
-				onKeyDown(event$1) {
-					if (event$1.defaultPrevented) return;
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
 					if (!interactive) return;
-					if (event$1.ctrlKey || event$1.shiftKey || isComposingEvent(event$1)) return;
+					if (event.ctrlKey || event.shiftKey || isComposingEvent(event)) return;
 					const openOnKeyPress = prop("openOnKeyPress");
-					const isModifierKey = event$1.ctrlKey || event$1.metaKey || event$1.shiftKey;
+					const isModifierKey = event.ctrlKey || event.metaKey || event.shiftKey;
 					const keypress = true;
 					const exec = {
-						ArrowDown(event$2) {
+						ArrowDown(event) {
 							if (!openOnKeyPress && !open) return;
 							send({
-								type: event$2.altKey ? "OPEN" : "INPUT.ARROW_DOWN",
+								type: event.altKey ? "OPEN" : "INPUT.ARROW_DOWN",
 								keypress,
 								src: "arrow-key"
 							});
-							event$2.preventDefault();
+							event.preventDefault();
 						},
 						ArrowUp() {
 							if (!openOnKeyPress && !open) return;
 							send({
-								type: event$1.altKey ? "CLOSE" : "INPUT.ARROW_UP",
+								type: event.altKey ? "CLOSE" : "INPUT.ARROW_UP",
 								keypress,
 								src: "arrow-key"
 							});
-							event$1.preventDefault();
+							event.preventDefault();
 						},
-						Home(event$2) {
+						Home(event) {
 							if (isModifierKey) return;
 							send({
 								type: "INPUT.HOME",
 								keypress
 							});
-							if (open) event$2.preventDefault();
+							if (open) event.preventDefault();
 						},
-						End(event$2) {
+						End(event) {
 							if (isModifierKey) return;
 							send({
 								type: "INPUT.END",
 								keypress
 							});
-							if (open) event$2.preventDefault();
+							if (open) event.preventDefault();
 						},
-						Enter(event$2) {
+						Enter(event) {
 							send({
 								type: "INPUT.ENTER",
 								keypress,
@@ -300,7 +300,7 @@ function connect(service, normalize) {
 							const submittable = computed("isCustomValue") && prop("allowCustomValue");
 							const hasHighlight = highlightedValue != null;
 							const alwaysSubmit = prop("alwaysSubmitOnEnter");
-							if (open && !submittable && !alwaysSubmit && hasHighlight) event$2.preventDefault();
+							if (open && !submittable && !alwaysSubmit && hasHighlight) event.preventDefault();
 							if (highlightedValue == null) return;
 							const itemEl = getItemEl(scope, highlightedValue);
 							if (isAnchorElement(itemEl)) prop("navigate")?.({
@@ -315,57 +315,57 @@ function connect(service, normalize) {
 								keypress,
 								src: "escape-key"
 							});
-							event$1.preventDefault();
+							event.preventDefault();
 						}
-					}[getEventKey(event$1, { dir: prop("dir") })];
-					exec?.(event$1);
+					}[getEventKey(event, { dir: prop("dir") })];
+					exec?.(event);
 				}
 			});
 		},
-		getTriggerProps(props$1 = {}) {
+		getTriggerProps(props = {}) {
 			return normalize.button({
 				...parts.trigger.attrs,
 				dir: prop("dir"),
 				id: getTriggerId(scope),
 				"aria-haspopup": composite ? "listbox" : "dialog",
 				type: "button",
-				tabIndex: props$1.focusable ? void 0 : -1,
+				tabIndex: props.focusable ? void 0 : -1,
 				"aria-label": translations.triggerLabel,
 				"aria-expanded": open,
 				"data-state": open ? "open" : "closed",
 				"aria-controls": open ? getContentId(scope) : void 0,
 				disabled,
 				"data-invalid": dataAttr(invalid),
-				"data-focusable": dataAttr(props$1.focusable),
+				"data-focusable": dataAttr(props.focusable),
 				"data-readonly": dataAttr(readOnly),
 				"data-disabled": dataAttr(disabled),
 				onFocus() {
-					if (!props$1.focusable) return;
+					if (!props.focusable) return;
 					send({
 						type: "INPUT.FOCUS",
 						src: "trigger"
 					});
 				},
-				onClick(event$1) {
-					if (event$1.defaultPrevented) return;
+				onClick(event) {
+					if (event.defaultPrevented) return;
 					if (!interactive) return;
-					if (!isLeftClick(event$1)) return;
+					if (!isLeftClick(event)) return;
 					send({
 						type: "TRIGGER.CLICK",
 						src: "trigger-click"
 					});
 				},
-				onPointerDown(event$1) {
+				onPointerDown(event) {
 					if (!interactive) return;
-					if (event$1.pointerType === "touch") return;
-					if (!isLeftClick(event$1)) return;
-					event$1.preventDefault();
+					if (event.pointerType === "touch") return;
+					if (!isLeftClick(event)) return;
+					event.preventDefault();
 					queueMicrotask(() => {
 						getInputEl(scope)?.focus({ preventScroll: true });
 					});
 				},
-				onKeyDown(event$1) {
-					if (event$1.defaultPrevented) return;
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
 					if (composite) return;
 					const exec = {
 						ArrowDown() {
@@ -380,10 +380,10 @@ function connect(service, normalize) {
 								src: "arrow-key"
 							});
 						}
-					}[getEventKey(event$1, { dir: prop("dir") })];
+					}[getEventKey(event, { dir: prop("dir") })];
 					if (exec) {
-						exec(event$1);
-						event$1.preventDefault();
+						exec(event);
+						event.preventDefault();
 					}
 				}
 			});
@@ -400,10 +400,10 @@ function connect(service, normalize) {
 				"data-placement": context.get("currentPlacement"),
 				"aria-labelledby": getLabelId(scope),
 				"aria-multiselectable": prop("multiple") && composite ? true : void 0,
-				"data-empty": dataAttr(collection$1.size === 0),
-				onPointerDown(event$1) {
-					if (!isLeftClick(event$1)) return;
-					event$1.preventDefault();
+				"data-empty": dataAttr(collection.size === 0),
+				onPointerDown(event) {
+					if (!isLeftClick(event)) return;
+					event.preventDefault();
 				}
 			});
 		},
@@ -411,7 +411,7 @@ function connect(service, normalize) {
 			return normalize.element({
 				...parts.list.attrs,
 				role: !composite ? "listbox" : void 0,
-				"data-empty": dataAttr(collection$1.size === 0),
+				"data-empty": dataAttr(collection.size === 0),
 				"aria-labelledby": getLabelId(scope),
 				"aria-multiselectable": prop("multiple") && !composite ? true : void 0
 			});
@@ -428,12 +428,12 @@ function connect(service, normalize) {
 				"aria-label": translations.clearTriggerLabel,
 				"aria-controls": getInputId(scope),
 				hidden: !context.get("value").length,
-				onPointerDown(event$1) {
-					if (!isLeftClick(event$1)) return;
-					event$1.preventDefault();
+				onPointerDown(event) {
+					if (!isLeftClick(event)) return;
+					event.preventDefault();
 				},
-				onClick(event$1) {
-					if (event$1.defaultPrevented) return;
+				onClick(event) {
+					if (event.defaultPrevented) return;
 					if (!interactive) return;
 					send({
 						type: "VALUE.CLEAR",
@@ -443,8 +443,8 @@ function connect(service, normalize) {
 			});
 		},
 		getItemState,
-		getItemProps(props$1) {
-			const itemState = getItemState(props$1);
+		getItemProps(props) {
+			const itemState = getItemState(props);
 			const value = itemState.value;
 			return normalize.element({
 				...parts.item.attrs,
@@ -467,7 +467,7 @@ function connect(service, normalize) {
 					});
 				},
 				onPointerLeave() {
-					if (props$1.persistFocus) return;
+					if (props.persistFocus) return;
 					if (itemState.disabled) return;
 					if (!event.previous()?.type.includes("POINTER")) return;
 					send({
@@ -475,10 +475,10 @@ function connect(service, normalize) {
 						value
 					});
 				},
-				onClick(event$1) {
-					if (isDownloadingEvent(event$1)) return;
-					if (isOpeningInNewTab(event$1)) return;
-					if (isContextMenuEvent(event$1)) return;
+				onClick(event) {
+					if (isDownloadingEvent(event)) return;
+					if (isOpeningInNewTab(event)) return;
+					if (isContextMenuEvent(event)) return;
 					if (itemState.disabled) return;
 					send({
 						type: "ITEM.CLICK",
@@ -488,8 +488,8 @@ function connect(service, normalize) {
 				}
 			});
 		},
-		getItemTextProps(props$1) {
-			const itemState = getItemState(props$1);
+		getItemTextProps(props) {
+			const itemState = getItemState(props);
 			return normalize.element({
 				...parts.itemText.attrs,
 				dir: prop("dir"),
@@ -498,8 +498,8 @@ function connect(service, normalize) {
 				"data-highlighted": dataAttr(itemState.highlighted)
 			});
 		},
-		getItemIndicatorProps(props$1) {
-			const itemState = getItemState(props$1);
+		getItemIndicatorProps(props) {
+			const itemState = getItemState(props);
 			return normalize.element({
 				"aria-hidden": true,
 				...parts.itemIndicator.attrs,
@@ -508,19 +508,19 @@ function connect(service, normalize) {
 				hidden: !itemState.selected
 			});
 		},
-		getItemGroupProps(props$1) {
-			const { id } = props$1;
+		getItemGroupProps(props) {
+			const { id } = props;
 			return normalize.element({
 				...parts.itemGroup.attrs,
 				dir: prop("dir"),
 				id: getItemGroupId(scope, id),
 				"aria-labelledby": getItemGroupLabelId(scope, id),
-				"data-empty": dataAttr(collection$1.size === 0),
+				"data-empty": dataAttr(collection.size === 0),
 				role: "group"
 			});
 		},
-		getItemGroupLabelProps(props$1) {
-			const { htmlFor } = props$1;
+		getItemGroupLabelProps(props) {
+			const { htmlFor } = props;
 			return normalize.element({
 				...parts.itemGroupLabel.attrs,
 				dir: prop("dir"),
@@ -536,17 +536,17 @@ function connect(service, normalize) {
 const { guards, createMachine, choose } = setup();
 const { and, not } = guards;
 const machine = createMachine({
-	props({ props: props$1 }) {
+	props({ props }) {
 		return {
 			loopFocus: true,
 			openOnClick: false,
 			defaultValue: [],
 			defaultInputValue: "",
-			closeOnSelect: !props$1.multiple,
+			closeOnSelect: !props.multiple,
 			allowCustomValue: false,
 			alwaysSubmitOnEnter: false,
 			inputBehavior: "none",
-			selectionBehavior: props$1.multiple ? "clear" : "replace",
+			selectionBehavior: props.multiple ? "clear" : "replace",
 			openOnKeyPress: true,
 			openOnChange: true,
 			composite: true,
@@ -554,16 +554,16 @@ const machine = createMachine({
 				clickIfLink(node);
 			},
 			collection: collection.empty(),
-			...props$1,
+			...props,
 			positioning: {
 				placement: "bottom",
 				sameWidth: true,
-				...props$1.positioning
+				...props.positioning
 			},
 			translations: {
 				triggerLabel: "Toggle suggestions",
 				clearTriggerLabel: "Clear value",
-				...props$1.translations
+				...props.translations
 			}
 		};
 	},
@@ -583,9 +583,9 @@ const machine = createMachine({
 				onChange(value) {
 					const context = getContext();
 					const prevSelectedItems = context.get("selectedItems");
-					const collection$1 = prop("collection");
+					const collection = prop("collection");
 					const nextItems = value.map((v) => {
-						return prevSelectedItems.find((item) => collection$1.getItemValue(item) === v) || collection$1.find(v);
+						return prevSelectedItems.find((item) => collection.getItemValue(item) === v) || collection.find(v);
 					});
 					context.set("selectedItems", nextItems);
 					prop("onValueChange")?.({
@@ -619,11 +619,11 @@ const machine = createMachine({
 				return {
 					defaultValue: inputValue,
 					value: prop("inputValue"),
-					onChange(value$1) {
+					onChange(value) {
 						const event = getEvent();
 						const reason = (event.previousEvent || event).src;
 						prop("onInputValueChange")?.({
-							inputValue: value$1,
+							inputValue: value,
 							reason
 						});
 					}
@@ -1260,9 +1260,9 @@ const machine = createMachine({
 			},
 			selectHighlightedItem(params) {
 				const { context, prop } = params;
-				const collection$1 = prop("collection");
+				const collection = prop("collection");
 				const highlightedValue = context.get("highlightedValue");
-				if (!highlightedValue || !collection$1.has(highlightedValue)) return;
+				if (!highlightedValue || !collection.has(highlightedValue)) return;
 				const nextValue = prop("multiple") ? addOrRemove(context.get("value"), highlightedValue) : [highlightedValue];
 				prop("onSelect")?.({
 					value: nextValue,
@@ -1271,7 +1271,7 @@ const machine = createMachine({
 				context.set("value", nextValue);
 				const inputValue = match(prop("selectionBehavior"), {
 					preserve: context.get("inputValue"),
-					replace: collection$1.stringifyMany(nextValue),
+					replace: collection.stringifyMany(nextValue),
 					clear: ""
 				});
 				context.set("inputValue", inputValue);
@@ -1437,21 +1437,21 @@ const machine = createMachine({
 			highlightNextItem({ context, prop }) {
 				let value = null;
 				const highlightedValue = context.get("highlightedValue");
-				const collection$1 = prop("collection");
+				const collection = prop("collection");
 				if (highlightedValue) {
-					value = collection$1.getNextValue(highlightedValue);
-					if (!value && prop("loopFocus")) value = collection$1.firstValue;
-				} else value = collection$1.firstValue;
+					value = collection.getNextValue(highlightedValue);
+					if (!value && prop("loopFocus")) value = collection.firstValue;
+				} else value = collection.firstValue;
 				if (value) context.set("highlightedValue", value);
 			},
 			highlightPrevItem({ context, prop }) {
 				let value = null;
 				const highlightedValue = context.get("highlightedValue");
-				const collection$1 = prop("collection");
+				const collection = prop("collection");
 				if (highlightedValue) {
-					value = collection$1.getPreviousValue(highlightedValue);
-					if (!value && prop("loopFocus")) value = collection$1.lastValue;
-				} else value = collection$1.lastValue;
+					value = collection.getPreviousValue(highlightedValue);
+					if (!value && prop("loopFocus")) value = collection.lastValue;
+				} else value = collection.lastValue;
 				if (value) context.set("highlightedValue", value);
 			},
 			highlightFirstSelectedItem({ context, prop }) {
@@ -1470,18 +1470,18 @@ const machine = createMachine({
 			},
 			highlightLastOrSelectedItem({ context, prop, computed }) {
 				raf(() => {
-					const collection$1 = prop("collection");
+					const collection = prop("collection");
 					let value = null;
-					if (computed("hasSelectedItems")) value = collection$1.sort(context.get("value"))[0];
-					else value = collection$1.lastValue;
+					if (computed("hasSelectedItems")) value = collection.sort(context.get("value"))[0];
+					else value = collection.lastValue;
 					if (value) context.set("highlightedValue", value);
 				});
 			},
 			autofillInputValue({ context, computed, prop, event, scope }) {
 				const inputEl = getInputEl(scope);
-				const collection$1 = prop("collection");
+				const collection = prop("collection");
 				if (!computed("autoComplete") || !inputEl || !event.keypress) return;
-				const valueText = collection$1.stringify(context.get("highlightedValue"));
+				const valueText = collection.stringify(context.get("highlightedValue"));
 				raf(() => {
 					inputEl.value = valueText || context.get("inputValue");
 				});
@@ -1489,15 +1489,15 @@ const machine = createMachine({
 			syncSelectedItems(params) {
 				queueMicrotask(() => {
 					const { context, prop } = params;
-					const collection$1 = prop("collection");
+					const collection = prop("collection");
 					const value = context.get("value");
 					const selectedItems = value.map((v) => {
-						return context.get("selectedItems").find((item) => collection$1.getItemValue(item) === v) || collection$1.find(v);
+						return context.get("selectedItems").find((item) => collection.getItemValue(item) === v) || collection.find(v);
 					});
 					context.set("selectedItems", selectedItems);
 					const inputValue = match(prop("selectionBehavior"), {
 						preserve: context.get("inputValue"),
-						replace: collection$1.stringifyMany(value),
+						replace: collection.stringifyMany(value),
 						clear: ""
 					});
 					context.set("inputValue", inputValue);