@wordpress/components 27.3.0 → 27.5.0

package/src/focal-point-picker/tooltip/index.native.js

@@ -54,7 +54,7 @@ function Tooltip( { children, onPress, style, visible } ) {
 	);
 }
 
-function Label( { align, text, xOffset, yOffset } ) {
+function Label( { align = 'center', text, xOffset = 0, yOffset = 0 } ) {
 	const animationValue = useRef( new Animated.Value( 0 ) ).current;
 	const [ dimensions, setDimensions ] = useState( null );
 	const visible = useContext( TooltipContext );
@@ -139,12 +139,6 @@ function Label( { align, text, xOffset, yOffset } ) {
 	);
 }
 
-Label.defaultProps = {
-	align: 'center',
-	xOffset: 0,
-	yOffset: 0,
-};
-
 Tooltip.Label = Label;
 
 export default Tooltip;

package/src/focal-point-picker/utils.ts

@@ -34,7 +34,9 @@ export function getExtension( filename = '' ): string {
  * @return Whether the file is a video.
  */
 export function isVideoType( filename: string = '' ): boolean {
-	if ( ! filename ) return false;
+	if ( ! filename ) {
+		return false;
+	}
 	return (
 		filename.startsWith( 'data:video/' ) ||
 		VIDEO_EXTENSIONS.includes( getExtension( filename ) )

package/src/font-size-picker/README.md

@@ -92,6 +92,7 @@ Size of the control.
 Available units for custom font size selection.
 
 -   Required: No
+-   Default: `[ 'px', 'em', 'rem' ]`
 
 ### `value`: `number | string`
 

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

@@ -36,6 +36,8 @@ import FontSizePickerSelect from './font-size-picker-select';
 import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
 import { T_SHIRT_NAMES } from './constants';
 
+const DEFAULT_UNITS = [ 'px', 'em', 'rem' ];
+
 const UnforwardedFontSizePicker = (
 	props: FontSizePickerProps,
 	ref: ForwardedRef< any >
@@ -47,14 +49,14 @@ const UnforwardedFontSizePicker = (
 		disableCustomFontSizes = false,
 		onChange,
 		size = 'default',
-		units: unitsProp,
+		units: unitsProp = DEFAULT_UNITS,
 		value,
 		withSlider = false,
 		withReset = true,
 	} = props;
 
 	const units = useCustomUnits( {
-		availableUnits: unitsProp || [ 'px', 'em', 'rem' ],
+		availableUnits: unitsProp,
 	} );
 
 	const shouldUseSelectControl = fontSizes.length > 5;

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

@@ -84,7 +84,6 @@ Default.args = {
 			size: 26,
 		},
 	],
-	units: [ 'px', 'em', 'rem' ],
 	value: 16,
 	withSlider: false,
 };

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

@@ -28,6 +28,8 @@ export type FontSizePickerProps = {
 	) => void;
 	/**
 	 * Available units for custom font size selection.
+	 *
+	 * @default `[ 'px', 'em', 'rem' ]`
 	 */
 	units?: string[];
 	/**

package/src/form-toggle/index.tsx

@@ -2,6 +2,12 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -31,7 +37,8 @@ export const noop = () => {};
  * ```
  */
 export function FormToggle(
-	props: WordPressComponentProps< FormToggleProps, 'input', false >
+	props: WordPressComponentProps< FormToggleProps, 'input', false >,
+	ref: ForwardedRef< HTMLInputElement >
 ) {
 	const {
 		className,
@@ -56,6 +63,7 @@ export function FormToggle(
 				onChange={ onChange }
 				disabled={ disabled }
 				{ ...additionalProps }
+				ref={ ref }
 			/>
 			<span className="components-form-toggle__track"></span>
 			<span className="components-form-toggle__thumb"></span>
@@ -63,4 +71,4 @@ export function FormToggle(
 	);
 }
 
-export default FormToggle;
+export default forwardRef( FormToggle );

package/src/form-toggle/stories/index.story.tsx

@@ -11,7 +11,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { FormToggle } from '..';
+import FormToggle from '..';
 
 const meta: Meta< typeof FormToggle > = {
 	component: FormToggle,

package/src/heading/test/__snapshots__/index.tsx.snap

@@ -5,6 +5,7 @@ exports[`props should render correctly 1`] = `
   color: #1e1e1e;
   line-height: 1.4;
   margin: 0;
+  text-wrap: pretty;
   color: #1e1e1e;
   font-size: calc(1.95 * 13px);
   font-weight: 600;
@@ -25,6 +26,7 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
+@@ -1,10 +1,10 @@
   Array [
     Object {
       "color": "#1e1e1e",
@@ -34,8 +36,8 @@ Snapshot Diff:
       "font-weight": "600",
       "line-height": "1.4",
       "margin": "0",
+      "text-wrap": "pretty",
     },
-  ]
 `;
 
 exports[`props should render level as a string 1`] = `
@@ -43,6 +45,7 @@ Snapshot Diff:
 - Received styles
 + Base styles
 
+@@ -1,10 +1,10 @@
   Array [
     Object {
       "color": "#1e1e1e",
@@ -52,6 +55,6 @@ Snapshot Diff:
       "font-weight": "600",
       "line-height": "1.4",
       "margin": "0",
+      "text-wrap": "pretty",
     },
-  ]
 `;

package/src/higher-order/navigate-regions/style.scss

@@ -29,9 +29,9 @@
 
 	// Header top bar when Distraction free mode is on.
 	&.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
-	.interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel,
-	.interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,
-	.interface-interface-skeleton__actions .edit-post-layout__toggle-entities-saved-states-panel,
+	.interface-interface-skeleton__sidebar .editor-layout__toggle-sidebar-panel,
+	.interface-interface-skeleton__actions .editor-layout__toggle-publish-panel,
+	.interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel,
 	.editor-post-publish-panel {
 		outline: 4px solid $components-color-accent;
 		outline-offset: -4px;

package/src/input-control/backdrop.tsx

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

package/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
@@ -57,8 +57,6 @@ export function UnforwardedInputControl(
 		...restProps
 	} = useDeprecated36pxDefaultSizeProp< InputControlProps >( props );
 
-	const [ isFocused, setIsFocused ] = useState( false );
-
 	const id = useUniqueId( idProp );
 	const classes = classNames( 'components-input-control', className );
 
@@ -87,7 +85,6 @@ export function UnforwardedInputControl(
 				gap={ 3 }
 				hideLabelFromVision={ hideLabelFromVision }
 				id={ id }
-				isFocused={ isFocused }
 				justify="left"
 				label={ label }
 				labelPosition={ labelPosition }
@@ -103,14 +100,12 @@ export function UnforwardedInputControl(
 					className="components-input-control__input"
 					disabled={ disabled }
 					id={ id }
-					isFocused={ isFocused }
 					isPressEnterToChange={ isPressEnterToChange }
 					onKeyDown={ onKeyDown }
 					onValidate={ onValidate }
 					paddingInlineStart={ prefix ? space( 2 ) : undefined }
 					paddingInlineEnd={ suffix ? space( 2 ) : undefined }
 					ref={ ref }
-					setIsFocused={ setIsFocused }
 					size={ size }
 					stateReducer={ stateReducer }
 					{ ...draftHookProps }

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

@@ -78,7 +78,6 @@ export function InputBase(
 		labelPosition,
 		id: idProp,
 		isBorderless = false,
-		isFocused = false,
 		label,
 		prefix,
 		size = 'default',
@@ -109,8 +108,6 @@ export function InputBase(
 			{ ...getUIFlexProps( labelPosition ) }
 			className={ className }
 			gap={ 2 }
-			isFocused={ isFocused }
-			labelPosition={ labelPosition }
 			ref={ ref }
 		>
 			<Label
@@ -141,11 +138,7 @@ export function InputBase(
 						</Suffix>
 					) }
 				</ContextSystemProvider>
-				<Backdrop
-					disabled={ disabled }
-					isBorderless={ isBorderless }
-					isFocused={ isFocused }
-				/>
+				<Backdrop disabled={ disabled } isBorderless={ isBorderless } />
 			</Container>
 		</Root>
 	);

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

@@ -35,18 +35,15 @@ function InputField(
 		dragThreshold = 10,
 		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,
@@ -85,7 +82,6 @@ function InputField(
 
 	const handleOnBlur = ( event: FocusEvent< HTMLInputElement > ) => {
 		onBlur( event );
-		setIsFocused?.( false );
 
 		/**
 		 * If isPressEnterToChange is set, this commits the value to
@@ -97,11 +93,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 );
@@ -164,7 +155,9 @@ function InputField(
 				target,
 			};
 
-			if ( ! distance ) return;
+			if ( ! distance ) {
+				return;
+			}
 			event.stopPropagation();
 
 			/**
@@ -222,7 +215,6 @@ function InputField(
 			id={ id }
 			onBlur={ handleOnBlur }
 			onChange={ handleOnChange }
-			onFocus={ handleOnFocus }
 			onKeyDown={ withIgnoreIMEEvents( handleOnKeyDown ) }
 			onMouseDown={ handleOnMouseDown }
 			ref={ ref }

package/src/input-control/label.tsx

@@ -15,7 +15,9 @@ export default function Label( {
 	htmlFor,
 	...props
 }: WordPressComponentProps< InputControlLabelProps, 'label', false > ) {
-	if ( ! children ) return null;
+	if ( ! children ) {
+		return null;
+	}
 
 	if ( hideLabelFromVision ) {
 		return (

package/src/input-control/stories/index.story.tsx

@@ -2,13 +2,18 @@
  * External dependencies
  */
 import type { Meta, StoryFn } from '@storybook/react';
-
+/**
+ * WordPress dependencies
+ */
+import { seen, unseen } from '@wordpress/icons';
+import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import InputControl from '..';
 import { InputControlPrefixWrapper } from '../input-prefix-wrapper';
 import { InputControlSuffixWrapper } from '../input-suffix-wrapper';
+import Button from '../../button';
 
 const meta: Meta< typeof InputControl > = {
 	title: 'Components (Experimental)/InputControl',
@@ -82,3 +87,28 @@ WithEdgeLabel.args = {
 	__unstableInputWidth: '20em',
 	labelPosition: 'edge',
 };
+
+export const ShowPassword: StoryFn< typeof InputControl > = ( args ) => {
+	const [ visible, setVisible ] = useState( false );
+	return (
+		<InputControl
+			type={ visible ? 'text' : 'password' }
+			label="Password"
+			suffix={
+				<InputControlSuffixWrapper>
+					<div style={ { display: 'flex' } }>
+						<Button
+							size="small"
+							icon={ visible ? unseen : seen }
+							onClick={ () => setVisible( ( value ) => ! value ) }
+							label={
+								visible ? 'Hide password' : 'Show password'
+							}
+						/>
+					</div>
+				</InputControlSuffixWrapper>
+			}
+			{ ...args }
+		/>
+	);
+};

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

@@ -23,23 +23,76 @@ type ContainerProps = {
 	labelPosition?: LabelPosition;
 };
 
-type RootProps = {
-	isFocused?: boolean;
-	labelPosition?: LabelPosition;
+export const Prefix = styled.span`
+	box-sizing: border-box;
+	display: block;
+`;
+
+export const Suffix = styled.span`
+	align-items: center;
+	align-self: stretch;
+	box-sizing: border-box;
+	display: flex;
+`;
+
+type BackdropProps = {
+	disabled?: boolean;
+	isBorderless?: boolean;
 };
 
-const rootFocusedStyles = ( { isFocused }: RootProps ) => {
-	if ( ! isFocused ) return '';
+const backdropBorderColor = ( {
+	disabled,
+	isBorderless,
+}: BackdropProps ): CSSProperties[ 'borderColor' ] => {
+	if ( isBorderless ) {
+		return 'transparent';
+	}
+
+	if ( disabled ) {
+		return COLORS.ui.borderDisabled;
+	}
 
-	return css( { zIndex: 1 } );
+	return COLORS.ui.border;
 };
 
-export const Root = styled( Flex )< RootProps >`
+export const BackdropUI = styled.div< BackdropProps >`
+	&&& {
+		box-sizing: border-box;
+		border-color: ${ backdropBorderColor };
+		border-radius: inherit;
+		border-style: solid;
+		border-width: 1px;
+		bottom: 0;
+		left: 0;
+		margin: 0;
+		padding: 0;
+		pointer-events: none;
+		position: absolute;
+		right: 0;
+		top: 0;
+
+		${ rtl( { paddingLeft: 2 } ) }
+	}
+`;
+
+export const Root = styled( Flex )`
 	box-sizing: border-box;
 	position: relative;
 	border-radius: 2px;
 	padding-top: 0;
-	${ rootFocusedStyles }
+
+	// Focus within, excluding cases where auxiliary controls in prefix or suffix have focus.
+	&:focus-within:not( :has( :is( ${ Prefix }, ${ Suffix } ):focus-within ) ) {
+		z-index: 1;
+
+		${ BackdropUI } {
+			border-color: ${ COLORS.ui.borderFocus };
+			box-shadow: ${ CONFIG.controlBoxShadowFocus };
+			// Windows High Contrast mode will show this outline, but not the box-shadow.
+			outline: 2px solid transparent;
+			outline-offset: -2px;
+		}
+	}
 `;
 
 const containerDisabledStyles = ( { disabled }: ContainerProps ) => {
@@ -54,9 +107,13 @@ const containerWidthStyles = ( {
 	__unstableInputWidth,
 	labelPosition,
 }: ContainerProps ) => {
-	if ( ! __unstableInputWidth ) return css( { width: '100%' } );
+	if ( ! __unstableInputWidth ) {
+		return css( { width: '100%' } );
+	}
 
-	if ( labelPosition === 'side' ) return '';
+	if ( labelPosition === 'side' ) {
+		return '';
+	}
 
 	if ( labelPosition === 'edge' ) {
 		return css( {
@@ -90,7 +147,9 @@ type InputProps = {
 };
 
 const disabledStyles = ( { disabled }: InputProps ) => {
-	if ( ! disabled ) return '';
+	if ( ! disabled ) {
+		return '';
+	}
 
 	return css( {
 		color: COLORS.ui.textDisabled,
@@ -108,7 +167,9 @@ export const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 	const fontSize = sizes[ size as Size ] || sizes.default;
 	const fontSizeMobile = '16px';
 
-	if ( ! fontSize ) return '';
+	if ( ! fontSize ) {
+		return '';
+	}
 
 	return css`
 		font-size: ${ fontSizeMobile };
@@ -260,72 +321,3 @@ export const Label = (
 export const LabelWrapper = styled( FlexItem )`
 	max-width: calc( 100% - 10px );
 `;
-
-type BackdropProps = {
-	disabled?: boolean;
-	isBorderless?: boolean;
-	isFocused?: boolean;
-};
-
-const backdropFocusedStyles = ( {
-	disabled,
-	isBorderless,
-	isFocused,
-}: BackdropProps ): SerializedStyles => {
-	let borderColor = isBorderless ? 'transparent' : COLORS.ui.border;
-
-	let boxShadow;
-	let outline;
-	let outlineOffset;
-
-	if ( isFocused ) {
-		borderColor = COLORS.ui.borderFocus;
-		boxShadow = CONFIG.controlBoxShadowFocus;
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline = `2px solid transparent`;
-		outlineOffset = `-2px`;
-	}
-
-	if ( disabled ) {
-		borderColor = isBorderless ? 'transparent' : COLORS.ui.borderDisabled;
-	}
-
-	return css( {
-		boxShadow,
-		borderColor,
-		borderStyle: 'solid',
-		borderWidth: 1,
-		outline,
-		outlineOffset,
-	} );
-};
-
-export const BackdropUI = styled.div< BackdropProps >`
-	&&& {
-		box-sizing: border-box;
-		border-radius: inherit;
-		bottom: 0;
-		left: 0;
-		margin: 0;
-		padding: 0;
-		pointer-events: none;
-		position: absolute;
-		right: 0;
-		top: 0;
-
-		${ backdropFocusedStyles }
-		${ rtl( { paddingLeft: 2 } ) }
-	}
-`;
-
-export const Prefix = styled.span`
-	box-sizing: border-box;
-	display: block;
-`;
-
-export const Suffix = styled.span`
-	align-items: center;
-	align-self: stretch;
-	box-sizing: border-box;
-	display: flex;
-`;

package/src/input-control/test/index.js

@@ -112,10 +112,13 @@ describe( 'InputControl', () => {
 				const onKeyDown = ( { key } ) => {
 					heldKeySet.add( key );
 					if ( key === 'Escape' ) {
-						if ( heldKeySet.has( 'Meta' ) ) setState( 'qux' );
-						else if ( heldKeySet.has( 'Alt' ) )
+						if ( heldKeySet.has( 'Meta' ) ) {
+							setState( 'qux' );
+						} else if ( heldKeySet.has( 'Alt' ) ) {
 							setState( undefined );
-						else setState( '' );
+						} else {
+							setState( '' );
+						}
 					}
 				};
 				const onKeyUp = ( { key } ) => heldKeySet.delete( key );
@@ -204,8 +207,9 @@ describe( 'InputControl', () => {
 						if (
 							action.type === 'COMMIT' &&
 							action.payload.event.type === 'blur'
-						)
+						) {
 							value = value.replace( /\bnow\b/, 'meow' );
+						}
 
 						return { ...state, value };
 					} }

package/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
 	) => void;
 	paddingInlineStart?: CSSProperties[ 'paddingInlineStart' ];
 	paddingInlineEnd?: CSSProperties[ 'paddingInlineEnd' ];
-	setIsFocused: ( isFocused: boolean ) => void;
 	stateReducer?: StateReducer;
 	/**
 	 * The current value of the input.
@@ -187,7 +178,7 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 export interface InputControlProps
 	extends Omit<
 			InputBaseProps,
-			'children' | 'isBorderless' | 'isFocused' | keyof FlexProps
+			'children' | 'isBorderless' | keyof FlexProps
 		>,
 		Pick< BaseControlProps, 'help' >,
 		/**
@@ -197,15 +188,13 @@ 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`, `paddingInlineStart`, and `paddingInlineEnd` are managed internally by
+		 * `paddingInlineStart`, and `paddingInlineEnd` are managed internally by
 		 * the InputControl, but the rest of the props for InputField are passed through.
 		 */
 		Omit<
 			WordPressComponentProps< InputFieldProps, 'input', false >,
 			| 'stateReducer'
 			| 'prefix'
-			| 'isFocused'
-			| 'setIsFocused'
 			| 'paddingInlineStart'
 			| 'paddingInlineEnd'
 		> {

package/src/input-control/utils.ts

@@ -86,10 +86,11 @@ export function useDraft( props: {
 	useLayoutEffect( () => {
 		const { current: previousValue } = refPreviousValue;
 		refPreviousValue.current = props.value;
-		if ( draft.value !== undefined && ! draft.isStale )
+		if ( draft.value !== undefined && ! draft.isStale ) {
 			setDraft( { ...draft, isStale: true } );
-		else if ( draft.isStale && props.value !== previousValue )
+		} else if ( draft.isStale && props.value !== previousValue ) {
 			setDraft( {} );
+		}
 	}, [ props.value, draft ] );
 
 	const onChange: InputChangeCallback = ( nextValue, extra ) => {