@wordpress/components 29.8.0 → 29.10.0

package/src/color-picker/test/index.tsx

@@ -3,6 +3,7 @@
  */
 import { fireEvent, screen, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { click } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -13,7 +14,6 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { ColorPicker } from '..';
-import { click } from '@ariakit/test';
 
 const hslaMatcher = expect.objectContaining( {
 	h: expect.any( Number ),
@@ -41,6 +41,34 @@ const legacyColorMatcher = {
 	source: 'hex',
 };
 
+// Without the controlled component, slider values don't update after changes.
+// Controlled component with state helps synchronize input box and slider during testing.
+const ControlledColorPicker = ( {
+	onChange: onChangeProp,
+	initialColor = '#000000',
+	...restProps
+}: React.ComponentProps< typeof ColorPicker > & { initialColor?: string } ) => {
+	const [ colorState, setColorState ] = useState( initialColor );
+
+	const internalOnChange: typeof onChangeProp = ( newColor ) => {
+		onChangeProp?.( newColor );
+		setColorState( newColor );
+	};
+
+	return (
+		<>
+			<ColorPicker
+				{ ...restProps }
+				onChange={ internalOnChange }
+				color={ colorState }
+			/>
+			<button onClick={ () => setColorState( '#4d87ba' ) }>
+				Set color to #4d87ba
+			</button>
+		</>
+	);
+};
+
 describe( 'ColorPicker', () => {
 	describe( 'legacy props', () => {
 		it( 'should fire onChangeComplete with the legacy color format', async () => {
@@ -144,31 +172,6 @@ describe( 'ColorPicker', () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
 
-			const ControlledColorPicker = ( {
-				onChange: onChangeProp,
-				...restProps
-			}: React.ComponentProps< typeof ColorPicker > ) => {
-				const [ colorState, setColorState ] = useState( '#000000' );
-
-				const internalOnChange: typeof onChangeProp = ( newColor ) => {
-					onChangeProp?.( newColor );
-					setColorState( newColor );
-				};
-
-				return (
-					<>
-						<ColorPicker
-							{ ...restProps }
-							onChange={ internalOnChange }
-							color={ colorState }
-						/>
-						<button onClick={ () => setColorState( '#4d87ba' ) }>
-							Set color to #4d87ba
-						</button>
-					</>
-				);
-			};
-
 			render(
 				<ControlledColorPicker
 					onChange={ onChange }
@@ -342,4 +345,78 @@ describe( 'ColorPicker', () => {
 			} );
 		} );
 	} );
+
+	describe.each( [
+		[ 'hsl', 'HSL' ],
+		[ 'rgb', 'RGB' ],
+	] )( 'Alpha-enabled %s format', ( format, formatLabel ) => {
+		it( `should update alpha correctly when ${ formatLabel } format is selected`, async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha
+					initialColor="#ffffff80"
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			expect( formatSelector ).toBeVisible();
+			await user.selectOptions( formatSelector, format );
+
+			const alphaInput = screen.getByRole( 'spinbutton', {
+				name: 'Alpha',
+			} );
+			expect( alphaInput ).toBeVisible();
+
+			const alphaSliders = screen.getAllByRole( 'slider', {
+				name: 'Alpha',
+			} );
+
+			expect( alphaSliders ).toHaveLength( 2 );
+
+			// Choose the second slider which is the actual slider of type: input[type="range"]
+			const alphaSlider = alphaSliders.at( -1 )!;
+
+			expect( alphaSlider ).toHaveValue( '50' );
+			expect( alphaInput ).toHaveValue( 50 );
+
+			expect( onChange ).not.toHaveBeenCalled();
+
+			// Test pattern 1: Update the slider
+			fireEvent.change( alphaSlider, {
+				target: { value: 75 },
+			} );
+
+			await waitFor( () => {
+				expect( onChange ).toHaveBeenCalledTimes( 1 );
+			} );
+
+			expect( onChange ).toHaveBeenLastCalledWith( '#ffffffbf' );
+			expect( alphaInput ).toHaveValue( 75 );
+			expect( alphaSlider ).toHaveValue( '75' );
+
+			onChange.mockClear();
+
+			// Test pattern 2: Update the alphaInput
+			await user.clear( alphaInput );
+			expect( onChange ).toHaveBeenCalledTimes( 1 );
+
+			// Initially type 7 in the alpha input, we expect it to be called with #ffffff12
+			await user.keyboard( '7' );
+
+			// Now with 75% opacity we expect it to be called with #ffffffbf
+			await user.keyboard( '5' );
+
+			// Called twice, once per key stroke (`7` and `5`)
+			expect( onChange ).toHaveBeenCalledTimes( 3 );
+			expect( onChange ).toHaveBeenNthCalledWith( 2, '#ffffff12' );
+			expect( onChange ).toHaveBeenNthCalledWith( 3, '#ffffffbf' );
+
+			expect( alphaSlider ).toHaveValue( '75' );
+			expect( alphaInput ).toHaveValue( 75 );
+		} );
+	} );
 } );

package/src/duotone-picker/style.scss

@@ -13,6 +13,10 @@
 		color: transparent;
 	}
 
+	&:hover:not(:disabled):not([aria-disabled="true"]) {
+		color: transparent;
+	}
+
 	&:not([aria-disabled="true"]):active {
 		color: transparent;
 	}

package/src/guide/README.md

@@ -59,6 +59,22 @@ Use this to customize the label of the _Finish_ button shown at the end of the g
 -   Required: No
 -	Default: `'Finish'`
 
+### nextButtonText
+
+Use this to customize the label of the _Next_ button shown on each page of the guide.
+
+-   Type: `string`
+-   Required: No
+-   Default: `'Next'`
+
+### previousButtonText
+
+Use this to customize the label of the _Previous_ button shown on each page of the guide except the first.
+
+-   Type: `string`
+-   Required: No
+-   Default: `'Previous'`
+
 ### onFinish
 
 A function which is called when the guide is finished. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.

package/src/guide/index.tsx

@@ -55,6 +55,8 @@ function Guide( {
 	className,
 	contentLabel,
 	finishButtonText = __( 'Finish' ),
+	nextButtonText = __( 'Next' ),
+	previousButtonText = __( 'Previous' ),
 	onFinish,
 	pages = [],
 }: GuideProps ) {
@@ -146,7 +148,7 @@ function Guide( {
 							onClick={ goBack }
 							__next40pxDefaultSize
 						>
-							{ __( 'Previous' ) }
+							{ previousButtonText }
 						</Button>
 					) }
 					{ canGoForward && (
@@ -156,7 +158,7 @@ function Guide( {
 							onClick={ goForward }
 							__next40pxDefaultSize
 						>
-							{ __( 'Next' ) }
+							{ nextButtonText }
 						</Button>
 					) }
 					{ ! canGoForward && (

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

@@ -20,6 +20,8 @@ const meta: Meta< typeof Guide > = {
 	argTypes: {
 		contentLabel: { control: 'text' },
 		finishButtonText: { control: 'text' },
+		nextButtonText: { control: 'text' },
+		previousButtonText: { control: 'text' },
 		onFinish: { action: 'onFinish' },
 	},
 };

package/src/guide/types.ts

@@ -40,6 +40,18 @@ export type GuideProps = {
 	 * @default 'Finish'
 	 */
 	finishButtonText?: string;
+	/**
+	 * Use this to customize the label of the _Next_ button shown on each page of the guide.
+	 *
+	 * @default 'Next'
+	 */
+	nextButtonText?: string;
+	/**
+	 * Use this to customize the label of the _Previous_ button shown on each page of the guide except the first.
+	 *
+	 * @default 'Previous'
+	 */
+	previousButtonText?: string;
 	/**
 	 * A function which is called when the guide is finished.
 	 */

package/src/item-group/styles.ts

@@ -65,7 +65,7 @@ export const separated = css`
 		border-bottom: 1px solid ${ CONFIG.surfaceBorderColor };
 	}
 
-	> *:last-of-type > *:not( :focus ) {
+	> *:last-of-type > * {
 		border-bottom-color: transparent;
 	}
 `;

package/src/item-group/test/__snapshots__/index.js.snap

@@ -115,7 +115,7 @@ Snapshot Diff:
   <div>
     <div
 -     class="components-item-group css-1iattls-PolymorphicDiv-rounded e19lxcc00"
-+     class="components-item-group css-zgfros-PolymorphicDiv-separated-rounded e19lxcc00"
++     class="components-item-group css-1hvp0tq-PolymorphicDiv-separated-rounded e19lxcc00"
       data-wp-c16t="true"
       data-wp-component="ItemGroup"
       role="list"

package/src/notice/README.md

@@ -61,7 +61,7 @@ If an icon is included in the Notice, it should be color-coded to match the Noti
 To display a plain notice, pass `Notice` a string:
 
 ```jsx
-import { Notice } from `@wordpress/components`;
+import { Notice } from '@wordpress/components';
 
 const MyNotice = () => (
 	<Notice status="error">An unknown error occurred.</Notice>
@@ -71,7 +71,7 @@ const MyNotice = () => (
 For more complex markup, you can pass any JSX element:
 
 ```jsx
-import { Notice } from `@wordpress/components`;
+import { Notice } from '@wordpress/components';
 
 const MyNotice = () => (
 	<Notice status="error">
@@ -145,6 +145,7 @@ An array of notice actions. 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.
+- `openInNewTab`: `boolean` (optional) When set to `true`, opens the URL in a new browser tab.
 - `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`.

package/src/notice/types.ts

@@ -14,11 +14,13 @@ type CommonNoticeActionProps = {
 // `onClick` will be ignored.
 type NoticeActionWithURL = CommonNoticeActionProps & {
 	url: string;
+	openInNewTab?: boolean;
 	onClick?: never;
 };
 type NoticeActionWithOnClick = CommonNoticeActionProps & {
 	url?: never;
-	onClick: MouseEventHandler< HTMLButtonElement >;
+	openInNewTab?: never;
+	onClick: MouseEventHandler< HTMLButtonElement | HTMLAnchorElement >;
 };
 
 export type NoticeAction = NoticeActionWithURL | NoticeActionWithOnClick;

package/src/popover/README.md

@@ -223,9 +223,20 @@ Possible values:
 
 Adjusts the size of the popover to prevent its contents from going out of view when meeting the viewport edges.
 
+**Note:** The `resize` and `shift` props are not intended to be used together. Enabling both can cause unexpected behavior.
+
 -   Required: No
 -   Default: `true`
 
+### `shift`: `boolean`
+
+Enables the `Popover` to shift in order to stay in view when meeting the viewport edges.
+
+**Note:** The `shift` and `resize` props are not intended to be used together. If you enable `shift`, set `resize` to `false`.
+
+-   Required: No
+-   Default: `false`
+
 ### `variant`: `'toolbar' | 'unstyled'`
 
 Specifies the popover's style.

package/src/popover/index.tsx

@@ -71,6 +71,13 @@ import { StyleProvider } from '../style-provider';
  */
 export const SLOT_NAME = 'Popover';
 
+/**
+ * Virtual padding to account for overflow boundaries.
+ *
+ * @type {number}
+ */
+const OVERFLOW_PADDING = 8;
+
 // An SVG displaying a triangle facing down, filled with a solid
 // color and bordered in such a way to create an arrow-like effect.
 // Keeping the SVG's viewbox squared simplify the arrow positioning
@@ -224,6 +231,7 @@ const UnforwardedPopover = (
 		computedFlipProp && flipMiddleware(),
 		computedResizeProp &&
 			size( {
+				padding: OVERFLOW_PADDING,
 				apply( sizeProps ) {
 					const { firstElementChild } = refs.floating.current ?? {};
 
@@ -234,7 +242,10 @@ const UnforwardedPopover = (
 
 					// Reduce the height of the popover to the available space.
 					Object.assign( firstElementChild.style, {
-						maxHeight: `${ sizeProps.availableHeight }px`,
+						maxHeight: `${ Math.max(
+							0,
+							sizeProps.availableHeight
+						) }px`,
 						overflow: 'auto',
 					} );
 				},

package/src/popover/types.ts

@@ -129,6 +129,8 @@ export type PopoverProps = {
 	/**
 	 * Adjusts the size of the popover to prevent its contents from going out of
 	 * view when meeting the viewport edges.
+	 * _Note: The `resize` and `shift` props are not intended to be used together.
+	 * Enabling both can cause unexpected behavior._
 	 *
 	 * @default true
 	 */
@@ -136,6 +138,8 @@ export type PopoverProps = {
 	/**
 	 * Enables the `Popover` to shift in order to stay in view when meeting the
 	 * viewport edges.
+	 * _Note: The `resize` and `shift` props are not intended to be used together.
+	 * Enabling both can cause unexpected behavior._
 	 *
 	 * @default false
 	 */

package/src/snackbar/index.tsx

@@ -22,6 +22,7 @@ import warning from '@wordpress/warning';
  * Internal dependencies
  */
 import Button from '../button';
+import ExternalLink from '../external-link';
 import type { SnackbarProps } from './types';
 import type { NoticeAction } from '../notice/types';
 import type { WordPressComponentProps } from '../context';
@@ -80,7 +81,7 @@ function UnforwardedSnackbar(
 	}
 
 	function onActionClick(
-		event: MouseEvent< HTMLButtonElement >,
+		event: MouseEvent< HTMLButtonElement | HTMLAnchorElement >,
 		onClick: NoticeAction[ 'onClick' ]
 	) {
 		event.stopPropagation();
@@ -147,22 +148,34 @@ function UnforwardedSnackbar(
 					<div className="components-snackbar__icon">{ icon }</div>
 				) }
 				{ children }
-				{ actions.map( ( { label, onClick, url }, index ) => {
-					return (
-						<Button
-							__next40pxDefaultSize
-							key={ index }
-							href={ url }
-							variant="link"
-							onClick={ (
-								event: MouseEvent< HTMLButtonElement >
-							) => onActionClick( event, onClick ) }
-							className="components-snackbar__action"
-						>
-							{ label }
-						</Button>
-					);
-				} ) }
+				{ actions.map(
+					( { label, onClick, url, openInNewTab = false }, index ) =>
+						url !== undefined && openInNewTab ? (
+							<ExternalLink
+								key={ index }
+								href={ url }
+								onClick={ ( event ) =>
+									onActionClick( event, onClick )
+								}
+								className="components-snackbar__action"
+							>
+								{ label }
+							</ExternalLink>
+						) : (
+							<Button
+								__next40pxDefaultSize
+								key={ index }
+								href={ url }
+								variant="link"
+								onClick={ (
+									event: MouseEvent< HTMLButtonElement >
+								) => onActionClick( event, onClick ) }
+								className="components-snackbar__action"
+							>
+								{ label }
+							</Button>
+						)
+				) }
 				{ explicitDismiss && (
 					<span
 						role="button"

package/src/snackbar/style.scss

@@ -45,7 +45,8 @@
 	}
 }
 
-.components-snackbar__action.components-button {
+.components-snackbar__action.components-button,
+.components-snackbar__action.components-external-link {
 	margin-left: $grid-unit-40;
 	color: $white;
 	flex-shrink: 0;

package/src/snackbar/types.ts

@@ -56,7 +56,10 @@ export type SnackbarProps = Pick<
 		 *
 		 * @default []
 		 */
-		actions?: Pick< NoticeAction, 'label' | 'url' | 'onClick' >[];
+		actions?: Pick<
+			NoticeAction,
+			'label' | 'url' | 'onClick' | 'openInNewTab'
+		>[];
 	};
 
 export type SnackbarListProps = {

package/src/spinner/index.tsx

@@ -50,12 +50,12 @@ export function UnforwardedSpinner(
 /**
  * `Spinner` is a component used to notify users that their action is being processed.
  *
- * ```js
- *   import { Spinner } from '@wordpress/components';
+ * ```jsx
+ * import { Spinner } from '@wordpress/components';
  *
- *   function Example() {
- *     return <Spinner />;
- *   }
+ * function Example() {
+ * 	return <Spinner />;
+ * }
  * ```
  */
 export const Spinner = forwardRef( UnforwardedSpinner );

package/src/text-control/style.scss

@@ -16,7 +16,9 @@
 	height: $grid-unit-40;
 	// Override input style margin in WP forms.css.
 	margin: 0;
-	@include input-control;
+	background: $components-color-background;
+	color: $components-color-foreground;
+	@include input-control( $components-color-accent);
 
 	&.is-next-40px-default-size {
 		height: $grid-unit-50;

package/src/textarea-control/styles/textarea-control-styles.ts

@@ -37,6 +37,8 @@ export const StyledTextarea = styled.textarea`
 	display: block;
 	font-family: ${ font( 'default.fontFamily' ) };
 	line-height: 20px;
+	background: ${ COLORS.theme.background };
+	color: ${ COLORS.theme.foreground };
 
 	// Vertical padding is to match the standard 40px control height when rows=1,
 	// in conjunction with the 20px line-height.

package/src/toggle-group-control/toggle-group-control/component.tsx

@@ -54,7 +54,7 @@ function UnconnectedToggleGroupControl(
 	const [ controlElement, setControlElement ] = useState< HTMLElement >();
 	const refs = useMergeRefs( [ setControlElement, forwardedRef ] );
 	const selectedRect = useTrackElementOffsetRect(
-		value || value === 0 ? selectedElement : undefined
+		value !== null && value !== undefined ? selectedElement : undefined
 	);
 	useAnimatedOffsetRect( controlElement, selectedRect, {
 		prefix: 'selected',

package/src/unit-control/test/utils.ts

@@ -42,6 +42,42 @@ describe( 'UnitControl utils', () => {
 			] );
 		} );
 
+		it( 'should not mutate default units argument definiton', () => {
+			const unitsA = useCustomUnits( {
+				availableUnits: [ 'px', 'em', 'rem' ],
+				defaultValues: { px: 8, em: 0.5, rem: 0.5 },
+			} );
+
+			const unitsB = useCustomUnits( {
+				availableUnits: [ 'px', 'em', 'rem' ],
+				defaultValues: { px: 16, em: 1, rem: 1 },
+			} );
+
+			expect( unitsA ).not.toEqual( unitsB );
+		} );
+
+		it( 'should not mutate custon units argument definitons', () => {
+			const units = [
+				{ value: 'px', label: 'pixel' },
+				{ value: 'em', label: 'em' },
+				{ value: 'rem', label: 'rem' },
+			];
+
+			const unitsA = useCustomUnits( {
+				availableUnits: [ 'px', 'em', 'rem' ],
+				defaultValues: { px: 8, em: 0.5, rem: 0.5 },
+				units,
+			} );
+
+			const unitsB = useCustomUnits( {
+				availableUnits: [ 'px', 'em', 'rem' ],
+				defaultValues: { px: 16, em: 1, rem: 1 },
+				units,
+			} );
+
+			expect( unitsA ).not.toEqual( unitsB );
+		} );
+
 		it( 'should add default values to available units even if the default values are strings', () => {
 			// Although the public APIs of the component expect a `number` as the type of the
 			// default values, it's still good to test for strings (as it can happen in un-typed

package/src/unit-control/utils.ts

@@ -428,19 +428,16 @@ export const useCustomUnits = ( {
 		units
 	);
 
-	if ( defaultValues ) {
-		customUnitsToReturn.forEach( ( unit, i ) => {
-			if ( defaultValues[ unit.value ] ) {
-				const [ parsedDefaultValue ] = parseQuantityAndUnitFromRawValue(
-					defaultValues[ unit.value ]
-				);
-
-				customUnitsToReturn[ i ].default = parsedDefaultValue;
-			}
-		} );
+	if ( ! defaultValues ) {
+		return customUnitsToReturn;
 	}
 
-	return customUnitsToReturn;
+	return customUnitsToReturn.map( ( unit ) => {
+		const [ defaultValue ] = defaultValues[ unit.value ]
+			? parseQuantityAndUnitFromRawValue( defaultValues[ unit.value ] )
+			: [];
+		return { ...unit, default: defaultValue };
+	} );
 };
 
 /**

package/src/utils/with-ignore-ime-events.ts

@@ -1,18 +1,18 @@
 /**
- * A higher-order function that wraps a keydown event handler to ensure it is not an IME event.
+ * A higher-order function that wraps a keyboard event handler to ensure it is not an IME event.
  *
  * In CJK languages, an IME (Input Method Editor) is used to input complex characters.
- * During an IME composition, keydown events (e.g. Enter or Escape) can be fired
+ * During an IME composition, keyboard events (e.g. Enter or Escape) can be fired
  * which are intended to control the IME and not the application.
  * These events should be ignored by any application logic.
  *
- * @param keydownHandler The keydown event handler to execute after ensuring it was not an IME event.
+ * @param handler The keyboard event handler to execute after ensuring it was not an IME event.
  *
  * @return A wrapped version of the given event handler that ignores IME events.
  */
 export function withIgnoreIMEEvents<
 	E extends React.KeyboardEvent | KeyboardEvent,
->( keydownHandler: ( event: E ) => void ) {
+>( handler: ( event: E ) => void ) {
 	return ( event: E ) => {
 		const { isComposing } =
 			'nativeEvent' in event ? event.nativeEvent : event;
@@ -27,6 +27,6 @@ export function withIgnoreIMEEvents<
 			return;
 		}
 
-		keydownHandler( event );
+		handler( event );
 	};
 }