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

package/src/notice/index.tsx

@@ -111,53 +111,60 @@ function Notice( {
 			<VisuallyHidden>{ getStatusLabel( status ) }</VisuallyHidden>
 			<div className="components-notice__content">
 				{ children }
-				<div className="components-notice__actions">
-					{ actions.map(
-						(
-							{
-								className: buttonCustomClasses,
-								label,
-								isPrimary,
-								variant,
-								noDefaultClasses = false,
-								onClick,
-								url,
-							}: NoticeAction &
-								// `isPrimary` is a legacy prop included for
-								// backcompat, but `variant` should be used
-								// instead.
-								Pick< DeprecatedButtonProps, 'isPrimary' >,
-							index
-						) => {
-							let computedVariant = variant;
-							if ( variant !== 'primary' && ! noDefaultClasses ) {
-								computedVariant = ! url ? 'secondary' : 'link';
-							}
-							if (
-								typeof computedVariant === 'undefined' &&
-								isPrimary
-							) {
-								computedVariant = 'primary';
-							}
+				{ actions.length > 0 && (
+					<div className="components-notice__actions">
+						{ actions.map(
+							(
+								{
+									className: buttonCustomClasses,
+									label,
+									isPrimary,
+									variant,
+									noDefaultClasses = false,
+									onClick,
+									url,
+								}: NoticeAction &
+									// `isPrimary` is a legacy prop included for
+									// backcompat, but `variant` should be used
+									// instead.
+									Pick< DeprecatedButtonProps, 'isPrimary' >,
+								index
+							) => {
+								let computedVariant = variant;
+								if (
+									variant !== 'primary' &&
+									! noDefaultClasses
+								) {
+									computedVariant = ! url
+										? 'secondary'
+										: 'link';
+								}
+								if (
+									typeof computedVariant === 'undefined' &&
+									isPrimary
+								) {
+									computedVariant = 'primary';
+								}
 
-							return (
-								<Button
-									__next40pxDefaultSize
-									key={ index }
-									href={ url }
-									variant={ computedVariant }
-									onClick={ url ? undefined : onClick }
-									className={ clsx(
-										'components-notice__action',
-										buttonCustomClasses
-									) }
-								>
-									{ label }
-								</Button>
-							);
-						}
-					) }
-				</div>
+								return (
+									<Button
+										__next40pxDefaultSize
+										key={ index }
+										href={ url }
+										variant={ computedVariant }
+										onClick={ url ? undefined : onClick }
+										className={ clsx(
+											'components-notice__action',
+											buttonCustomClasses
+										) }
+									>
+										{ label }
+									</Button>
+								);
+							}
+						) }
+					</div>
+				) }
 			</div>
 			{ isDismissible && (
 				<Button

package/src/notice/stories/index.story.tsx

@@ -89,7 +89,7 @@ WithActions.args = {
 };
 
 export const NoticeListSubcomponent: StoryFn< typeof NoticeList > = () => {
-	const exampleNotices = [
+	const exampleNotices: NoticeListProps[ 'notices' ] = [
 		{
 			id: 'second-notice',
 			content: 'second notice content',
@@ -97,6 +97,22 @@ export const NoticeListSubcomponent: StoryFn< typeof NoticeList > = () => {
 		{
 			id: 'first-notice',
 			content: 'first notice content',
+			actions: [
+				{
+					label: 'Click me!',
+					onClick: () => {},
+					variant: 'primary',
+				},
+				{
+					label: 'Or click me instead!',
+					onClick: () => {},
+				},
+				{
+					label: 'Or visit a link for more info',
+					url: 'https://wordpress.org',
+					variant: 'link',
+				},
+			],
 		},
 	];
 	const [ notices, setNotices ] = useState( exampleNotices );

package/src/notice/style.scss

@@ -41,20 +41,9 @@
 .components-notice__actions {
 	display: flex;
 	flex-wrap: wrap;
-}
-
-.components-notice__action.components-button {
-	&,
-	&.is-link {
-		margin-left: $grid-unit-15;
-	}
-	&.is-secondary {
-		vertical-align: initial;
-	}
-
-	// When it has better support, this can be replaced
-	// with column-gap since these are flex items.
-	margin-right: $grid-unit-10;
+	align-items: center;
+	gap: $grid-unit-15;
+	margin-top: $grid-unit-15;
 }
 
 .components-notice__dismiss {
@@ -86,10 +75,4 @@
 		margin-bottom: $grid-unit-15;
 		line-height: 2;
 	}
-
-	.components-notice__action.components-button {
-		display: block;
-		margin-left: 0;
-		margin-top: $grid-unit-10;
-	}
 }

package/src/snackbar/index.tsx

@@ -27,7 +27,7 @@ import type { SnackbarProps } from './types';
 import type { NoticeAction } from '../notice/types';
 import type { WordPressComponentProps } from '../context';
 
-const NOTICE_TIMEOUT = 10000;
+const NOTICE_TIMEOUT = 6000;
 
 /**
  * Custom hook which announces the message with the given politeness, if a

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

@@ -10,37 +10,28 @@ import { forwardRef, useRef } from '@wordpress/element';
 import { ControlWithError } from '../control-with-error';
 import type { ValidatedControlProps } from './types';
 import CheckboxControl from '../../checkbox-control';
-import type { CheckboxControlProps } from '../../checkbox-control/types';
-
-type Value = CheckboxControlProps[ 'checked' ];
 
 const UnforwardedValidatedCheckboxControl = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof CheckboxControl >,
 		'__nextHasNoMarginBottom'
 	> &
-		ValidatedControlProps< Value >,
+		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLDivElement >( null );
 	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
-	const valueRef = useRef< Value >( restProps.checked );
 
 	return (
 		<ControlWithError
 			required={ required }
 			markWhenOptional={ markWhenOptional }
 			ref={ mergedRefs }
-			onValidate={ () => {
-				return onValidate?.( valueRef.current );
-			} }
 			customValidity={ customValidity }
 			getValidityTarget={ () =>
 				validityTargetRef.current?.querySelector< HTMLInputElement >(
@@ -50,10 +41,6 @@ const UnforwardedValidatedCheckboxControl = (
 		>
 			<CheckboxControl
 				__nextHasNoMarginBottom
-				onChange={ ( value ) => {
-					valueRef.current = value;
-					onChange?.( value );
-				} }
 				// TODO: Upstream limitation - CheckboxControl doesn't support uncontrolled mode, visually.
 				{ ...restProps }
 			/>

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

@@ -10,28 +10,22 @@ import { forwardRef, useEffect, useRef } from '@wordpress/element';
 import { ControlWithError } from '../control-with-error';
 import type { ValidatedControlProps } from './types';
 import ComboboxControl from '../../combobox-control';
-import type { ComboboxControlProps } from '../../combobox-control/types';
-
-type Value = ComboboxControlProps[ 'value' ];
 
 const UnforwardedValidatedComboboxControl = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof ComboboxControl >,
 		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
 	> &
-		ValidatedControlProps< Value >,
+		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
 	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
-	const valueRef = useRef< Value >( restProps.value );
 
 	// TODO: Upstream limitation - The `required` attribute is not passed down to the input,
 	// so we need to set it manually.
@@ -51,9 +45,6 @@ const UnforwardedValidatedComboboxControl = (
 			required={ required }
 			markWhenOptional={ markWhenOptional }
 			ref={ mergedRefs }
-			onValidate={ () => {
-				return onValidate?.( valueRef.current );
-			} }
 			customValidity={ customValidity }
 			getValidityTarget={ () =>
 				validityTargetRef.current?.querySelector< HTMLInputElement >(
@@ -65,10 +56,6 @@ const UnforwardedValidatedComboboxControl = (
 				__nextHasNoMarginBottom
 				__next40pxDefaultSize
 				{ ...restProps }
-				onChange={ ( value ) => {
-					valueRef.current = value;
-					onChange?.( value );
-				} }
 			/>
 		</ControlWithError>
 	);

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

@@ -9,32 +9,21 @@ import { forwardRef, useRef } from '@wordpress/element';
 import { ControlWithError } from '../control-with-error';
 import type { ValidatedControlProps } from './types';
 import CustomSelectControl from '../../custom-select-control';
-import type {
-	CustomSelectOption,
-	CustomSelectProps,
-} from '../../custom-select-control/types';
-
-type CustomSelectControlProps = CustomSelectProps< CustomSelectOption >;
-
-type Value = CustomSelectControlProps[ 'value' ];
 
 const UnforwardedValidatedCustomSelectControl = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof CustomSelectControl >,
 		'__next40pxDefaultSize'
 	> &
-		ValidatedControlProps< Value >,
+		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLDivElement >
 ) => {
 	const validityTargetRef = useRef< HTMLSelectElement >( null );
-	const valueRef = useRef< Value >( restProps.value );
 
 	return (
 		<div
@@ -44,9 +33,6 @@ const UnforwardedValidatedCustomSelectControl = (
 			<ControlWithError
 				required={ required }
 				markWhenOptional={ markWhenOptional }
-				onValidate={ () => {
-					return onValidate?.( valueRef.current );
-				} }
 				customValidity={ customValidity }
 				getValidityTarget={ () => validityTargetRef.current }
 			>
@@ -54,10 +40,6 @@ const UnforwardedValidatedCustomSelectControl = (
 					// TODO: Upstream limitation - Required isn't passed down correctly,
 					// so it needs to be set on a delegate element.
 					__next40pxDefaultSize
-					onChange={ ( value ) => {
-						valueRef.current = value.selectedItem;
-						onChange?.( value );
-					} }
 					{ ...restProps }
 				/>
 			</ControlWithError>

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

@@ -9,27 +9,21 @@ import { forwardRef, useRef } from '@wordpress/element';
 import { ControlWithError } from '../control-with-error';
 import type { ValidatedControlProps } from './types';
 import { FormTokenField } from '../../form-token-field';
-import type { FormTokenFieldProps } from '../../form-token-field/types';
-
-type Value = FormTokenFieldProps[ 'value' ];
 
 const UnforwardedValidatedFormTokenField = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof FormTokenField >,
 		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
 	> &
-		ValidatedControlProps< FormTokenFieldProps[ 'value' ] >,
+		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLDivElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
-	const valueRef = useRef< Value >( restProps.value );
 
 	return (
 		<div
@@ -39,9 +33,6 @@ const UnforwardedValidatedFormTokenField = (
 			<ControlWithError
 				required={ required }
 				markWhenOptional={ markWhenOptional }
-				onValidate={ () => {
-					return onValidate?.( valueRef.current );
-				} }
 				customValidity={ customValidity }
 				getValidityTarget={ () => validityTargetRef.current }
 			>
@@ -49,10 +40,6 @@ const UnforwardedValidatedFormTokenField = (
 					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					{ ...restProps }
-					onChange={ ( value, ...args ) => {
-						valueRef.current = value;
-						onChange?.( value, ...args );
-					} }
 				/>
 			</ControlWithError>
 			<input
@@ -61,7 +48,7 @@ const UnforwardedValidatedFormTokenField = (
 				ref={ validityTargetRef }
 				required={ required }
 				value={
-					valueRef.current && valueRef.current.length > 0
+					restProps.value && restProps.value.length > 0
 						? 'hasvalue'
 						: ''
 				}

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

@@ -10,46 +10,33 @@ import { useMergeRefs } from '@wordpress/compose';
 import { ControlWithError } from '../control-with-error';
 import type { ValidatedControlProps } from './types';
 import InputControl from '../../input-control';
-import type { InputControlProps } from '../../input-control/types';
-
-type Value = InputControlProps[ 'value' ];
 
 const UnforwardedValidatedInputControl = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof InputControl >,
 		'__next40pxDefaultSize'
 	> &
-		ValidatedControlProps< InputControlProps[ 'value' ] >,
+		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
 	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
-	const valueRef = useRef< Value >( restProps.value );
 
 	return (
 		<ControlWithError
 			required={ required }
 			markWhenOptional={ markWhenOptional }
-			onValidate={ () => {
-				return onValidate?.( valueRef.current );
-			} }
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
 			<InputControl
 				__next40pxDefaultSize
 				ref={ mergedRefs }
-				onChange={ ( value, ...args ) => {
-					valueRef.current = value;
-					onChange?.( value, ...args );
-				} }
 				{ ...restProps }
 			/>
 		</ControlWithError>

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

@@ -10,48 +10,33 @@ import { useMergeRefs } from '@wordpress/compose';
 import { ControlWithError } from '../control-with-error';
 import NumberControl from '../../number-control';
 import type { ValidatedControlProps } from './types';
-import type { NumberControlProps } from '../../number-control/types';
-
-type Value = NumberControlProps[ 'value' ];
 
 const UnforwardedValidatedNumberControl = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof NumberControl >,
 		'__next40pxDefaultSize'
 	> &
-		ValidatedControlProps< Value >,
+		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
 	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
-	const valueRef = useRef< Value >( restProps.value );
 
 	return (
 		<ControlWithError
 			required={ required }
 			markWhenOptional={ markWhenOptional }
-			onValidate={ () => {
-				return onValidate?.( valueRef.current );
-			} }
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
 			<NumberControl
 				__next40pxDefaultSize
 				ref={ mergedRefs }
-				// TODO: Upstream limitation - When form is submitted when value is undefined, it will
-				// automatically set a clamped value (as defined by `min` attribute, so 0 by default).
-				onChange={ ( value, ...args ) => {
-					valueRef.current = value;
-					onChange?.( value, ...args );
-				} }
 				{ ...restProps }
 			/>
 		</ControlWithError>

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

@@ -10,25 +10,18 @@ import { forwardRef, useRef } from '@wordpress/element';
 import { ControlWithError } from '../control-with-error';
 import type { ValidatedControlProps } from './types';
 import RadioControl from '../../radio-control';
-import type { RadioControlProps } from '../../radio-control/types';
-
-type Value = RadioControlProps[ 'selected' ];
 
 const UnforwardedValidatedRadioControl = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
-	}: React.ComponentProps< typeof RadioControl > &
-		ValidatedControlProps< Value >,
+	}: React.ComponentProps< typeof RadioControl > & ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLDivElement >
 ) => {
 	const validityTargetRef = useRef< HTMLDivElement >( null );
 	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
-	const valueRef = useRef< Value >( restProps.selected );
 
 	return (
 		<ControlWithError
@@ -36,9 +29,6 @@ const UnforwardedValidatedRadioControl = (
 			markWhenOptional={ markWhenOptional }
 			// TODO: Upstream limitation - RadioControl does not accept a ref.
 			ref={ mergedRefs }
-			onValidate={ () => {
-				return onValidate?.( valueRef.current );
-			} }
 			customValidity={ customValidity }
 			getValidityTarget={ () =>
 				validityTargetRef.current?.querySelector< HTMLInputElement >(
@@ -46,13 +36,7 @@ const UnforwardedValidatedRadioControl = (
 				)
 			}
 		>
-			<RadioControl
-				onChange={ ( value ) => {
-					valueRef.current = value;
-					onChange?.( value );
-				} }
-				{ ...restProps }
-			/>
+			<RadioControl { ...restProps } />
 		</ControlWithError>
 	);
 };

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

@@ -10,36 +10,27 @@ import { forwardRef, useRef } from '@wordpress/element';
 import { ControlWithError } from '../control-with-error';
 import type { ValidatedControlProps } from './types';
 import RangeControl from '../../range-control';
-import type { RangeControlProps } from '../../range-control/types';
-
-type Value = RangeControlProps[ 'value' ];
 
 const UnforwardedValidatedRangeControl = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
 	}: Omit<
 		React.ComponentProps< typeof RangeControl >,
 		'__next40pxDefaultSize' | '__nextHasNoMarginBottom'
 	> &
-		ValidatedControlProps< Value >,
+		ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
 	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
-	const valueRef = useRef< Value >( restProps.value );
 
 	return (
 		<ControlWithError
 			required={ required }
 			markWhenOptional={ markWhenOptional }
-			onValidate={ () => {
-				return onValidate?.( valueRef.current );
-			} }
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
@@ -47,10 +38,6 @@ const UnforwardedValidatedRangeControl = (
 				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				ref={ mergedRefs }
-				onChange={ ( value ) => {
-					valueRef.current = value;
-					onChange?.( value );
-				} }
 				{ ...restProps }
 			/>
 		</ControlWithError>

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

@@ -10,25 +10,11 @@ import { useMergeRefs } from '@wordpress/compose';
 import { ControlWithError } from '../control-with-error';
 import SelectControl from '../../select-control';
 import type { ValidatedControlProps } from './types';
-import type { SelectControlProps as _SelectControlProps } from '../../select-control/types';
-
-// Only support single value selection
-type SelectControlProps = Omit<
-	_SelectControlProps,
-	'multiple' | 'onChange' | 'value'
-> & {
-	onChange?: ( value: string ) => void;
-	value?: string;
-};
-
-type Value = SelectControlProps[ 'value' ];
 
 const UnforwardedValidatedSelectControl = (
 	{
 		required,
-		onValidate,
 		customValidity,
-		onChange,
 		markWhenOptional,
 		...restProps
 	}: Omit<
@@ -41,20 +27,16 @@ const UnforwardedValidatedSelectControl = (
 	> & {
 		value?: string;
 		onChange: ( value: string ) => void;
-	} & ValidatedControlProps< Value >,
+	} & ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLSelectElement >
 ) => {
 	const validityTargetRef = useRef< HTMLSelectElement >( null );
 	const mergedRefs = useMergeRefs( [ forwardedRef, validityTargetRef ] );
-	const valueRef = useRef< Value >( restProps.value );
 
 	return (
 		<ControlWithError
 			required={ required }
 			markWhenOptional={ markWhenOptional }
-			onValidate={ () => {
-				return onValidate?.( valueRef.current );
-			} }
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
@@ -62,10 +44,6 @@ const UnforwardedValidatedSelectControl = (
 				__nextHasNoMarginBottom
 				__next40pxDefaultSize
 				ref={ mergedRefs }
-				onChange={ ( value ) => {
-					valueRef.current = value;
-					onChange?.( value );
-				} }
 				{ ...restProps }
 			/>
 		</ControlWithError>