@baseplate-dev/ui-components
Version:
Shared UI component library
39 lines • 2.58 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useComponentStrings } from '#src/contexts/component-strings.js';
import { useControllerMerged } from '#src/hooks/use-controller-merged.js';
import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, } from '../combobox/combobox.js';
import { FormControl, FormDescription, FormItem, FormLabel, FormMessage, } from '../form-item/form-item.js';
/**
* Field with label and error states that wraps a Combobox component.
*/
function ComboboxField({ label, description, error, value, placeholder, options, renderItemLabel, onChange, getOptionLabel = (val) => val.label, getOptionValue = (val) => val.value, className, noResultsText, ...props }) {
const selectedOption = options.find((o) => getOptionValue(o) === value);
const selectedComboboxOption = (() => {
if (value === undefined)
return;
if (!selectedOption)
return null;
return {
label: getOptionLabel(selectedOption),
value: getOptionValue(selectedOption),
};
})();
const { comboboxNoResults } = useComponentStrings();
return (_jsxs(FormItem, { error: error, className: className, children: [_jsx(FormLabel, { children: label }), _jsxs(Combobox, { value: selectedComboboxOption, onChange: (value) => {
onChange?.(value.value);
}, ...props, children: [_jsx(FormControl, { children: _jsx(ComboboxInput, { placeholder: placeholder }) }), _jsxs(ComboboxContent, { children: [options.map((option) => {
const val = getOptionValue(option);
const label = getOptionLabel(option);
return (_jsx(ComboboxItem, { value: val, label: label, children: renderItemLabel
? renderItemLabel(option, { selected: val === value })
: label }, val));
}), _jsx(ComboboxEmpty, { children: noResultsText ?? comboboxNoResults })] })] }), _jsx(FormDescription, { children: description }), _jsx(FormMessage, {})] }));
}
function ComboboxFieldController({ name, control, ...rest }) {
const { field, fieldState: { error }, } = useControllerMerged({ name, control }, rest);
const restProps = rest;
return (_jsx(ComboboxField, { error: error?.message, ...restProps, ...field, value: field.value ?? null }));
}
export { ComboboxField, ComboboxFieldController };
//# sourceMappingURL=combobox-field.js.map