@wordpress/components 26.0.2 → 27.0.0

package/src/toggle-group-control/test/index.tsx

@@ -334,9 +334,11 @@ describe.each( [
 					name: 'R',
 				} );
 
+				await sleep();
 				await press.Tab();
 				expect( rigas ).toHaveFocus();
 
+				await sleep();
 				await press.Tab();
 
 				// When in controlled mode, there is an additional "Reset" button.
@@ -392,6 +394,7 @@ describe.each( [
 					</Component>
 				);
 
+				await sleep();
 				await press.Tab();
 				expect(
 					screen.getByRole( 'button', {
@@ -400,6 +403,7 @@ describe.each( [
 					} )
 				).toHaveFocus();
 
+				await sleep();
 				await press.Tab();
 				expect(
 					screen.getByRole( 'button', {

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

@@ -20,6 +20,7 @@
 	// Icons are 36px, as set by a 24px icon and 12px padding.
 	.components-button.components-button, // This needs specificity to override padding values inherited from the button component.
 	.components-button.has-icon.has-icon {
+		justify-content: center;
 		min-width: $block-toolbar-height - $grid-unit-15;
 		padding-left: $grid-unit-15 * 0.5; // 6px.
 		padding-right: $grid-unit-15 * 0.5;

package/src/tooltip/test/index.tsx

@@ -67,6 +67,7 @@ describe( 'Tooltip', () => {
 				screen.getByRole( 'button', { name: 'Second button' } )
 			).toBeVisible();
 
+			await sleep();
 			await press.Tab();
 
 			expectTooltipToBeHidden();
@@ -134,6 +135,7 @@ describe( 'Tooltip', () => {
 			);
 
 			// Focus the anchor, tooltip should show
+			await sleep();
 			await press.Tab();
 			expect(
 				screen.getByRole( 'button', { name: 'Tooltip anchor' } )
@@ -141,6 +143,7 @@ describe( 'Tooltip', () => {
 			await waitExpectTooltipToShow();
 
 			// Focus the other button, tooltip should hide
+			await sleep();
 			await press.Tab();
 			expect(
 				screen.getByRole( 'button', { name: 'Focus me' } )
@@ -166,11 +169,13 @@ describe( 'Tooltip', () => {
 			expect( anchor ).toHaveAttribute( 'aria-disabled', 'true' );
 
 			// Focus anchor, tooltip should show
+			await sleep();
 			await press.Tab();
 			expect( anchor ).toHaveFocus();
 			await waitExpectTooltipToShow();
 
 			// Focus another button, tooltip should hide
+			await sleep();
 			await press.Tab();
 			expect(
 				screen.getByRole( 'button', {

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

@@ -0,0 +1,32 @@
+/**
+ * A higher-order function that wraps a keydown 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
+ * 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.
+ *
+ * @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 ) {
+	return ( event: E ) => {
+		const { isComposing } =
+			'nativeEvent' in event ? event.nativeEvent : event;
+
+		if (
+			isComposing ||
+			// Workaround for Mac Safari where the final Enter/Backspace of an IME composition
+			// is `isComposing=false`, even though it's technically still part of the composition.
+			// These can only be detected by keyCode.
+			event.keyCode === 229
+		) {
+			return;
+		}
+
+		keydownHandler( event );
+	};
+}

package/tsconfig.json

@@ -6,7 +6,6 @@
 		"types": [
 			"gutenberg-env",
 			"gutenberg-test-env",
-			"dom-scroll-into-view",
 			"jest",
 			"@testing-library/jest-dom"
 		],