import { createElement, memo } from "react";
import { Component } from "@contember/binding";
import { FieldContainer, SelectCreateNewWrapper } from "@contember/ui";
import Select from "react-select";
import { useLabelMiddleware } from "../../environment/LabelMiddleware.js";
import { useCommonReactSelectProps } from "./useCommonReactSelectProps.js";
import { ChoiceField } from "../ChoiceField/ChoiceField.js";
const SelectField = Component((props) => /* @__PURE__ */ createElement(ChoiceField, {
  ...props
}, (choiceProps) => /* @__PURE__ */ createElement(SelectFieldInner, {
  ...props,
  ...choiceProps
})), "SelectField");
const SelectFieldInner = memo(({
  placeholder,
  allowNull,
  currentValue,
  data,
  errors,
  onSelect,
  onClear,
  reactSelectProps,
  onAddNew,
  onSearch,
  isLoading,
  ...fieldContainerProps
}) => {
  const selectProps = useCommonReactSelectProps({
    reactSelectProps,
    placeholder,
    data,
    isInvalid: (errors?.length ?? 0) > 0,
    onSearch
  });
  const labelMiddleware = useLabelMiddleware();
  return /* @__PURE__ */ createElement(FieldContainer, {
    ...fieldContainerProps,
    errors,
    label: labelMiddleware(fieldContainerProps.label)
  }, /* @__PURE__ */ createElement(SelectCreateNewWrapper, {
    onClick: onAddNew
  }, /* @__PURE__ */ createElement(Select, {
    ...selectProps,
    menuPlacement: "auto",
    isClearable: allowNull === true,
    value: currentValue,
    isLoading,
    onChange: (newValue, actionMeta) => {
      const value = newValue;
      if (actionMeta.action === "select-option") {
        onSelect(value);
      } else if (actionMeta.action === "clear") {
        onClear();
      }
    }
  })));
});
export { SelectField, SelectFieldInner };
//# sourceMappingURL=SelectField.js.map
