Test

WordPress · Feb 13, 2024 · fb7130b · fb7130b
1 parent 961d2d9
commit fb7130b
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 105 deletions.
diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx
@@ -8,7 +8,7 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useState, forwardRef } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -56,8 +56,6 @@ export function UnforwardedInputControl(
 		...restProps
 	} = useDeprecated36pxDefaultSizeProp< InputControlProps >( props );
 
-	const [ isFocused, setIsFocused ] = useState( false );
-
 	const id = useUniqueId( idProp );
 	const classes = classNames( 'components-input-control', className );
 
@@ -86,7 +84,6 @@ export function UnforwardedInputControl(
 				gap={ 3 }
 				hideLabelFromVision={ hideLabelFromVision }
 				id={ id }
-				isFocused={ isFocused }
 				justify="left"
 				label={ label }
 				labelPosition={ labelPosition }
@@ -101,14 +98,12 @@ export function UnforwardedInputControl(
 					__next40pxDefaultSize={ __next40pxDefaultSize }
 					disabled={ disabled }
 					id={ id }
-					isFocused={ isFocused }
 					isPressEnterToChange={ isPressEnterToChange }
 					onKeyDown={ onKeyDown }
 					onValidate={ onValidate }
 					hasPrefix={ !! prefix }
 					hasSuffix={ !! suffix }
 					ref={ ref }
-					setIsFocused={ setIsFocused }
 					size={ size }
 					stateReducer={ stateReducer }
 					{ ...draftHookProps }

diff --git a/packages/components/src/input-control/input-base.tsx b/packages/components/src/input-control/input-base.tsx
@@ -6,14 +6,11 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
-import { useInstanceId } from '@wordpress/compose';
 import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import Backdrop from './backdrop';
-import Label from './label';
 import { getSizeConfig } from './styles/input-control-styles';
 import * as styles from './styles/input-control-styles';
 import type { InputBaseProps, LabelPosition } from './types';
@@ -24,15 +21,14 @@ import {
 	useContextSystem,
 } from '../context';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
-import { Flex } from '../flex';
 import { useCx } from '../utils';
 
-function useUniqueId( idProp?: string ) {
-	const instanceId = useInstanceId( InputBase );
-	const id = `input-base-control-${ instanceId }`;
+// function useUniqueId( idProp?: string ) {
+// 	const instanceId = useInstanceId( InputBase );
+// 	const id = `input-base-control-${ instanceId }`;
 
-	return idProp || id;
-}
+// 	return idProp || id;
+// }
 
 // Adapter to map props for the new ui/flex component.
 function getUIFlexProps( labelPosition?: LabelPosition ) {
@@ -75,7 +71,6 @@ export function InputBase(
 		labelPosition,
 		id: idProp,
 		isBorderless = false,
-		isFocused = false,
 		label,
 		prefix,
 		size = 'default',
@@ -85,7 +80,7 @@ export function InputBase(
 		useContextSystem( props, 'InputBase' )
 	);
 
-	const id = useUniqueId( idProp );
+	// const id = useUniqueId( idProp );
 
 	const { paddingLeft, paddingRight } = getSizeConfig( {
 		inputSize: size,
@@ -101,36 +96,35 @@ export function InputBase(
 	const cx = useCx();
 	const rootClasses = cx(
 		styles.inputBase,
-		styles.inputBaseFocusedStyles( isFocused ),
+		// styles.inputBaseFocusedStyles( isFocused ),
 		className
 	);
 	const containerClasses = cx(
 		styles.inputBaseContainer,
-		styles.inputBaseContainerDisabledStyles( disabled ),
-		styles.inputBaseContainerWidthStyles( {
-			__unstableInputWidth,
-			labelPosition,
-		} ),
+		// styles.inputBaseContainerDisabledStyles( disabled ),
+		// styles.inputBaseContainerWidthStyles( {
+		// 	__unstableInputWidth,
+		// 	labelPosition,
+		// } ),
 		'components-input-control__container'
 	);
 
 	return (
-		// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
-		<Flex
+		<div
 			{ ...restProps }
 			{ ...getUIFlexProps( labelPosition ) }
 			className={ rootClasses }
-			gap={ 2 }
+			// gap={ 2 }
 			ref={ ref }
 		>
-			<Label
+			{ /* <Label
 				className="components-input-control__label"
 				hideLabelFromVision={ hideLabelFromVision }
 				labelPosition={ labelPosition }
 				htmlFor={ id }
 			>
 				{ label }
-			</Label>
+			</Label> */ }
 			<div className={ containerClasses }>
 				<ContextSystemProvider value={ prefixSuffixContextValue }>
 					{ prefix && (
@@ -155,13 +149,13 @@ export function InputBase(
 						</span>
 					) }
 				</ContextSystemProvider>
-				<Backdrop
+				{ /* <Backdrop
 					disabled={ disabled }
 					isBorderless={ isBorderless }
 					isFocused={ isFocused }
-				/>
+				/> */ }
 			</div>
-		</Flex>
+		</div>
 	);
 }
 

diff --git a/packages/components/src/input-control/input-field.tsx b/packages/components/src/input-control/input-field.tsx
@@ -40,18 +40,15 @@ function InputField(
 		hasSuffix,
 		id,
 		isDragEnabled = false,
-		isFocused,
 		isPressEnterToChange = false,
 		onBlur = noop,
 		onChange = noop,
 		onDrag = noop,
 		onDragEnd = noop,
 		onDragStart = noop,
-		onFocus = noop,
 		onKeyDown = noop,
 		onValidate = noop,
 		size = 'default',
-		setIsFocused,
 		stateReducer = ( state: any ) => state,
 		value: valueProp,
 		type,
@@ -90,7 +87,6 @@ function InputField(
 
 	const handleOnBlur = ( event: FocusEvent< HTMLInputElement > ) => {
 		onBlur( event );
-		setIsFocused?.( false );
 
 		/**
 		 * If isPressEnterToChange is set, this commits the value to
@@ -102,11 +98,6 @@ function InputField(
 		}
 	};
 
-	const handleOnFocus = ( event: FocusEvent< HTMLInputElement > ) => {
-		onFocus( event );
-		setIsFocused?.( true );
-	};
-
 	const handleOnChange = ( event: ChangeEvent< HTMLInputElement > ) => {
 		const nextValue = event.target.value;
 		change( nextValue, event );
@@ -241,7 +232,6 @@ function InputField(
 			id={ id }
 			onBlur={ handleOnBlur }
 			onChange={ handleOnChange }
-			onFocus={ handleOnFocus }
 			onKeyDown={ handleOnKeyDown }
 			onMouseDown={ handleOnMouseDown }
 			ref={ ref }

diff --git a/packages/components/src/input-control/types.ts b/packages/components/src/input-control/types.ts
@@ -46,14 +46,6 @@ interface BaseProps {
 	 * @default false
 	 */
 	hideLabelFromVision?: boolean;
-	/**
-	 * Whether the component should be in a focused state.
-	 * Used to coordinate focus states when the actual focused element and the component handling
-	 * visual focus are separate.
-	 *
-	 * @default false
-	 */
-	isFocused: boolean;
 	/**
 	 * The position of the label.
 	 *
@@ -111,7 +103,6 @@ export interface InputFieldProps
 		nextValue: string,
 		event?: SyntheticEvent< HTMLInputElement >
 	) => void;
-	setIsFocused: ( isFocused: boolean ) => void;
 	stateReducer?: StateReducer;
 	/**
 	 * The current value of the input.
@@ -197,17 +188,12 @@ export interface InputControlProps
 		 * be the only prefix prop. Otherwise it tries to do a union of the two prefix properties and you end up
 		 * with an unresolvable type.
 		 *
-		 * `isFocused`, `setIsFocused`, `hasPrefix`, and `hasSuffix` are managed internally by
+		 * `hasPrefix`, and `hasSuffix` are managed internally by
 		 * the InputControl, but the rest of the props for InputField are passed through.
 		 */
 		Omit<
 			WordPressComponentProps< InputFieldProps, 'input', false >,
-			| 'stateReducer'
-			| 'prefix'
-			| 'hasPrefix'
-			| 'hasSuffix'
-			| 'isFocused'
-			| 'setIsFocused'
+			'stateReducer' | 'prefix' | 'hasPrefix' | 'hasSuffix'
 		> {
 	__unstableStateReducer?: InputFieldProps[ 'stateReducer' ];
 }

diff --git a/packages/components/src/search-control/index.tsx b/packages/components/src/search-control/index.tsx
@@ -8,43 +8,16 @@ import classnames from 'classnames';
  */
 import { useInstanceId, useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { Icon, search, closeSmall } from '@wordpress/icons';
 import { forwardRef, useMemo, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import Button from '../button';
 import type { WordPressComponentProps } from '../context/wordpress-component';
-import type { SearchControlProps, SuffixItemProps } from './types';
+import type { SearchControlProps } from './types';
 import type { ForwardedRef } from 'react';
 import { ContextSystemProvider } from '../context';
-import { StyledInputControl, SuffixItemWrapper } from './styles';
-
-function SuffixItem( {
-	searchRef,
-	value,
-	onChange,
-	onClose,
-}: SuffixItemProps ) {
-	if ( ! onClose && ! value ) {
-		return <Icon icon={ search } />;
-	}
-
-	const onReset = () => {
-		onChange( '' );
-		searchRef.current?.focus();
-	};
-
-	return (
-		<Button
-			size="small"
-			icon={ closeSmall }
-			label={ onClose ? __( 'Close search' ) : __( 'Reset search' ) }
-			onClick={ onClose ?? onReset }
-		/>
-	);
-}
+import InputControl from '../input-control';
 
 function UnforwardedSearchControl(
 	{
@@ -89,7 +62,7 @@ function UnforwardedSearchControl(
 
 	return (
 		<ContextSystemProvider value={ contextValue }>
-			<StyledInputControl
+			<InputControl
 				__next40pxDefaultSize
 				id={ instanceId }
 				hideLabelFromVision={ hideLabelFromVision }
@@ -101,22 +74,22 @@ function UnforwardedSearchControl(
 					'components-search-control',
 					className
 				) }
-				onChange={ ( nextValue?: string ) =>
-					onChange( nextValue ?? '' )
-				}
+				// onChange={ ( nextValue?: string ) =>
+				// 	onChange( nextValue ?? '' )
+				// }
 				autoComplete="off"
 				placeholder={ placeholder }
 				value={ value ?? '' }
-				suffix={
-					<SuffixItemWrapper size={ size }>
-						<SuffixItem
-							searchRef={ searchRef }
-							value={ value }
-							onChange={ onChange }
-							onClose={ onClose }
-						/>
-					</SuffixItemWrapper>
-				}
+				// suffix={
+				// 	<SuffixItemWrapper size={ size }>
+				// 		<SuffixItem
+				// 			searchRef={ searchRef }
+				// 			value={ value }
+				// 			onChange={ onChange }
+				// 			onClose={ onClose }
+				// 		/>
+				// 	</SuffixItemWrapper>
+				// }
 				{ ...restProps }
 			/>
 		</ContextSystemProvider>

diff --git a/packages/components/src/select-control/index.tsx b/packages/components/src/select-control/index.tsx
@@ -7,7 +7,7 @@ import classNames from 'classnames';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useState, forwardRef } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -55,7 +55,7 @@ function UnforwardedSelectControl(
 		__nextHasNoMarginBottom = false,
 		...restProps
 	} = useDeprecated36pxDefaultSizeProp( props );
-	const [ isFocused, setIsFocused ] = useState( false );
+	// const [ isFocused, setIsFocused ] = useState( false );
 	const id = useUniqueId( idProp );
 	const helpId = help ? `${ id }__help` : undefined;
 
@@ -64,12 +64,12 @@ function UnforwardedSelectControl(
 
 	const handleOnBlur = ( event: React.FocusEvent< HTMLSelectElement > ) => {
 		onBlur( event );
-		setIsFocused( false );
+		// setIsFocused( false );
 	};
 
 	const handleOnFocus = ( event: React.FocusEvent< HTMLSelectElement > ) => {
 		onFocus( event );
-		setIsFocused( true );
+		// setIsFocused( true );
 	};
 
 	const handleOnChange = (
@@ -100,7 +100,7 @@ function UnforwardedSelectControl(
 				disabled={ disabled }
 				hideLabelFromVision={ hideLabelFromVision }
 				id={ id }
-				isFocused={ isFocused }
+				// isFocused={ isFocused }
 				label={ label }
 				size={ size }
 				suffix={