@qw-ui/core 0.3.0-next.4 → 0.3.0-next.42

package/dist/dropdown/dropdown.d.ts

@@ -0,0 +1,172 @@
+import { type Machine, type Service } from "@zag-js/core";
+import type { NormalizeProps, PropTypes } from "@zag-js/types";
+import { type FloatingAlign, type FloatingLayout, type FloatingPlacement, type FloatingSide } from "../popover/positioning.js";
+import { type FloatingCloseRequest } from "../popover/layer.js";
+/** Stable DOM parts shared by every adapter. */
+export declare const DROPDOWN_PARTS: readonly ["trigger", "positioner", "content", "item"];
+export type DropdownPlacement = FloatingPlacement;
+export declare const DROPDOWN_DEFAULT_PLACEMENT: DropdownPlacement;
+/** Main-axis gap between the trigger and the menu in CSS px. */
+export declare const DROPDOWN_DEFAULT_OFFSET = 4;
+/** Characters typed within this many milliseconds extend the typeahead query. */
+export declare const DROPDOWN_TYPEAHEAD_TIMEOUT = 500;
+export declare const DROPDOWN_MOVES: readonly ["first", "last", "next", "prev"];
+export type DropdownMove = (typeof DROPDOWN_MOVES)[number];
+/** One text menu item. value is the exact selection notification; label is the visible and typeahead text. */
+export interface QwDropdownItem {
+    value: string;
+    label: string;
+    /** Visible and announced (aria-disabled) but skipped by roving focus and never selected. */
+    disabled?: boolean;
+    /** Destructive styling only; there is no second confirmation. */
+    danger?: boolean;
+}
+export interface QwResolvedDropdownItem {
+    readonly source: QwDropdownItem;
+    /** Position in the caller's items array; part of the item id. */
+    readonly index: number;
+    readonly value: string;
+    readonly label: string;
+    /** Disabled by the caller, or a later duplicate of an earlier value. */
+    readonly disabled: boolean;
+    readonly danger: boolean;
+    readonly duplicate: boolean;
+}
+/** keyboard: ArrowDown/ArrowUp on the trigger; tab / focus-outside: focus left the menu; select: an item was chosen. */
+export type DropdownOpenChangeReason = "trigger" | "keyboard" | "escape" | "outside" | "focus-outside" | "tab" | "select" | "api";
+export interface DropdownOpenChangeDetails {
+    open: boolean;
+    reason: DropdownOpenChangeReason;
+}
+export interface DropdownSelectDetails {
+    value: string;
+}
+export interface QwDropdownProps {
+    /** Page-unique instance identity; adapters generate one when omitted. */
+    id?: string;
+    /** Caller-owned menu items, never mutated; default []. */
+    items?: readonly QwDropdownItem[];
+    /** Controlled open state; undefined lets Core own it. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. */
+    defaultOpen?: boolean;
+    /** Every open/close request, controlled or not; controlled owners accept by updating open, or refuse by keeping it. */
+    onOpenChange?: (details: DropdownOpenChangeDetails) => void;
+    /** An enabled item was activated (click, Enter or Space); a close request (reason select) follows. */
+    onSelect?: (details: DropdownSelectDetails) => void;
+    /** Preferred placement (default bottom-start; unknown values use it); positioning is Popover's Core module. */
+    placement?: DropdownPlacement;
+    /** Main-axis gap in CSS px; default 4. */
+    offset?: number;
+    /** Accessible name of the menu; omitted names it by the trigger (aria-labelledby). */
+    label?: string;
+}
+export interface ResolvedDropdownState {
+    placement: DropdownPlacement;
+    offset: number;
+    label: string | undefined;
+}
+export declare function resolveDropdownState(props?: QwDropdownProps): ResolvedDropdownState;
+/** Keeps every item in order; a repeated value only keeps its first item enabled (a disabled first item does not promote a later one). */
+export declare function resolveDropdownItems(items: readonly QwDropdownItem[] | undefined): readonly QwResolvedDropdownItem[];
+/** Source index of the enabled item a move lands on, or -1 when nothing is enabled. next/prev wrap; from no highlight they start at the ends. */
+export declare function getDropdownMoveTarget(items: readonly QwResolvedDropdownItem[], current: string | null, move: DropdownMove): number;
+/**
+ * Explicit text match: the first enabled item, searching forward and wrapping, whose trimmed label starts
+ * with the query (locale lower case). A single or repeated character starts after the current item (so
+ * repeating it cycles); a longer query keeps the current item while it still matches. -1 when none matches.
+ */
+export declare function getDropdownTypeaheadTarget(items: readonly QwResolvedDropdownItem[], current: string | null, query: string): number;
+export declare function createDropdownProps(props?: QwDropdownProps): QwDropdownProps;
+type FocusIntent = "first" | "last";
+export interface QwDropdownSchema {
+    props: QwDropdownProps;
+    context: {
+        dismissReady: boolean;
+        layout: FloatingLayout | null;
+        highlighted: string | null;
+    };
+    refs: {
+        request: FloatingCloseRequest | null;
+        focus: FocusIntent | null;
+        typeahead: {
+            query: string;
+            at: number;
+        };
+        cancelFocus: (() => void) | null;
+    };
+    state: "open" | "closed";
+    guard: "isControlled";
+    action: "notifyOpen" | "notifyClose" | "restoreFocus" | "setLayout" | "dismissReady" | "clearLayout" | "syncControlled" | "highlight" | "move" | "typeahead" | "select" | "reconcile";
+    effect: "trackLayout" | "trackDismiss";
+    event: {
+        type: "DISMISS.READY";
+    } | {
+        type: "OPEN" | "TOGGLE";
+        reason?: DropdownOpenChangeReason;
+        focus?: FocusIntent;
+    } | {
+        type: "CLOSE";
+        reason?: DropdownOpenChangeReason;
+        focusable?: boolean;
+    } | {
+        type: "CONTROLLED.OPEN" | "CONTROLLED.CLOSE";
+    } | {
+        type: "LAYOUT";
+        layout: FloatingLayout;
+    } | {
+        type: "HIGHLIGHT";
+        value: string;
+    } | {
+        type: "MOVE";
+        to: DropdownMove;
+    } | {
+        type: "TYPEAHEAD";
+        key: string;
+    } | {
+        type: "SELECT";
+        index: number;
+        value: string;
+    };
+}
+export type QwDropdownMachine = Machine<QwDropdownSchema>;
+export type QwDropdownService = Service<QwDropdownSchema>;
+/**
+ * Core owns the menu: open/close with controlled refusal, Popover's positioning module while open, the
+ * shared non-modal layer (Escape, outside pointer, focus leaving), roving focus, typeahead, selection and
+ * focus return to the original trigger.
+ */
+export declare const dropdownMachine: QwDropdownMachine;
+/** Minimal event surfaces shared by React, Vue and native events. */
+export interface DropdownDomEvent {
+    readonly defaultPrevented: boolean;
+    preventDefault(): void;
+}
+export interface DropdownKeyboardEvent extends DropdownDomEvent {
+    readonly key: string;
+    readonly shiftKey?: boolean;
+    readonly altKey?: boolean;
+    readonly ctrlKey?: boolean;
+    readonly metaKey?: boolean;
+    readonly isComposing?: boolean;
+}
+export interface QwDropdownApi<T extends PropTypes = PropTypes> {
+    open: boolean;
+    /** The measured placement while open (after flipping), otherwise the preferred one. */
+    placement: DropdownPlacement;
+    side: FloatingSide;
+    align: FloatingAlign;
+    positioned: boolean;
+    items: readonly QwResolvedDropdownItem[];
+    /** Value of the item holding roving focus. */
+    highlighted: string | null;
+    /** Request a state; controlled owners decide through onOpenChange (reason api). */
+    setOpen(open: boolean): void;
+    /** Merge onto the caller's own trigger node (click toggles; ArrowDown/ArrowUp open on the first/last item); preventDefault() in its handlers skips Core. */
+    getTriggerProps(): T["element"];
+    getPositionerProps(): T["element"];
+    getContentProps(): T["element"];
+    getItemProps(item: QwResolvedDropdownItem): T["element"];
+}
+export declare function connectDropdown<T extends PropTypes>(service: QwDropdownService, normalize: NormalizeProps<T>): QwDropdownApi<T>;
+export {};

package/dist/dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./dropdown.js";
+export type { FloatingAlign, FloatingLayout, FloatingPlacement, FloatingSide } from "../popover/positioning.js";

package/dist/dropdown/index.js

@@ -0,0 +1,467 @@
+import { d as resolveFloatingPlacement, f as sameFloatingLayout, l as getFloatingPositionerStyle, m as trackFloatingLayout, n as restoreFloatingFocus, p as splitFloatingPlacement, r as trackFloatingDismiss, t as focusWhenReady } from "../layer-IpFrl5--.js";
+import { createMachine } from "@zag-js/core";
+//#region src/dropdown/dropdown.ts
+/** Stable DOM parts shared by every adapter. */
+const DROPDOWN_PARTS = [
+	"trigger",
+	"positioner",
+	"content",
+	"item"
+];
+const DROPDOWN_DEFAULT_PLACEMENT = "bottom-start";
+/** Main-axis gap between the trigger and the menu in CSS px. */
+const DROPDOWN_DEFAULT_OFFSET = 4;
+/** Characters typed within this many milliseconds extend the typeahead query. */
+const DROPDOWN_TYPEAHEAD_TIMEOUT = 500;
+const DROPDOWN_MOVES = [
+	"first",
+	"last",
+	"next",
+	"prev"
+];
+const text = (value) => typeof value === "string" && value.trim() ? value.trim() : void 0;
+function resolveDropdownState(props = {}) {
+	return {
+		placement: resolveFloatingPlacement(props.placement, DROPDOWN_DEFAULT_PLACEMENT),
+		offset: typeof props.offset === "number" && Number.isFinite(props.offset) ? props.offset : 4,
+		label: text(props.label)
+	};
+}
+/** Keeps every item in order; a repeated value only keeps its first item enabled (a disabled first item does not promote a later one). */
+function resolveDropdownItems(items) {
+	const seen = /* @__PURE__ */ new Set();
+	return (Array.isArray(items) ? items : []).map((source, index) => {
+		const value = String(source?.value ?? ""), duplicate = seen.has(value);
+		seen.add(value);
+		return {
+			source,
+			index,
+			value,
+			label: String(source?.label ?? ""),
+			disabled: source?.disabled === true || duplicate,
+			danger: source?.danger === true,
+			duplicate
+		};
+	});
+}
+/** Source index of the enabled item a move lands on, or -1 when nothing is enabled. next/prev wrap; from no highlight they start at the ends. */
+function getDropdownMoveTarget(items, current, move) {
+	const enabled = items.filter((item) => !item.disabled);
+	if (!enabled.length) return -1;
+	const at = enabled.findIndex((item) => item.value === current), last = enabled.length - 1;
+	return enabled[move === "first" ? 0 : move === "last" ? last : move === "next" ? at < 0 || at === last ? 0 : at + 1 : at <= 0 ? last : at - 1].index;
+}
+/**
+* Explicit text match: the first enabled item, searching forward and wrapping, whose trimmed label starts
+* with the query (locale lower case). A single or repeated character starts after the current item (so
+* repeating it cycles); a longer query keeps the current item while it still matches. -1 when none matches.
+*/
+function getDropdownTypeaheadTarget(items, current, query) {
+	const search = query.toLocaleLowerCase();
+	if (!search) return -1;
+	const repeated = [...search].every((char) => char === search[0]), needle = repeated ? search[0] : search;
+	const enabled = items.filter((item) => !item.disabled);
+	const at = enabled.findIndex((item) => item.value === current), start = at < 0 ? 0 : repeated ? at + 1 : at;
+	for (let step = 0; step < enabled.length; step += 1) {
+		const item = enabled[(start + step) % enabled.length];
+		if (item.label.trim().toLocaleLowerCase().startsWith(needle)) return item.index;
+	}
+	return -1;
+}
+function createDropdownProps(props = {}) {
+	if (props.id !== void 0 && (typeof props.id !== "string" || !props.id.trim())) throw new TypeError("Dropdown requires a nonempty instance id when provided");
+	return { ...props };
+}
+const ids = (scope) => {
+	const base = `dropdown:${scope.id}`;
+	return {
+		trigger: `${base}:trigger`,
+		positioner: `${base}:positioner`,
+		content: `${base}:content`,
+		item: (index) => `${base}:item:${index}`
+	};
+};
+const live = (prop) => resolveDropdownState({
+	placement: prop("placement"),
+	offset: prop("offset"),
+	label: prop("label")
+});
+const reasonOf = (event) => typeof event.reason === "string" ? event.reason : "api";
+/** Primitive signature for zag's tracker: value, order and enabled state of every item. */
+const signature = (items) => resolveDropdownItems(items).map((item) => `${item.disabled ? 0 : 1}${item.value}`).join("\0");
+/** Roving focus: real DOM focus on the item (scrolled into the menu's view), or the menu itself when nothing is enabled. */
+function focusItem(scope, context, items, index) {
+	const id = ids(scope), item = items[index];
+	if (!item) {
+		scope.getById(id.content)?.focus({ preventScroll: true });
+		return;
+	}
+	context.set("highlighted", item.value);
+	const node = scope.getById(id.item(index));
+	node?.focus({ preventScroll: true });
+	node?.scrollIntoView?.({ block: "nearest" });
+}
+/**
+* Core owns the menu: open/close with controlled refusal, Popover's positioning module while open, the
+* shared non-modal layer (Escape, outside pointer, focus leaving), roving focus, typeahead, selection and
+* focus return to the original trigger.
+*/
+const dropdownMachine = createMachine({
+	props: ({ props }) => createDropdownProps(props),
+	initialState: ({ prop }) => prop("open") ?? prop("defaultOpen") ? "open" : "closed",
+	context: ({ bindable }) => ({
+		dismissReady: bindable(() => ({ defaultValue: false })),
+		layout: bindable(() => ({
+			defaultValue: null,
+			isEqual: sameFloatingLayout
+		})),
+		highlighted: bindable(() => ({ defaultValue: null }))
+	}),
+	refs: () => ({
+		request: null,
+		focus: null,
+		typeahead: {
+			query: "",
+			at: 0
+		},
+		cancelFocus: null
+	}),
+	watch({ track, prop, action }) {
+		track([() => prop("open")], () => action(["syncControlled"]));
+		track([() => signature(prop("items"))], () => action(["reconcile"]));
+	},
+	states: {
+		closed: { on: {
+			"CONTROLLED.OPEN": { target: "open" },
+			OPEN: [{
+				guard: "isControlled",
+				actions: ["notifyOpen"]
+			}, {
+				target: "open",
+				actions: ["notifyOpen"]
+			}],
+			TOGGLE: [{
+				guard: "isControlled",
+				actions: ["notifyOpen"]
+			}, {
+				target: "open",
+				actions: ["notifyOpen"]
+			}]
+		} },
+		open: {
+			effects: ["trackLayout", "trackDismiss"],
+			exit: ["clearLayout"],
+			on: {
+				"CONTROLLED.CLOSE": {
+					target: "closed",
+					actions: ["restoreFocus"]
+				},
+				CLOSE: [{
+					guard: "isControlled",
+					actions: ["notifyClose"]
+				}, {
+					target: "closed",
+					actions: ["notifyClose", "restoreFocus"]
+				}],
+				TOGGLE: [{
+					guard: "isControlled",
+					actions: ["notifyClose"]
+				}, {
+					target: "closed",
+					actions: ["notifyClose", "restoreFocus"]
+				}],
+				LAYOUT: { actions: ["setLayout"] },
+				"DISMISS.READY": { actions: ["dismissReady"] },
+				HIGHLIGHT: { actions: ["highlight"] },
+				MOVE: { actions: ["move"] },
+				TYPEAHEAD: { actions: ["typeahead"] },
+				SELECT: { actions: ["select"] }
+			}
+		}
+	},
+	implementations: {
+		guards: { isControlled: ({ prop }) => prop("open") !== void 0 },
+		actions: {
+			notifyOpen({ prop, event, refs }) {
+				refs.set("request", null);
+				refs.set("focus", event.focus === "last" ? "last" : event.focus === "first" ? "first" : null);
+				prop("onOpenChange")?.({
+					open: true,
+					reason: reasonOf(event)
+				});
+			},
+			notifyClose({ prop, event, refs }) {
+				const reason = reasonOf(event);
+				refs.set("request", {
+					reason,
+					focusable: event.focusable === true
+				});
+				prop("onOpenChange")?.({
+					open: false,
+					reason
+				});
+			},
+			restoreFocus({ scope, refs }) {
+				const request = refs.get("request") ?? {
+					reason: "api",
+					focusable: false
+				}, id = ids(scope);
+				refs.set("request", null);
+				refs.set("focus", null);
+				restoreFloatingFocus(scope.getDoc(), scope.getById(id.trigger), scope.getById(id.content), request);
+			},
+			setLayout({ context, event, refs, scope, prop }) {
+				if (event.type !== "LAYOUT") return;
+				context.set("layout", event.layout);
+				const intent = refs.get("focus");
+				if (!intent) return;
+				refs.set("focus", null);
+				const items = resolveDropdownItems(prop("items")), index = getDropdownMoveTarget(items, null, intent), id = ids(scope);
+				if (index >= 0) context.set("highlighted", items[index].value);
+				refs.get("cancelFocus")?.();
+				refs.set("cancelFocus", focusWhenReady(scope.getDoc(), () => scope.getById(index >= 0 ? id.item(index) : id.content)));
+			},
+			dismissReady({ context }) {
+				context.set("dismissReady", true);
+			},
+			clearLayout({ context, refs }) {
+				context.set("dismissReady", false);
+				refs.get("cancelFocus")?.();
+				refs.set("cancelFocus", null);
+				refs.set("typeahead", {
+					query: "",
+					at: 0
+				});
+				context.set("layout", null);
+				context.set("highlighted", null);
+			},
+			syncControlled({ prop, send }) {
+				const open = prop("open");
+				if (open !== void 0) send({ type: open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE" });
+			},
+			highlight({ context, event, prop }) {
+				if (event.type !== "HIGHLIGHT") return;
+				const item = resolveDropdownItems(prop("items")).find((entry) => entry.value === event.value && !entry.disabled);
+				if (item && context.get("highlighted") !== item.value) context.set("highlighted", item.value);
+			},
+			move({ context, event, prop, scope }) {
+				if (event.type !== "MOVE") return;
+				const items = resolveDropdownItems(prop("items"));
+				focusItem(scope, context, items, getDropdownMoveTarget(items, context.get("highlighted"), event.to));
+			},
+			typeahead({ context, event, prop, refs, scope }) {
+				if (event.type !== "TYPEAHEAD") return;
+				const now = Date.now(), previous = refs.get("typeahead");
+				const query = now - previous.at > 500 ? event.key : previous.query + event.key;
+				refs.set("typeahead", {
+					query,
+					at: now
+				});
+				const items = resolveDropdownItems(prop("items")), index = getDropdownTypeaheadTarget(items, context.get("highlighted"), query);
+				if (index >= 0) focusItem(scope, context, items, index);
+			},
+			select({ event, prop, send }) {
+				if (event.type !== "SELECT") return;
+				const item = resolveDropdownItems(prop("items"))[event.index];
+				if (!item || item.disabled || item.value !== event.value) return;
+				prop("onSelect")?.({ value: item.value });
+				send({
+					type: "CLOSE",
+					reason: "select"
+				});
+			},
+			reconcile({ context, prop, scope, state }) {
+				const value = context.get("highlighted");
+				if (!state.matches("open") || value === null) return;
+				if (resolveDropdownItems(prop("items")).some((item) => item.value === value && !item.disabled)) return;
+				context.set("highlighted", null);
+				const doc = scope.getDoc(), id = ids(scope);
+				const keep = () => {
+					const content = scope.getById(id.content), active = doc.activeElement;
+					if (content && (!active || active === doc.body || active.getAttribute("aria-disabled") === "true")) content.focus({ preventScroll: true });
+				};
+				const win = doc.defaultView;
+				if (win) win.requestAnimationFrame(keep);
+				else keep();
+			}
+		},
+		effects: {
+			trackLayout({ scope, prop, send }) {
+				const id = ids(scope);
+				return trackFloatingLayout(scope.getDoc(), {
+					anchor: () => scope.getById(id.trigger),
+					positioner: () => scope.getById(id.positioner),
+					content: () => scope.getById(id.content),
+					arrow: () => null,
+					placement: () => live(prop).placement,
+					offset: () => live(prop).offset,
+					fallback: DROPDOWN_DEFAULT_PLACEMENT,
+					onLayout: (layout) => send({
+						type: "LAYOUT",
+						layout
+					})
+				});
+			},
+			trackDismiss({ scope, send }) {
+				const id = ids(scope);
+				return trackFloatingDismiss(scope.getDoc(), {
+					onReady: () => send({ type: "DISMISS.READY" }),
+					type: "menu",
+					content: () => scope.getById(id.content),
+					trigger: () => scope.getById(id.trigger),
+					closeOnEscape: () => true,
+					closeOnOutside: () => true,
+					closeOnFocusOutside: () => true,
+					onDismiss: (request) => send({
+						type: "CLOSE",
+						reason: request.reason,
+						focusable: request.focusable
+					})
+				});
+			}
+		}
+	}
+});
+const CONTENT_MOVES = {
+	ArrowDown: "next",
+	ArrowUp: "prev",
+	Home: "first",
+	End: "last"
+};
+function connectDropdown(service, normalize) {
+	const state = live(service.prop), id = ids(service.scope), open = service.state.matches("open");
+	const layout = open && service.context.get("dismissReady") ? service.context.get("layout") : null, highlighted = open ? service.context.get("highlighted") : null;
+	const items = resolveDropdownItems(service.prop("items"));
+	const placement = layout?.placement ?? state.placement, { side, align } = layout ?? splitFloatingPlacement(state.placement);
+	const part = (name) => ({
+		"data-scope": "dropdown",
+		"data-part": name
+	});
+	const select = (item) => service.send({
+		type: "SELECT",
+		index: item.index,
+		value: item.value
+	});
+	return {
+		open,
+		placement,
+		side,
+		align,
+		positioned: !!layout,
+		items,
+		highlighted,
+		setOpen(next) {
+			if (next !== open) service.send({
+				type: next ? "OPEN" : "CLOSE",
+				reason: "api"
+			});
+		},
+		getTriggerProps: () => normalize.element({
+			...part("trigger"),
+			id: id.trigger,
+			"aria-haspopup": "menu",
+			"aria-expanded": open,
+			"aria-controls": id.content,
+			"data-state": open ? "open" : "closed",
+			onClick(event) {
+				if (!event.defaultPrevented) service.send({
+					type: "TOGGLE",
+					reason: "trigger",
+					focus: "first"
+				});
+			},
+			onKeyDown(event) {
+				const focus = event.key === "ArrowDown" ? "first" : event.key === "ArrowUp" ? "last" : null;
+				if (event.defaultPrevented || !focus) return;
+				event.preventDefault();
+				if (open) service.send({
+					type: "MOVE",
+					to: focus
+				});
+				else service.send({
+					type: "OPEN",
+					reason: "keyboard",
+					focus
+				});
+			}
+		}),
+		getPositionerProps: () => normalize.element({
+			...part("positioner"),
+			id: id.positioner,
+			"data-placement": placement,
+			"data-side": side,
+			"data-align": align,
+			"data-positioned": layout ? "" : void 0,
+			style: getFloatingPositionerStyle(layout)
+		}),
+		getContentProps: () => normalize.element({
+			...part("content"),
+			id: id.content,
+			role: "menu",
+			tabIndex: -1,
+			"aria-label": state.label,
+			"aria-labelledby": state.label ? void 0 : id.trigger,
+			"data-state": open ? "open" : "closed",
+			"data-side": side,
+			"data-empty": items.length ? void 0 : "",
+			onKeyDown(event) {
+				if (event.defaultPrevented || event.isComposing) return;
+				const key = event.key, move = CONTENT_MOVES[key];
+				if (move) {
+					event.preventDefault();
+					service.send({
+						type: "MOVE",
+						to: move
+					});
+					return;
+				}
+				if (key === "Enter" || key === " ") {
+					event.preventDefault();
+					const current = service.context.get("highlighted"), item = items.find((entry) => entry.value === current && !entry.disabled);
+					if (item) select(item);
+					return;
+				}
+				if (key === "Tab") {
+					service.scope.getById(id.trigger)?.focus({ preventScroll: true });
+					if (event.shiftKey) event.preventDefault();
+					service.send({
+						type: "CLOSE",
+						reason: "tab"
+					});
+					return;
+				}
+				if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+					event.preventDefault();
+					service.send({
+						type: "TYPEAHEAD",
+						key
+					});
+				}
+			}
+		}),
+		getItemProps: (item) => normalize.element({
+			...part("item"),
+			id: id.item(item.index),
+			role: "menuitem",
+			tabIndex: item.disabled ? void 0 : -1,
+			"aria-disabled": item.disabled ? "true" : void 0,
+			"data-value": item.value,
+			"data-disabled": item.disabled ? "" : void 0,
+			"data-danger": item.danger ? "" : void 0,
+			"data-highlighted": !item.disabled && highlighted === item.value ? "" : void 0,
+			onClick(event) {
+				if (!event.defaultPrevented && !item.disabled) select(item);
+			},
+			onFocus() {
+				if (!item.disabled) service.send({
+					type: "HIGHLIGHT",
+					value: item.value
+				});
+			}
+		})
+	};
+}
+//#endregion
+export { DROPDOWN_DEFAULT_OFFSET, DROPDOWN_DEFAULT_PLACEMENT, DROPDOWN_MOVES, DROPDOWN_PARTS, DROPDOWN_TYPEAHEAD_TIMEOUT, connectDropdown, createDropdownProps, dropdownMachine, getDropdownMoveTarget, getDropdownTypeaheadTarget, resolveDropdownItems, resolveDropdownState };
+
+//# sourceMappingURL=index.js.map