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

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

package/dist/dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/dropdown/dropdown.ts"],"sourcesContent":["import { createMachine, type Machine, type Service } from \"@zag-js/core\";\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\";\nimport {\n  getFloatingPositionerStyle, resolveFloatingPlacement, sameFloatingLayout, splitFloatingPlacement, trackFloatingLayout,\n  type FloatingAlign, type FloatingLayout, type FloatingPlacement, type FloatingSide,\n} from \"../popover/positioning.js\";\nimport { focusWhenReady, restoreFloatingFocus, trackFloatingDismiss, type FloatingCloseRequest } from \"../popover/layer.js\";\n\n/** Stable DOM parts shared by every adapter. */\nexport const DROPDOWN_PARTS = [\"trigger\", \"positioner\", \"content\", \"item\"] as const;\nexport type DropdownPlacement = FloatingPlacement;\nexport const DROPDOWN_DEFAULT_PLACEMENT: DropdownPlacement = \"bottom-start\";\n/** Main-axis gap between the trigger and the menu in CSS px. */\nexport const DROPDOWN_DEFAULT_OFFSET = 4;\n/** Characters typed within this many milliseconds extend the typeahead query. */\nexport const DROPDOWN_TYPEAHEAD_TIMEOUT = 500;\nexport const DROPDOWN_MOVES = [\"first\", \"last\", \"next\", \"prev\"] as const;\nexport type DropdownMove = (typeof DROPDOWN_MOVES)[number];\n\n/** One text menu item. value is the exact selection notification; label is the visible and typeahead text. */\nexport interface QwDropdownItem {\n  value: string;\n  label: string;\n  /** Visible and announced (aria-disabled) but skipped by roving focus and never selected. */\n  disabled?: boolean;\n  /** Destructive styling only; there is no second confirmation. */\n  danger?: boolean;\n}\nexport interface QwResolvedDropdownItem {\n  readonly source: QwDropdownItem;\n  /** Position in the caller's items array; part of the item id. */\n  readonly index: number;\n  readonly value: string;\n  readonly label: string;\n  /** Disabled by the caller, or a later duplicate of an earlier value. */\n  readonly disabled: boolean;\n  readonly danger: boolean;\n  readonly duplicate: boolean;\n}\n/** keyboard: ArrowDown/ArrowUp on the trigger; tab / focus-outside: focus left the menu; select: an item was chosen. */\nexport type DropdownOpenChangeReason = \"trigger\" | \"keyboard\" | \"escape\" | \"outside\" | \"focus-outside\" | \"tab\" | \"select\" | \"api\";\nexport interface DropdownOpenChangeDetails { open: boolean; reason: DropdownOpenChangeReason }\nexport interface DropdownSelectDetails { value: string }\n\nexport interface QwDropdownProps {\n  /** Page-unique instance identity; adapters generate one when omitted. */\n  id?: string;\n  /** Caller-owned menu items, never mutated; default []. */\n  items?: readonly QwDropdownItem[];\n  /** Controlled open state; undefined lets Core own it. */\n  open?: boolean;\n  /** Initial open state when uncontrolled. */\n  defaultOpen?: boolean;\n  /** Every open/close request, controlled or not; controlled owners accept by updating open, or refuse by keeping it. */\n  onOpenChange?: (details: DropdownOpenChangeDetails) => void;\n  /** An enabled item was activated (click, Enter or Space); a close request (reason select) follows. */\n  onSelect?: (details: DropdownSelectDetails) => void;\n  /** Preferred placement (default bottom-start; unknown values use it); positioning is Popover's Core module. */\n  placement?: DropdownPlacement;\n  /** Main-axis gap in CSS px; default 4. */\n  offset?: number;\n  /** Accessible name of the menu; omitted names it by the trigger (aria-labelledby). */\n  label?: string;\n}\nexport interface ResolvedDropdownState { placement: DropdownPlacement; offset: number; label: string | undefined }\nconst text = (value: unknown): string | undefined => typeof value === \"string\" && value.trim() ? value.trim() : undefined;\nexport function resolveDropdownState(props: QwDropdownProps = {}): ResolvedDropdownState {\n  return {\n    placement: resolveFloatingPlacement(props.placement, DROPDOWN_DEFAULT_PLACEMENT),\n    offset: typeof props.offset === \"number\" && Number.isFinite(props.offset) ? props.offset : DROPDOWN_DEFAULT_OFFSET,\n    label: text(props.label),\n  };\n}\n/** Keeps every item in order; a repeated value only keeps its first item enabled (a disabled first item does not promote a later one). */\nexport function resolveDropdownItems(items: readonly QwDropdownItem[] | undefined): readonly QwResolvedDropdownItem[] {\n  const seen = new Set<string>();\n  return (Array.isArray(items) ? items : []).map((source: QwDropdownItem, index) => {\n    const value = String(source?.value ?? \"\"), duplicate = seen.has(value);\n    seen.add(value);\n    return { source, index, value, label: String(source?.label ?? \"\"), disabled: source?.disabled === true || duplicate, danger: source?.danger === true, duplicate };\n  });\n}\n/** 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. */\nexport function getDropdownMoveTarget(items: readonly QwResolvedDropdownItem[], current: string | null, move: DropdownMove): number {\n  const enabled = items.filter((item) => !item.disabled);\n  if (!enabled.length) return -1;\n  const at = enabled.findIndex((item) => item.value === current), last = enabled.length - 1;\n  const position = move === \"first\" ? 0 : move === \"last\" ? last\n    : move === \"next\" ? (at < 0 || at === last ? 0 : at + 1)\n      : (at <= 0 ? last : at - 1);\n  return enabled[position]!.index;\n}\n/**\n * Explicit text match: the first enabled item, searching forward and wrapping, whose trimmed label starts\n * with the query (locale lower case). A single or repeated character starts after the current item (so\n * repeating it cycles); a longer query keeps the current item while it still matches. -1 when none matches.\n */\nexport function getDropdownTypeaheadTarget(items: readonly QwResolvedDropdownItem[], current: string | null, query: string): number {\n  const search = query.toLocaleLowerCase();\n  if (!search) return -1;\n  const repeated = [...search].every((char) => char === search[0]), needle = repeated ? search[0]! : search;\n  const enabled = items.filter((item) => !item.disabled);\n  const at = enabled.findIndex((item) => item.value === current), start = at < 0 ? 0 : repeated ? at + 1 : at;\n  for (let step = 0; step < enabled.length; step += 1) {\n    const item = enabled[(start + step) % enabled.length]!;\n    if (item.label.trim().toLocaleLowerCase().startsWith(needle)) return item.index;\n  }\n  return -1;\n}\nexport function createDropdownProps(props: QwDropdownProps = {}): QwDropdownProps {\n  if (props.id !== undefined && (typeof props.id !== \"string\" || !props.id.trim())) throw new TypeError(\"Dropdown requires a nonempty instance id when provided\");\n  return { ...props };\n}\n\ntype FocusIntent = \"first\" | \"last\";\nexport interface QwDropdownSchema {\n  props: QwDropdownProps;\n  context: { dismissReady: boolean; layout: FloatingLayout | null; highlighted: string | null };\n  refs: { request: FloatingCloseRequest | null; focus: FocusIntent | null; typeahead: { query: string; at: number }; cancelFocus: (() => void) | null };\n  state: \"open\" | \"closed\";\n  guard: \"isControlled\";\n  action: \"notifyOpen\" | \"notifyClose\" | \"restoreFocus\" | \"setLayout\" | \"dismissReady\" | \"clearLayout\" | \"syncControlled\" | \"highlight\" | \"move\" | \"typeahead\" | \"select\" | \"reconcile\";\n  effect: \"trackLayout\" | \"trackDismiss\";\n  event:\n    | { type: \"DISMISS.READY\" }\n    | { type: \"OPEN\" | \"TOGGLE\"; reason?: DropdownOpenChangeReason; focus?: FocusIntent }\n    | { type: \"CLOSE\"; reason?: DropdownOpenChangeReason; focusable?: boolean }\n    | { type: \"CONTROLLED.OPEN\" | \"CONTROLLED.CLOSE\" }\n    | { type: \"LAYOUT\"; layout: FloatingLayout }\n    | { type: \"HIGHLIGHT\"; value: string }\n    | { type: \"MOVE\"; to: DropdownMove }\n    | { type: \"TYPEAHEAD\"; key: string }\n    | { type: \"SELECT\"; index: number; value: string };\n}\nexport type QwDropdownMachine = Machine<QwDropdownSchema>;\nexport type QwDropdownService = Service<QwDropdownSchema>;\ntype Scope = QwDropdownService[\"scope\"];\ntype Context = QwDropdownService[\"context\"];\nconst ids = (scope: Scope) => {\n  const base = `dropdown:${scope.id}`;\n  return { trigger: `${base}:trigger`, positioner: `${base}:positioner`, content: `${base}:content`, item: (index: number) => `${base}:item:${index}` };\n};\nconst live = (prop: QwDropdownService[\"prop\"]) => resolveDropdownState({ placement: prop(\"placement\"), offset: prop(\"offset\"), label: prop(\"label\") });\nconst reasonOf = (event: { readonly [key: string]: unknown }): DropdownOpenChangeReason => typeof event.reason === \"string\" ? event.reason as DropdownOpenChangeReason : \"api\";\n/** Primitive signature for zag's tracker: value, order and enabled state of every item. */\nconst signature = (items: readonly QwDropdownItem[] | undefined) => resolveDropdownItems(items).map((item) => `${item.disabled ? 0 : 1}${item.value}`).join(\"\\u0000\");\n/** Roving focus: real DOM focus on the item (scrolled into the menu's view), or the menu itself when nothing is enabled. */\nfunction focusItem(scope: Scope, context: Context, items: readonly QwResolvedDropdownItem[], index: number): void {\n  const id = ids(scope), item = items[index];\n  if (!item) { scope.getById(id.content)?.focus({ preventScroll: true }); return; }\n  context.set(\"highlighted\", item.value);\n  const node = scope.getById(id.item(index));\n  node?.focus({ preventScroll: true });\n  node?.scrollIntoView?.({ block: \"nearest\" });\n}\n\n/**\n * Core owns the menu: open/close with controlled refusal, Popover's positioning module while open, the\n * shared non-modal layer (Escape, outside pointer, focus leaving), roving focus, typeahead, selection and\n * focus return to the original trigger.\n */\nexport const dropdownMachine: QwDropdownMachine = createMachine<QwDropdownSchema>({\n  props: ({ props }) => createDropdownProps(props),\n  initialState: ({ prop }) => (prop(\"open\") ?? prop(\"defaultOpen\")) ? \"open\" : \"closed\",\n  context: ({ bindable }) => ({ dismissReady: bindable(() => ({ defaultValue: false })),\n    layout: bindable<FloatingLayout | null>(() => ({ defaultValue: null, isEqual: sameFloatingLayout })),\n    highlighted: bindable<string | null>(() => ({ defaultValue: null })),\n  }),\n  refs: () => ({ request: null, focus: null, typeahead: { query: \"\", at: 0 }, cancelFocus: null }),\n  watch({ track, prop, action }) {\n    track([() => prop(\"open\")], () => action([\"syncControlled\"]));\n    track([() => signature(prop(\"items\"))], () => action([\"reconcile\"]));\n  },\n  states: {\n    closed: {\n      on: {\n        \"CONTROLLED.OPEN\": { target: \"open\" },\n        OPEN: [{ guard: \"isControlled\", actions: [\"notifyOpen\"] }, { target: \"open\", actions: [\"notifyOpen\"] }],\n        TOGGLE: [{ guard: \"isControlled\", actions: [\"notifyOpen\"] }, { target: \"open\", actions: [\"notifyOpen\"] }],\n      },\n    },\n    open: {\n      effects: [\"trackLayout\", \"trackDismiss\"],\n      exit: [\"clearLayout\"],\n      on: {\n        \"CONTROLLED.CLOSE\": { target: \"closed\", actions: [\"restoreFocus\"] },\n        CLOSE: [{ guard: \"isControlled\", actions: [\"notifyClose\"] }, { target: \"closed\", actions: [\"notifyClose\", \"restoreFocus\"] }],\n        TOGGLE: [{ guard: \"isControlled\", actions: [\"notifyClose\"] }, { target: \"closed\", actions: [\"notifyClose\", \"restoreFocus\"] }],\n        LAYOUT: { actions: [\"setLayout\"] },\n        \"DISMISS.READY\": { actions: [\"dismissReady\"] },\n        HIGHLIGHT: { actions: [\"highlight\"] },\n        MOVE: { actions: [\"move\"] },\n        TYPEAHEAD: { actions: [\"typeahead\"] },\n        SELECT: { actions: [\"select\"] },\n      },\n    },\n  },\n  implementations: {\n    guards: { isControlled: ({ prop }) => prop(\"open\") !== undefined },\n    actions: {\n      notifyOpen({ prop, event, refs }) {\n        refs.set(\"request\", null);\n        refs.set(\"focus\", event.focus === \"last\" ? \"last\" : event.focus === \"first\" ? \"first\" : null);\n        prop(\"onOpenChange\")?.({ open: true, reason: reasonOf(event) });\n      },\n      notifyClose({ prop, event, refs }) {\n        const reason = reasonOf(event);\n        refs.set(\"request\", { reason, focusable: event.focusable === true });\n        prop(\"onOpenChange\")?.({ open: false, reason });\n      },\n      // Runs while the menu is still in the DOM: focus moves before the items unmount.\n      restoreFocus({ scope, refs }) {\n        const request = refs.get(\"request\") ?? { reason: \"api\", focusable: false }, id = ids(scope);\n        refs.set(\"request\", null);\n        refs.set(\"focus\", null);\n        restoreFloatingFocus(scope.getDoc(), scope.getById(id.trigger), scope.getById(id.content), request);\n      },\n      // The first layout makes the menu visible; a requested open then moves focus into it.\n      setLayout({ context, event, refs, scope, prop }) {\n        if (event.type !== \"LAYOUT\") return;\n        context.set(\"layout\", event.layout);\n        const intent = refs.get(\"focus\");\n        if (!intent) return;\n        refs.set(\"focus\", null);\n        const items = resolveDropdownItems(prop(\"items\")), index = getDropdownMoveTarget(items, null, intent), id = ids(scope);\n        if (index >= 0) context.set(\"highlighted\", items[index]!.value);\n        refs.get(\"cancelFocus\")?.();\n        refs.set(\"cancelFocus\", focusWhenReady(scope.getDoc(), () => scope.getById(index >= 0 ? id.item(index) : id.content)));\n      },\n      dismissReady({ context }) { context.set(\"dismissReady\", true); },\n      clearLayout({ context, refs }) {\n        context.set(\"dismissReady\", false);\n        refs.get(\"cancelFocus\")?.();\n        refs.set(\"cancelFocus\", null);\n        refs.set(\"typeahead\", { query: \"\", at: 0 });\n        context.set(\"layout\", null);\n        context.set(\"highlighted\", null);\n      },\n      syncControlled({ prop, send }) {\n        const open = prop(\"open\");\n        if (open !== undefined) send({ type: open ? \"CONTROLLED.OPEN\" : \"CONTROLLED.CLOSE\" });\n      },\n      highlight({ context, event, prop }) {\n        if (event.type !== \"HIGHLIGHT\") return;\n        const item = resolveDropdownItems(prop(\"items\")).find((entry) => entry.value === event.value && !entry.disabled);\n        if (item && context.get(\"highlighted\") !== item.value) context.set(\"highlighted\", item.value);\n      },\n      move({ context, event, prop, scope }) {\n        if (event.type !== \"MOVE\") return;\n        const items = resolveDropdownItems(prop(\"items\"));\n        focusItem(scope, context, items, getDropdownMoveTarget(items, context.get(\"highlighted\"), event.to));\n      },\n      typeahead({ context, event, prop, refs, scope }) {\n        if (event.type !== \"TYPEAHEAD\") return;\n        const now = Date.now(), previous = refs.get(\"typeahead\");\n        const query = now - previous.at > DROPDOWN_TYPEAHEAD_TIMEOUT ? event.key : previous.query + event.key;\n        refs.set(\"typeahead\", { query, at: now });\n        const items = resolveDropdownItems(prop(\"items\")), index = getDropdownTypeaheadTarget(items, context.get(\"highlighted\"), query);\n        if (index >= 0) focusItem(scope, context, items, index);\n      },\n      // Re-validated against the latest items: a removed, replaced, disabled or duplicated item is never selected.\n      select({ event, prop, send }) {\n        if (event.type !== \"SELECT\") return;\n        const item = resolveDropdownItems(prop(\"items\"))[event.index];\n        if (!item || item.disabled || item.value !== event.value) return;\n        prop(\"onSelect\")?.({ value: item.value });\n        send({ type: \"CLOSE\", reason: \"select\" });\n      },\n      // Items changed while open: a highlight that is gone or disabled is dropped, keeping focus inside the menu.\n      reconcile({ context, prop, scope, state }) {\n        const value = context.get(\"highlighted\");\n        if (!state.matches(\"open\") || value === null) return;\n        if (resolveDropdownItems(prop(\"items\")).some((item) => item.value === value && !item.disabled)) return;\n        context.set(\"highlighted\", null);\n        const doc = scope.getDoc(), id = ids(scope);\n        const keep = () => {\n          const content = scope.getById(id.content), active = doc.activeElement;\n          if (content && (!active || active === doc.body || active.getAttribute(\"aria-disabled\") === \"true\")) content.focus({ preventScroll: true });\n        };\n        const win = doc.defaultView;\n        if (win) win.requestAnimationFrame(keep); else keep();\n      },\n    },\n    effects: {\n      trackLayout({ scope, prop, send }) {\n        const id = ids(scope);\n        return trackFloatingLayout(scope.getDoc(), {\n          anchor: () => scope.getById(id.trigger), positioner: () => scope.getById(id.positioner), content: () => scope.getById(id.content), arrow: () => null,\n          placement: () => live(prop).placement, offset: () => live(prop).offset, fallback: DROPDOWN_DEFAULT_PLACEMENT,\n          onLayout: (layout) => send({ type: \"LAYOUT\", layout }),\n        });\n      },\n      trackDismiss({ scope, send }) {\n        const id = ids(scope);\n        return trackFloatingDismiss(scope.getDoc(), {\n          onReady: () => send({ type: \"DISMISS.READY\" }),\n          type: \"menu\", content: () => scope.getById(id.content), trigger: () => scope.getById(id.trigger),\n          closeOnEscape: () => true, closeOnOutside: () => true, closeOnFocusOutside: () => true,\n          onDismiss: (request) => send({ type: \"CLOSE\", reason: request.reason, focusable: request.focusable }),\n        });\n      },\n    },\n  },\n});\n\n/** Minimal event surfaces shared by React, Vue and native events. */\nexport interface DropdownDomEvent { readonly defaultPrevented: boolean; preventDefault(): void }\nexport interface DropdownKeyboardEvent extends DropdownDomEvent {\n  readonly key: string;\n  readonly shiftKey?: boolean;\n  readonly altKey?: boolean;\n  readonly ctrlKey?: boolean;\n  readonly metaKey?: boolean;\n  readonly isComposing?: boolean;\n}\nconst CONTENT_MOVES: Readonly<Record<string, DropdownMove>> = { ArrowDown: \"next\", ArrowUp: \"prev\", Home: \"first\", End: \"last\" };\n\nexport interface QwDropdownApi<T extends PropTypes = PropTypes> {\n  open: boolean;\n  /** The measured placement while open (after flipping), otherwise the preferred one. */\n  placement: DropdownPlacement;\n  side: FloatingSide;\n  align: FloatingAlign;\n  positioned: boolean;\n  items: readonly QwResolvedDropdownItem[];\n  /** Value of the item holding roving focus. */\n  highlighted: string | null;\n  /** Request a state; controlled owners decide through onOpenChange (reason api). */\n  setOpen(open: boolean): void;\n  /** Merge onto the caller's own trigger node (click toggles; ArrowDown/ArrowUp open on the first/last item); preventDefault() in its handlers skips Core. */\n  getTriggerProps(): T[\"element\"];\n  getPositionerProps(): T[\"element\"];\n  getContentProps(): T[\"element\"];\n  getItemProps(item: QwResolvedDropdownItem): T[\"element\"];\n}\nexport function connectDropdown<T extends PropTypes>(service: QwDropdownService, normalize: NormalizeProps<T>): QwDropdownApi<T> {\n  const state = live(service.prop), id = ids(service.scope), open = service.state.matches(\"open\");\n  const layout = open && service.context.get(\"dismissReady\") ? service.context.get(\"layout\") : null, highlighted = open ? service.context.get(\"highlighted\") : null;\n  const items = resolveDropdownItems(service.prop(\"items\"));\n  const placement = layout?.placement ?? state.placement, { side, align } = layout ?? splitFloatingPlacement(state.placement);\n  const part = (name: (typeof DROPDOWN_PARTS)[number]) => ({ \"data-scope\": \"dropdown\", \"data-part\": name });\n  const select = (item: QwResolvedDropdownItem) => service.send({ type: \"SELECT\", index: item.index, value: item.value });\n  return {\n    open, placement, side, align, positioned: !!layout, items, highlighted,\n    setOpen(next) { if (next !== open) service.send({ type: next ? \"OPEN\" : \"CLOSE\", reason: \"api\" }); },\n    getTriggerProps: () => normalize.element({\n      ...part(\"trigger\"), id: id.trigger, \"aria-haspopup\": \"menu\", \"aria-expanded\": open, \"aria-controls\": id.content, \"data-state\": open ? \"open\" : \"closed\",\n      onClick(event: DropdownDomEvent) { if (!event.defaultPrevented) service.send({ type: \"TOGGLE\", reason: \"trigger\", focus: \"first\" }); },\n      onKeyDown(event: DropdownKeyboardEvent) {\n        const focus = event.key === \"ArrowDown\" ? \"first\" : event.key === \"ArrowUp\" ? \"last\" : null;\n        if (event.defaultPrevented || !focus) return;\n        event.preventDefault();\n        if (open) service.send({ type: \"MOVE\", to: focus });\n        else service.send({ type: \"OPEN\", reason: \"keyboard\", focus });\n      },\n    }),\n    getPositionerProps: () => normalize.element({\n      ...part(\"positioner\"), id: id.positioner, \"data-placement\": placement, \"data-side\": side, \"data-align\": align,\n      \"data-positioned\": layout ? \"\" : undefined, style: getFloatingPositionerStyle(layout),\n    }),\n    getContentProps: () => normalize.element({\n      ...part(\"content\"), id: id.content, role: \"menu\", tabIndex: -1, \"aria-label\": state.label, \"aria-labelledby\": state.label ? undefined : id.trigger,\n      \"data-state\": open ? \"open\" : \"closed\", \"data-side\": side, \"data-empty\": items.length ? undefined : \"\",\n      onKeyDown(event: DropdownKeyboardEvent) {\n        if (event.defaultPrevented || event.isComposing) return;\n        const key = event.key, move = CONTENT_MOVES[key];\n        if (move) { event.preventDefault(); service.send({ type: \"MOVE\", to: move }); return; }\n        if (key === \"Enter\" || key === \" \") {\n          event.preventDefault();\n          const current = service.context.get(\"highlighted\"), item = items.find((entry) => entry.value === current && !entry.disabled);\n          if (item) select(item);\n          return;\n        }\n        if (key === \"Tab\") {\n          // Leave from the trigger's place in the tab order: Tab continues past it, Shift+Tab stops on it.\n          service.scope.getById(id.trigger)?.focus({ preventScroll: true });\n          if (event.shiftKey) event.preventDefault();\n          service.send({ type: \"CLOSE\", reason: \"tab\" });\n          return;\n        }\n        if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) { event.preventDefault(); service.send({ type: \"TYPEAHEAD\", key }); }\n      },\n    }),\n    getItemProps: (item) => normalize.element({\n      ...part(\"item\"), id: id.item(item.index), role: \"menuitem\", tabIndex: item.disabled ? undefined : -1, \"aria-disabled\": item.disabled ? \"true\" : undefined,\n      \"data-value\": item.value, \"data-disabled\": item.disabled ? \"\" : undefined, \"data-danger\": item.danger ? \"\" : undefined,\n      \"data-highlighted\": !item.disabled && highlighted === item.value ? \"\" : undefined,\n      onClick(event: DropdownDomEvent) { if (!event.defaultPrevented && !item.disabled) select(item); },\n      onFocus() { if (!item.disabled) service.send({ type: \"HIGHLIGHT\", value: item.value }); },\n    }),\n  };\n}\n"],"mappings":"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"}

package/dist/ellipsis/ellipsis-layout.d.ts

@@ -0,0 +1,34 @@
+import type { EllipsisDirection } from "./ellipsis.js";
+/**
+ * Ellipsis platform boundary: DOM measurement and resize observation only.
+ * Truncation search and expanded/collapsed decisions stay in ellipsis.ts.
+ * Nothing here runs at module top level, so importing it is SSR-safe.
+ */
+export interface EllipsisMeasureInput {
+    content: string;
+    rows: number;
+    direction: EllipsisDirection;
+    symbol: string;
+    /** Visible action label measured on the same line as the truncated text ("" = none). */
+    actionText: string;
+}
+export interface EllipsisMeasurement {
+    /** True when the full content exceeds `rows` lines. */
+    overflow: boolean;
+    /** Collapsed visible text (with symbol) when overflowing; otherwise the full content. */
+    text: string;
+    /** Inline size used for the decision, in CSS pixels. */
+    width: number;
+}
+export declare const ELLIPSIS_PROBE_ATTRIBUTE = "data-qw-ellipsis-probe";
+/** Code-point safe truncation candidates; `kept` counts content code points that remain visible. */
+export declare function buildEllipsisCandidate(chars: readonly string[], kept: number, direction: EllipsisDirection, symbol: string): string;
+/**
+ * Pure search: longest candidate that `fits`. `fits` must be monotonic (fewer kept characters never fit worse).
+ * Returns null when the full content fits.
+ */
+export declare function findEllipsisText(content: string, direction: EllipsisDirection, symbol: string, fits: (candidate: string) => boolean): string | null;
+/** Measures with a detached-from-layout probe in the same document; returns null when not laid out (zero width). */
+export declare function measureEllipsisLayout(root: HTMLElement, input: EllipsisMeasureInput): EllipsisMeasurement | null;
+/** Calls `onChange` when the observed inline size changes (and once on start). Returns stop. */
+export declare function observeEllipsisLayout(root: HTMLElement, onChange: () => void): () => void;

package/dist/ellipsis/ellipsis.d.ts

@@ -0,0 +1,88 @@
+import { type Machine, type Service } from "@zag-js/core";
+import type { NormalizeProps, PropTypes } from "@zag-js/types";
+import { type EllipsisMeasurement } from "./ellipsis-layout.js";
+export declare const ELLIPSIS_DIRECTIONS: readonly ["end", "start", "middle"];
+export declare const ELLIPSIS_PARTS: readonly ["root", "content", "text", "full-text", "toggle"];
+export type EllipsisDirection = (typeof ELLIPSIS_DIRECTIONS)[number];
+export type EllipsisPart = (typeof ELLIPSIS_PARTS)[number];
+export interface EllipsisExpandedChangeDetails {
+    expanded: boolean;
+}
+export interface QwEllipsisProps {
+    /** Stable instance identity for aria-controls; frameworks generate one when omitted. */
+    id?: string;
+    /** Plain text content (measurement requires text). */
+    content: string;
+    /** Visible lines when collapsed; integer ≥ 1, invalid → 1. */
+    rows?: number;
+    /** Where the ellipsis symbol goes. Default end. */
+    direction?: EllipsisDirection;
+    /** Controlled expanded state when defined. */
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    /** Expand action label; "" disables expansion. Default 展开. */
+    expandText?: string;
+    /** Collapse action label; "" hides the collapse action. Default 收起. */
+    collapseText?: string;
+    /** Ellipsis symbol. Default …. */
+    symbol?: string;
+    onExpandedChange?: (details: EllipsisExpandedChangeDetails) => void;
+}
+export declare function normalizeEllipsisRows(rows: unknown): number;
+type NormalizedProps = QwEllipsisProps & {
+    content: string;
+    rows: number;
+    direction: EllipsisDirection;
+    expandText: string;
+    collapseText: string;
+    symbol: string;
+    defaultExpanded: boolean;
+};
+export declare function createEllipsisProps(props: QwEllipsisProps): NormalizedProps;
+interface KeyedMeasurement extends EllipsisMeasurement {
+    key: string;
+}
+export interface QwEllipsisSchema {
+    props: NormalizedProps;
+    context: {
+        expanded: boolean;
+        measurement: KeyedMeasurement | null;
+    };
+    state: "ready";
+    action: "toggle" | "setExpanded" | "measure";
+    effect: "observeLayout";
+    event: {
+        type: "TOGGLE";
+    } | {
+        type: "EXPANDED.SET";
+        value: boolean;
+    } | {
+        type: "MEASURE";
+    };
+}
+export type QwEllipsisMachine = Machine<QwEllipsisSchema>;
+export type QwEllipsisService = Service<QwEllipsisSchema>;
+/** Expanded state + measurement lifecycle. The resize observer is a Core effect: start on mount, stop on unmount. */
+export declare const ellipsisMachine: QwEllipsisMachine;
+export interface QwEllipsisApi<T extends PropTypes = PropTypes> {
+    content: string;
+    expanded: boolean;
+    /** A current measurement exists for these props. */
+    measured: boolean;
+    overflow: boolean;
+    /** Visible text is shortened; full text is provided to assistive technology separately. */
+    truncated: boolean;
+    visibleText: string;
+    toggleText: string;
+    showToggle: boolean;
+    setExpanded(expanded: boolean): void;
+    /** Re-run measurement (for example after a caller-driven style change). */
+    remeasure(): void;
+    getRootProps(): T["element"];
+    getContentProps(): T["element"];
+    getTextProps(): T["element"];
+    getFullTextProps(): T["element"];
+    getToggleProps(): T["button"];
+}
+export declare function connectEllipsis<T extends PropTypes>(service: QwEllipsisService, normalize: NormalizeProps<T>): QwEllipsisApi<T>;
+export {};

package/dist/ellipsis/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ellipsis.js";
+export * from "./ellipsis-layout.js";