@wordpress/components 31.0.1-next.6deb34194.0 → 31.0.1-next.738bb1424.0

package/src/toggle-group-control/test/index.tsx

@@ -28,13 +28,7 @@ const hoverOutside = async () => {
 };
 
 const ToggleGroupControl = ( props: ToggleGroupControlProps ) => {
-	return (
-		<_ToggleGroupControl
-			{ ...props }
-			__nextHasNoMarginBottom
-			__next40pxDefaultSize
-		/>
-	);
+	return <_ToggleGroupControl { ...props } __next40pxDefaultSize />;
 };
 
 const ControlledToggleGroupControl = ( {

package/src/toggle-group-control/toggle-group-control/README.md

@@ -24,7 +24,6 @@ function Example() {
 			label="my label"
 			value="vertical"
 			isBlock
-			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 		>
 			<ToggleGroupControlOption value="horizontal" label="Horizontal" />
@@ -95,10 +94,3 @@ Start opting into the larger default height that will become the default size in
 
 -   Required: No
 -   Default: `false`
-
-### `__nextHasNoMarginBottom`: `boolean`
-
-Start opting into the new margin-free styles that will become the default in a future version.
-
--   Required: No
--   Default: `false`

package/src/toggle-group-control/toggle-group-control/component.tsx

@@ -7,6 +7,7 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { useMemo, useState } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -21,7 +22,6 @@ import * as styles from './styles';
 import { ToggleGroupControlAsRadioGroup } from './as-radio-group';
 import { ToggleGroupControlAsButtonGroup } from './as-button-group';
 import { useTrackElementOffsetRect } from '../../utils/element-rect';
-import { useMergeRefs } from '@wordpress/compose';
 import { useAnimatedOffsetRect } from '../../utils/hooks/use-animated-offset-rect';
 import { maybeWarnDeprecated36pxSize } from '../../utils/deprecated-36px-size';
 
@@ -30,7 +30,7 @@ function UnconnectedToggleGroupControl(
 	forwardedRef: ForwardedRef< any >
 ) {
 	const {
-		__nextHasNoMarginBottom = false,
+		__nextHasNoMarginBottom: _, // Prevent passing this to the internal component
 		__next40pxDefaultSize = false,
 		__shouldNotWarnDeprecated36pxSize,
 		className,
@@ -91,11 +91,7 @@ function UnconnectedToggleGroupControl(
 	} );
 
 	return (
-		<BaseControl
-			help={ help }
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-			__associatedWPComponentName="ToggleGroupControl"
-		>
+		<BaseControl help={ help }>
 			{ ! hideLabelFromVision && (
 				<VisualLabelWrapper>
 					<BaseControl.VisualLabel>{ label }</BaseControl.VisualLabel>
@@ -143,7 +139,6 @@ function UnconnectedToggleGroupControl(
  *       label="my label"
  *       value="vertical"
  *       isBlock
- *       __nextHasNoMarginBottom
  *       __next40pxDefaultSize
  *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />

package/src/toggle-group-control/toggle-group-control-option/README.md

@@ -20,7 +20,6 @@ function Example() {
 			label="my label"
 			value="vertical"
 			isBlock
-			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 		>
 			<ToggleGroupControlOption

package/src/toggle-group-control/toggle-group-control-option/component.tsx

@@ -52,7 +52,6 @@ function UnforwardedToggleGroupControlOption(
  *       label="my label"
  *       value="vertical"
  *       isBlock
- *       __nextHasNoMarginBottom
  *       __next40pxDefaultSize
  *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />

package/src/toggle-group-control/toggle-group-control-option-icon/README.md

@@ -17,7 +17,7 @@ import { formatLowercase, formatUppercase } from '@wordpress/icons';
 
 function Example() {
 	return (
-		<ToggleGroupControl __nextHasNoMarginBottom __next40pxDefaultSize>
+		<ToggleGroupControl __next40pxDefaultSize>
 			<ToggleGroupControlOptionIcon
 				value="uppercase"
 				icon={ formatUppercase }

package/src/toggle-group-control/toggle-group-control-option-icon/component.tsx

@@ -52,7 +52,7 @@ function UnforwardedToggleGroupControlOptionIcon(
  *
  * function Example() {
  *  return (
- *    <ToggleGroupControl __nextHasNoMarginBottom __next40pxDefaultSize>
+ *    <ToggleGroupControl __next40pxDefaultSize>
  *      <ToggleGroupControlOptionIcon
  *        value="uppercase"
  *        label="Uppercase"

package/src/toggle-group-control/types.ts

@@ -72,7 +72,7 @@ export type WithToolTipProps = {
 
 export type ToggleGroupControlProps = Pick<
 	BaseControlProps,
-	'help' | '__nextHasNoMarginBottom'
+	'__nextHasNoMarginBottom' | 'help'
 > & {
 	/**
 	 * Label for the control.

package/src/tools-panel/stories/index.story.tsx

@@ -116,7 +116,6 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
 						onDeselect={ () => setScale( undefined ) }
 					>
 						<ToggleGroupControl
-							__nextHasNoMarginBottom
 							__next40pxDefaultSize
 							label="Scale"
 							value={ scale }
@@ -472,7 +471,6 @@ export const WithConditionalDefaultControl: StoryFn< typeof ToolsPanel > = ( {
 					isShownByDefault={ !! height }
 				>
 					<ToggleGroupControl
-						__nextHasNoMarginBottom
 						__next40pxDefaultSize
 						label="Scale"
 						value={ scale }
@@ -576,7 +574,6 @@ export const WithConditionallyRenderedControl: StoryFn<
 						isShownByDefault
 					>
 						<ToggleGroupControl
-							__nextHasNoMarginBottom
 							__next40pxDefaultSize
 							label="Scale"
 							value={ scale }

package/src/tools-panel/styles.ts

@@ -12,7 +12,6 @@ import {
 	StyledHelp as BaseControlHelp,
 	Wrapper as BaseControlWrapper,
 } from '../base-control/styles/base-control-styles';
-import { LabelWrapper } from '../input-control/styles/input-control-styles';
 import { COLORS, CONFIG, rtl } from '../utils';
 import { space } from '../utils/space';
 
@@ -124,19 +123,6 @@ export const ToolsPanelItem = css`
 	${ BaseControlHelp } {
 		margin-bottom: 0;
 	}
-
-	/**
-	 * Standardize InputControl and BaseControl labels with other labels when
-	 * inside ToolsPanel.
-	 *
-	 * This is a temporary fix until the different control components have their
-	 * labels normalized.
-	 */
-	&& ${ LabelWrapper } {
-		label {
-			line-height: 1.4em;
-		}
-	}
 `;
 
 export const ToolsPanelItemPlaceholder = css`

package/src/tree-select/README.md

@@ -15,7 +15,6 @@ const MyTreeSelect = () => {
 
 	return (
 		<TreeSelect
-			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 			label="Parent page"
 			noOptionLabel="No parent page"
@@ -62,14 +61,6 @@ const MyTreeSelect = () => {
 
 Start opting into the larger default height that will become the default size in a future version.
 
-### `__nextHasNoMarginBottom`
-
- - Type: `boolean`
- - Required: No
- - Default: `false`
-
-Start opting into the new margin-free styles that will become the default in a future version.
-
 ### `children`
 
  - Type: `ReactNode`

package/src/tree-select/index.tsx

@@ -10,17 +10,8 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { SelectControl } from '../select-control';
 import type { TreeSelectProps, Tree, Truthy } from './types';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
-import { ContextSystemProvider } from '../context';
 import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
-const CONTEXT_VALUE = {
-	BaseControl: {
-		// Temporary during deprecation grace period: Overrides the underlying `__associatedWPComponentName`
-		// via the context system to override the value set by SelectControl.
-		_overrides: { __associatedWPComponentName: 'TreeSelect' },
-	},
-};
-
 function getSelectOptions(
 	tree: Tree[],
 	level = 0
@@ -47,7 +38,6 @@ function getSelectOptions(
  *
  * 	return (
  * 		<TreeSelect
- * 			__nextHasNoMarginBottom
  * 			__next40pxDefaultSize
  * 			label="Parent page"
  * 			noOptionLabel="No parent page"
@@ -86,6 +76,7 @@ function getSelectOptions(
  */
 export function TreeSelect( props: TreeSelectProps ) {
 	const {
+		__nextHasNoMarginBottom: _, // Prevent passing to internal component
 		label,
 		noOptionLabel,
 		onChange,
@@ -108,14 +99,12 @@ export function TreeSelect( props: TreeSelectProps ) {
 	} );
 
 	return (
-		<ContextSystemProvider value={ CONTEXT_VALUE }>
-			<SelectControl
-				__shouldNotWarnDeprecated36pxSize
-				{ ...{ label, options, onChange } }
-				value={ selectedId }
-				{ ...restProps }
-			/>
-		</ContextSystemProvider>
+		<SelectControl
+			__shouldNotWarnDeprecated36pxSize
+			{ ...{ label, options, onChange } }
+			value={ selectedId }
+			{ ...restProps }
+		/>
 	);
 }
 

package/src/tree-select/stories/index.story.tsx

@@ -49,7 +49,6 @@ const TreeSelectWithState: StoryFn< typeof TreeSelect > = ( props ) => {
 
 export const Default = TreeSelectWithState.bind( {} );
 Default.args = {
-	__nextHasNoMarginBottom: true,
 	__next40pxDefaultSize: true,
 	label: 'Label Text',
 	noOptionLabel: 'No parent page',

package/src/validated-form-controls/components/checkbox-control.tsx

@@ -17,11 +17,7 @@ const UnforwardedValidatedCheckboxControl = (
 		customValidity,
 		markWhenOptional,
 		...restProps
-	}: Omit<
-		React.ComponentProps< typeof CheckboxControl >,
-		'__nextHasNoMarginBottom'
-	> &
-		ValidatedControlProps,
+	}: React.ComponentProps< typeof CheckboxControl > & ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLDivElement >( null );
@@ -40,7 +36,6 @@ const UnforwardedValidatedCheckboxControl = (
 			}
 		>
 			<CheckboxControl
-				__nextHasNoMarginBottom
 				// TODO: Upstream limitation - CheckboxControl doesn't support uncontrolled mode, visually.
 				{ ...restProps }
 			/>

package/src/validated-form-controls/components/combobox-control.tsx

@@ -19,7 +19,7 @@ const UnforwardedValidatedComboboxControl = (
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof ComboboxControl >,
-		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
+		'__next40pxDefaultSize'
 	> &
 		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
@@ -52,11 +52,7 @@ const UnforwardedValidatedComboboxControl = (
 				)
 			}
 		>
-			<ComboboxControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize
-				{ ...restProps }
-			/>
+			<ComboboxControl __next40pxDefaultSize { ...restProps } />
 		</ControlWithError>
 	);
 };

package/src/validated-form-controls/components/form-token-field.tsx

@@ -18,7 +18,7 @@ const UnforwardedValidatedFormTokenField = (
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof FormTokenField >,
-		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
+		'__next40pxDefaultSize'
 	> &
 		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLDivElement >
@@ -36,11 +36,7 @@ const UnforwardedValidatedFormTokenField = (
 				customValidity={ customValidity }
 				getValidityTarget={ () => validityTargetRef.current }
 			>
-				<FormTokenField
-					__next40pxDefaultSize
-					__nextHasNoMarginBottom
-					{ ...restProps }
-				/>
+				<FormTokenField __next40pxDefaultSize { ...restProps } />
 			</ControlWithError>
 			<input
 				className="components-validated-control__error-delegate"

package/src/validated-form-controls/components/range-control.tsx

@@ -19,7 +19,7 @@ const UnforwardedValidatedRangeControl = (
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof RangeControl >,
-		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
+		'__next40pxDefaultSize'
 	> &
 		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
@@ -36,7 +36,6 @@ const UnforwardedValidatedRangeControl = (
 		>
 			<RangeControl
 				__next40pxDefaultSize
-				__nextHasNoMarginBottom
 				ref={ mergedRefs }
 				{ ...restProps }
 			/>

package/src/validated-form-controls/components/select-control.tsx

@@ -19,11 +19,7 @@ const UnforwardedValidatedSelectControl = (
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof SelectControl >,
-		| '__next40pxDefaultSize'
-		| '__nextHasNoMarginBottom'
-		| 'multiple'
-		| 'onChange'
-		| 'value'
+		'__next40pxDefaultSize' | 'multiple' | 'onChange' | 'value'
 	> & {
 		value?: string;
 		onChange: ( value: string ) => void;
@@ -41,7 +37,6 @@ const UnforwardedValidatedSelectControl = (
 			getValidityTarget={ () => validityTargetRef.current }
 		>
 			<SelectControl
-				__nextHasNoMarginBottom
 				__next40pxDefaultSize
 				ref={ mergedRefs }
 				{ ...restProps }

package/src/validated-form-controls/components/stories/overview.story.tsx

@@ -17,11 +17,12 @@ import { debounce } from '@wordpress/compose';
 import { ValidatedInputControl } from '..';
 import { formDecorator } from './story-utils';
 import type { ControlWithError } from '../../control-with-error';
+import { Button } from '../../../button';
+import { VStack } from '../../../v-stack';
 
 const meta: Meta< typeof ControlWithError > = {
 	title: 'Components/Selection & Input/Validated Form Controls/Overview',
 	id: 'components-validated-form-controls-overview',
-	decorators: formDecorator,
 };
 export default meta;
 
@@ -32,6 +33,7 @@ type Story = StoryObj< typeof ControlWithError >;
  * move focus to the first control with an error.
  */
 export const WithMultipleControls: Story = {
+	decorators: formDecorator,
 	render: function Template() {
 		const [ text, setText ] = useState< string | undefined >( '' );
 		const [ text2, setText2 ] = useState< string | undefined >( '' );
@@ -78,6 +80,7 @@ export const WithMultipleControls: Story = {
  * will depend on context.
  */
 export const WithHelpTextReplacement: Story = {
+	decorators: formDecorator,
 	render: function Template() {
 		const [ text, setText ] = useState< string | undefined >( '' );
 		const isInvalid = text?.toLowerCase() === 'error';
@@ -130,6 +133,7 @@ export const WithHelpTextReplacement: Story = {
  * They may be unnecessary when responses are generally quick.
  */
 export const AsyncValidation: StoryObj< typeof ValidatedInputControl > = {
+	decorators: formDecorator,
 	render: function Template( { ...args } ) {
 		const [ text, setText ] = useState( '' );
 		const [ customValidity, setCustomValidity ] =
@@ -195,6 +199,7 @@ export const AsyncValidation: StoryObj< typeof ValidatedInputControl > = {
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const AsyncValidationWithTest: StoryObj< typeof ValidatedInputControl > = {
 	...AsyncValidation,
+	decorators: formDecorator,
 	play: async ( { canvasElement } ) => {
 		const canvas = within( canvasElement );
 		await userEvent.click( canvas.getByRole( 'textbox' ) );
@@ -276,6 +281,7 @@ const AsyncValidationWithTest: StoryObj< typeof ValidatedInputControl > = {
  * even if the input has never been interacted with.
  */
 export const CustomErrorsOnSubmit: StoryObj< typeof ValidatedInputControl > = {
+	decorators: formDecorator,
 	args: {
 		label: 'Text',
 		required: true,
@@ -303,3 +309,51 @@ export const CustomErrorsOnSubmit: StoryObj< typeof ValidatedInputControl > = {
 		);
 	},
 };
+
+/**
+ * While it is recommended to rely on the built-in behavior for showing errors by
+ * using a `form` element and `type="submit"` button around validated fields,
+ * it is also possible to show errors at arbitrary times.
+ * This can be done by calling the [`reportValidity()` method](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity)
+ * on a ref of the field itself, or the wrapping `form` element.
+ */
+export const ShowingErrorsAtArbitraryTimes: StoryObj<
+	typeof ValidatedInputControl
+> = {
+	args: {
+		label: 'Text',
+		required: true,
+		help: 'The word "error" will trigger an error.',
+	},
+	decorators: [],
+	render: function Template( { ...args } ) {
+		const [ text, setText ] = useState< string | undefined >( 'error' );
+		const ref = useRef< HTMLInputElement >( null );
+
+		return (
+			<VStack spacing={ 4 } alignment="left">
+				<ValidatedInputControl
+					ref={ ref }
+					{ ...args }
+					value={ text }
+					onChange={ setText }
+					customValidity={
+						text === 'error'
+							? {
+									type: 'invalid',
+									message: 'The word "error" is not allowed.',
+							  }
+							: undefined
+					}
+				/>
+				<Button
+					__next40pxDefaultSize
+					variant="secondary"
+					onClick={ () => ref.current?.reportValidity() }
+				>
+					Report validity
+				</Button>
+			</VStack>
+		);
+	},
+};

package/src/validated-form-controls/components/text-control.tsx

@@ -19,7 +19,7 @@ const UnforwardedValidatedTextControl = (
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof TextControl >,
-		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
+		'__next40pxDefaultSize'
 	> &
 		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
@@ -36,7 +36,6 @@ const UnforwardedValidatedTextControl = (
 		>
 			<TextControl
 				__next40pxDefaultSize
-				__nextHasNoMarginBottom
 				ref={ mergedRefs }
 				{ ...restProps }
 			/>

package/src/validated-form-controls/components/textarea-control.tsx

@@ -17,11 +17,7 @@ const UnforwardedValidatedTextareaControl = (
 		customValidity,
 		markWhenOptional,
 		...restProps
-	}: Omit<
-		React.ComponentProps< typeof TextareaControl >,
-		'__nextHasNoMarginBottom'
-	> &
-		ValidatedControlProps,
+	}: React.ComponentProps< typeof TextareaControl > & ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLTextAreaElement >
 ) => {
 	const validityTargetRef = useRef< HTMLTextAreaElement >( null );
@@ -34,11 +30,7 @@ const UnforwardedValidatedTextareaControl = (
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
-			<TextareaControl
-				__nextHasNoMarginBottom
-				ref={ mergedRefs }
-				{ ...restProps }
-			/>
+			<TextareaControl ref={ mergedRefs } { ...restProps } />
 		</ControlWithError>
 	);
 };

package/src/validated-form-controls/components/toggle-control.tsx

@@ -19,11 +19,7 @@ const UnforwardedValidatedToggleControl = (
 		customValidity,
 		markWhenOptional,
 		...restProps
-	}: Omit<
-		React.ComponentProps< typeof ToggleControl >,
-		'__nextHasNoMarginBottom'
-	> &
-		ValidatedControlProps,
+	}: React.ComponentProps< typeof ToggleControl > & ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
@@ -44,11 +40,7 @@ const UnforwardedValidatedToggleControl = (
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
-			<ToggleControl
-				__nextHasNoMarginBottom
-				ref={ mergedRefs }
-				{ ...restProps }
-			/>
+			<ToggleControl ref={ mergedRefs } { ...restProps } />
 		</ControlWithError>
 	);
 };

package/src/validated-form-controls/components/toggle-group-control.tsx

@@ -18,7 +18,7 @@ const UnforwardedValidatedToggleGroupControl = (
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof ToggleGroupControl >,
-		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
+		'__next40pxDefaultSize'
 	> &
 		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
@@ -36,7 +36,6 @@ const UnforwardedValidatedToggleGroupControl = (
 				getValidityTarget={ () => validityTargetRef.current }
 			>
 				<ToggleGroupControl
-					__nextHasNoMarginBottom
 					__next40pxDefaultSize
 					ref={ forwardedRef }
 					{ ...restProps }

package/src/validated-form-controls/control-with-error.tsx

@@ -36,7 +36,9 @@ function appendRequiredIndicator(
 	}
 	return label;
 }
+
 const VALIDITY_VISIBLE_ATTRIBUTE = 'data-validity-visible';
+const className = 'components-validated-control';
 
 /**
  * HTML elements that support the Constraint Validation API.
@@ -109,6 +111,53 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 		return () => validityTarget?.removeEventListener( 'invalid', handler );
 	}, [ getValidityTarget ] );
 
+	// Suppress the native error popover, while keeping the focus behavior intact.
+	useEffect( () => {
+		const validityTarget = getValidityTarget();
+
+		const suppressNativePopover = ( event: Event ) => {
+			event.preventDefault();
+
+			const target = event.target as ValidityTarget;
+			const firstErrorInForm = Array.from(
+				target.form?.elements ?? []
+			).find( ( el ) => ! ( el as ValidityTarget ).validity.valid );
+
+			if ( ! target.form || firstErrorInForm === target ) {
+				target.focus();
+			}
+		};
+
+		// Radio inputs need special handling because all radio inputs with the
+		// same `name` will be marked as invalid. Without this handling, the last radio option
+		// will be focused with an unsuppressed native popover.
+		const radioSibilings =
+			validityTarget?.type === 'radio' && validityTarget?.name
+				? Array.from(
+						validityTarget
+							?.closest( `.${ className }` )
+							?.querySelectorAll< HTMLInputElement >(
+								`input[type="radio"][name="${ validityTarget?.name }"]`
+							) ?? []
+				  ).filter( ( sibling ) => sibling !== validityTarget )
+				: [];
+
+		validityTarget?.addEventListener( 'invalid', suppressNativePopover );
+		radioSibilings.forEach( ( sibling ) =>
+			sibling.addEventListener( 'invalid', suppressNativePopover )
+		);
+
+		return () => {
+			validityTarget?.removeEventListener(
+				'invalid',
+				suppressNativePopover
+			);
+			radioSibilings.forEach( ( sibling ) =>
+				sibling.removeEventListener( 'invalid', suppressNativePopover )
+			);
+		};
+	}, [ getValidityTarget ] );
+
 	// Handle validity messages.
 	useEffect( () => {
 		const validityTarget = getValidityTarget();
@@ -207,11 +256,7 @@ function UnforwardedControlWithError< C extends React.ReactElement >(
 	};
 
 	return (
-		<div
-			className="components-validated-control"
-			ref={ forwardedRef }
-			onBlur={ onBlur }
-		>
+		<div className={ className } ref={ forwardedRef } onBlur={ onBlur }>
 			{ cloneElement( children, {
 				label: appendRequiredIndicator(
 					children.props.label,