DataViews: vendor ValidatedToggleControl

packages/components/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   Remove `ValidatedToggleControl` from the private APIs; it now lives internally in `@wordpress/dataviews`, its only consumer ([#81492](https://github.com/WordPress/gutenberg/pull/81492)).
+
 ## 39.0.0 (2026-08-12)
 
 ### Breaking Changes

packages/components/src/private-apis.ts

@@ -9,7 +9,6 @@ import {
 	ValidatedInputControl,
 	ValidatedContentEditableControl,
 	ValidatedTextareaControl,
-	ValidatedToggleControl,
 } from './validated-form-controls';
 import ContentEditableControl from './content-editable-control';
 
@@ -25,5 +24,4 @@ lock( privateApis, {
 	ValidatedInputControl,
 	ValidatedContentEditableControl,
 	ValidatedTextareaControl,
-	ValidatedToggleControl,
 } );

packages/components/src/validated-form-controls/components/index.ts

@@ -3,4 +3,3 @@ export * from './input-control';
 export * from './range-control';
 export * from './content-editable-control';
 export * from './textarea-control';
-export * from './toggle-control';

packages/dataviews/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   DataForm: Internalize `ValidatedToggleControl` instead of unlocking it from the `@wordpress/components` private APIs. [#81492](https://github.com/WordPress/gutenberg/pull/81492)
+
 ## 18.0.0 (2026-08-12)
 
 ### Breaking Changes

packages/dataviews/src/components/dataform-controls/toggle.tsx

@@ -1,11 +1,8 @@
-import { privateApis } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 import type { DataFormControlProps } from '../../types';
-import { unlock } from '../../lock-unlock';
+import { ValidatedToggleControl } from '../validated-form-controls';
 import getCustomValidity from './utils/get-custom-validity';
 
-const { ValidatedToggleControl } = unlock( privateApis );
-
 export default function Toggle< Item >( {
 	field,
 	onChange,

packages/dataviews/src/components/validated-form-controls/index.ts

@@ -5,5 +5,6 @@ export { ValidatedFormTokenField } from './form-token-field';
 export { ValidatedNumberControl } from './number-control';
 export { ValidatedRadioControl } from './radio-control';
 export { ValidatedSelectControl } from './select-control';
+export { ValidatedToggleControl } from './toggle-control';
 export { ValidatedToggleGroupControl } from './toggle-group-control';
 export type { ValidatedControlProps } from './types';

packages/components/src/validated-form-controls/test/toggle-control.tsx → packages/dataviews/src/components/validated-form-controls/test/toggle-control.tsx

@@ -1,6 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { ValidatedToggleControl } from '../components';
+import { ValidatedToggleControl } from '../toggle-control';
 
 describe( 'ValidatedToggleControl', () => {
 	it( 'should preserve the help description', () => {

packages/components/src/validated-form-controls/components/toggle-control.tsx → packages/dataviews/src/components/validated-form-controls/toggle-control.tsx

@@ -1,8 +1,12 @@
 import { forwardRef, useRef } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
-import { ControlWithError } from '../control-with-error';
+import { ToggleControl } from '@wordpress/components';
+import { ControlWithError } from './control-with-error';
 import type { ValidatedControlProps } from './types';
-import ToggleControl from '../../toggle-control';
+
+type ToggleControlProps = React.ComponentProps< typeof ToggleControl >;
+
+type ValidatedToggleControlProps = ToggleControlProps & ValidatedControlProps;
 
 // TODO: Should we customize the default `missingValue` message? It says to "check this box".
 
@@ -12,7 +16,7 @@ const UnforwardedValidatedToggleControl = (
 		customValidity,
 		markWhenOptional,
 		...restProps
-	}: React.ComponentProps< typeof ToggleControl > & ValidatedControlProps,
+	}: ValidatedToggleControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
@@ -34,7 +38,8 @@ const UnforwardedValidatedToggleControl = (
 	);
 };
 
-export const ValidatedToggleControl = forwardRef(
-	UnforwardedValidatedToggleControl
-);
+export const ValidatedToggleControl: React.ForwardRefExoticComponent<
+	React.PropsWithoutRef< ValidatedToggleControlProps > &
+		React.RefAttributes< HTMLInputElement >
+> = forwardRef( UnforwardedValidatedToggleControl );
 ValidatedToggleControl.displayName = 'ValidatedToggleControl';