@coopdigital/react 1.29.2 → 1.30.0

package/dist/components/Combobox/Combobox.context.js

@@ -1,7 +1,7 @@
 "use client";
 import { createContext, useContext } from "react";
 //#region src/components/Combobox/Combobox.context.ts
-const ComboboxContext = createContext({});
+const ComboboxContext = createContext(null);
 const useComboboxContext = () => {
 	const context = useContext(ComboboxContext);
 	if (!context) throw new Error("Combobox components must be used inside <Combobox>");

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

@@ -3,9 +3,19 @@ import { ComboboxItem, ComboboxOption } from "./combobox-utils.js";
 import { TextInputProps } from "../TextInput/TextInput.js";
 import "../TextInput/index.js";
 import { ButtonHTMLAttributes, HTMLAttributes, JSX, ReactNode, Ref } from "react";
-import { UseComboboxHighlightedIndexChange, UseComboboxInputValueChange, UseComboboxIsOpenChange, UseComboboxSelectedItemChange, UseComboboxStateChange } from "downshift";
+import { UseComboboxHighlightedIndexChange, UseComboboxInputValueChange, UseComboboxIsOpenChange, UseComboboxStateChange } from "downshift";
 //#region src/components/Combobox/Combobox.d.ts
-export interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "onSelect" | "onToggle"> {
+export interface ComboboxSelectEvent {
+  /** Whether the selection is a custom value, entered by users when `allowCustom` is set,
+   * rather than one of the options.
+   */
+  custom: boolean;
+  /** The selected item, or `null` when the selection is cleared. For a custom value, this is a new item with that value. */
+  selectedItem: ComboboxItem | null;
+  /** The value of the selected option, or `null` when the selection is cleared. */
+  value: string | null;
+}
+export interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "onSelect" | "onToggle"> {
   /** Specify whether custom values are accepted.
    *
    * Default: `false`
@@ -15,9 +25,14 @@ export interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, "onC
    *
    * This should be a set of `<Combobox.Controls>` and `<Combobox.Options>`.
    */
-  children?: string | ReactNode;
+  children?: ReactNode;
   /** Specify additional CSS classes. */
   className?: string;
+  /** Specify the initial selected option, when the selection is not controlled with `selected`.
+   *
+   * Accepts a `ComboboxOption`, matched to the options by its value.
+   */
+  defaultSelected?: ComboboxOption | null;
   /** Specify the disabled state. */
   disabled?: boolean;
   /** Specify the component error state. */
@@ -33,10 +48,10 @@ export interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, "onC
   inputFilter?: (items: ComboboxItem[], value: string) => ComboboxItem[];
   /** Custom function to mark item as disabled.
    *
-   * Default: `disabled` prop on `.ComboboxOption`
+   * Default: the `disabled` property of the option.
    */
   isItemDisabled?: (item: ComboboxItem) => boolean;
-  /** Custom function to render text in the input field after selecting a value.
+  /** Custom function that gives the text shown in the input for an item. Typed text is matched against this text.
    *
    * Default: Uses item label or value: `item.label ?? item.value`.
    */
@@ -51,11 +66,11 @@ export interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, "onC
    * This is a `downshift` event.
    */
   onHighlight?: (event: UseComboboxHighlightedIndexChange<ComboboxItem>) => void;
-  /** Callback fired when users select an option from the list.
+  /** Callback fired when the selection changes, including when it is cleared.
    *
-   * This is a `downshift` event.
+   * The event contains the full option object in `selectedItem`, and its value in `value`. Both are `null` when the selection is cleared.
    */
-  onSelect?: (event: UseComboboxSelectedItemChange<ComboboxItem>) => void;
+  onSelect?: (event: ComboboxSelectEvent) => void;
   /** Callback fired whenever the state changes.
    *
    * This is a `downshift` event.
@@ -65,16 +80,19 @@ export interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, "onC
    *
    * This is a `downshift` event.
    */
-  onToggle?: (changes: UseComboboxIsOpenChange<ComboboxItem>) => void;
+  onToggle?: (event: UseComboboxIsOpenChange<ComboboxItem>) => void;
   /** Specify whether the menu should appear immediately when clicking the input field.
    *
    * Default: `true`.
    */
   openOnClick?: boolean;
-  /** Specify placeholder text. Do not use in place of a form label. */
-  placeholder?: string;
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
+  /** Specify the selected option, when the selection is controlled. Update it from `onSelect`.
+   *
+   * Accepts a `ComboboxOption`, matched to the options by its value, or `null` for no selection.
+   */
+  selected?: ComboboxOption | null;
   /** Specify the component size. */
   size?: StandardSizes;
 }
@@ -83,24 +101,51 @@ export interface ComboboxControlsProps extends HTMLAttributes<HTMLDivElement> {
    *
    * This should be a set of `<Combobox.Input>` and `<Combobox.Button>`.
    */
-  children?: React.ReactNode;
+  children?: ReactNode;
   /** Specify additional CSS classes. */
   className?: string;
+  /** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>;
+}
+export type ComboboxInputProps = Omit<TextInputProps, "defaultValue" | "prefix" | "prefixInline" | "suffix" | "suffixInline" | "value">;
+export interface ComboboxButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Specify the accessible label for the button.
+   *
+   * Default: `Toggle menu`
+   */
+  "aria-label"?: string;
+  /** Content inside the component.
+   *
+   * Default: `ChevronIconDown`. */
+  children?: ReactNode;
+  /** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLButtonElement>;
 }
 export interface ComboboxOptionsProps extends HTMLAttributes<HTMLUListElement> {
   /** Specify additional CSS classes. */
   className?: string;
+  /** Specify the maximum number of options to show in the list. Set to `false` to show all matching options.
+   *
+   * Default: `50`
+   */
+  maxResults?: false | number;
+  /** Specify the message shown when more options match than `maxResults`.
+   *
+   * Default: `Showing X of Y results.`
+   */
+  maxResultsText?: (shown: number, total: number) => string;
   /** Specify text to display when there are no matching options. */
   noResultsText?: string;
   /** Specify array of options to choose from.
    *
-   * Can be either a simple string array or a complex `ComboboxOption` array.
+   * Accepts a `ComboboxOption` array: strings, or `ComboboxItem` objects with a `value` and an optional `label`.
    */
   options: ComboboxOption[];
+  /** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLUListElement>;
 }
-export type ComboboxInputProps = TextInputProps;
-export declare const Combobox: {
-  ({ allowCustom, children, className, disabled, error, id, inputFilter, isItemDisabled, itemToString, onChange, onHighlight, onSelect, onStateChange, onToggle, openOnClick, ref, size, ...props }: ComboboxProps): JSX.Element | null;
+declare const Combobox: {
+  ({ allowCustom, children, className, defaultSelected, disabled, error, id, inputFilter, isItemDisabled, itemToString, onChange, onHighlight, onSelect, onStateChange, onToggle, openOnClick, ref, selected, size, ...props }: ComboboxProps): JSX.Element;
   slot: {
     field: boolean;
     name: string;
@@ -112,14 +157,28 @@ export declare const Combobox: {
       name: string;
     };
   };
-  Input: ({ className, placeholder, ...props }: ComboboxInputProps) => JSX.Element;
-  Button: ({ children, className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => JSX.Element;
+  Input: ({ error, name, size, ...props }: ComboboxInputProps) => JSX.Element;
+  Button: ({ "aria-label": ariaLabel, children, ...props }: ComboboxButtonProps) => JSX.Element;
   Options: {
-    ({ className, noResultsText, options, ...props }: ComboboxOptionsProps): JSX.Element | null;
+    ({ className, maxResults: _maxResults, maxResultsText, noResultsText, options: _options, ...props }: ComboboxOptionsProps): JSX.Element;
     slot: {
       name: string;
     };
   };
 };
+declare const ComboboxControls: {
+  ({ children, className, ...props }: ComboboxControlsProps): JSX.Element;
+  slot: {
+    name: string;
+  };
+};
+declare const ComboboxInput: ({ error, name, size, ...props }: ComboboxInputProps) => JSX.Element;
+declare const ComboboxButton: ({ "aria-label": ariaLabel, children, ...props }: ComboboxButtonProps) => JSX.Element;
+declare const ComboboxOptions: {
+  ({ className, maxResults: _maxResults, maxResultsText, noResultsText, options: _options, ...props }: ComboboxOptionsProps): JSX.Element;
+  slot: {
+    name: string;
+  };
+};
 //#endregion
-export { Combobox as default };
+export { Combobox, Combobox as default, ComboboxButton, ComboboxControls, ComboboxInput, type ComboboxItem, type ComboboxOption, ComboboxOptions };

package/dist/components/Combobox/Combobox.js

@@ -1,119 +1,205 @@
 "use client";
+import { useId as useId$1 } from "../../hooks/useId.js";
 import { ChevronDownIcon } from "../icons/ChevronDownIcon.js";
 import { getSlotProp } from "../../utils/slots.js";
 import { useSlots } from "../../hooks/useSlots.js";
 import { getFieldError, useField } from "../Field/Field.context.js";
-import { defaultFilter, defaultIsItemDisabled, defaultItemToString, normalizeOptions } from "./combobox-utils.js";
+import { defaultFilter, defaultIsItemDisabled, defaultItemToString, isMatchingText, normalizeOptions, resolveOption } from "./combobox-utils.js";
 import { ComboboxContext, useComboboxContext } from "./Combobox.context.js";
 import { TextInput } from "../TextInput/TextInput.js";
+import { useDebounce } from "../../hooks/useDebounce.js";
 import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useCombobox } from "downshift";
 //#region src/components/Combobox/Combobox.tsx
+const DEFAULT_MAX_RESULTS = 50;
+const ANNOUNCEMENT_DELAY = 750;
+const defaultMaxResultsText = (shown, total) => `Showing ${shown} of ${total} results.`;
 const componentSlots = {
 	ComboboxControls: null,
 	ComboboxOptions: null
 };
-const Combobox = ({ allowCustom = false, children, className, disabled, error, id, inputFilter, isItemDisabled, itemToString, onChange, onHighlight, onSelect, onStateChange, onToggle, openOnClick = true, ref, size, ...props }) => {
+const Combobox = ({ allowCustom = false, children, className, defaultSelected, disabled = false, error, id, inputFilter, isItemDisabled, itemToString, onChange, onHighlight, onSelect, onStateChange, onToggle, openOnClick = true, ref, selected, size, ...props }) => {
 	const field = useField();
-	const uid = id ?? field?.id;
+	const uid = useId$1(id ?? field?.id);
 	const hasError = getFieldError(error, field);
 	const slots = useSlots(componentSlots, children);
-	const userOptions = getSlotProp(slots.ComboboxOptions, "options") ?? [];
-	const items = normalizeOptions(userOptions);
-	const [inputItems, setInputItems] = useState(items);
-	const componentProps = {
-		className: clsx("coop-combobox", className),
-		"data-field": "",
-		"data-size": size ?? void 0,
-		id: uid,
-		...props
+	const options = getSlotProp(slots.ComboboxOptions, "options");
+	const maxResults = getSlotProp(slots.ComboboxOptions, "maxResults") ?? DEFAULT_MAX_RESULTS;
+	const items = useMemo(() => normalizeOptions(options ?? []), [options]);
+	const filter = inputFilter ?? defaultFilter;
+	const toString = itemToString ?? defaultItemToString;
+	const isDisabled = isItemDisabled ?? defaultIsItemDisabled;
+	const [filterText, setFilterText] = useState("");
+	const matchingItems = useMemo(() => filter(items, filterText), [
+		filter,
+		items,
+		filterText
+	]);
+	const visibleItems = useMemo(() => maxResults === false ? matchingItems : matchingItems.slice(0, maxResults), [matchingItems, maxResults]);
+	const [initialSelectedItem] = useState(() => resolveOption(defaultSelected, items));
+	const selectedItem = selected === void 0 ? void 0 : resolveOption(selected, items);
+	const commit = (changes, closeMenu) => {
+		const text = (changes.inputValue ?? "").trim();
+		if (text === "") return {
+			...changes,
+			inputValue: "",
+			selectedItem: null
+		};
+		const picked = changes.selectedItem;
+		const match = picked && isMatchingText(toString(picked), text) ? picked : items.find((item) => !isDisabled(item) && isMatchingText(toString(item), text));
+		const closed = closeMenu ? { isOpen: false } : {};
+		if (match) return {
+			...changes,
+			...closed,
+			inputValue: toString(match),
+			selectedItem: match
+		};
+		if (allowCustom) return {
+			...changes,
+			...closed,
+			inputValue: text,
+			selectedItem: { value: text }
+		};
+		return null;
+	};
+	const getChanges = (state, type, changes) => {
+		const { InputBlur, InputChange, InputClick, InputKeyDownEnter, InputKeyDownEscape } = useCombobox.stateChangeTypes;
+		switch (type) {
+			case InputChange: return changes.inputValue === "" ? {
+				...changes,
+				selectedItem: null
+			} : changes;
+			case InputClick: return openOnClick ? changes : {
+				...changes,
+				isOpen: false
+			};
+			case InputKeyDownEscape: return state.isOpen ? {
+				...changes,
+				inputValue: toString(state.selectedItem)
+			} : changes;
+			case InputBlur: return commit(changes, false) ?? {
+				...changes,
+				inputValue: "",
+				selectedItem: null
+			};
+			case InputKeyDownEnter: return commit(changes, true) ?? {
+				...changes,
+				isOpen: true
+			};
+			default: return changes;
+		}
 	};
-	const inputFilterActual = inputFilter ?? defaultFilter;
-	const itemToStringActual = itemToString ?? defaultItemToString;
-	const comboboxProps = useCombobox({
+	const downshift = useCombobox({
+		getItemId: (index) => visibleItems[index]?.id ?? `${uid}_item_${index}`,
 		id: uid,
-		inputId: uid + "_input",
-		isItemDisabled: isItemDisabled ?? defaultIsItemDisabled,
-		items: inputItems,
-		itemToString: itemToStringActual,
-		labelId: uid + "_label",
-		menuId: uid + "_menu",
+		initialSelectedItem,
+		inputId: `${uid}_input`,
+		isItemDisabled: isDisabled,
+		items: visibleItems,
+		itemToKey: (item) => item?.value,
+		itemToString: toString,
+		labelId: `${uid}_label`,
+		menuId: `${uid}_menu`,
 		onHighlightedIndexChange: onHighlight,
 		onInputValueChange: (event) => {
-			setInputItems(inputFilterActual(items, event.inputValue));
+			if (event.type === useCombobox.stateChangeTypes.InputChange) setFilterText(event.inputValue);
 			onChange?.(event);
 		},
-		onIsOpenChange: onToggle,
-		onSelectedItemChange: (event) => {
-			onSelect?.(event);
+		onIsOpenChange: (event) => {
+			if (!event.isOpen) setFilterText("");
+			onToggle?.(event);
 		},
+		onSelectedItemChange: ({ selectedItem }) => onSelect?.({
+			custom: !!selectedItem && !items.some(({ value }) => value === selectedItem.value),
+			selectedItem,
+			value: selectedItem?.value ?? null
+		}),
 		onStateChange,
-		stateReducer(_, actionAndChanges) {
-			const { InputBlur, InputClick, InputKeyDownEnter } = useCombobox.stateChangeTypes;
-			const { changes: state, type } = actionAndChanges;
-			const currentInput = state.inputValue ?? "";
-			const hasMatch = items.some((item) => itemToStringActual(item) === currentInput);
-			switch (type) {
-				case openOnClick === false && InputClick: return {
-					...state,
-					isOpen: false
-				};
-				case allowCustom === false && InputBlur: return hasMatch ? state : {
-					...state,
-					inputValue: ""
-				};
-				case allowCustom === false && InputKeyDownEnter: return hasMatch ? state : {
-					...state,
-					isOpen: true
-				};
-				default: return state;
-			}
+		selectedItem,
+		stateReducer(state, { changes, type }) {
+			const next = getChanges(state, type, changes);
+			return next.selectedItem && next.selectedItem.value === state.selectedItem?.value ? {
+				...next,
+				selectedItem: state.selectedItem
+			} : next;
 		}
 	});
+	const selection = resolveOption(downshift.selectedItem, items);
+	const selectionText = toString(selection);
+	const selectionValue = selection?.value;
+	const previousSelection = useRef({
+		text: selectionText,
+		value: selectionValue
+	});
+	const { inputValue, setInputValue } = downshift;
+	useEffect(() => {
+		const previous = previousSelection.current;
+		previousSelection.current = {
+			text: selectionText,
+			value: selectionValue
+		};
+		if (selectionValue === previous.value && selectionText !== previous.text && inputValue === previous.text) setInputValue(selectionText);
+	}, [
+		inputValue,
+		selectionText,
+		selectionValue,
+		setInputValue
+	]);
 	return /* @__PURE__ */ jsx(ComboboxContext.Provider, {
 		value: {
 			disabled,
+			downshift,
 			error: hasError,
-			items: inputItems,
-			props: comboboxProps,
+			items: visibleItems,
+			matchCount: matchingItems.length,
 			size
 		},
 		children: /* @__PURE__ */ jsxs("div", {
-			...componentProps,
+			...props,
+			className: clsx("coop-combobox", className),
+			"data-field": "",
+			"data-size": size ?? void 0,
+			id: uid,
 			ref,
 			children: [slots.ComboboxControls, slots.ComboboxOptions]
 		})
 	});
 };
-const ComboboxInput = ({ className, placeholder, ...props }) => {
+const ComboboxControls = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	className: clsx("coop-combobox-controls", className),
+	children
+});
+const ComboboxInput = ({ error, name, size, ...props }) => {
 	const combobox = useComboboxContext();
-	const componentProps = {
-		className,
-		disabled: combobox.disabled,
-		error: combobox.error,
-		placeholder,
-		size: combobox.size,
-		...props
-	};
-	return /* @__PURE__ */ jsx(TextInput, {
-		...componentProps,
-		...combobox.props?.getInputProps({})
+	const disabled = combobox.disabled || props.disabled;
+	const inputProps = combobox.downshift.getInputProps({
+		...props,
+		disabled
 	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [name && /* @__PURE__ */ jsx("input", {
+		disabled,
+		name,
+		type: "hidden",
+		value: combobox.downshift.selectedItem?.value ?? ""
+	}), /* @__PURE__ */ jsx(TextInput, {
+		...inputProps,
+		error: error ?? combobox.error,
+		size: size ?? combobox.size
+	})] });
 };
-const ComboboxButton = ({ children, className, ...props }) => {
+const ComboboxButton = ({ "aria-label": ariaLabel = "Toggle menu", children, ...props }) => {
 	const combobox = useComboboxContext();
-	const componentProps = {
-		"aria-label": props["aria-label"] ?? "Toggle menu",
-		className,
-		disabled: combobox.disabled,
-		...props
-	};
+	const buttonProps = combobox.downshift.getToggleButtonProps({
+		...props,
+		"aria-label": ariaLabel,
+		disabled: combobox.disabled || props.disabled
+	});
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		...componentProps,
-		...combobox.props?.getToggleButtonProps(),
+		...buttonProps,
 		children: children ?? /* @__PURE__ */ jsx(ChevronDownIcon, {
 			stroke: "black",
 			strokeWidth: 1,
@@ -121,38 +207,45 @@ const ComboboxButton = ({ children, className, ...props }) => {
 		})
 	});
 };
-const ComboboxControls = ({ children, className, ...props }) => {
-	const componentProps = {
-		className: clsx("coop-combobox-controls", className),
-		...props
-	};
-	return /* @__PURE__ */ jsx("div", {
-		...componentProps,
-		children
-	});
-};
-const ComboboxOptions = ({ className, noResultsText = "No results", options, ...props }) => {
-	const combobox = useComboboxContext();
-	const componentProps = {
-		className: clsx("coop-combobox-options", className),
-		...props
+const ComboboxOptions = ({ className, maxResults: _maxResults, maxResultsText = defaultMaxResultsText, noResultsText = "No results", options: _options, ...props }) => {
+	const { downshift, items, matchCount } = useComboboxContext();
+	const { getItemProps, getMenuProps, isOpen } = downshift;
+	const getMessage = () => {
+		if (!isOpen) return "";
+		if (items.length === 0) return noResultsText;
+		if (matchCount > items.length) return maxResultsText(items.length, matchCount);
+		return "";
 	};
-	if (!options) return null;
-	return /* @__PURE__ */ jsxs("ul", {
-		...componentProps,
-		...combobox.props?.getMenuProps(),
-		children: [combobox.props?.isOpen && combobox.items?.length ? combobox.items.map((item, index) => {
-			const itemProps = { ...combobox.props?.getItemProps({
-				index,
-				item
-			}) };
+	const message = getMessage();
+	const announcement = useDebounce(message, ANNOUNCEMENT_DELAY);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("ul", {
+		...getMenuProps({
+			...props,
+			className: clsx("coop-combobox-options", className)
+		}),
+		children: [isOpen && items.map((item, index) => {
+			const { children, disabled: _disabled, icon, label, onClick, onMouseDown, onMouseMove, value, ...attributes } = item;
 			return /* @__PURE__ */ jsxs("li", {
-				...itemProps,
-				...item,
-				children: [item?.icon, item.children ?? item.label ?? item.value]
-			}, item.value);
-		}) : null, combobox.props?.isOpen && !combobox.items?.length && /* @__PURE__ */ jsx("li", { children: noResultsText })]
-	});
+				...attributes,
+				...getItemProps({
+					index,
+					item,
+					onClick,
+					onMouseDown,
+					onMouseMove
+				}),
+				children: [icon, children ?? label ?? value]
+			}, value);
+		}), message && /* @__PURE__ */ jsx("li", {
+			"aria-hidden": true,
+			className: "coop-combobox-message",
+			children: message
+		})]
+	}), /* @__PURE__ */ jsx("span", {
+		"aria-live": "polite",
+		className: "sr-only",
+		children: announcement
+	})] });
 };
 Combobox.slot = {
 	field: true,
@@ -166,4 +259,4 @@ Combobox.Input = ComboboxInput;
 Combobox.Button = ComboboxButton;
 Combobox.Options = ComboboxOptions;
 //#endregion
-export { Combobox, Combobox as default };
+export { Combobox, Combobox as default, ComboboxButton, ComboboxControls, ComboboxInput, ComboboxOptions };

package/dist/components/Combobox/combobox-utils.js

@@ -1,10 +1,15 @@
 import { matchSorter } from "match-sorter";
 //#region src/components/Combobox/combobox-utils.ts
-const defaultFilter = (items, inputValue) => {
-	return inputValue !== "" ? matchSorter(items, inputValue, { keys: [(item) => [item.label ?? item.value]] }) : items;
-};
+const defaultFilter = (items, inputValue) => inputValue !== "" ? matchSorter(items, inputValue, { keys: [(item) => [item.label ?? item.value]] }) : items;
 const defaultIsItemDisabled = (item) => item.disabled ?? false;
 const defaultItemToString = (item) => item?.label ?? item?.value ?? "";
 const normalizeOptions = (options) => options.filter((option) => option && typeof option !== "number").map((option) => typeof option === "string" ? { value: option } : option);
+const collator = new Intl.Collator(void 0, { sensitivity: "base" });
+const isMatchingText = (optionText, text) => collator.compare(optionText.trim(), text.trim()) === 0;
+const resolveOption = (option, items) => {
+	if (option === null || option === void 0) return null;
+	const item = typeof option === "string" ? { value: option } : option;
+	return items.find(({ value }) => value === item.value) ?? item;
+};
 //#endregion
-export { defaultFilter, defaultIsItemDisabled, defaultItemToString, normalizeOptions };
+export { defaultFilter, defaultIsItemDisabled, defaultItemToString, isMatchingText, normalizeOptions, resolveOption };

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

@@ -1,2 +1,3 @@
-import { Combobox, ComboboxControlsProps, ComboboxInputProps, ComboboxOptionsProps, ComboboxProps } from "./Combobox.js";
-export { Combobox, Combobox as default, ComboboxControlsProps, ComboboxInputProps, ComboboxOptionsProps, ComboboxProps };
+import { ComboboxItem, ComboboxOption } from "./combobox-utils.js";
+import { Combobox, ComboboxButton, ComboboxButtonProps, ComboboxControls, ComboboxControlsProps, ComboboxInput, ComboboxInputProps, ComboboxOptions, ComboboxOptionsProps, ComboboxProps, ComboboxSelectEvent } from "./Combobox.js";
+export { Combobox, Combobox as default, ComboboxButton, ComboboxButtonProps, ComboboxControls, ComboboxControlsProps, ComboboxInput, ComboboxInputProps, type ComboboxItem, type ComboboxOption, ComboboxOptions, ComboboxOptionsProps, ComboboxProps, ComboboxSelectEvent };

package/dist/components/Combobox/index.js

@@ -1,5 +1,5 @@
-import { Combobox } from "./Combobox.js";
+import { Combobox, ComboboxButton, ComboboxControls, ComboboxInput, ComboboxOptions } from "./Combobox.js";
 //#region src/components/Combobox/index.ts
 var Combobox_default = Combobox;
 //#endregion
-export { Combobox, Combobox_default as default };
+export { Combobox, ComboboxButton, ComboboxControls, ComboboxInput, ComboboxOptions, Combobox_default as default };

package/dist/components/ValidationSummary/validationsummary-utils.js

@@ -5,11 +5,20 @@ const getFieldKeys = (field, id) => [
 	`${field}_display`,
 	field
 ];
+const VISIBLE_CONTROL = "input:not([type=\"hidden\"]), select, textarea";
+const isHiddenInput = (el) => el instanceof HTMLInputElement && el.type === "hidden";
+const getVisibleControl = (form, el) => {
+	for (let node = el.parentElement; node && node !== form; node = node.parentElement) {
+		const control = node.querySelector(VISIBLE_CONTROL);
+		if (control) return control;
+	}
+	return el;
+};
 const getFieldElement = (form, field, id) => {
 	for (const key of getFieldKeys(field, id)) {
 		const item = form.elements.namedItem(key);
 		const el = item instanceof RadioNodeList ? item[0] : item;
-		if (el instanceof Element) return el;
+		if (el instanceof Element) return isHiddenInput(el) ? getVisibleControl(form, el) : el;
 	}
 	return null;
 };

package/dist/index.d.ts

@@ -8,8 +8,9 @@ import { Picture, PictureProps } from "./components/Picture/Picture.js";
 import "./components/Picture/index.js";
 import { Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps } from "./components/Card/Card.js";
 import { Checkbox, CheckboxProps } from "./components/Checkbox/Checkbox.js";
+import { ComboboxItem, ComboboxOption } from "./components/Combobox/combobox-utils.js";
 import { TextInput, TextInputProps } from "./components/TextInput/TextInput.js";
-import { Combobox, ComboboxControlsProps, ComboboxInputProps, ComboboxOptionsProps, ComboboxProps } from "./components/Combobox/Combobox.js";
+import { Combobox, ComboboxButton, ComboboxButtonProps, ComboboxControls, ComboboxControlsProps, ComboboxInput, ComboboxInputProps, ComboboxOptions, ComboboxOptionsProps, ComboboxProps, ComboboxSelectEvent } from "./components/Combobox/Combobox.js";
 import "./components/Combobox/index.js";
 import { DateType, DateTypeStr } from "./components/DatePicker/datepicker-utils.js";
 import { DatePicker, DatePickerProps } from "./components/DatePicker/DatePicker.js";
@@ -38,4 +39,4 @@ import { Textarea, TextareaProps } from "./components/Textarea/Textarea.js";
 import { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps } from "./components/ValidationSummary/ValidationSummary.js";
 import { Wrapper, WrapperProps } from "./components/Wrapper/Wrapper.js";
 import "./components/Wrapper/index.js";
-export { AlertBanner, AlertBannerHeading, AlertBannerProps, Author, AuthorImageProps, AuthorMetaProps, AuthorProps, Box, BoxProps, Button, ButtonProps, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps, Checkbox, CheckboxProps, Combobox, ComboboxControlsProps, ComboboxInputProps, ComboboxOptionsProps, ComboboxProps, DatePicker, DatePickerProps, type DateType, type DateTypeStr, Dialog, DialogBody, DialogHeader, DialogProps, Expandable, ExpandableContent, ExpandableProps, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, FieldsetProps, Flourish, FlourishProps, Form, FormProps, Image, ImageProps, LoadingSpinner, LoadingSpinnerProps, Logo, LogoProps, PasswordInput, PasswordInputProps, Picture, PictureProps, Pill, PillBadge, PillProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger, Radio, RadioProps, RootSVG, Searchbox, SearchboxButton, SearchboxInput, SearchboxProps, Section, SectionProps, Select, SelectOption, SelectOptionGroup, SelectProps, Signpost, SignpostProps, SkipNav, SkipNavProps, Squircle, SquircleProps, SquircleSvgProps, Tag, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps, Wrapper, WrapperProps };
+export { AlertBanner, AlertBannerHeading, AlertBannerProps, Author, AuthorImageProps, AuthorMetaProps, AuthorProps, Box, BoxProps, Button, ButtonProps, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps, Checkbox, CheckboxProps, Combobox, ComboboxButton, ComboboxButtonProps, ComboboxControls, ComboboxControlsProps, ComboboxInput, ComboboxInputProps, type ComboboxItem, type ComboboxOption, ComboboxOptions, ComboboxOptionsProps, ComboboxProps, ComboboxSelectEvent, DatePicker, DatePickerProps, type DateType, type DateTypeStr, Dialog, DialogBody, DialogHeader, DialogProps, Expandable, ExpandableContent, ExpandableProps, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, FieldsetProps, Flourish, FlourishProps, Form, FormProps, Image, ImageProps, LoadingSpinner, LoadingSpinnerProps, Logo, LogoProps, PasswordInput, PasswordInputProps, Picture, PictureProps, Pill, PillBadge, PillProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger, Radio, RadioProps, RootSVG, Searchbox, SearchboxButton, SearchboxInput, SearchboxProps, Section, SectionProps, Select, SelectOption, SelectOptionGroup, SelectProps, Signpost, SignpostProps, SkipNav, SkipNavProps, Squircle, SquircleProps, SquircleSvgProps, Tag, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps, Wrapper, WrapperProps };

package/dist/index.js

@@ -8,7 +8,7 @@ import { Picture } from "./components/Picture/Picture.js";
 import { Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture } from "./components/Card/Card.js";
 import { Checkbox } from "./components/Checkbox/Checkbox.js";
 import { TextInput } from "./components/TextInput/TextInput.js";
-import { Combobox } from "./components/Combobox/Combobox.js";
+import { Combobox, ComboboxButton, ComboboxControls, ComboboxInput, ComboboxOptions } from "./components/Combobox/Combobox.js";
 import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from "./components/Popover/Popover.js";
 import { DatePicker } from "./components/DatePicker/DatePicker.js";
 import { Dialog, DialogBody, DialogHeader } from "./components/Dialog/Dialog.js";
@@ -32,4 +32,4 @@ import { Tag } from "./components/Tag/Tag.js";
 import { Textarea } from "./components/Textarea/Textarea.js";
 import { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt } from "./components/ValidationSummary/ValidationSummary.js";
 import { Wrapper } from "./components/Wrapper/Wrapper.js";
-export { AlertBanner, AlertBannerHeading, Author, Box, Button, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, Checkbox, Combobox, DatePicker, Dialog, DialogBody, DialogHeader, Expandable, ExpandableContent, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, Flourish, Form, Image, LoadingSpinner, Logo, PasswordInput, Picture, Pill, PillBadge, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Radio, RootSVG, Searchbox, SearchboxButton, SearchboxInput, Section, Select, SelectOption, SelectOptionGroup, Signpost, SkipNav, Squircle, Tag, TextInput, Textarea, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, Wrapper };
+export { AlertBanner, AlertBannerHeading, Author, Box, Button, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, Checkbox, Combobox, ComboboxButton, ComboboxControls, ComboboxInput, ComboboxOptions, DatePicker, Dialog, DialogBody, DialogHeader, Expandable, ExpandableContent, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, Flourish, Form, Image, LoadingSpinner, Logo, PasswordInput, Picture, Pill, PillBadge, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Radio, RootSVG, Searchbox, SearchboxButton, SearchboxInput, Section, Select, SelectOption, SelectOptionGroup, Signpost, SkipNav, Squircle, Tag, TextInput, Textarea, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, Wrapper };