// packages/components/src/validated-form-controls/components/custom-select-control.tsx
import { forwardRef, useRef } from "@wordpress/element";
import { ControlWithError } from "../control-with-error.js";
import CustomSelectControl from "../../custom-select-control/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var UnforwardedValidatedCustomSelectControl = ({
  required,
  customValidity,
  markWhenOptional,
  ...restProps
}, forwardedRef) => {
  const validityTargetRef = useRef(null);
  return /* @__PURE__ */ _jsxs("div", {
    className: "components-validated-control__wrapper-with-error-delegate",
    ref: forwardedRef,
    children: [/* @__PURE__ */ _jsx(ControlWithError, {
      required,
      markWhenOptional,
      customValidity,
      getValidityTarget: () => validityTargetRef.current,
      children: /* @__PURE__ */ _jsx(
        CustomSelectControl,
        {
          __next40pxDefaultSize: true,
          ...restProps
        }
      )
    }), /* @__PURE__ */ _jsxs("select", {
      className: "components-validated-control__error-delegate",
      ref: validityTargetRef,
      required,
      tabIndex: -1,
      value: restProps.value?.key ? "hasvalue" : "",
      onChange: () => {
      },
      onFocus: (e) => {
        e.target.previousElementSibling?.querySelector('[role="combobox"]')?.focus();
      },
      children: [/* @__PURE__ */ _jsx("option", {
        value: "",
        children: "No selection"
      }), /* @__PURE__ */ _jsx("option", {
        value: "hasvalue",
        children: "Has selection"
      })]
    })]
  });
};
var ValidatedCustomSelectControl = forwardRef(UnforwardedValidatedCustomSelectControl);
export {
  ValidatedCustomSelectControl
};
//# sourceMappingURL=custom-select-control.js.map
