@wordpress/components
Version:
UI components for WordPress.
69 lines (66 loc) • 2.35 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ValidatedToggleGroupControl = void 0;
var _element = require("@wordpress/element");
var _controlWithError = require("../control-with-error");
var _toggleGroupControl = require("../../toggle-group-control");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const UnforwardedValidatedToggleGroupControl = ({
required,
customValidator,
onChange,
markWhenOptional,
...restProps
}, forwardedRef) => {
const validityTargetRef = (0, _element.useRef)(null);
const valueRef = (0, _element.useRef)(restProps.value);
const nameAttr = (0, _element.useId)();
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "components-validated-control__wrapper-with-error-delegate",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_controlWithError.ControlWithError, {
required: required,
markWhenOptional: markWhenOptional,
customValidator: () => {
return customValidator?.(valueRef.current);
},
getValidityTarget: () => validityTargetRef.current,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_toggleGroupControl.ToggleGroupControl, {
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
ref: forwardedRef
// TODO: Upstream limitation - In uncontrolled mode, starting from an undefined value then
// setting a value has a visual bug.
,
onChange: value => {
valueRef.current = value;
onChange?.(value);
},
...restProps
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
className: "components-validated-control__error-delegate",
type: "radio",
ref: validityTargetRef,
required: required,
checked: restProps.value !== null,
tabIndex: -1
// A name attribute is needed for the `required` behavior to work.
,
name: nameAttr,
onChange: () => {},
onFocus: e => {
e.target.previousElementSibling?.querySelector('[data-active-item="true"]')?.focus();
}
})]
});
};
const ValidatedToggleGroupControl = exports.ValidatedToggleGroupControl = (0, _element.forwardRef)(UnforwardedValidatedToggleGroupControl);
//# sourceMappingURL=toggle-group-control.js.map