@wordpress/components 25.15.1-next.79a6196f.0 → 26.0.0

package/src/font-size-picker/index.tsx

@@ -6,7 +6,6 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
-import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
 import { useState, useMemo, forwardRef } from '@wordpress/element';
@@ -31,7 +30,6 @@ import {
 	HeaderHint,
 	HeaderLabel,
 	HeaderToggle,
-	Controls,
 } from './styles';
 import { Spacer } from '../spacer';
 import FontSizePickerSelect from './font-size-picker-select';
@@ -43,8 +41,6 @@ const UnforwardedFontSizePicker = (
 	ref: ForwardedRef< any >
 ) => {
 	const {
-		/** Start opting into the new margin-free styles that will become the default in a future version. */
-		__nextHasNoMarginBottom = false,
 		__next40pxDefaultSize = false,
 		fallbackFontSize,
 		fontSizes = [],
@@ -57,14 +53,6 @@ const UnforwardedFontSizePicker = (
 		withReset = true,
 	} = props;
 
-	if ( ! __nextHasNoMarginBottom ) {
-		deprecated( 'Bottom margin styles for wp.components.FontSizePicker', {
-			since: '6.1',
-			version: '6.4',
-			hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
-		} );
-	}
-
 	const units = useCustomUnits( {
 		availableUnits: unitsProp || [ 'px', 'em', 'rem' ],
 	} );
@@ -159,10 +147,7 @@ const UnforwardedFontSizePicker = (
 					) }
 				</Header>
 			</Spacer>
-			<Controls
-				className="components-font-size-picker__controls"
-				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-			>
+			<div>
 				{ !! fontSizes.length &&
 					shouldUseSelectControl &&
 					! showCustomValueControl && (
@@ -196,7 +181,6 @@ const UnforwardedFontSizePicker = (
 					<FontSizePickerToggleGroup
 						fontSizes={ fontSizes }
 						value={ value }
-						__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 						__next40pxDefaultSize={ __next40pxDefaultSize }
 						size={ size }
 						onChange={ ( newValue ) => {
@@ -243,9 +227,7 @@ const UnforwardedFontSizePicker = (
 							<FlexItem isBlock>
 								<Spacer marginX={ 2 } marginBottom={ 0 }>
 									<RangeControl
-										__nextHasNoMarginBottom={
-											__nextHasNoMarginBottom
-										}
+										__nextHasNoMarginBottom
 										__next40pxDefaultSize={
 											__next40pxDefaultSize
 										}
@@ -297,7 +279,7 @@ const UnforwardedFontSizePicker = (
 						) }
 					</Flex>
 				) }
-			</Controls>
+			</div>
 		</Container>
 	);
 };

package/src/font-size-picker/stories/index.story.tsx

@@ -66,7 +66,6 @@ const TwoFontSizePickersWithState: StoryFn< typeof FontSizePicker > = ( {
 export const Default: StoryFn< typeof FontSizePicker > =
 	FontSizePickerWithState.bind( {} );
 Default.args = {
-	__nextHasNoMarginBottom: true,
 	disableCustomFontSizes: false,
 	fontSizes: [
 		{

package/src/font-size-picker/styles.ts

@@ -36,10 +36,3 @@ export const HeaderLabel = styled( BaseControl.VisualLabel )`
 export const HeaderHint = styled.span`
 	color: ${ COLORS.gray[ 700 ] };
 `;
-
-export const Controls = styled.div< {
-	__nextHasNoMarginBottom: boolean;
-} >`
-	${ ( props ) =>
-		! props.__nextHasNoMarginBottom && `margin-bottom: ${ space( 6 ) };` }
-`;

package/src/font-size-picker/test/index.tsx

@@ -21,13 +21,7 @@ describe( 'FontSizePicker', () => {
 		async ( { value, expectedValue } ) => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					value={ value }
-					onChange={ onChange }
-				/>
-			);
+			render( <FontSizePicker value={ value } onChange={ onChange } /> );
 			const input = screen.getByLabelText( 'Custom' );
 			await user.clear( input );
 			await user.type( input, '80' );
@@ -48,7 +42,6 @@ describe( 'FontSizePicker', () => {
 			const onChange = jest.fn();
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ [ { slug: 'slug', size: firstFontSize } ] }
 					onChange={ onChange }
 				/>
@@ -99,12 +92,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'displays a select control', async () => {
 			const user = userEvent.setup();
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+			render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
 				screen.getByRole( 'button', { name: 'Font size' } )
 			);
@@ -128,11 +116,7 @@ describe( 'FontSizePicker', () => {
 			'displays $expectedLabel as label when value is $value',
 			( { value, expectedLabel } ) => {
 				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
 					screen.getByLabelText( expectedLabel )
@@ -158,7 +142,6 @@ describe( 'FontSizePicker', () => {
 				const onChange = jest.fn();
 				render(
 					<FontSizePicker
-						__nextHasNoMarginBottom
 						fontSizes={ fontSizes }
 						value={ value }
 						onChange={ onChange }
@@ -215,12 +198,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'displays a select control', async () => {
 			const user = userEvent.setup();
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+			render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
 				screen.getByRole( 'button', { name: 'Font size' } )
 			);
@@ -244,11 +222,7 @@ describe( 'FontSizePicker', () => {
 			'defaults to $option when value is $value',
 			( { value, option } ) => {
 				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
 					screen.getByRole( 'button', { name: 'Font size' } )
@@ -267,11 +241,7 @@ describe( 'FontSizePicker', () => {
 			'displays $expectedLabel as label when value is $value',
 			( { value, expectedLabel } ) => {
 				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
 					screen.getByLabelText( expectedLabel )
@@ -315,7 +285,6 @@ describe( 'FontSizePicker', () => {
 				const onChange = jest.fn();
 				render(
 					<FontSizePicker
-						__nextHasNoMarginBottom
 						fontSizes={ fontSizes }
 						value={ value }
 						onChange={ onChange }
@@ -366,12 +335,7 @@ describe( 'FontSizePicker', () => {
 		];
 
 		it( 'displays a toggle group control with t-shirt sizes', () => {
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+			render( <FontSizePicker fontSizes={ fontSizes } /> );
 			const options = screen.getAllByRole( 'radio' );
 			expect( options ).toHaveLength( 5 );
 			expect( options[ 0 ] ).toHaveTextContent( 'S' );
@@ -394,11 +358,7 @@ describe( 'FontSizePicker', () => {
 			'displays $expectedLabel as label when value is $value',
 			( { value, expectedLabel } ) => {
 				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
 					screen.getByLabelText( expectedLabel )
@@ -410,11 +370,7 @@ describe( 'FontSizePicker', () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
 			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-					onChange={ onChange }
-				/>
+				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click( screen.getByRole( 'radio', { name: 'Medium' } ) );
 			expect( onChange ).toHaveBeenCalledTimes( 1 );
@@ -450,12 +406,7 @@ describe( 'FontSizePicker', () => {
 		];
 
 		it( 'displays a toggle group control with t-shirt sizes', () => {
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+			render( <FontSizePicker fontSizes={ fontSizes } /> );
 			const options = screen.getAllByRole( 'radio' );
 			expect( options ).toHaveLength( 4 );
 			expect( options[ 0 ] ).toHaveTextContent( 'S' );
@@ -481,11 +432,7 @@ describe( 'FontSizePicker', () => {
 			'displays $expectedLabel as label when value is $value',
 			( { value, expectedLabel } ) => {
 				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect(
 					screen.getByLabelText( expectedLabel )
@@ -511,7 +458,6 @@ describe( 'FontSizePicker', () => {
 				const onChange = jest.fn();
 				render(
 					<FontSizePicker
-						__nextHasNoMarginBottom
 						fontSizes={ fontSizes }
 						onChange={ onChange }
 					/>
@@ -532,7 +478,6 @@ describe( 'FontSizePicker', () => {
 		it( 'defaults to M when value is 16px', () => {
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
 				/>
@@ -546,11 +491,7 @@ describe( 'FontSizePicker', () => {
 			'has no selection when value is %p',
 			( value ) => {
 				render(
-					<FontSizePicker
-						__nextHasNoMarginBottom
-						fontSizes={ fontSizes }
-						value={ value }
-					/>
+					<FontSizePicker fontSizes={ fontSizes } value={ value } />
 				);
 				expect( screen.getByRole( 'radiogroup' ) ).toBeInTheDocument();
 				expect(
@@ -565,11 +506,7 @@ describe( 'FontSizePicker', () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
 			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-					onChange={ onChange }
-				/>
+				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click(
 				screen.getByRole( 'button', { name: 'Font size' } )
@@ -584,13 +521,7 @@ describe( 'FontSizePicker', () => {
 
 	function commonTests( fontSizes: FontSize[] ) {
 		it( 'shows custom input when value is unknown', () => {
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-					value="3px"
-				/>
-			);
+			render( <FontSizePicker fontSizes={ fontSizes } value="3px" /> );
 			expect( screen.getByLabelText( 'Custom' ) ).toBeInTheDocument();
 		} );
 
@@ -598,11 +529,7 @@ describe( 'FontSizePicker', () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
 			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-					onChange={ onChange }
-				/>
+				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
@@ -615,7 +542,6 @@ describe( 'FontSizePicker', () => {
 		it( 'does not allow custom values when disableCustomFontSizes is set', () => {
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					disableCustomFontSizes
 				/>
@@ -627,12 +553,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'does not display a slider by default', async () => {
 			const user = userEvent.setup();
-			render(
-				<FontSizePicker
-					__nextHasNoMarginBottom
-					fontSizes={ fontSizes }
-				/>
-			);
+			render( <FontSizePicker fontSizes={ fontSizes } /> );
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
@@ -646,7 +567,6 @@ describe( 'FontSizePicker', () => {
 			const onChange = jest.fn();
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					withSlider
 					onChange={ onChange }
@@ -668,7 +588,6 @@ describe( 'FontSizePicker', () => {
 			const onChange = jest.fn();
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
 					onChange={ onChange }
@@ -686,7 +605,6 @@ describe( 'FontSizePicker', () => {
 			const user = userEvent.setup();
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
 					withReset={ false }
@@ -705,7 +623,6 @@ describe( 'FontSizePicker', () => {
 
 			render(
 				<FontSizePicker
-					__nextHasNoMarginBottom
 					fontSizes={ fontSizes }
 					value={ fontSizes[ 0 ].size }
 					units={ [ 'px', 'ch', 'ex' ] }

package/src/font-size-picker/types.ts

@@ -55,6 +55,8 @@ export type FontSizePickerProps = {
 	 * can be safely removed once this happens.)
 	 *
 	 * @default false
+	 * @deprecated Default behavior since WP 6.5. Prop can be safely removed.
+	 * @ignore
 	 */
 	__nextHasNoMarginBottom?: boolean;
 	/**
@@ -111,7 +113,7 @@ export type FontSizePickerSelectOption = {
 
 export type FontSizePickerToggleGroupProps = Pick<
 	FontSizePickerProps,
-	'value' | 'size' | '__nextHasNoMarginBottom' | '__next40pxDefaultSize'
+	'value' | 'size' | '__next40pxDefaultSize'
 > & {
 	fontSizes: NonNullable< FontSizePickerProps[ 'fontSizes' ] >;
 	onChange: NonNullable< FontSizePickerProps[ 'onChange' ] >;

package/src/form-token-field/index.tsx

@@ -74,10 +74,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		__experimentalAutoSelectFirstMatch = false,
 		__nextHasNoMarginBottom = false,
 		tokenizeOnBlur = false,
-	} = useDeprecated36pxDefaultSizeProp< FormTokenFieldProps >(
-		props,
-		'wp.components.FormTokenField'
-	);
+	} = useDeprecated36pxDefaultSizeProp< FormTokenFieldProps >( props );
 
 	const instanceId = useInstanceId( FormTokenField );
 

package/src/gradient-picker/README.md

@@ -17,7 +17,6 @@ const myGradientPicker = () => {
 
 	return (
 		<GradientPicker
-			__nextHasNoMargin
 			value={ gradient }
 			onChange={ ( currentGradient ) => setGradient( currentGradient ) }
 			gradients={ [
@@ -89,13 +88,6 @@ If true, the gradient picker will not be displayed and only defined gradients fr
 -   Required: No
 -   Default: false
 
-### `__nextHasNoMargin`: `boolean`
-
-Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
-
--   Required: No
--   Default: `false`
-
 ### `headingLevel`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'`
 
 The heading level. Only applies in cases where gradients are provided from multiple origins (ie. when the array passed as the `gradients` prop contains two or more items).

package/src/gradient-picker/index.tsx

@@ -4,7 +4,6 @@
 import { __, sprintf } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
 import { useCallback, useMemo } from '@wordpress/element';
-import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -13,7 +12,6 @@ import CircularOptionPicker from '../circular-option-picker';
 import CustomGradientPicker from '../custom-gradient-picker';
 import { VStack } from '../v-stack';
 import { ColorHeading } from '../color-palette/styles';
-import { Spacer } from '../spacer';
 import type {
 	GradientPickerComponentProps,
 	PickerProps,
@@ -181,7 +179,6 @@ function Component( props: PickerProps< any > ) {
  *
  *	return (
  *		<GradientPicker
- *			__nextHasNoMargin
  *			value={ gradient }
  *			onChange={ ( currentGradient ) => setGradient( currentGradient ) }
  *			gradients={ [
@@ -211,8 +208,6 @@ function Component( props: PickerProps< any > ) {
  *
  */
 export function GradientPicker( {
-	/** Start opting into the new margin-free styles that will become the default in a future version. */
-	__nextHasNoMargin = false,
 	className,
 	gradients = [],
 	onChange,
@@ -228,58 +223,39 @@ export function GradientPicker( {
 		[ onChange ]
 	);
 
-	if ( ! __nextHasNoMargin ) {
-		deprecated( 'Outer margin styles for wp.components.GradientPicker', {
-			since: '6.1',
-			version: '6.4',
-			hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',
-		} );
-	}
-
-	const deprecatedMarginSpacerProps = ! __nextHasNoMargin
-		? {
-				marginTop: ! gradients.length ? 3 : undefined,
-				marginBottom: ! clearable ? 6 : 0,
-		  }
-		: {};
-
 	return (
-		// Outmost Spacer wrapper can be removed when deprecation period is over
-		<Spacer marginBottom={ 0 } { ...deprecatedMarginSpacerProps }>
-			<VStack spacing={ gradients.length ? 4 : 0 }>
-				{ ! disableCustomGradients && (
-					<CustomGradientPicker
-						__nextHasNoMargin
-						__experimentalIsRenderedInSidebar={
-							__experimentalIsRenderedInSidebar
-						}
-						value={ value }
-						onChange={ onChange }
-					/>
-				) }
-				{ ( gradients.length > 0 || clearable ) && (
-					<Component
-						{ ...additionalProps }
-						className={ className }
-						clearGradient={ clearGradient }
-						gradients={ gradients }
-						onChange={ onChange }
-						value={ value }
-						actions={
-							clearable &&
-							! disableCustomGradients && (
-								<CircularOptionPicker.ButtonAction
-									onClick={ clearGradient }
-								>
-									{ __( 'Clear' ) }
-								</CircularOptionPicker.ButtonAction>
-							)
-						}
-						headingLevel={ headingLevel }
-					/>
-				) }
-			</VStack>
-		</Spacer>
+		<VStack spacing={ gradients.length ? 4 : 0 }>
+			{ ! disableCustomGradients && (
+				<CustomGradientPicker
+					__experimentalIsRenderedInSidebar={
+						__experimentalIsRenderedInSidebar
+					}
+					value={ value }
+					onChange={ onChange }
+				/>
+			) }
+			{ ( gradients.length > 0 || clearable ) && (
+				<Component
+					{ ...additionalProps }
+					className={ className }
+					clearGradient={ clearGradient }
+					gradients={ gradients }
+					onChange={ onChange }
+					value={ value }
+					actions={
+						clearable &&
+						! disableCustomGradients && (
+							<CircularOptionPicker.ButtonAction
+								onClick={ clearGradient }
+							>
+								{ __( 'Clear' ) }
+							</CircularOptionPicker.ButtonAction>
+						)
+					}
+					headingLevel={ headingLevel }
+				/>
+			) }
+		</VStack>
 	);
 }
 

package/src/gradient-picker/stories/index.story.tsx

@@ -85,7 +85,6 @@ const Template: StoryFn< typeof GradientPicker > = ( {
 
 export const Default = Template.bind( {} );
 Default.args = {
-	__nextHasNoMargin: true,
 	gradients: GRADIENTS,
 };
 

package/src/gradient-picker/types.ts

@@ -93,6 +93,8 @@ export type GradientPickerComponentProps = GradientPickerBaseProps & {
 	 * can be safely removed once this happens.)
 	 *
 	 * @default false
+	 * @deprecated Default behavior since WP 6.5. Prop can be safely removed.
+	 * @ignore
 	 */
 	__nextHasNoMargin?: boolean;
 	/**

package/src/guide/style.scss

@@ -82,7 +82,7 @@
 		}
 
 		li[aria-current="step"] .components-button {
-			color: var(--wp-components-color-accent, var(--wp-admin-theme-color));
+			color: $components-color-accent;
 		}
 	}
 }

package/src/input-control/backdrop.tsx

@@ -7,12 +7,17 @@ import { memo } from '@wordpress/element';
  */
 import { BackdropUI } from './styles/input-control-styles';
 
-function Backdrop( { disabled = false, isFocused = false } ) {
+function Backdrop( {
+	disabled = false,
+	isBorderless = false,
+	isFocused = false,
+} ) {
 	return (
 		<BackdropUI
 			aria-hidden="true"
 			className="components-input-control__backdrop"
 			disabled={ disabled }
+			isBorderless={ isBorderless }
 			isFocused={ isFocused }
 		/>
 	);

package/src/input-control/index.tsx

@@ -55,11 +55,7 @@ export function UnforwardedInputControl(
 		suffix,
 		value,
 		...restProps
-	} = useDeprecated36pxDefaultSizeProp< InputControlProps >(
-		props,
-		'wp.components.InputControl',
-		'6.4'
-	);
+	} = useDeprecated36pxDefaultSizeProp< InputControlProps >( props );
 
 	const [ isFocused, setIsFocused ] = useState( false );
 

package/src/input-control/input-base.tsx

@@ -7,7 +7,7 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { forwardRef, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -23,7 +23,11 @@ import {
 } from './styles/input-control-styles';
 import type { InputBaseProps, LabelPosition } from './types';
 import type { WordPressComponentProps } from '../context';
-import { ContextSystemProvider } from '../context';
+import {
+	ContextSystemProvider,
+	contextConnect,
+	useContextSystem,
+} from '../context';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 
 function useUniqueId( idProp?: string ) {
@@ -73,6 +77,7 @@ export function InputBase(
 		hideLabelFromVision = false,
 		labelPosition,
 		id: idProp,
+		isBorderless = false,
 		isFocused = false,
 		label,
 		prefix,
@@ -80,9 +85,7 @@ export function InputBase(
 		suffix,
 		...restProps
 	} = useDeprecated36pxDefaultSizeProp(
-		props,
-		'wp.components.InputBase',
-		'6.4'
+		useContextSystem( props, 'InputBase' )
 	);
 
 	const id = useUniqueId( idProp );
@@ -138,10 +141,14 @@ export function InputBase(
 						</Suffix>
 					) }
 				</ContextSystemProvider>
-				<Backdrop disabled={ disabled } isFocused={ isFocused } />
+				<Backdrop
+					disabled={ disabled }
+					isBorderless={ isBorderless }
+					isFocused={ isFocused }
+				/>
 			</Container>
 		</Root>
 	);
 }
 
-export default forwardRef( InputBase );
+export default contextConnect( InputBase, 'InputBase' );