@wordpress/components
Version:
UI components for WordPress.
64 lines (63 loc) • 2.05 kB
JavaScript
// packages/components/src/validated-form-controls/components/custom-select-control.tsx
import { forwardRef, useRef } from "@wordpress/element";
import { ControlWithError } from "../control-with-error";
import CustomSelectControl from "../../custom-select-control";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var UnforwardedValidatedCustomSelectControl = ({
required,
onValidate,
customValidity,
onChange,
markWhenOptional,
...restProps
}, forwardedRef) => {
const validityTargetRef = useRef(null);
const valueRef = useRef(restProps.value);
return /* @__PURE__ */ _jsxs("div", {
className: "components-validated-control__wrapper-with-error-delegate",
ref: forwardedRef,
children: [/* @__PURE__ */ _jsx(ControlWithError, {
required,
markWhenOptional,
onValidate: () => {
return onValidate?.(valueRef.current);
},
customValidity,
getValidityTarget: () => validityTargetRef.current,
children: /* @__PURE__ */ _jsx(
CustomSelectControl,
{
__next40pxDefaultSize: true,
onChange: (value) => {
valueRef.current = value.selectedItem;
onChange?.(value);
},
...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