import { jsxDEV } from "react/jsx-dev-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__ */ jsxDEV(ChoiceField, { ...props, children: (choiceProps) => /* @__PURE__ */ jsxDEV(SelectFieldInner, { ...props, ...choiceProps }, void 0, false, {
    fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/fields/SelectField/SelectField.tsx",
    lineNumber: 29,
    columnNumber: 5
  }, globalThis) }, void 0, false, {
    fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/fields/SelectField/SelectField.tsx",
    lineNumber: 27,
    columnNumber: 3
  }, globalThis),
  "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__ */ jsxDEV(
      FieldContainer,
      {
        ...fieldContainerProps,
        errors,
        label: labelMiddleware(fieldContainerProps.label),
        children: /* @__PURE__ */ jsxDEV(SelectCreateNewWrapper, { onClick: onAddNew, children: /* @__PURE__ */ jsxDEV(
          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();
              }
            }
          },
          void 0,
          false,
          {
            fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/fields/SelectField/SelectField.tsx",
            lineNumber: 86,
            columnNumber: 6
          },
          globalThis
        ) }, void 0, false, {
          fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/fields/SelectField/SelectField.tsx",
          lineNumber: 85,
          columnNumber: 5
        }, globalThis)
      },
      void 0,
      false,
      {
        fileName: "/__w/interface/interface/packages/admin/src/components/bindingFacade/fields/SelectField/SelectField.tsx",
        lineNumber: 80,
        columnNumber: 4
      },
      globalThis
    );
  }
);
SelectFieldInner.displayName = "SelectFieldInner";
export {
  SelectField,
  SelectFieldInner
};
//# sourceMappingURL=SelectField.js.map
