@krelborn/stylesui 0.0.0-stage → 0.9.0

package/dist/components/Combobox/ComboboxOption.js

@@ -0,0 +1,74 @@
+import { optionId as e } from "../../collections/optionId.js";
+import { hasContent as t } from "../../forms/hasContent.js";
+import { Box as n } from "../Box/Box.js";
+import r from "../MenuSurface/MenuSurface.module.js";
+import i from "./Combobox.module.js";
+import { ComboboxOptionContent as a } from "./ComboboxOptionContent.js";
+import { useComboboxContext as o } from "./useComboboxContext.js";
+import { useComboboxOption as s } from "./useComboboxOption.js";
+import { clsx as c } from "clsx";
+import { useId as l, useRef as u } from "react";
+import { jsx as d } from "react/jsx-runtime";
+// src/components/Combobox/ComboboxOption.tsx
+function f({ "aria-describedby": f, children: h, className: g, description: _, disabled: v = !1, leading: y, onClick: b, onPointerMove: x, ref: S, textValue: C, value: w, ...T }) {
+	let E = o("ComboboxOption"), D = u(null), O = l(), k = l(), A = E.active?.value === w ? E.active.source : void 0, j = E.selectedValue === w, M = p(t(_) ? k : void 0, f);
+	s({
+		children: h,
+		leading: y,
+		optionRef: D,
+		selected: j,
+		textValue: C,
+		value: w
+	});
+	function N(e) {
+		D.current = e;
+		let t = m(S, e);
+		return () => {
+			D.current = null, t();
+		};
+	}
+	function P(e) {
+		b?.(e), !e.defaultPrevented && !v && E.commit(w);
+	}
+	function F(e) {
+		x?.(e), e.pointerType !== "touch" && E.active?.value !== w && E.activateFromPointer(w);
+	}
+	return /* @__PURE__ */ d(n, {
+		...T,
+		className: c(r.item, i.option, g),
+		id: e(E.baseId, w),
+		onClick: P,
+		onPointerMove: F,
+		ref: N,
+		role: "option",
+		"aria-describedby": M,
+		"aria-disabled": v ? !0 : void 0,
+		"aria-labelledby": O,
+		"aria-selected": j,
+		"data-active": A,
+		"data-text-value": C,
+		"data-value": w,
+		children: /* @__PURE__ */ d(a, {
+			description: _,
+			descriptionId: k,
+			labelId: O,
+			leading: y,
+			selected: j,
+			children: h
+		})
+	});
+}
+function p(...e) {
+	let t = e.filter(Boolean).join(" ");
+	return t === "" ? void 0 : t;
+}
+function m(e, t) {
+	if (typeof e == "function") {
+		let n = e(t);
+		return typeof n == "function" ? n : () => e(null);
+	}
+	return e == null ? () => {} : (e.current = t, () => {
+		e.current = null;
+	});
+}
+export { f as ComboboxOption };

package/dist/components/Combobox/ComboboxOptionContent.d.ts

@@ -0,0 +1,32 @@
+import type { JSX, ReactNode } from "react";
+interface ComboboxOptionContentProps {
+    /**
+     * The label
+     */
+    children: ReactNode;
+    /**
+     * A line of muted text below the label
+     */
+    description: ReactNode;
+    /**
+     * The id of the description, which describes the option
+     */
+    descriptionId: string;
+    /**
+     * The id of the label, which names the option
+     */
+    labelId: string;
+    /**
+     * Content before the label
+     */
+    leading: ReactNode;
+    /**
+     * Whether the option is selected, which shows a check
+     */
+    selected: boolean;
+}
+/**
+ * A combobox option's row: the check of a selected option, then its leading content, label and description
+ */
+export declare function ComboboxOptionContent({ children, description, descriptionId, labelId, leading, selected, }: ComboboxOptionContentProps): JSX.Element;
+export {};

package/dist/components/Combobox/ComboboxOptionContent.js

@@ -0,0 +1,51 @@
+import { hasContent as e } from "../../forms/hasContent.js";
+import { Box as t } from "../Box/Box.js";
+import { CheckIcon as n } from "../Icon/CheckIcon.js";
+import r from "../MenuSurface/MenuSurface.module.js";
+import i from "./Combobox.module.js";
+import { c as a } from "react/compiler-runtime";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+// src/components/Combobox/ComboboxOptionContent.tsx
+function l(l) {
+	let u = a(17), { children: d, description: f, descriptionId: p, labelId: m, leading: h, selected: g } = l, _;
+	u[0] === g ? _ = u[1] : (_ = g && /* @__PURE__ */ s(t, {
+		as: "span",
+		className: `${r.leading} ${i.check}`,
+		"aria-hidden": !0,
+		children: /* @__PURE__ */ s(n, {})
+	}), u[0] = g, u[1] = _);
+	let v;
+	u[2] === h ? v = u[3] : (v = e(h) && /* @__PURE__ */ s(t, {
+		as: "span",
+		className: i.optionLeading,
+		"aria-hidden": !0,
+		children: h
+	}), u[2] = h, u[3] = v);
+	let y;
+	u[4] !== d || u[5] !== m ? (y = /* @__PURE__ */ s(t, {
+		as: "span",
+		className: r.label,
+		id: m,
+		children: d
+	}), u[4] = d, u[5] = m, u[6] = y) : y = u[6];
+	let b;
+	u[7] !== f || u[8] !== p ? (b = e(f) && /* @__PURE__ */ s(t, {
+		as: "span",
+		className: r.description,
+		id: p,
+		children: f
+	}), u[7] = f, u[8] = p, u[9] = b) : b = u[9];
+	let x;
+	u[10] !== y || u[11] !== b ? (x = /* @__PURE__ */ c(t, {
+		as: "span",
+		className: r.text,
+		children: [y, b]
+	}), u[10] = y, u[11] = b, u[12] = x) : x = u[12];
+	let S;
+	return u[13] !== _ || u[14] !== v || u[15] !== x ? (S = /* @__PURE__ */ c(o, { children: [
+		_,
+		v,
+		x
+	] }), u[13] = _, u[14] = v, u[15] = x, u[16] = S) : S = u[16], S;
+}
+export { l as ComboboxOptionContent };

package/dist/components/Combobox/ComboboxPopup.d.ts

@@ -0,0 +1,50 @@
+import type { JSX, ReactNode } from "react";
+import type { ComboboxList } from "./useComboboxList";
+/**
+ * Where a combobox's list opens, flipping to the other side when there is no room
+ */
+export type ComboboxPlacement = "bottom-start" | "top-start";
+interface ComboboxPopupProps {
+    /**
+     * The control's `aria-label`, which names the list outside a `Field`
+     */
+    "aria-label": string | undefined;
+    /**
+     * The control's `aria-labelledby`, which names the list outside a `Field`
+     */
+    "aria-labelledby": string | undefined;
+    /**
+     * The options
+     */
+    children: ReactNode;
+    /**
+     * Whether the control is disabled, which leaves its value out of the form
+     */
+    disabled: boolean | undefined;
+    /**
+     * The line shown in place of the options while none shows; without one, an empty list shows nothing
+     */
+    emptyMessage?: string;
+    /**
+     * The id of the form the value submits with, when not the one around the control
+     */
+    form: string | undefined;
+    /**
+     * The list's state
+     */
+    list: ComboboxList;
+    /**
+     * The name the selected value submits under with a form; without one, nothing is submitted
+     */
+    name: string | undefined;
+    /**
+     * Where the list opens
+     */
+    placement: ComboboxPlacement;
+}
+/**
+ * A combobox's list, an overlay on the menu surface holding the `listbox` and its options named by the surrounding
+ * `Field`'s label or else as the control is, followed by the hidden input that submits the value when it has a name
+ */
+export declare function ComboboxPopup({ "aria-label": label, "aria-labelledby": labelledBy, children, disabled, emptyMessage, form, list, name, placement, }: ComboboxPopupProps): JSX.Element;
+export {};

package/dist/components/Combobox/ComboboxPopup.js

@@ -0,0 +1,59 @@
+import { FieldContext as e } from "../../forms/FieldContext.js";
+import { anchorNameFor as t } from "../../overlays/anchorNameFor.js";
+import { Box as n } from "../Box/Box.js";
+import r from "../MenuSurface/MenuSurface.module.js";
+import { Overlay as i } from "../Overlay/Overlay.js";
+import a from "./Combobox.module.js";
+import { ComboboxContext as o } from "./ComboboxContext.js";
+import { useContext as s } from "react";
+import { c } from "react/compiler-runtime";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+// src/components/Combobox/ComboboxPopup.tsx
+function d(d) {
+	let f = c(26), { "aria-label": p, "aria-labelledby": m, children: h, disabled: g, emptyMessage: _, form: v, list: y, name: b, placement: x } = d, { attachList: S, context: C, listId: w, open: T, selectedValue: E } = y, D = s(e)?.labelId, O;
+	f[0] === Symbol.for("react.memo_cache_sentinel") ? (O = function(e) {
+		e.preventDefault();
+	}, f[0] = O) : O = f[0];
+	let k = O, A;
+	f[1] === w ? A = f[2] : (A = t(w), f[1] = w, f[2] = A);
+	let j = D === void 0 ? p : void 0, M = D ?? m, N;
+	f[3] !== S || f[4] !== h || f[5] !== w || f[6] !== j || f[7] !== M ? (N = /* @__PURE__ */ l(n, {
+		className: a.listbox,
+		id: w,
+		ref: S,
+		role: "listbox",
+		"aria-label": j,
+		"aria-labelledby": M,
+		children: h
+	}), f[3] = S, f[4] = h, f[5] = w, f[6] = j, f[7] = M, f[8] = N) : N = f[8];
+	let P;
+	f[9] === _ ? P = f[10] : (P = _ !== void 0 && /* @__PURE__ */ l(n, {
+		className: a.empty,
+		children: _
+	}), f[9] = _, f[10] = P);
+	let F;
+	f[11] !== T || f[12] !== x || f[13] !== A || f[14] !== N || f[15] !== P ? (F = /* @__PURE__ */ u(i, {
+		anchorName: A,
+		as: "div",
+		className: `${r.menu} ${a.popup}`,
+		onMouseDown: k,
+		open: T,
+		placement: x,
+		popover: "manual",
+		children: [N, P]
+	}), f[11] = T, f[12] = x, f[13] = A, f[14] = N, f[15] = P, f[16] = F) : F = f[16];
+	let I;
+	f[17] !== g || f[18] !== v || f[19] !== b || f[20] !== E ? (I = b !== void 0 && /* @__PURE__ */ l("input", {
+		disabled: g,
+		form: v,
+		name: b,
+		type: "hidden",
+		value: E ?? ""
+	}), f[17] = g, f[18] = v, f[19] = b, f[20] = E, f[21] = I) : I = f[21];
+	let L;
+	return f[22] !== C || f[23] !== F || f[24] !== I ? (L = /* @__PURE__ */ u(o.Provider, {
+		value: C,
+		children: [F, I]
+	}), f[22] = C, f[23] = F, f[24] = I, f[25] = L) : L = f[25], L;
+}
+export { d as ComboboxPopup };

package/dist/components/Combobox/autocompleteKeys.d.ts

@@ -0,0 +1,31 @@
+import type { KeyboardEvent } from "react";
+import type { ComboboxList } from "./useComboboxList";
+/**
+ * The input's text, which Enter and Escape read and Escape clears
+ */
+interface InputText {
+    /**
+     * Puts text in the input
+     */
+    commit: (text: string) => void;
+    /**
+     * Whether the input holds text typed since the last choice
+     */
+    editing: boolean;
+    /**
+     * The text the input shows
+     */
+    shown: string;
+}
+/**
+ * Acts on a key pressed in an `Autocomplete`'s input, leaving typing, the caret keys, keys that compose text in an input
+ * method, and Enter with no active option and no unchosen text, to the input
+ *
+ * @param event the key event
+ * @param list the autocomplete's list
+ * @param text the input's text: Enter does not submit text typed since the last choice, and Escape on the closed input
+ *   clears it with the selection
+ * @returns whether the key was handled, so its default should be prevented
+ */
+export declare function handleAutocompleteKey(event: KeyboardEvent<HTMLElement>, list: ComboboxList, text: InputText): boolean;
+export {};

package/dist/components/Combobox/autocompleteKeys.js

@@ -0,0 +1,25 @@
+import { hasModifier as e } from "../../menus/hasModifier.js";
+import { isAltArrow as t } from "./isAltArrow.js";
+// src/components/Combobox/autocompleteKeys.ts
+function n(n, i, a) {
+	if (n.nativeEvent.isComposing || n.keyCode === 229) return !1;
+	if (t(n, "ArrowDown")) return i.open || i.openList("none", "keyboard"), !0;
+	if (t(n, "ArrowUp")) {
+		let e = i.open;
+		return i.commitActive(), e;
+	}
+	return !e(n) && r(n.key, i, a);
+}
+function r(e, t, n) {
+	return e === "ArrowDown" || e === "ArrowUp" ? i(e, t) : e === "Enter" ? a(t, n) : e === "Escape" ? o(t, n) : (e === "Tab" && t.close(), !1);
+}
+function i(e, t) {
+	return t.open ? t.moveByKey(e) : (t.openList(e === "ArrowDown" ? "first" : "last", "keyboard"), !0);
+}
+function a(e, t) {
+	return e.activeDescendant === void 0 ? t.editing && t.shown !== "" : (e.commitActive(), !0);
+}
+function o(e, t) {
+	return e.open ? (e.close(), !0) : t.shown === "" && e.selectedValue === null ? !1 : (e.select(null), t.commit(""), !0);
+}
+export { n as handleAutocompleteKey };

package/dist/components/Combobox/comboboxKeys.d.ts

@@ -0,0 +1,10 @@
+import type { KeyboardEvent } from "react";
+import type { ComboboxList } from "./useComboboxList";
+/**
+ * Acts on a key pressed on a `Combobox`'s field
+ *
+ * @param event the key event
+ * @param list the combobox's list
+ * @returns whether the key was handled, so its default should be prevented
+ */
+export declare function handleComboboxKey(event: KeyboardEvent<HTMLElement>, list: ComboboxList): boolean;

package/dist/components/Combobox/comboboxKeys.js

@@ -0,0 +1,22 @@
+import { hasModifier as e } from "../../menus/hasModifier.js";
+import { isAltArrow as t } from "./isAltArrow.js";
+// src/components/Combobox/comboboxKeys.ts
+var n = {
+	" ": "selected",
+	ArrowDown: "selected",
+	ArrowUp: "selected",
+	End: "last",
+	Enter: "selected",
+	Home: "first"
+};
+function r(e, t) {
+	return t.open ? a(e, t) : i(e, t);
+}
+function i(r, i) {
+	let a = n[r.key];
+	return t(r, "ArrowDown") ? (i.openList("none", "keyboard"), !0) : e(r) ? !1 : a === void 0 ? Array.from(r.key).length === 1 && (i.openList("selected", "keyboard"), i.typeAhead(r.key), !0) : (i.openList(a, "keyboard"), !0);
+}
+function a(n, r) {
+	return n.key === "Tab" || n.key === "Escape" ? (r.close(), n.key === "Escape") : t(n, "ArrowUp") ? (r.commitActive(), !0) : e(n) ? !1 : n.key === "Enter" || n.key === " " && !r.isTypingAhead() ? (r.commitActive(), !0) : r.moveByKey(n.key) || r.typeAhead(n.key);
+}
+export { r as handleComboboxKey };

package/dist/components/Combobox/containsText.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Tests whether an option's text contains the typed text, ignoring case, accents and the typed text's surrounding
+ * spaces: an `Autocomplete`'s default filter
+ *
+ * @param textValue the option's text
+ * @param inputValue the typed text
+ * @returns true when the option shows
+ */
+export declare function containsText(textValue: string, inputValue: string): boolean;

package/dist/components/Combobox/containsText.js

@@ -0,0 +1,8 @@
+// src/components/Combobox/containsText.ts
+function e(e, n) {
+	return t(e).includes(t(n.trim()));
+}
+function t(e) {
+	return e.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLocaleLowerCase();
+}
+export { e as containsText };

package/dist/components/Combobox/index.d.ts

@@ -0,0 +1,6 @@
+export { Autocomplete } from "./Autocomplete";
+export type { AutocompleteProps } from "./Autocomplete";
+export { Combobox } from "./Combobox";
+export type { ComboboxProps } from "./Combobox";
+export { ComboboxOption } from "./ComboboxOption";
+export type { ComboboxOptionProps } from "./ComboboxOption";

package/dist/components/Combobox/isAltArrow.d.ts

@@ -0,0 +1,9 @@
+import type { KeyboardEvent } from "react";
+/**
+ * Whether a key is an arrow pressed with Alt alone, which opens or commits a combobox's list
+ *
+ * @param event the key event
+ * @param key the arrow
+ * @returns true for that arrow with Alt and neither Ctrl nor Meta
+ */
+export declare function isAltArrow(event: KeyboardEvent<HTMLElement>, key: "ArrowDown" | "ArrowUp"): boolean;

package/dist/components/Combobox/isAltArrow.js

@@ -0,0 +1,5 @@
+// src/components/Combobox/isAltArrow.ts
+function e(e, t) {
+	return e.key === t && e.altKey && !e.ctrlKey && !e.metaKey;
+}
+export { e as isAltArrow };

package/dist/components/Combobox/isOptionShown.d.ts

@@ -0,0 +1,10 @@
+import type { ComboboxFilter } from "./ComboboxContext";
+/**
+ * Whether an option shows for the typed text
+ *
+ * @param filter the combobox's filter, or null to show every option
+ * @param query the typed text
+ * @param text the option's text
+ * @returns true when there is no filter or no text, or the filter accepts the option
+ */
+export declare function isOptionShown(filter: ComboboxFilter | null, query: string, text: string): boolean;

package/dist/components/Combobox/isOptionShown.js

@@ -0,0 +1,5 @@
+// src/components/Combobox/isOptionShown.ts
+function e(e, t, n) {
+	return e === null || t === "" || e(n, t);
+}
+export { e as isOptionShown };

package/dist/components/Combobox/useAutocompleteText.d.ts

@@ -0,0 +1,56 @@
+interface UseAutocompleteTextOptions {
+    /**
+     * The text the input starts with when uncontrolled
+     */
+    defaultInputValue: string | undefined;
+    /**
+     * The input's text when controlled
+     */
+    inputValue: string | undefined;
+    /**
+     * Called with each new text
+     */
+    onInputValueChange: ((inputValue: string) => void) | undefined;
+    /**
+     * The selected option's text, or undefined for none or one that has not rendered
+     */
+    selectedText: string | undefined;
+}
+/**
+ * An `Autocomplete`'s text and the ways it changes
+ */
+interface AutocompleteText {
+    /**
+     * Puts an option's text in the input as the user commits it
+     */
+    commit: (text: string) => void;
+    /**
+     * Takes the text the user typed
+     */
+    edit: (text: string) => void;
+    /**
+     * Whether the input holds text other than the selection's: typed since the last choice, or, when controlled, any
+     * text the parent gives that is not the selected option's
+     */
+    editing: boolean;
+    /**
+     * The text the options are filtered by: the input's while editing, or empty while it shows the selection
+     */
+    query: string;
+    /**
+     * Shows the selection's text again, after editing that chose nothing
+     */
+    restore: () => void;
+    /**
+     * The text the input shows
+     */
+    shown: string;
+}
+/**
+ * Holds what the user is typing in an `Autocomplete`, apart from the selection's text, which the input shows otherwise
+ *
+ * @param options the controlled or starting text, the change callback and the selection's text
+ * @returns the text and the ways it changes
+ */
+export declare function useAutocompleteText({ defaultInputValue, inputValue, onInputValueChange, selectedText, }: UseAutocompleteTextOptions): AutocompleteText;
+export {};

package/dist/components/Combobox/useAutocompleteText.js

@@ -0,0 +1,27 @@
+import { useState as e } from "react";
+import { c as t } from "react/compiler-runtime";
+// src/components/Combobox/useAutocompleteText.ts
+function n(n) {
+	let r = t(15), { defaultInputValue: i, inputValue: a, onInputValueChange: o, selectedText: s } = n, [c, l] = e(i ?? null), u = a ?? c ?? s ?? "", d = a === void 0 ? c !== null : a !== (s ?? ""), f;
+	r[0] === o ? f = r[1] : (f = function(e) {
+		l(e), o?.(e);
+	}, r[0] = o, r[1] = f);
+	let p = f, m;
+	r[2] === o ? m = r[3] : (m = function(e) {
+		l(null), o?.(e);
+	}, r[2] = o, r[3] = m);
+	let h = m, g;
+	r[4] !== h || r[5] !== d || r[6] !== s ? (g = function() {
+		d && h(s ?? "");
+	}, r[4] = h, r[5] = d, r[6] = s, r[7] = g) : g = r[7];
+	let _ = g, v = d ? u : "", y;
+	return r[8] !== h || r[9] !== p || r[10] !== d || r[11] !== _ || r[12] !== u || r[13] !== v ? (y = {
+		commit: h,
+		edit: p,
+		editing: d,
+		query: v,
+		restore: _,
+		shown: u
+	}, r[8] = h, r[9] = p, r[10] = d, r[11] = _, r[12] = u, r[13] = v, r[14] = y) : y = r[14], y;
+}
+export { n as useAutocompleteText };

package/dist/components/Combobox/useComboboxContext.d.ts

@@ -0,0 +1,9 @@
+import type { ComboboxContextValue } from "./ComboboxContext";
+/**
+ * Reads the state of the surrounding `Combobox` or `Autocomplete`
+ *
+ * @param part the name of the part reading it, for the error message
+ * @returns the surrounding combobox's state
+ * @throws MissingContextError when the part is not inside a `Combobox` or `Autocomplete`
+ */
+export declare function useComboboxContext(part: string): ComboboxContextValue;

package/dist/components/Combobox/useComboboxContext.js

@@ -0,0 +1,10 @@
+import { MissingContextError as e } from "../../errors/MissingContextError.js";
+import { ComboboxContext as t } from "./ComboboxContext.js";
+import { useContext as n } from "react";
+// src/components/Combobox/useComboboxContext.ts
+function r(r) {
+	let i = n(t);
+	if (i === null) throw new e(r, "Combobox or Autocomplete");
+	return i;
+}
+export { r as useComboboxContext };

package/dist/components/Combobox/useComboboxList.d.ts

@@ -0,0 +1,129 @@
+import type { ActiveSource, ComboboxContextValue, ComboboxFilter, SelectedContent } from "./ComboboxContext";
+import type { ComboboxSelection } from "./useComboboxSelection";
+/**
+ * Which option is active as the list opens: the selected one (else the first), the first, the last, or none
+ */
+export type OpeningActive = "first" | "last" | "none" | "selected";
+interface UseComboboxListOptions {
+    /**
+     * The control's own id, or a surrounding field's; without one, the list generates it
+     */
+    controlId: string | undefined;
+    /**
+     * Whether an option shows for the typed text, or null to show every option
+     */
+    filter: ComboboxFilter | null;
+    /**
+     * Called with an option's text when the user commits it
+     */
+    onCommit?: (text: string) => void;
+    /**
+     * The text the options are filtered by; empty shows every option
+     */
+    query: string;
+    /**
+     * The combobox's selection, from `useComboboxSelection`
+     */
+    selection: ComboboxSelection;
+}
+/**
+ * A combobox's list: its open state, active option and selection, and the actions its control's keys and pointer take
+ */
+export interface ComboboxList {
+    /**
+     * The id of the active option while the list is open, for the control's `aria-activedescendant`
+     */
+    activeDescendant: string | undefined;
+    /**
+     * The generated id the list's ids start with
+     */
+    baseId: string;
+    /**
+     * Closes the list without committing
+     */
+    close: () => void;
+    /**
+     * Commits the active option and closes the list, unless the option is disabled; with no active option, closes it
+     */
+    commitActive: () => void;
+    /**
+     * The state the list's options read
+     */
+    context: ComboboxContextValue;
+    /**
+     * The control's id
+     */
+    controlId: string;
+    /**
+     * Counts the options the filter shows
+     */
+    countShown: () => number;
+    /**
+     * Whether Space would join a type-ahead query now rather than act
+     */
+    isTypingAhead: () => boolean;
+    /**
+     * The list's id, for the control's `aria-controls`
+     */
+    listId: string;
+    /**
+     * Takes the `listbox` element, as its `ref`
+     */
+    attachList: (listbox: HTMLDivElement | null) => void;
+    /**
+     * Makes the first option the filter shows, and that is not disabled, active once the next render has filtered the
+     * options by the query it brings, which a parent controlling the text may have changed; with no filter or no query,
+     * makes none active
+     */
+    matchFirst: () => void;
+    /**
+     * Moves the active option for an arrow key, Home or End, without wrapping
+     *
+     * @returns whether the key was one of those
+     */
+    moveByKey: (key: string) => boolean;
+    /**
+     * Whether the list is open
+     */
+    open: boolean;
+    /**
+     * Opens the list
+     *
+     * @param opening which option becomes active
+     * @param source what opened it, which decides whether the active option shows the focus ring
+     */
+    openList: (opening: OpeningActive, source: ActiveSource) => void;
+    /**
+     * Selects a value, or none, reporting it unless it is already selected
+     */
+    select: (value: string | null) => void;
+    /**
+     * What the selected option shows in the field, or null when it is not rendered
+     */
+    selectedContent: SelectedContent | null;
+    /**
+     * The selected value, or null for none
+     */
+    selectedValue: string | null;
+    /**
+     * Closes the list if it was open, or opens it on the selected option
+     *
+     * @param wasOpen whether the list was open when the user asked to toggle it
+     * @param source what toggled it, which decides whether the active option shows the focus ring
+     */
+    toggleList: (wasOpen: boolean, source: ActiveSource) => void;
+    /**
+     * Moves the active option by type-ahead for a printable character, from the active option or else the selected one
+     *
+     * @returns whether the key was a character type-ahead took
+     */
+    typeAhead: (key: string) => boolean;
+}
+/**
+ * Holds the state of a combobox's list, which `Combobox` and `Autocomplete` share
+ *
+ * @param options the control's id, the selection, the filter and its query, and the commit callback
+ * @returns the list's state and actions
+ */
+export declare function useComboboxList({ controlId, filter, onCommit, query, selection, }: UseComboboxListOptions): ComboboxList;
+export {};