@baseplate-dev/ui-components/dist/components/ui/multi-combobox-field/multi-combobox-field.js

Shared UI component library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { notEmpty } from '@baseplate-dev/utils';
import { useComponentStrings } from '#src/contexts/component-strings.js';
import { useControllerMerged } from '#src/hooks/use-controller-merged.js';
import { FormControl, FormDescription, FormItem, FormLabel, FormMessage, } from '../form-item/form-item.js';
import { MultiCombobox, MultiComboboxContent, MultiComboboxEmpty, MultiComboboxInput, MultiComboboxItem, } from '../multi-combobox/multi-combobox.js';
/**
 * Field with label and error states that wraps a MultiCombobox component.
 */
function MultiComboboxField({ label, description, error, value, placeholder, options, renderItemLabel, onChange, getOptionLabel = (val) => val.label, getOptionValue = (val) => val.value, className, noResultsText, ...props }) {
    const selectedOptions = value
        ?.map((val) => options.find((option) => getOptionValue(option) === val))
        .filter(notEmpty);
    const selectedValues = selectedOptions?.map((option) => ({
        label: getOptionLabel(option),
        value: getOptionValue(option),
    }));
    const { comboboxNoResults } = useComponentStrings();
    return (_jsxs(FormItem, { error: error, className: className, children: [_jsx(FormLabel, { children: label }), _jsxs(MultiCombobox, { value: selectedValues, onChange: (value) => {
                    const newValues = new Set(value.map((val) => val.value));
                    onChange?.(options.map(getOptionValue).filter((val) => newValues.has(val)));
                }, ...props, children: [_jsx(FormControl, { children: _jsx(MultiComboboxInput, { placeholder: placeholder }) }), _jsxs(MultiComboboxContent, { children: [options.map((option) => {
                                const val = getOptionValue(option);
                                const label = getOptionLabel(option);
                                return (_jsx(MultiComboboxItem, { value: val, label: label, children: renderItemLabel
                                        ? renderItemLabel(option, {
                                            selected: value?.includes(val) ?? false,
                                        })
                                        : label }, val));
                            }), _jsx(MultiComboboxEmpty, { children: noResultsText ?? comboboxNoResults })] })] }), _jsx(FormDescription, { children: description }), _jsx(FormMessage, {})] }));
}
function MultiComboboxFieldController({ name, control, ...rest }) {
    const { field, fieldState: { error }, } = useControllerMerged({ name, control }, rest);
    const restProps = rest;
    return (_jsx(MultiComboboxField, { error: error?.message, ...restProps, ...field }));
}
export { MultiComboboxField, MultiComboboxFieldController };
//# sourceMappingURL=multi-combobox-field.js.map