@wordpress/components 19.15.0 → 19.16.0

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

@@ -7,10 +7,13 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
  * Internal dependencies
  */
 import InputControl from '..';
+import { InputControlPrefixWrapper } from '../input-prefix-wrapper';
+import { InputControlSuffixWrapper } from '../input-suffix-wrapper';
 
 const meta: ComponentMeta< typeof InputControl > = {
 	title: 'Components (Experimental)/InputControl',
 	component: InputControl,
+	subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper },
 	argTypes: {
 		__unstableInputWidth: { control: { type: 'text' } },
 		__unstableStateReducer: { control: { type: null } },
@@ -37,16 +40,26 @@ Default.args = {
 	placeholder: 'Placeholder',
 };
 
+/**
+ * A `prefix` can be inserted before the input. By default, the prefix is aligned with the edge of the input border,
+ * with no padding. If you want to apply standard padding in accordance with the size variant, use the provided
+ * `<InputControlPrefixWrapper>` convenience wrapper.
+ */
 export const WithPrefix = Template.bind( {} );
 WithPrefix.args = {
 	...Default.args,
-	prefix: <span style={ { paddingLeft: 8 } }>@</span>,
+	prefix: <InputControlPrefixWrapper>@</InputControlPrefixWrapper>,
 };
 
+/**
+ * A `suffix` can be inserted after the input. By default, the suffix is aligned with the edge of the input border,
+ * with no padding. If you want to apply standard padding in accordance with the size variant, use the provided
+ * `<InputControlSuffixWrapper>` convenience wrapper.
+ */
 export const WithSuffix = Template.bind( {} );
 WithSuffix.args = {
 	...Default.args,
-	suffix: <button style={ { marginRight: 4 } }>Send</button>,
+	suffix: <InputControlSuffixWrapper>%</InputControlSuffixWrapper>,
 };
 
 export const WithSideLabel = Template.bind( {} );

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

@@ -13,6 +13,7 @@ import { Flex, FlexItem } from '../../flex';
 import { Text } from '../../text';
 import { COLORS, rtl } from '../../utils';
 import type { LabelPosition, Size } from '../types';
+import { space } from '../../ui/utils/space';
 
 type ContainerProps = {
 	disabled?: boolean;
@@ -110,6 +111,8 @@ type InputProps = {
 	inputSize?: Size;
 	isDragging?: boolean;
 	dragCursor?: CSSProperties[ 'cursor' ];
+	paddingInlineStart?: CSSProperties[ 'paddingInlineStart' ];
+	paddingInlineEnd?: CSSProperties[ 'paddingInlineEnd' ];
 };
 
 const disabledStyles = ( { disabled }: InputProps ) => {
@@ -141,31 +144,32 @@ const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 	`;
 };
 
-const sizeStyles = ( {
+export const getSizeConfig = ( {
 	inputSize: size,
 	__next36pxDefaultSize,
 }: InputProps ) => {
+	// Paddings may be overridden by the custom paddings props.
 	const sizes = {
 		default: {
 			height: 36,
 			lineHeight: 1,
 			minHeight: 36,
-			paddingLeft: 16,
-			paddingRight: 16,
+			paddingLeft: space( 4 ),
+			paddingRight: space( 4 ),
 		},
 		small: {
 			height: 24,
 			lineHeight: 1,
 			minHeight: 24,
-			paddingLeft: 8,
-			paddingRight: 8,
+			paddingLeft: space( 2 ),
+			paddingRight: space( 2 ),
 		},
 		'__unstable-large': {
 			height: 40,
 			lineHeight: 1,
 			minHeight: 40,
-			paddingLeft: 16,
-			paddingRight: 16,
+			paddingLeft: space( 4 ),
+			paddingRight: space( 4 ),
 		},
 	};
 
@@ -174,14 +178,23 @@ const sizeStyles = ( {
 			height: 30,
 			lineHeight: 1,
 			minHeight: 30,
-			paddingLeft: 8,
-			paddingRight: 8,
+			paddingLeft: space( 2 ),
+			paddingRight: space( 2 ),
 		};
 	}
 
-	const style = sizes[ size as Size ] || sizes.default;
+	return sizes[ size as Size ] || sizes.default;
+};
+
+const sizeStyles = ( props: InputProps ) => {
+	return css( getSizeConfig( props ) );
+};
 
-	return css( style );
+const customPaddings = ( {
+	paddingInlineStart,
+	paddingInlineEnd,
+}: InputProps ) => {
+	return css( { paddingInlineStart, paddingInlineEnd } );
 };
 
 const dragStyles = ( { isDragging, dragCursor }: InputProps ) => {
@@ -235,6 +248,7 @@ export const Input = styled.input< InputProps >`
 		${ disabledStyles }
 		${ fontSizeStyles }
 		${ sizeStyles }
+		${ customPaddings }
 
 		&::-webkit-input-placeholder {
 			line-height: normal;

package/src/input-control/types.ts

@@ -102,6 +102,8 @@ export interface InputFieldProps extends BaseProps {
 		nextValue: string,
 		event?: SyntheticEvent< HTMLInputElement >
 	) => void;
+	paddingInlineStart?: CSSProperties[ 'paddingInlineStart' ];
+	paddingInlineEnd?: CSSProperties[ 'paddingInlineEnd' ];
 	setIsFocused: ( isFocused: boolean ) => void;
 	stateReducer?: StateReducer;
 	/**
@@ -123,10 +125,38 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 	children: ReactNode;
 	/**
 	 * Renders an element on the left side of the input.
+	 *
+	 * By default, the prefix is aligned with the edge of the input border, with no padding.
+	 * If you want to apply standard padding in accordance with the size variant, wrap the element in
+	 * the provided `<InputControlPrefixWrapper>` component.
+	 *
+	 * @example
+	 * import {
+	 *   __experimentalInputControl as InputControl,
+	 *   __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	 * } from '@wordpress/components';
+	 *
+	 * <InputControl
+	 *   prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>}
+	 * />
 	 */
 	prefix?: ReactNode;
 	/**
 	 * Renders an element on the right side of the input.
+	 *
+	 * By default, the suffix is aligned with the edge of the input border, with no padding.
+	 * If you want to apply standard padding in accordance with the size variant, wrap the element in
+	 * the provided `<InputControlSuffixWrapper>` component.
+	 *
+	 * @example
+	 * import {
+	 *   __experimentalInputControl as InputControl,
+	 *   __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+	 * } from '@wordpress/components';
+	 *
+	 * <InputControl
+	 *   suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>}
+	 * />
 	 */
 	suffix?: ReactNode;
 	/**
@@ -152,12 +182,17 @@ 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` and `setIsFocused` are managed internally by the InputControl, but the rest of the props
-		 * for InputField are passed through.
+		 * `isFocused`, `setIsFocused`, `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'
+			| 'stateReducer'
+			| 'prefix'
+			| 'isFocused'
+			| 'setIsFocused'
+			| 'paddingInlineStart'
+			| 'paddingInlineEnd'
 		> {
 	__unstableStateReducer?: InputFieldProps[ 'stateReducer' ];
 }
@@ -168,3 +203,17 @@ export interface InputControlLabelProps {
 	labelPosition?: BaseProps[ 'labelPosition' ];
 	size?: BaseProps[ 'size' ];
 }
+
+export type InputControlPrefixWrapperProps = {
+	/**
+	 * The prefix to be inserted.
+	 */
+	children: ReactNode;
+};
+
+export type InputControlSuffixWrapperProps = {
+	/**
+	 * The suffix to be inserted.
+	 */
+	children: ReactNode;
+};

package/src/mobile/image/index.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Image, Text, View } from 'react-native';
+import { Image as RNImage, Text, View } from 'react-native';
 import FastImage from 'react-native-fast-image';
 
 /**
@@ -37,6 +37,7 @@ const ImageComponent = ( {
 	height: imageHeight,
 	highlightSelected = true,
 	isSelected,
+	shouldUseFastImage,
 	isUploadFailed,
 	isUploadInProgress,
 	mediaPickerOptions,
@@ -53,11 +54,15 @@ const ImageComponent = ( {
 } ) => {
 	const [ imageData, setImageData ] = useState( null );
 	const [ containerSize, setContainerSize ] = useState( null );
+	const Image = ! shouldUseFastImage ? RNImage : FastImage;
+	const imageResizeMode = ! shouldUseFastImage
+		? resizeMode
+		: FastImage.resizeMode[ resizeMode ];
 
 	useEffect( () => {
 		let isCurrent = true;
 		if ( url ) {
-			Image.getSize( url, ( imgWidth, imgHeight ) => {
+			RNImage.getSize( url, ( imgWidth, imgHeight ) => {
 				if ( ! isCurrent ) {
 					return;
 				}
@@ -152,6 +157,9 @@ const ImageComponent = ( {
 			opacity: isUploadInProgress ? 0.3 : 1,
 			height: containerSize?.height,
 		},
+		! resizeMode && {
+			aspectRatio: imageData?.aspectRatio,
+		},
 		focalPoint && styles.focalPoint,
 		focalPoint &&
 			getImageWithFocalPointStyles(
@@ -211,16 +219,13 @@ const ImageComponent = ( {
 					</View>
 				) : (
 					<View style={ focalPoint && styles.focalPointContent }>
-						<FastImage
-							{ ...( ! resizeMode && {
-								aspectRatio: imageData?.aspectRatio,
-							} ) }
+						<Image
 							style={ imageStyles }
 							source={ { uri: url } }
 							{ ...( ! focalPoint && {
 								resizeMethod: 'scale',
 							} ) }
-							resizeMode={ FastImage.resizeMode[ resizeMode ] }
+							resizeMode={ imageResizeMode }
 						/>
 					</View>
 				) }

package/src/mobile/media-edit/index.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { compact } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -46,11 +41,11 @@ export class MediaEdit extends Component {
 	getMediaOptionsItems() {
 		const { pickerOptions, openReplaceMediaOptions, source } = this.props;
 
-		return compact( [
+		return [
 			source?.uri && editOption,
 			openReplaceMediaOptions && replaceOption,
 			...( pickerOptions ? pickerOptions : [] ),
-		] );
+		].filter( Boolean );
 	}
 
 	getDestructiveButtonIndex() {

package/src/modal/style.scss

@@ -95,6 +95,10 @@
 	.components-modal__content.has-scrolled-content:not(.hide-header) & {
 		border-bottom-color: $gray-300;
 	}
+
+	& + p {
+		margin-top: 0;
+	}
 }
 
 .components-modal__header-heading-container {
@@ -119,7 +123,7 @@
 .components-modal__content {
 	flex: 1;
 	margin-top: $header-height + $grid-unit-20;
-	padding: 0 $grid-unit-40 $grid-unit-30;
+	padding: 0 $grid-unit-40 $grid-unit-40;
 	overflow: auto;
 
 	&.hide-header {

package/src/popover/index.js

@@ -210,15 +210,19 @@ const Popover = (
 	const slotName = useContext( slotNameContext ) || __unstableSlotName;
 	const slot = useSlot( slotName );
 
-	const onDialogClose = ( type, event ) => {
-		// Ideally the popover should have just a single onClose prop and
-		// not three props that potentially do the same thing.
-		if ( type === 'focus-outside' && onFocusOutside ) {
-			onFocusOutside( event );
-		} else if ( onClose ) {
-			onClose();
-		}
-	};
+	let onDialogClose;
+
+	if ( onClose || onFocusOutside ) {
+		onDialogClose = ( type, event ) => {
+			// Ideally the popover should have just a single onClose prop and
+			// not three props that potentially do the same thing.
+			if ( type === 'focus-outside' && onFocusOutside ) {
+				onFocusOutside( event );
+			} else if ( onClose ) {
+				onClose();
+			}
+		};
+	}
 
 	const [ dialogRef, dialogProps ] = useDialog( {
 		focusOnMount,

package/src/popover/stories/index.js

@@ -27,6 +27,7 @@ export const _default = () => {
 	const show = boolean( 'Example: Show', true );
 	const children = text( 'children', 'Popover Content' );
 	const animate = boolean( 'animate', false );
+	const expandOnMobile = boolean( 'expandOnMobile', false );
 	const focusOnMount = select(
 		'focusOnMount',
 		{
@@ -41,6 +42,7 @@ export const _default = () => {
 	const props = {
 		animate,
 		children,
+		expandOnMobile,
 		focusOnMount,
 		noArrow,
 		isAlternate,

package/src/popover/style.scss

@@ -31,7 +31,7 @@
 		position: static;
 		height: calc(100% - #{ $panel-header-height });
 		overflow-y: visible;
-		min-width: auto;
+		width: auto;
 		border: none;
 		outline: none;
 		border-top: $border-width solid $gray-900;

package/src/radio-control/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { isEmpty } from 'lodash';
 import classnames from 'classnames';
 import type { ChangeEvent } from 'react';
 
@@ -65,7 +64,7 @@ export function RadioControl(
 	const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>
 		onChange( event.target.value );
 
-	if ( isEmpty( options ) ) {
+	if ( ! options?.length ) {
 		return null;
 	}
 

package/src/range-control/README.md

@@ -184,7 +184,7 @@ An icon to be shown above the slider next to its container title.
 
 ### `initialPosition`: `number`
 
-If no value exists this prop contains the slider starting position.
+The slider starting position, used when no `value` is passed. The `initialPosition` will be clamped between the provided `min` and `max` prop values.
 
 -   Required: No
 -   Platform: Web | Mobile

package/src/range-control/test/index.tsx

@@ -200,6 +200,36 @@ describe( 'RangeControl', () => {
 
 			expect( rangeInput?.value ).toBe( '10' );
 		} );
+
+		it( 'should clamp initialPosition between min and max on first render, and on reset', () => {
+			render(
+				<RangeControl
+					initialPosition={ 200 }
+					min={ 0 }
+					max={ 100 }
+					allowReset
+				/>
+			);
+
+			const numberInput = getNumberInput();
+			const rangeInput = getRangeInput();
+			const resetButton = getResetButton();
+
+			// Value should be clamped on initial load
+			expect( numberInput?.value ).toBe( '100' );
+			expect( rangeInput?.value ).toBe( '100' );
+
+			fireChangeEvent( numberInput, '50' );
+
+			expect( numberInput?.value ).toBe( '50' );
+			expect( rangeInput?.value ).toBe( '50' );
+
+			// Value should be clamped after resetting
+			fireEvent.click( resetButton as Element );
+
+			expect( numberInput?.value ).toBe( '100' );
+			expect( rangeInput?.value ).toBe( '100' );
+		} );
 	} );
 
 	describe( 'input field', () => {

package/src/range-control/types.ts

@@ -88,7 +88,7 @@ export type RangeControlProps< IconProps = unknown > = Pick<
 		 */
 		afterIcon?: IconType< IconProps >;
 		/**
-		 * If this property is true, a button to reset the the slider is
+		 * If this property is true, a button to reset the slider is
 		 * rendered.
 		 *
 		 * @default false
@@ -119,7 +119,9 @@ export type RangeControlProps< IconProps = unknown > = Pick<
 		 */
 		icon?: string;
 		/**
-		 * If no value exists this prop contains the slider starting position.
+		 * The slider starting position, used when no `value` is passed.
+		 * The `initialPosition` will be clamped between the provided `min`
+		 * and `max` prop values.
 		 */
 		initialPosition?: number;
 		/**

package/src/range-control/utils.ts

@@ -50,7 +50,10 @@ export function useControlledRangeValue(
 	const { min, max, value: valueProp, initial } = settings;
 	const [ state, setInternalState ] = useControlledState(
 		floatClamp( valueProp, min, max ),
-		{ initial, fallback: null }
+		{
+			initial: floatClamp( initial ?? null, min, max ),
+			fallback: null,
+		}
 	);
 
 	const setState = useCallback(

package/src/sandbox/index.native.js

@@ -1,13 +1,14 @@
 /**
  * External dependencies
  */
-import { Dimensions, Platform } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
 import { WebView } from 'react-native-webview';
 
 /**
  * WordPress dependencies
  */
 import {
+	Platform,
 	renderToString,
 	memo,
 	useRef,
@@ -307,6 +308,7 @@ function Sandbox( {
 			style={ [
 				sandboxStyles[ 'sandbox-webview__content' ],
 				getSizeStyle(),
+				Platform.isAndroid && workaroundStyles.webView,
 			] }
 			onMessage={ checkMessageForResize }
 			scrollEnabled={ false }
@@ -317,4 +319,15 @@ function Sandbox( {
 	);
 }
 
+const workaroundStyles = StyleSheet.create( {
+	webView: {
+		/**
+		 * The slight opacity below is a workaround for an Android crash caused from combining Android
+		 * 12's new scroll overflow behavior and webviews.
+		 * https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-808869253
+		 */
+		opacity: 0.99,
+	},
+} );
+
 export default memo( Sandbox );

package/src/scroll-lock/README.md

@@ -7,7 +7,7 @@ ScrollLock is a content-free React component for declaratively preventing scroll
 Declare scroll locking as part of modal UI.
 
 ```jsx
-import { ScrollLock } from '@wordpress/components';
+import { ScrollLock, Button } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
 const MyScrollLock = () => {

package/src/scroll-lock/{index.js → index.tsx}

@@ -12,10 +12,7 @@ import { useEffect } from '@wordpress/element';
  */
 let previousScrollTop = 0;
 
-/**
- * @param {boolean} locked
- */
-function setLocked( locked ) {
+function setLocked( locked: boolean ) {
 	const scrollingElement = document.scrollingElement || document.body;
 
 	if ( locked ) {
@@ -36,11 +33,39 @@ function setLocked( locked ) {
 let lockCounter = 0;
 
 /**
- * A component that will lock scrolling when it is mounted and unlock scrolling when it is unmounted.
+ * ScrollLock is a content-free React component for declaratively preventing
+ * scroll bleed from modal UI to the page body. This component applies a
+ * `lockscroll` class to the `document.documentElement` and
+ * `document.scrollingElement` elements to stop the body from scrolling. When it
+ * is present, the lock is applied.
+ *
+ * ```jsx
+ * import { ScrollLock, Button } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
  *
- * @return {null} Render nothing.
+ * const MyScrollLock = () => {
+ *   const [ isScrollLocked, setIsScrollLocked ] = useState( false );
+ *
+ *   const toggleLock = () => {
+ *     setIsScrollLocked( ( locked ) => ! locked ) );
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <Button variant="secondary" onClick={ toggleLock }>
+ *         Toggle scroll lock
+ *       </Button>
+ *       { isScrollLocked && <ScrollLock /> }
+ *       <p>
+ *         Scroll locked:
+ *         <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
+ *       </p>
+ *     </div>
+ *   );
+ * };
+ * ```
  */
-export default function ScrollLock() {
+export function ScrollLock(): null {
 	useEffect( () => {
 		if ( lockCounter === 0 ) {
 			setLocked( true );
@@ -59,3 +84,5 @@ export default function ScrollLock() {
 
 	return null;
 }
+
+export default ScrollLock;