@wordpress/components
Version:
UI components for WordPress.
71 lines (68 loc) • 2.49 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ValidatedCustomSelectControl = void 0;
var _element = require("@wordpress/element");
var _controlWithError = require("../control-with-error");
var _customSelectControl = _interopRequireDefault(require("../../custom-select-control"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const UnforwardedValidatedCustomSelectControl = ({
required,
customValidator,
onChange,
markWhenOptional,
...restProps
}, forwardedRef) => {
const validityTargetRef = (0, _element.useRef)(null);
const valueRef = (0, _element.useRef)(restProps.value);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "components-validated-control__wrapper-with-error-delegate",
ref: forwardedRef,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
required: required,
markWhenOptional: markWhenOptional,
customValidator: () => {
return customValidator?.(valueRef.current);
},
getValidityTarget: () => validityTargetRef.current,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_customSelectControl.default
// TODO: Upstream limitation - Required isn't passed down correctly,
// so it needs to be set on a delegate element.
, {
__next40pxDefaultSize: true,
onChange: value => {
valueRef.current = value.selectedItem;
onChange?.(value);
},
...restProps
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
className: "components-validated-control__error-delegate",
ref: validityTargetRef,
required: required,
tabIndex: -1,
value: restProps.value?.key ? 'hasvalue' : '',
onChange: () => {},
onFocus: e => {
e.target.previousElementSibling?.querySelector('[role="combobox"]')?.focus();
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
value: "",
children: "No selection"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("option", {
value: "hasvalue",
children: "Has selection"
})]
})]
});
};
const ValidatedCustomSelectControl = exports.ValidatedCustomSelectControl = (0, _element.forwardRef)(UnforwardedValidatedCustomSelectControl);
//# sourceMappingURL=custom-select-control.js.map