@wordpress/components
Version:
UI components for WordPress.
62 lines (61 loc) • 2.07 kB
JavaScript
/**
* WordPress dependencies
*/
import { forwardRef, useId, useRef } from '@wordpress/element';
/**
* Internal dependencies
*/
import { ControlWithError } from '../control-with-error';
import { ToggleGroupControl } from '../../toggle-group-control';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const UnforwardedValidatedToggleGroupControl = ({
required,
customValidator,
onChange,
markWhenOptional,
...restProps
}, forwardedRef) => {
const validityTargetRef = useRef(null);
const valueRef = useRef(restProps.value);
const nameAttr = useId();
return /*#__PURE__*/_jsxs("div", {
className: "components-validated-control__wrapper-with-error-delegate",
children: [/*#__PURE__*/_jsx(ControlWithError, {
required: required,
markWhenOptional: markWhenOptional,
customValidator: () => {
return customValidator?.(valueRef.current);
},
getValidityTarget: () => validityTargetRef.current,
children: /*#__PURE__*/_jsx(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__*/_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();
}
})]
});
};
export const ValidatedToggleGroupControl = forwardRef(UnforwardedValidatedToggleGroupControl);
//# sourceMappingURL=toggle-group-control.js.map