@wordpress/components 29.9.0 → 29.11.0

package/src/drop-zone/types.ts

@@ -5,6 +5,12 @@ export type DropZoneProps = {
 	 * A CSS `class` to give to the wrapper element.
 	 */
 	className?: string;
+	/**
+	 * An icon to be shown within the drop zone area.
+	 *
+	 * @default "upload"
+	 */
+	icon?: JSX.Element;
 	/**
 	 * A string to be shown within the drop zone area.
 	 *

package/src/focal-point-picker/styles/focal-point-picker-style.ts

@@ -53,7 +53,7 @@ export const MediaContainer = styled.div`
 		max-width: 100%;
 		pointer-events: none;
 		user-select: none;
-		width: auto;
+		width: 100%;
 	}
 `;
 

package/src/form-token-field/index.tsx

@@ -513,10 +513,13 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 				( suggestion ) => ! normalizedValue.includes( suggestion )
 			);
 		} else {
-			match = match.toLocaleLowerCase();
+			match = match.normalize( 'NFKC' ).toLocaleLowerCase();
 
 			_suggestions.forEach( ( suggestion ) => {
-				const index = suggestion.toLocaleLowerCase().indexOf( match );
+				const index = suggestion
+					.normalize( 'NFKC' )
+					.toLocaleLowerCase()
+					.indexOf( match );
 				if ( normalizedValue.indexOf( suggestion ) === -1 ) {
 					if ( index === 0 ) {
 						startsWithMatch.push( suggestion );

package/src/form-token-field/suggestions-list.tsx

@@ -37,7 +37,6 @@ export function SuggestionsList<
 		( listNode ) => {
 			// only have to worry about scrolling selected suggestion into view
 			// when already expanded.
-			let rafId: number | undefined;
 			if (
 				selectedIndex > -1 &&
 				scrollIntoView &&
@@ -49,12 +48,6 @@ export function SuggestionsList<
 					inline: 'nearest',
 				} );
 			}
-
-			return () => {
-				if ( rafId !== undefined ) {
-					cancelAnimationFrame( rafId );
-				}
-			};
 		},
 		[ selectedIndex, scrollIntoView ]
 	);
@@ -72,13 +65,16 @@ export function SuggestionsList<
 	};
 
 	const computeSuggestionMatch = ( suggestion: T ) => {
-		const matchText = displayTransform( match ).toLocaleLowerCase();
+		const matchText = displayTransform( match )
+			.normalize( 'NFKC' )
+			.toLocaleLowerCase();
 		if ( matchText.length === 0 ) {
 			return null;
 		}
 
 		const transformedSuggestion = displayTransform( suggestion );
 		const indexOfMatch = transformedSuggestion
+			.normalize( 'NFKC' )
 			.toLocaleLowerCase()
 			.indexOf( matchText );
 

package/src/form-token-field/test/index.tsx

@@ -1275,6 +1275,45 @@ describe( 'FormTokenField', () => {
 			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
 		} );
 
+		it( 'should match suggestions with half-width and full-width characters', async () => {
+			const user = userEvent.setup();
+
+			const suggestions = [
+				// Half-width characters
+				'WordPress',
+				'Gutenberg',
+				// Full-width characters
+				'ＷｏｒｄＰｒｅｓｓ',
+				'Ｇｕｔｅｎｂｅｒｇ',
+				// Mixed characters
+				'WordＰｒｅｓｓ',
+				'Guteｎｂｅｒｇ',
+			];
+
+			render( <FormTokenFieldWithState suggestions={ suggestions } /> );
+
+			const input = screen.getByRole( 'combobox' );
+
+			// Search with half-width characters.
+			await user.type( input, 'rdp' );
+
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'WordPress',
+				'ＷｏｒｄＰｒｅｓｓ',
+				'WordＰｒｅｓｓ',
+			] );
+
+			// Search with full-width characters.
+			await user.clear( input );
+			await user.type( input, 'ｔｅｎ' );
+
+			expectVisibleSuggestionsToBe( screen.getByRole( 'listbox' ), [
+				'Gutenberg',
+				'Ｇｕｔｅｎｂｅｒｇ',
+				'Guteｎｂｅｒｇ',
+			] );
+		} );
+
 		it( 'should re-render if suggestions change', async () => {
 			const user = userEvent.setup();
 

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

@@ -9,7 +9,6 @@ import type {
 	PointerEvent,
 	FocusEvent,
 	ForwardedRef,
-	MouseEvent,
 } from 'react';
 
 /**
@@ -187,22 +186,6 @@ function InputField(
 	);
 
 	const dragProps = isDragEnabled ? dragGestureProps() : {};
-	/*
-	 * Works around the odd UA (e.g. Firefox) that does not focus inputs of
-	 * type=number when their spinner arrows are pressed.
-	 */
-	let handleOnMouseDown;
-	if ( type === 'number' ) {
-		handleOnMouseDown = ( event: MouseEvent< HTMLInputElement > ) => {
-			props.onMouseDown?.( event );
-			if (
-				event.currentTarget !==
-				event.currentTarget.ownerDocument.activeElement
-			) {
-				event.currentTarget.focus();
-			}
-		};
-	}
 
 	return (
 		<Input
@@ -216,7 +199,6 @@ function InputField(
 			onBlur={ handleOnBlur }
 			onChange={ handleOnChange }
 			onKeyDown={ withIgnoreIMEEvents( handleOnKeyDown ) }
-			onMouseDown={ handleOnMouseDown }
 			ref={ ref }
 			inputSize={ size }
 			// Fallback to `''` to avoid "uncontrolled to controlled" warning.

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

@@ -72,23 +72,6 @@ describe( 'InputControl', () => {
 		} );
 	} );
 
-	describe( 'Ensurance of focus for number inputs', () => {
-		it( 'should focus its input on mousedown events', async () => {
-			const user = await userEvent.setup();
-			const spy = jest.fn();
-			render( <InputControl type="number" onFocus={ spy } /> );
-			const target = getInput();
-
-			// Hovers the input and presses (without releasing) primary button.
-			await user.pointer( [
-				{ target },
-				{ keys: '[MouseLeft]', target },
-			] );
-
-			expect( spy ).toHaveBeenCalledTimes( 1 );
-		} );
-	} );
-
 	describe( 'Value', () => {
 		it( 'should update value onChange', async () => {
 			const user = await userEvent.setup();

package/src/mobile/utils/get-px-from-css-unit.native.js

@@ -116,7 +116,7 @@ function isMathExpression( cssUnit ) {
  * Evaluates the math expression and return a px value.
  *
  * @param {string} cssUnit the cssUnit value being evaluated.
- * @return {string} return a converfted value to px.
+ * @return {string} return a converted value to px.
  */
 function evalMathExpression( cssUnit ) {
 	let errorFound = false;

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/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/private-apis.ts

@@ -6,7 +6,8 @@ import { Menu } from './menu';
 import { ComponentsContext } from './context/context-system-provider';
 import Theme from './theme';
 import { Tabs } from './tabs';
-import { kebabCase } from './utils/strings';
+import { kebabCase, normalizeTextString } from './utils/strings';
+import { withIgnoreIMEEvents } from './utils/with-ignore-ime-events';
 import { lock } from './lock-unlock';
 import Badge from './badge';
 
@@ -18,5 +19,7 @@ lock( privateApis, {
 	Theme,
 	Menu,
 	kebabCase,
+	withIgnoreIMEEvents,
 	Badge,
+	normalizeTextString,
 } );

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/toolbar/toolbar/style.scss

@@ -1,6 +1,6 @@
 .components-accessible-toolbar {
 	display: inline-flex;
-	border: $border-width solid $gray-900;
+	border: $border-width solid $components-color-foreground;
 	border-radius: $radius-small;
 	flex-shrink: 0;
 
@@ -14,13 +14,11 @@
 		& > .components-toolbar-group {
 			border-right: none;
 		}
-
 	}
 }
 
 .components-accessible-toolbar,
 .components-toolbar {
-
 	&[aria-orientation="vertical"] {
 		display: flex;
 		flex-direction: column;
@@ -56,7 +54,7 @@
 			z-index: -1;
 
 			// Animate in.
-			@media not (prefers-reduced-motion) {
+			@media not ( prefers-reduced-motion ) {
 				animation: components-button__appear-animation 0.1s ease;
 				animation-fill-mode: forwards;
 			}
@@ -79,7 +77,7 @@
 			}
 
 			&::before {
-				background: $gray-900;
+				background: $components-color-foreground;
 			}
 		}
 
@@ -99,7 +97,6 @@
 	}
 }
 
-
 @keyframes components-button__appear-animation {
 	from {
 		transform: scaleY(0);

package/src/toolbar/toolbar-group/style.scss

@@ -1,7 +1,7 @@
 .components-toolbar-group {
 	min-height: $block-toolbar-height;
-	border-right: $border-width solid $gray-900;
-	background-color: $white;
+	border-right: $border-width solid $components-color-foreground;
+	background-color: $components-color-background;
 	display: inline-flex;
 	flex-shrink: 0;
 	flex-wrap: wrap;
@@ -41,8 +41,8 @@
 .components-toolbar {
 	min-height: $block-toolbar-height;
 	margin: 0;
-	border: $border-width solid $gray-900;
-	background-color: $white;
+	border: $border-width solid $components-color-foreground;
+	background-color: $components-color-background;
 	display: inline-flex;
 	flex-shrink: 0;
 	flex-wrap: wrap;

package/src/utils/strings.ts

@@ -20,6 +20,7 @@ const ALL_UNICODE_DASH_CHARACTERS = new RegExp(
 
 export const normalizeTextString = ( value: string ): string => {
 	return removeAccents( value )
+		.normalize( 'NFKC' )
 		.toLocaleLowerCase()
 		.replace( ALL_UNICODE_DASH_CHARACTERS, '-' );
 };

package/src/utils/test/strings.js

@@ -169,4 +169,15 @@ describe( 'normalizeTextString', () => {
 			'-'.repeat( dashCharacters.length )
 		);
 	} );
+
+	it( 'should normalize unicode to standard characters', () => {
+		expect( normalizeTextString( '①' ) ).toBe( '1' );
+		expect( normalizeTextString( 'Ⅸ' ) ).toBe( 'ix' );
+		expect( normalizeTextString( 'MC²' ) ).toBe( 'mc2' );
+		expect( normalizeTextString( 'ＰｌａｙＳｔａｔｉｏｎ　２' ) ).toBe(
+			'playstation 2'
+		);
+		expect( normalizeTextString( 'ＡＢＣ' ) ).toBe( 'abc' );
+		expect( normalizeTextString( 'Amélie' ) ).toBe( 'amelie' );
+	} );
 } );

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 );
 	};
 }