@baseplate-dev/ui-components/dist/components/ui/select-field/select-field.js

Shared UI component library

'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useControllerMerged } from '#src/hooks/use-controller-merged.js';
import { FormControl, FormDescription, FormItem, FormLabel, FormMessage, } from '../form-item/form-item.js';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, } from '../select/select.js';
// we have to use a sentinel value to detect null values since Radix Select doesn't support empty values
// https://github.com/radix-ui/primitives/issues/2706
const NULL_SENTINEL = '__NULL_VALUE__';
function SelectField({ label, description, error, value, placeholder, options, renderItemLabel, getOptionLabel = (val) => val.label, getOptionValue = (val) => val.value, className, onChange, ...props }) {
    const selectedOption = options.find((o) => getOptionValue(o) === value);
    const selectedValue = (() => {
        if (!selectedOption || value === undefined)
            return '';
        return value ?? NULL_SENTINEL;
    })();
    return (_jsxs(FormItem, { error: error, className: className, children: [_jsx(FormLabel, { children: label }), _jsxs(Select, { value: selectedValue, onValueChange: (val) => onChange?.(val === NULL_SENTINEL ? null : val), ...props, children: [_jsx(FormControl, { children: _jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: placeholder, children: selectedOption ? getOptionLabel(selectedOption) : null }) }) }), _jsx(SelectContent, { children: _jsx(SelectGroup, { children: options.map((option) => {
                                const val = getOptionValue(option);
                                const label = getOptionLabel(option);
                                return (_jsx(SelectItem, { value: val ?? NULL_SENTINEL, children: renderItemLabel
                                        ? renderItemLabel(option, { selected: val === value })
                                        : label }, val));
                            }) }) })] }), _jsx(FormDescription, { children: description }), _jsx(FormMessage, {})] }));
}
function SelectFieldController({ name, control, ...rest }) {
    const { field, fieldState: { error }, } = useControllerMerged({ name, control }, rest);
    const restProps = rest;
    return _jsx(SelectField, { error: error?.message, ...restProps, ...field });
}
export { SelectField, SelectFieldController };
//# sourceMappingURL=select-field.js.map