@krelborn/stylesui 0.8.1 → 0.9.0

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

@@ -0,0 +1,59 @@
+import type { JSX, ReactNode } from "react";
+import type { ControlSize } from "../../forms";
+import type { BoxProps } from "../Box";
+import type { ComboboxPlacement } from "./ComboboxPopup";
+interface ComboboxOwnProps {
+    /**
+     * The `ComboboxOption`s
+     */
+    children?: ReactNode;
+    /**
+     * The option selected at first, which leaves the combobox uncontrolled. Defaults to none.
+     */
+    defaultValue?: string | null;
+    /**
+     * Adds a hidden input that submits the selected value with a form under this name
+     */
+    name?: string;
+    /**
+     * Called with the value of the option the user commits
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Shown in the field while no option is selected
+     */
+    placeholder?: ReactNode;
+    /**
+     * Where the list opens. It flips to the other side when there is no room. Defaults to `bottom-start`.
+     */
+    placement?: ComboboxPlacement;
+    /**
+     * Height of the field, matching the `Button` sizes. Defaults to `md`.
+     */
+    size?: ControlSize;
+    /**
+     * The selected option, or null for none, which makes the combobox controlled: update it from `onValueChange`
+     */
+    value?: string | null;
+}
+/**
+ * Props for `Combobox`: its own props plus every `button` prop except those the combobox pattern sets
+ */
+export interface ComboboxProps extends ComboboxOwnProps, Omit<BoxProps<"button">, "aria-activedescendant" | "aria-autocomplete" | "aria-controls" | "aria-expanded" | "aria-haspopup" | "as" | "defaultValue" | "role" | "type" | "value" | keyof ComboboxOwnProps> {
+}
+/**
+ * A field that opens a list of options to choose one from, following the WAI-ARIA select-only combobox pattern, for
+ * options a native `Select` cannot show, such as people with avatars. The field shows the selected option. Down Arrow,
+ * Enter, Space or a click opens the list; the arrow keys, Home, End and type-ahead move through it; Enter, Space or a
+ * click chooses an option; Escape and Tab close it without choosing. Focus stays on the field. Inside a `Field` it takes
+ * its label, description, error, and required and disabled state from the field; outside one, give it an `aria-label`.
+ *
+ * @example
+ * <Field label="Assignee">
+ *   <Combobox onValueChange={setAssignee} placeholder="Unassigned" value={assignee}>
+ *     <ComboboxOption leading={<Avatar name="Pat Lee" size="xs" />} value="pat">Pat Lee</ComboboxOption>
+ *   </Combobox>
+ * </Field>
+ */
+export declare function Combobox({ children, className, defaultValue, name, onValueChange, placeholder, placement, size, value, ...rest }: ComboboxProps): JSX.Element;
+export {};

package/dist/components/Combobox/Combobox.js

@@ -0,0 +1,82 @@
+import { useFieldControl as e } from "../../forms/useFieldControl.js";
+import { anchorNameFor as t } from "../../overlays/anchorNameFor.js";
+import { mergeProps as n } from "../../overlays/mergeProps.js";
+import { ChevronDownIcon as r } from "../Icon/ChevronDownIcon.js";
+import { TextControl as i } from "../TextControl/TextControl.js";
+import a from "./Combobox.module.js";
+import { ComboboxFieldValue as o } from "./ComboboxFieldValue.js";
+import { ComboboxPopup as s } from "./ComboboxPopup.js";
+import { handleComboboxKey as c } from "./comboboxKeys.js";
+import { useComboboxList as l } from "./useComboboxList.js";
+import { useComboboxSelection as u } from "./useComboboxSelection.js";
+import { clsx as d } from "clsx";
+import { useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+// src/components/Combobox/Combobox.tsx
+function g({ children: g, className: v, defaultValue: y = null, name: b, onValueChange: x, placeholder: S, placement: C = "bottom-start", size: w = "md", value: T, ...E }) {
+	let D = e(E), [O, k] = f(null), A = u({
+		defaultValue: y,
+		onValueChange: _(x),
+		value: T
+	}), j = l({
+		controlId: D.id,
+		filter: null,
+		query: "",
+		selection: A
+	}), M = { anchorName: t(j.listId) };
+	function N(e) {
+		!e.defaultPrevented && c(e, j) && e.preventDefault();
+	}
+	function P(e) {
+		e.key === " " && e.preventDefault();
+	}
+	function F(e) {
+		k(j.open);
+	}
+	function I(e) {
+		let t = e.detail > 0, n = t ? O ?? j.open : j.open;
+		k(null), e.defaultPrevented || (e.currentTarget.focus(), j.toggleList(n, t ? "pointer" : "keyboard"));
+	}
+	function L(e) {
+		j.close();
+	}
+	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h(i, {
+		...n(E, {
+			onBlur: L,
+			onClick: I,
+			onKeyDown: N,
+			onKeyUp: P,
+			onPointerDown: F,
+			style: M
+		}),
+		as: "button",
+		className: d(a.field, v),
+		id: j.controlId,
+		role: "combobox",
+		size: w,
+		type: "button",
+		"aria-activedescendant": j.activeDescendant,
+		"aria-controls": j.listId,
+		"aria-expanded": j.open,
+		"aria-haspopup": "listbox",
+		children: [/* @__PURE__ */ m(o, {
+			placeholder: S,
+			selected: j.selectedContent
+		}), /* @__PURE__ */ m(r, { className: a.chevron })]
+	}), /* @__PURE__ */ m(s, {
+		"aria-label": E["aria-label"],
+		"aria-labelledby": E["aria-labelledby"],
+		disabled: D.disabled,
+		form: E.form,
+		list: j,
+		name: b,
+		placement: C,
+		children: g
+	})] });
+}
+function _(e) {
+	return (t) => {
+		t !== null && e?.(t);
+	};
+}
+export { g as Combobox };

package/dist/components/Combobox/Combobox.module.js

@@ -0,0 +1,17 @@
+import './Combobox.css';// src/components/Combobox/Combobox.module.css
+var e = "sui-field-BenH0", t = "sui-placeholder-NQX-b", n = "sui-fieldLabel-zBN6l", r = "sui-fieldLeading-4y-j7", i = "sui-chevron-NVqyn", a = "sui-inputFrame-mYx2Q", o = "sui-input--HTv1", s = "sui-popup-rsvuH", c = "sui-listbox-2wSrg", l = "sui-option-vhhn5", u = "sui-check-9yQbP", d = "sui-optionLeading-kXakJ", f = "sui-empty-Ahw5K", p = {
+	field: e,
+	placeholder: t,
+	fieldLabel: n,
+	fieldLeading: r,
+	chevron: i,
+	inputFrame: a,
+	input: o,
+	popup: s,
+	listbox: c,
+	option: l,
+	check: u,
+	optionLeading: d,
+	empty: f
+};
+export { u as check, i as chevron, p as default, f as empty, e as field, n as fieldLabel, r as fieldLeading, o as input, a as inputFrame, c as listbox, l as option, d as optionLeading, t as placeholder, s as popup };

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

@@ -0,0 +1,88 @@
+import type { Dispatch, ReactNode, SetStateAction } from "react";
+/**
+ * What made an option active: a key, which shows the focus ring, or the pointer, which shows only the tint
+ */
+export type ActiveSource = "keyboard" | "pointer";
+/**
+ * The option the keys act on, which `aria-activedescendant` names
+ */
+export interface ActiveOption {
+    /**
+     * What made it active
+     */
+    source: ActiveSource;
+    /**
+     * Its value
+     */
+    value: string;
+}
+/**
+ * What the selected option shows in the field
+ */
+export interface SelectedContent {
+    /**
+     * The option's label
+     */
+    label: ReactNode;
+    /**
+     * The option's leading content, such as an avatar
+     */
+    leading: ReactNode;
+    /**
+     * The option's text, which an `Autocomplete`'s input shows
+     */
+    text: string;
+    /**
+     * The option's value
+     */
+    value: string;
+}
+/**
+ * Tests whether an option shows for the typed text
+ */
+export type ComboboxFilter = (textValue: string, inputValue: string) => boolean;
+/**
+ * State a combobox shares with its options
+ */
+export interface ComboboxContextValue {
+    /**
+     * The option the keys act on, or null for none
+     */
+    active: ActiveOption | null;
+    /**
+     * Makes an option active under the pointer
+     */
+    activateFromPointer: (value: string) => void;
+    /**
+     * The generated id every option id starts with
+     */
+    baseId: string;
+    /**
+     * Commits an option's value and closes the list
+     */
+    commit: (value: string) => void;
+    /**
+     * Whether an option shows for the typed text, or null to show every option
+     */
+    filter: ComboboxFilter | null;
+    /**
+     * The text the options are filtered by; empty shows every option
+     */
+    query: string;
+    /**
+     * The selected option's value, or null for none
+     */
+    selectedValue: string | null;
+    /**
+     * Sets the option the keys act on
+     */
+    setActive: Dispatch<SetStateAction<ActiveOption | null>>;
+    /**
+     * Sets what the selected option shows in the field
+     */
+    setSelectedContent: Dispatch<SetStateAction<SelectedContent | null>>;
+}
+/**
+ * Carries a `Combobox`'s or `Autocomplete`'s state to its options; null outside one
+ */
+export declare const ComboboxContext: import("react").Context<ComboboxContextValue | null>;

package/dist/components/Combobox/ComboboxContext.js

@@ -0,0 +1,4 @@
+import { createContext as e } from "react";
+// src/components/Combobox/ComboboxContext.ts
+var t = e(null);
+export { t as ComboboxContext };

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

@@ -0,0 +1,17 @@
+import type { JSX, ReactNode } from "react";
+import type { SelectedContent } from "./ComboboxContext";
+interface ComboboxFieldValueProps {
+    /**
+     * Shown while no option is selected
+     */
+    placeholder: ReactNode;
+    /**
+     * What the selected option shows, or null for none
+     */
+    selected: SelectedContent | null;
+}
+/**
+ * What a `Combobox`'s field shows: the selected option's leading content and label, or the placeholder
+ */
+export declare function ComboboxFieldValue({ placeholder, selected }: ComboboxFieldValueProps): JSX.Element;
+export {};

package/dist/components/Combobox/ComboboxFieldValue.js

@@ -0,0 +1,33 @@
+import { hasContent as e } from "../../forms/hasContent.js";
+import { Box as t } from "../Box/Box.js";
+import n from "./Combobox.module.js";
+import { c as r } from "react/compiler-runtime";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+// src/components/Combobox/ComboboxFieldValue.tsx
+function s(s) {
+	let c = r(9), { placeholder: l, selected: u } = s;
+	if (u === null) {
+		let e;
+		return c[0] === l ? e = c[1] : (e = /* @__PURE__ */ a(t, {
+			as: "span",
+			className: n.placeholder,
+			children: l
+		}), c[0] = l, c[1] = e), e;
+	}
+	let d;
+	c[2] === u.leading ? d = c[3] : (d = e(u.leading) && /* @__PURE__ */ a(t, {
+		as: "span",
+		className: n.fieldLeading,
+		"aria-hidden": !0,
+		children: u.leading
+	}), c[2] = u.leading, c[3] = d);
+	let f;
+	c[4] === u.label ? f = c[5] : (f = /* @__PURE__ */ a(t, {
+		as: "span",
+		className: n.fieldLabel,
+		children: u.label
+	}), c[4] = u.label, c[5] = f);
+	let p;
+	return c[6] !== d || c[7] !== f ? (p = /* @__PURE__ */ o(i, { children: [d, f] }), c[6] = d, c[7] = f, c[8] = p) : p = c[8], p;
+}
+export { s as ComboboxFieldValue };

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

@@ -0,0 +1,51 @@
+import type { JSX, ReactNode } from "react";
+import type { BoxProps } from "../Box";
+/**
+ * Props for `ComboboxOption`: its own props plus every `div` prop except those the combobox pattern sets and the name
+ * its label gives it
+ */
+export interface ComboboxOptionProps extends Omit<BoxProps<"div">, "aria-disabled" | "aria-label" | "aria-labelledby" | "aria-selected" | "as" | "children" | "dangerouslySetInnerHTML" | "hidden" | "id" | "role" | "tabIndex"> {
+    /**
+     * Not accepted: the label names the option
+     */
+    "aria-label"?: never;
+    /**
+     * Not accepted: the label names the option
+     */
+    "aria-labelledby"?: never;
+    /**
+     * The label, which names the option
+     */
+    children: ReactNode;
+    /**
+     * A line of muted text below the label, which describes the option
+     */
+    description?: ReactNode;
+    /**
+     * Whether the option can be reached with the keys but not chosen. Defaults to `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Content before the label, such as an `Avatar` or an icon, which a `Combobox` shows in its field too while the
+     * option is selected
+     */
+    leading?: ReactNode;
+    /**
+     * The text filtering, type-ahead and an `Autocomplete`'s input use. Defaults to the label's text.
+     */
+    textValue?: string;
+    /**
+     * The value this option stands for
+     */
+    value: string;
+}
+/**
+ * One option in a `Combobox` or `Autocomplete`. The selected option shows a check. To leave an option out, do not
+ * render it; an `Autocomplete` hides the options its filter rejects itself.
+ *
+ * @example
+ * <ComboboxOption description="Design" leading={<Avatar name="Pat Lee" size="xs" />} value="pat">
+ *   Pat Lee
+ * </ComboboxOption>
+ */
+export declare function ComboboxOption({ "aria-describedby": describedBy, children, className, description, disabled, leading, onClick, onPointerMove, ref, textValue, value, ...rest }: ComboboxOptionProps): JSX.Element;

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 {};