DataViews: vendor ValidatedToggleGroupControl

packages/components/CHANGELOG.md

@@ -44,6 +44,7 @@
 -   Remove `ValidatedNumberControl` from the private APIs; it now lives internally in `@wordpress/dataviews`, its only consumer ([#81433](https://github.com/WordPress/gutenberg/pull/81433)).
 -   Remove `ValidatedRadioControl` from the private APIs; it now lives internally in `@wordpress/dataviews`, its only consumer ([#81434](https://github.com/WordPress/gutenberg/pull/81434)).
 -   Remove `ValidatedFormTokenField` from the private APIs; it now lives internally in `@wordpress/dataviews`, its only consumer ([#81451](https://github.com/WordPress/gutenberg/pull/81451)).
+-   Remove `ValidatedToggleGroupControl` from the private APIs; it now lives internally in `@wordpress/dataviews`, its only consumer ([#81450](https://github.com/WordPress/gutenberg/pull/81450)).
 -   Remove `ValidatedSelectControl` from the private APIs; it now lives internally in `@wordpress/dataviews`, its only consumer ([#81391](https://github.com/WordPress/gutenberg/pull/81391)).
 -   Move `withIgnoreIMEEvents` to `@wordpress/keycodes`, where it is now a public API, and remove it from this package's private APIs ([#81343](https://github.com/WordPress/gutenberg/pull/81343)).
 -   Extract the private `kebabCase` utility to the new `@wordpress/kebab-case` package and remove it from the private APIs; all consumers now use the package directly ([#81294](https://github.com/WordPress/gutenberg/pull/81294)).

packages/components/src/private-apis.ts

@@ -10,7 +10,6 @@ import {
 	ValidatedContentEditableControl,
 	ValidatedTextareaControl,
 	ValidatedToggleControl,
-	ValidatedToggleGroupControl,
 } from './validated-form-controls';
 import ContentEditableControl from './content-editable-control';
 
@@ -27,5 +26,4 @@ lock( privateApis, {
 	ValidatedContentEditableControl,
 	ValidatedTextareaControl,
 	ValidatedToggleControl,
-	ValidatedToggleGroupControl,
 } );

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

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

packages/components/src/validated-form-controls/components/stories/overview.mdx

@@ -39,9 +39,9 @@ We don't foresee these being needed much, but it is technically possible by the
 
 ### Delegate elements
 
-The implementations for `ToggleGroupControl` and `CustomSelectControl` use a "delegate" element for validation, due to upstream limitations that prevent us from using the actual underlying elements for constraint validation. A delegate element in this context is a visually hidden form element that we "delegate" the Constraint Validation API concerns to.
+The implementation for `CustomSelectControl` uses a "delegate" element for validation, due to upstream limitations that prevent us from using the actual underlying elements for constraint validation. A delegate element in this context is a visually hidden form element that we "delegate" the Constraint Validation API concerns to.
 
-This is not ideal, but lets us maintain a consistent mechanism to scroll to the invalid field when attempting to submit, and block the form from submitting. It is hopefully fine as a stopgap, given the low amount of actual validation that will need happen on these two specific components.
+This is not ideal, but lets us maintain a consistent mechanism to scroll to the invalid field when attempting to submit, and block the form from submitting. It is hopefully fine as a stopgap, given the low amount of actual validation that will need happen on this specific component.
 
 ### Controlled mode only
 

packages/components/src/validated-form-controls/style.scss

@@ -27,11 +27,6 @@
 		border-color: $alert-red;
 	}
 
-	// For ToggleGroupControl
-	&:has(input[type="radio"]:invalid[data-validity-visible]) {
-		--wp-components-color-accent: #{$alert-red};
-	}
-
 	// For ContentEditableControl
 	&:has(input:invalid[data-validity-visible])
 	.components-validated-control__content-editable [role="textbox"] {

packages/dataviews/CHANGELOG.md

@@ -15,6 +15,7 @@
 -   DataForm: Internalize `ValidatedNumberControl` instead of unlocking it from the `@wordpress/components` private APIs. [#81433](https://github.com/WordPress/gutenberg/pull/81433)
 -   DataForm: Internalize `ValidatedRadioControl` instead of unlocking it from the `@wordpress/components` private APIs. [#81434](https://github.com/WordPress/gutenberg/pull/81434)
 -   DataForm: Internalize `ValidatedFormTokenField` instead of unlocking it from the `@wordpress/components` private APIs. [#81451](https://github.com/WordPress/gutenberg/pull/81451)
+-   DataForm: Internalize `ValidatedToggleGroupControl` instead of unlocking it from the `@wordpress/components` private APIs. [#81450](https://github.com/WordPress/gutenberg/pull/81450)
 
 ### New Features
 

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

@@ -1,16 +1,13 @@
 import {
-	privateApis,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	Spinner,
 } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 import type { DataFormControlProps } from '../../types';
-import { unlock } from '../../lock-unlock';
+import { ValidatedToggleGroupControl } from '../validated-form-controls';
 import getCustomValidity from './utils/get-custom-validity';
 import useElements from '../../hooks/use-elements';
 
-const { ValidatedToggleGroupControl } = unlock( privateApis );
-
 export default function ToggleGroup< Item >( {
 	data,
 	field,

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

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

packages/dataviews/src/components/validated-form-controls/style.scss

@@ -25,6 +25,11 @@
 		--wp-admin-theme-color: #{$alert-red};
 		border-color: $alert-red;
 	}
+
+	// For ToggleGroupControl
+	&:has(input[type="radio"]:invalid[data-validity-visible]) {
+		--wp-components-color-accent: #{$alert-red};
+	}
 }
 
 .dataviews-validated-control__error-delegate {

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

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
-import { ValidatedToggleGroupControl } from '../components';
-import { ToggleGroupControlOption } from '../../toggle-group-control';
+import { __experimentalToggleGroupControlOption as ToggleGroupControlOption } from '@wordpress/components';
+import { ValidatedToggleGroupControl } from '../toggle-group-control';
 
 // The `help` prop is rendered visually by BaseControl but is not
 // programmatically associated with the toggle group via aria-describedby.

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

@@ -1,24 +1,30 @@
 import { forwardRef, useId, useRef } from '@wordpress/element';
-import { ControlWithError } from '../control-with-error';
+import { __experimentalToggleGroupControl as ToggleGroupControl } from '@wordpress/components';
+import { ControlWithError } from './control-with-error';
 import type { ValidatedControlProps } from './types';
-import { ToggleGroupControl } from '../../toggle-group-control';
+
+type ToggleGroupControlProps = React.ComponentProps<
+	typeof ToggleGroupControl
+>;
+
+type ValidatedToggleGroupControlProps = ToggleGroupControlProps &
+	ValidatedControlProps;
 
 const UnforwardedValidatedToggleGroupControl = (
 	{
 		required,
 		customValidity,
 		markWhenOptional,
 		...restProps
-	}: React.ComponentProps< typeof ToggleGroupControl > &
-		ValidatedControlProps,
+	}: ValidatedToggleGroupControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
 
 	const nameAttr = useId();
 
 	return (
-		<div className="components-validated-control__wrapper-with-error-delegate">
+		<div className="dataviews-validated-control__wrapper-with-error-delegate">
 			<ControlWithError
 				required={ required }
 				markWhenOptional={ markWhenOptional }
@@ -28,7 +34,7 @@ const UnforwardedValidatedToggleGroupControl = (
 				<ToggleGroupControl ref={ forwardedRef } { ...restProps } />
 			</ControlWithError>
 			<input
-				className="components-validated-control__error-delegate"
+				className="dataviews-validated-control__error-delegate"
 				type="radio"
 				ref={ validityTargetRef }
 				required={ required }
@@ -49,7 +55,8 @@ const UnforwardedValidatedToggleGroupControl = (
 	);
 };
 
-export const ValidatedToggleGroupControl = forwardRef(
-	UnforwardedValidatedToggleGroupControl
-);
+export const ValidatedToggleGroupControl: React.ForwardRefExoticComponent<
+	React.PropsWithoutRef< ValidatedToggleGroupControlProps > &
+		React.RefAttributes< HTMLInputElement >
+> = forwardRef( UnforwardedValidatedToggleGroupControl );
 ValidatedToggleGroupControl.displayName = 'ValidatedToggleGroupControl';