@wordpress/components 23.2.0 → 23.3.0

package/src/notice/types.ts

@@ -0,0 +1,136 @@
+/**
+ * External dependencies
+ */
+import type { MouseEventHandler, ReactNode } from 'react';
+
+type CommonNoticeActionProps = {
+	label: string;
+	className?: string;
+	noDefaultClasses?: boolean;
+	variant?: 'primary' | 'secondary' | 'link';
+};
+// `url` and `onClick` can both be provided, but `url` takes precedence. If
+// `url` is provided, the action's button will be rendered as an anchor and
+// `onClick` will be ignored.
+type NoticeActionWithURL = CommonNoticeActionProps & {
+	url: string;
+	onClick?: never;
+};
+type NoticeActionWithOnClick = CommonNoticeActionProps & {
+	url?: never;
+	onClick: MouseEventHandler< HTMLButtonElement >;
+};
+
+export type NoticeAction = NoticeActionWithURL | NoticeActionWithOnClick;
+
+export type NoticeChildren = string | JSX.Element;
+
+export type NoticeProps = {
+	/**
+	 * A CSS `class` to give to the wrapper element.
+	 */
+	className?: string;
+	/**
+	 * The displayed message of a notice. Also used as the spoken message for
+	 * assistive technology, unless `spokenMessage` is provided as an alternative message.
+	 */
+	children: ReactNode;
+	/**
+	 * Used to provide a custom spoken message in place of the `children` default.
+	 *
+	 * @default `children`
+	 */
+	spokenMessage?: ReactNode;
+	/**
+	 * Determines the color of the notice: `warning` (yellow),
+	 * `success` (green), `error` (red), or `'info'`.
+	 * By default `'info'` will be blue, but if there is a parent Theme component
+	 * with an accent color prop, the notice will take on that color instead.
+	 *
+	 * @default 'info'
+	 */
+	status?: 'warning' | 'success' | 'error' | 'info';
+	/**
+	 * Function called when dismissing the notice
+	 *
+	 * @default noop
+	 */
+	onRemove?: () => void;
+	/**
+	 * A politeness level for the notice's spoken message. Should be provided as
+	 * one of the valid options for an `aria-live` attribute value.
+	 *
+	 * A value of `'assertive'` is to be used for important, and usually
+	 * time-sensitive, information. It will interrupt anything else the screen
+	 * reader is announcing in that moment.
+	 * A value of `'polite'` is to be used for advisory information. It should
+	 * not interrupt what the screen reader is announcing in that moment
+	 * (the "speech queue") or interrupt the current task.
+	 *
+	 * Note that this value should be considered a suggestion; assistive
+	 * technologies may override it based on internal heuristics.
+	 *
+	 * @see https://www.w3.org/TR/wai-aria-1.1/#aria-live
+	 *
+	 * @default 'assertive' for 'error' status, 'polite' for all other statuses
+	 */
+	politeness?: 'polite' | 'assertive';
+	/**
+	 * Whether the notice should be dismissible or not
+	 *
+	 * @default true
+	 */
+	isDismissible?: boolean;
+	/**
+	 * A deprecated alternative to `onRemove`. This prop is kept for
+	 * compatibilty reasons but should be avoided.
+	 *
+	 * @default noop
+	 */
+	onDismiss?: () => void;
+	/**
+	 * An array of action objects. Each member object should contain:
+	 *
+	 * - `label`: `string` containing the text of the button/link
+	 * - `url`: `string` OR `onClick`: `( event: SyntheticEvent ) => void` to specify
+	 *    what the action does.
+	 * - `className`: `string` (optional) to add custom classes to the button styles.
+	 * - `noDefaultClasses`: `boolean` (optional) A value of `true` will remove all
+	 *    default styling.
+	 * - `variant`: `'primary' | 'secondary' | 'link'` (optional) You can denote a
+	 *    primary button action for a notice by passing a value of `primary`.
+	 *
+	 * The default appearance of an action button is inferred based on whether
+	 * `url` or `onClick` are provided, rendering the button as a link if
+	 * appropriate. If both props are provided, `url` takes precedence, and the
+	 * action button will render as an anchor tag.
+	 *
+	 * @default []
+	 */
+	actions?: Array< NoticeAction >;
+	/**
+	 * Determines whether or not the message should be parsed as custom HTML
+	 * instead of a string.
+	 */
+	__unstableHTML?: boolean;
+};
+
+export type NoticeListProps = {
+	/**
+	 * Array of notices to render.
+	 */
+	notices: Array<
+		Omit< NoticeProps, 'children' > & {
+			id: string;
+			content: string;
+		}
+	>;
+	/**
+	 * Function called when a notice should be removed / dismissed.
+	 */
+	onRemove?: ( id: string ) => void;
+	/**
+	 * Children to be rendered inside the notice list.
+	 */
+	children?: ReactNode;
+};

package/src/number-control/index.tsx

@@ -52,7 +52,7 @@ function UnforwardedNumberControl(
 	forwardedRef: ForwardedRef< any >
 ) {
 	if ( hideHTMLArrows ) {
-		deprecated( 'hideHTMLArrows', {
+		deprecated( 'wp.components.NumberControl hideHTMLArrows prop ', {
 			alternative: 'spinControls="none"',
 			since: '6.2',
 			version: '6.3',

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

@@ -15,8 +15,6 @@ import { useState } from '@wordpress/element';
 import NumberControl from '..';
 import type { NumberControlProps } from '../types';
 
-jest.useFakeTimers();
-
 function StatefulNumberControl( props: NumberControlProps ) {
 	const [ value, setValue ] = useState( props.value );
 	const handleOnChange = ( v: string | undefined ) => setValue( v );
@@ -45,9 +43,7 @@ describe( 'NumberControl', () => {
 
 	describe( 'onChange handling', () => {
 		it( 'should provide onChange callback with number value', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const spy = jest.fn();
 
 			render(
@@ -62,9 +58,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should call onChange callback when value is clamped on blur', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
 			render(
@@ -107,9 +101,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should call onChange callback when value is not valid', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const onChangeSpy = jest.fn();
 
 			render(
@@ -153,9 +145,7 @@ describe( 'NumberControl', () => {
 
 	describe( 'Validation', () => {
 		it( 'should clamp value within range on ENTER keypress', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <NumberControl value={ 5 } min={ 0 } max={ 10 } /> );
 
@@ -173,9 +163,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should clamp value within range on blur', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <NumberControl value={ 5 } min={ 0 } max={ 10 } /> );
 
@@ -194,9 +182,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should parse non-numeric values to a number on ENTER keypress when required', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <NumberControl value={ 5 } required /> );
 
@@ -209,9 +195,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should parse non-numeric values to empty string on ENTER keypress when not required', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <NumberControl value={ 5 } required={ false } /> );
 
@@ -230,9 +214,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should not enforce numerical value for empty string when required is omitted', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <NumberControl value={ 5 } /> );
 
@@ -247,9 +229,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should enforce numerical value for empty string when required', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <NumberControl value={ 5 } required /> );
 
@@ -263,9 +243,7 @@ describe( 'NumberControl', () => {
 
 	describe( 'Key UP interactions', () => {
 		it( 'should fire onKeyDown callback', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const spy = jest.fn();
 
@@ -279,9 +257,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should increment by step on key UP press', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 5 } /> );
 
@@ -293,9 +269,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should increment from a negative value', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ -5 } /> );
 
@@ -307,9 +281,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should increment while preserving the decimal value when `step` is “any”', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 866.5309 } step="any" /> );
 
@@ -321,9 +293,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should increment by shiftStep on key UP + shift press', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 5 } shiftStep={ 10 } /> );
 
@@ -335,9 +305,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should increment by shiftStep while preserving the decimal value when `step` is “any”', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 857.5309 } step="any" /> );
 
@@ -349,9 +317,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should increment by custom shiftStep on key UP + shift press', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 5 } shiftStep={ 100 } /> );
 
@@ -363,9 +329,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should increment but be limited by max on shiftStep', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<StatefulNumberControl
@@ -383,9 +347,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should not increment by shiftStep if disabled', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<StatefulNumberControl
@@ -405,9 +367,7 @@ describe( 'NumberControl', () => {
 
 	describe( 'Key DOWN interactions', () => {
 		it( 'should fire onKeyDown callback', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const spy = jest.fn();
 
 			render( <StatefulNumberControl value={ 5 } onKeyDown={ spy } /> );
@@ -420,9 +380,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should decrement by step on key DOWN press', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 5 } /> );
 
@@ -434,9 +392,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should decrement from a negative value', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ -5 } /> );
 
@@ -448,9 +404,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should decrement while preserving the decimal value when `step` is “any”', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 868.5309 } step="any" /> );
 
@@ -462,9 +416,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should decrement by shiftStep on key DOWN + shift press', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 5 } /> );
 
@@ -476,9 +428,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should decrement by shiftStep while preserving the decimal value when `step` is “any”', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 877.5309 } step="any" /> );
 
@@ -490,9 +440,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should decrement by custom shiftStep on key DOWN + shift press', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render( <StatefulNumberControl value={ 5 } shiftStep={ 100 } /> );
 
@@ -504,9 +452,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should decrement but be limited by min on shiftStep', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<StatefulNumberControl
@@ -524,9 +470,7 @@ describe( 'NumberControl', () => {
 		} );
 
 		it( 'should not decrement by shiftStep if disabled', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<StatefulNumberControl
@@ -574,9 +518,7 @@ describe( 'NumberControl', () => {
 		] )(
 			'should spin %s to %s when props = %o',
 			async ( direction, expectedValue, props ) => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 				const onChange = jest.fn();
 				render(
 					<NumberControl

package/src/panel/test/body.js

@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
  */
 import { PanelBody } from '../body';
 
-jest.useFakeTimers();
-
 describe( 'PanelBody', () => {
 	describe( 'basic rendering', () => {
 		it( 'should render an empty div with the matching className', () => {
@@ -117,9 +115,7 @@ describe( 'PanelBody', () => {
 		} );
 
 		it( 'should toggle when clicking header', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<PanelBody title="Panel" initialOpen={ false }>
@@ -146,9 +142,7 @@ describe( 'PanelBody', () => {
 		} );
 
 		it( 'should pass button props to panel title', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 			const mock = jest.fn();
 
 			render(

package/src/placeholder/stories/index.tsx

@@ -44,6 +44,7 @@ const Template: ComponentStory< typeof Placeholder > = ( args ) => {
 		<Placeholder { ...args }>
 			<div>
 				<TextControl
+					__nextHasNoMarginBottom
 					label="Sample Field"
 					placeholder="Enter something here"
 					value={ value }