@aokiapp/rjsf-mantine-theme/dist/widgets/SelectWidget.cjs

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var utils = require('@rjsf/utils');
var core = require('@mantine/core');
var createErrors = require('../utils/createErrors.cjs');
var FieldTemplate = require('../templates/FieldTemplate.cjs');

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 = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
  const handleFocus = react.useCallback(() => {
    return onFocus(id, utils.enumOptionsValueForIndex(selectedIndices, enumOptions, optEmptyVal));
  }, [onFocus, id, selectedIndices, enumOptions, optEmptyVal]);
  const handleBlur = react.useCallback(() => {
    return onBlur(id, utils.enumOptionsValueForIndex(selectedIndices, enumOptions, optEmptyVal));
  }, [onBlur, id, selectedIndices, enumOptions, optEmptyVal]);
  const handleChange = react.useCallback(
    (value2) => {
      return onChange(utils.enumOptionsValueForIndex(value2, enumOptions, optEmptyVal));
    },
    [onChange, enumOptions, optEmptyVal]
  );
  const { description } = FieldTemplate.useFieldContext();
  if (multiple) {
    return /* @__PURE__ */ jsxRuntime.jsx(
      core.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.createErrors(rawErrors, hideError),
        label: utils.labelValue(label, hideLabel, false),
        autoFocus: autofocus,
        required,
        searchable: true,
        value: selectedIndices,
        onChange: handleChange,
        onDropdownClose: handleBlur,
        onDropdownOpen: handleFocus,
        "aria-describedby": utils.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__ */ jsxRuntime.jsx(
      core.NativeSelect,
      {
        data,
        description,
        disabled: disabled || readonly,
        error: createErrors.createErrors(rawErrors, hideError),
        label: utils.labelValue(label, hideLabel, false),
        autoFocus: autofocus,
        required,
        value: selectedIndices ?? "-1",
        onChange: (event) => handleChange(event.currentTarget.value),
        onFocus: handleFocus,
        onBlur: handleBlur,
        "aria-describedby": utils.ariaDescribedByIds(id),
        className: "armt-widget-select armt-widget-select-single"
      }
    );
  }
}

exports.default = SelectWidget;
//# sourceMappingURL=SelectWidget.cjs.map