@chris-bellman/rjsf-mantine-5-theme/lib/widgets/SelectWidget.js

Mantine 5 theme, fields and widgets for react-jsonschema-form. Based on @aokiapp/rjsf-mantine-theme

import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback } from 'react';
import { ariaDescribedByIds, enumOptionsIndexForValue, enumOptionsValueForIndex, labelValue, } from '@rjsf/utils';
import { MultiSelect, Select } from '@mantine/core';
import { createErrors } from '../utils/createErrors';
import { useFieldContext } from '../templates/FieldTemplate';
/** The `SelectWidget` is a widget for rendering dropdowns.
 *  It is typically used with string properties constrained with enum options.
 *
 * @param props - The `WidgetProps` for this component
 */
function SelectWidget({ id, options, value, required, disabled, readonly, label, hideLabel, rawErrors, multiple = false, autofocus = false, onChange, onBlur, onFocus, hideError, placeholder, }) {
    const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
    const selectedIndices = enumOptionsIndexForValue(value, enumOptions, multiple);
    // Bypassing null check here because enumOptionsValueForIndex will falls into emptyValue if matching fails
    const handleFocus = useCallback(() => {
        return onFocus(id, enumOptionsValueForIndex(selectedIndices, enumOptions, optEmptyVal));
    }, [onFocus, id, selectedIndices, enumOptions, optEmptyVal]);
    const handleBlur = useCallback(() => {
        return onBlur(id, enumOptionsValueForIndex(selectedIndices, enumOptions, optEmptyVal));
    }, [onBlur, id, selectedIndices, enumOptions, optEmptyVal]);
    const handleChange = useCallback((value) => {
        return onChange(enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
    }, [onChange, enumOptions, optEmptyVal]);
    const { description } = useFieldContext();
    if (multiple) {
        return (_jsx(MultiSelect, { clearable: !required, data: (enumOptions || []).map(({ value, label }, i) => {
                const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
                return { value: String(i), label, disabled };
            }), description: description, disabled: disabled || readonly, error: createErrors(rawErrors, hideError), label: labelValue(label, hideLabel, false), autoFocus: autofocus, required: required, searchable: true, value: selectedIndices, onChange: handleChange, onDropdownClose: handleBlur, onDropdownOpen: handleFocus, "aria-describedby": ariaDescribedByIds(id), placeholder: placeholder, className: 'armt-widget-select armt-widget-select-multiple' }));
    }
    else {
        return (_jsx(Select, { allowDeselect: true, 
            // checkIconPosition='right'
            clearable: !required, data: (enumOptions || []).map(({ value, label }, i) => {
                const disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
                return { value: String(i), label, disabled };
            }), description: description, disabled: disabled || readonly, error: createErrors(rawErrors, hideError), label: labelValue(label, hideLabel, false), autoFocus: autofocus, required: required, searchable: true, value: selectedIndices, onChange: handleChange, onDropdownClose: handleBlur, onDropdownOpen: handleFocus, "aria-describedby": ariaDescribedByIds(id), placeholder: placeholder, className: 'armt-widget-select armt-widget-select-single' }));
    }
}
export default SelectWidget;
//# sourceMappingURL=SelectWidget.js.map