import { jsx } from "react/jsx-runtime";
import { Component } from "@contember/binding";
import { FieldContainer, SelectCreateNewWrapper, getPortalRoot } from "@contember/ui";
import { memo } from "react";
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__ */ jsx(ChoiceField, { ...props, children: (choiceProps) => /* @__PURE__ */ jsx(SelectFieldInner, { ...props, ...choiceProps }) }),
  "SelectField"
);
const SelectFieldInner = memo(
  ({
    placeholder,
    allowNull,
    currentValue,
    data,
    errors,
    // supressErrors,
    menuZIndex,
    onSelect,
    onClear,
    reactSelectProps,
    onAddNew,
    onSearch,
    isLoading,
    ...fieldContainerProps
  }) => {
    const selectProps = useCommonReactSelectProps({
      reactSelectProps,
      placeholder,
      data,
      isInvalid: (errors?.length ?? 0) > 0,
      onSearch,
      menuZIndex
    });
    const labelMiddleware = useLabelMiddleware();
    return /* @__PURE__ */ jsx(
      FieldContainer,
      {
        ...fieldContainerProps,
        errors,
        label: labelMiddleware(fieldContainerProps.label),
        children: /* @__PURE__ */ jsx(SelectCreateNewWrapper, { onClick: onAddNew, children: /* @__PURE__ */ jsx(
          Select,
          {
            ...selectProps,
            menuPlacement: "auto",
            menuPortalTarget: getPortalRoot(),
            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();
              }
            }
          }
        ) })
      }
    );
  }
);
SelectFieldInner.displayName = "SelectFieldInner";
export {
  SelectField,
  SelectFieldInner
};
//# sourceMappingURL=SelectField.js.map
