@aokiapp/rjsf-mantine-theme/lib/widgets/SelectWidget.mjs

Mantine theme, fields and widgets for react-jsonschema-form

import { jsx } from 'react/jsx-runtime';
import { useCallback } from 'react';
import { enumOptionsIndexForValue, enumOptionsValueForIndex, labelValue, ariaDescribedByIds } from '@rjsf/utils';
import { MultiSelect, NativeSelect } from '@mantine/core';
import { createErrors } from '../utils/createErrors.mjs';
import { useFieldContext } from '../templates/FieldTemplate.mjs';

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);
  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(
    (value2) => {
      return onChange(enumOptionsValueForIndex(value2, enumOptions, optEmptyVal));
    },
    [onChange, enumOptions, optEmptyVal]
  );
  const { description } = useFieldContext();
  if (multiple) {
    return /* @__PURE__ */ jsx(
      MultiSelect,
      {
        clearable: !required,
        data: (enumOptions || []).map(({ value: value2, label: label2 }, i) => {
          const disabled2 = enumDisabled && enumDisabled.indexOf(value2) !== -1;
          return { value: String(i), label: label2, disabled: disabled2 };
        }),
        description,
        disabled: disabled || readonly,
        error: createErrors(rawErrors, hideError),
        label: labelValue(label, hideLabel, false),
        autoFocus: autofocus,
        required,
        searchable: true,
        value: selectedIndices,
        onChange: handleChange,
        onDropdownClose: handleBlur,
        onDropdownOpen: handleFocus,
        "aria-describedby": ariaDescribedByIds(id),
        placeholder,
        className: "armt-widget-select armt-widget-select-multiple"
      }
    );
  } else {
    const valuedData = (enumOptions || []).map(({ value: value2, label: label2 }, i) => {
      const disabled2 = enumDisabled && enumDisabled.indexOf(value2) !== -1;
      return { value: String(i), label: label2, disabled: disabled2 };
    });
    const data = [{ value: "-1", label: placeholder || "" }, ...valuedData];
    return /* @__PURE__ */ jsx(
      NativeSelect,
      {
        data,
        description,
        disabled: disabled || readonly,
        error: createErrors(rawErrors, hideError),
        label: labelValue(label, hideLabel, false),
        autoFocus: autofocus,
        required,
        value: selectedIndices ?? "-1",
        onChange: (event) => handleChange(event.currentTarget.value),
        onFocus: handleFocus,
        onBlur: handleBlur,
        "aria-describedby": ariaDescribedByIds(id),
        className: "armt-widget-select armt-widget-select-single"
      }
    );
  }
}

export { SelectWidget as default };
//# sourceMappingURL=SelectWidget.mjs.map