@wordpress/components 26.0.4 → 27.1.0

package/src/tools-panel/stories/index.story.tsx

@@ -71,7 +71,7 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
 						hasValue={ () => !! width }
 						label="Width"
 						onDeselect={ () => setWidth( undefined ) }
-						isShownByDefault={ true }
+						isShownByDefault
 					>
 						<UnitControl
 							label="Width"
@@ -83,7 +83,7 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
 						hasValue={ () => !! height }
 						label="Height"
 						onDeselect={ () => setHeight( undefined ) }
-						isShownByDefault={ true }
+						isShownByDefault
 					>
 						<UnitControl
 							label="Height"
@@ -95,7 +95,7 @@ export const Default: StoryFn< typeof ToolsPanel > = ( {
 						hasValue={ () => !! minHeight }
 						label="Minimum height"
 						onDeselect={ () => setMinHeight( undefined ) }
-						isShownByDefault={ true }
+						isShownByDefault
 					>
 						<UnitControl
 							label="Minimum height"
@@ -163,7 +163,7 @@ export const WithNonToolsPanelItems: StoryFn< typeof ToolsPanel > = ( {
 						hasValue={ () => !! width }
 						label="Width"
 						onDeselect={ () => setWidth( undefined ) }
-						isShownByDefault={ true }
+						isShownByDefault
 					>
 						<UnitControl
 							label="Width"
@@ -175,7 +175,7 @@ export const WithNonToolsPanelItems: StoryFn< typeof ToolsPanel > = ( {
 						hasValue={ () => !! height }
 						label="Height"
 						onDeselect={ () => setHeight( undefined ) }
-						isShownByDefault={ true }
+						isShownByDefault
 					>
 						<UnitControl
 							label="Height"
@@ -437,7 +437,7 @@ export const WithConditionalDefaultControl: StoryFn< typeof ToolsPanel > = ( {
 					onDeselect={ () => updateAttribute( 'height', undefined ) }
 					resetAllFilter={ () => ( { height: undefined } ) }
 					panelId={ panelId }
-					isShownByDefault={ true }
+					isShownByDefault
 				>
 					<UnitControl
 						label="Injected Height"
@@ -536,7 +536,7 @@ export const WithConditionallyRenderedControl: StoryFn<
 					} }
 					resetAllFilter={ () => ( { height: undefined } ) }
 					panelId={ panelId }
-					isShownByDefault={ true }
+					isShownByDefault
 				>
 					<UnitControl
 						label="Injected Height"
@@ -555,7 +555,7 @@ export const WithConditionallyRenderedControl: StoryFn<
 						}
 						resetAllFilter={ () => ( { scale: undefined } ) }
 						panelId={ panelId }
-						isShownByDefault={ true }
+						isShownByDefault
 					>
 						<ToggleGroupControl
 							__nextHasNoMarginBottom

package/src/tools-panel/test/index.tsx

@@ -222,10 +222,7 @@ describe( 'ToolsPanel', () => {
 					<ToolsPanelItem { ...controlProps }>
 						<div>Example control</div>
 					</ToolsPanelItem>
-					<ToolsPanelItem
-						{ ...altControlProps }
-						isShownByDefault={ true }
-					>
+					<ToolsPanelItem { ...altControlProps } isShownByDefault>
 						<div>Alt control</div>
 					</ToolsPanelItem>
 				</ToolsPanel>
@@ -413,10 +410,7 @@ describe( 'ToolsPanel', () => {
 		it( 'should continue to render shown by default item after it is toggled off via menu item', async () => {
 			render(
 				<ToolsPanel { ...defaultProps }>
-					<ToolsPanelItem
-						{ ...controlProps }
-						isShownByDefault={ true }
-					>
+					<ToolsPanelItem { ...controlProps } isShownByDefault>
 						<div>Default control</div>
 					</ToolsPanelItem>
 				</ToolsPanel>
@@ -440,10 +434,7 @@ describe( 'ToolsPanel', () => {
 		it( 'should render appropriate menu groups', async () => {
 			render(
 				<ToolsPanel { ...defaultProps }>
-					<ToolsPanelItem
-						{ ...controlProps }
-						isShownByDefault={ true }
-					>
+					<ToolsPanelItem { ...controlProps } isShownByDefault>
 						<div>Default control</div>
 					</ToolsPanelItem>
 					<ToolsPanelItem { ...altControlProps }>
@@ -461,10 +452,7 @@ describe( 'ToolsPanel', () => {
 
 		it( 'should not render contents of items when in placeholder state', () => {
 			render(
-				<ToolsPanel
-					{ ...defaultProps }
-					shouldRenderPlaceholderItems={ true }
-				>
+				<ToolsPanel { ...defaultProps } shouldRenderPlaceholderItems>
 					<ToolsPanelItem { ...altControlProps }>
 						<div>Optional control</div>
 					</ToolsPanelItem>
@@ -493,10 +481,7 @@ describe( 'ToolsPanel', () => {
 
 			const TestPanel = () => (
 				<ToolsPanel { ...defaultProps }>
-					<ToolsPanelItem
-						{ ...altControlProps }
-						isShownByDefault={ true }
-					>
+					<ToolsPanelItem { ...altControlProps } isShownByDefault>
 						<div>Default control</div>
 					</ToolsPanelItem>
 					<ToolsPanelItem
@@ -568,16 +553,13 @@ describe( 'ToolsPanel', () => {
 
 			const TestPanel = () => (
 				<ToolsPanel { ...defaultProps }>
-					<ToolsPanelItem
-						{ ...altControlProps }
-						isShownByDefault={ true }
-					>
+					<ToolsPanelItem { ...altControlProps } isShownByDefault>
 						<div>Default control</div>
 					</ToolsPanelItem>
 					{ !! altControlValue && (
 						<ToolsPanelItem
 							{ ...conditionalControlProps }
-							isShownByDefault={ true }
+							isShownByDefault
 						>
 							<div>Conditional control</div>
 						</ToolsPanelItem>
@@ -1340,7 +1322,7 @@ describe( 'ToolsPanel', () => {
 							{ ...altControlProps }
 							label="Item 3"
 							data-testid="item-3"
-							isShownByDefault={ true }
+							isShownByDefault
 						>
 							<div>Item 3</div>
 						</ToolsPanelItem>
@@ -1352,8 +1334,8 @@ describe( 'ToolsPanel', () => {
 					</ToolsPanelItems>
 					<ToolsPanel
 						{ ...defaultProps }
-						hasInnerWrapper={ true }
-						shouldRenderPlaceholderItems={ true }
+						hasInnerWrapper
+						shouldRenderPlaceholderItems
 						__experimentalFirstVisibleItemClass="first"
 						__experimentalLastVisibleItemClass="last"
 					>

package/src/tooltip/style.scss

@@ -1,5 +1,6 @@
 .components-tooltip {
-	background: $black; // TODO: Discuss with designers.
+	background: $black;
+	font-family: $default-font;
 	border-radius: $radius-block-ui;
 	color: $gray-100;
 	text-align: center;

package/src/tooltip/test/index.native.js

@@ -44,7 +44,7 @@ afterAll( () => {
 it( 'displays the message', () => {
 	const screen = render(
 		<TooltipSlot>
-			<Tooltip visible={ true } text="A helpful message">
+			<Tooltip visible text="A helpful message">
 				<Text>I need help</Text>
 			</Tooltip>
 		</TooltipSlot>
@@ -56,7 +56,7 @@ it( 'displays the message', () => {
 it( 'dismisses when the screen is tapped', () => {
 	const screen = render(
 		<TooltipSlot>
-			<Tooltip visible={ true } text="A helpful message">
+			<Tooltip visible text="A helpful message">
 				<Text>I need help</Text>
 			</Tooltip>
 		</TooltipSlot>
@@ -72,7 +72,7 @@ it( 'dismisses when the screen is tapped', () => {
 it( 'dismisses when the keyboard closes', () => {
 	const screen = render(
 		<TooltipSlot>
-			<Tooltip visible={ true } text="A helpful message">
+			<Tooltip visible text="A helpful message">
 				<Text>I need help</Text>
 			</Tooltip>
 		</TooltipSlot>

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/tree-grid/test/index.tsx

@@ -123,7 +123,7 @@ describe( 'TreeGrid', () => {
 						level={ 1 }
 						positionInSet={ 1 }
 						setSize={ 3 }
-						isExpanded={ true }
+						isExpanded
 					>
 						<TreeGridCell withoutGridItem>
 							<TestButton aria-expanded="true">Row 1</TestButton>

package/src/utils/hooks/index.js

@@ -2,4 +2,3 @@ export { default as useControlledState } from './use-controlled-state';
 export { default as useUpdateEffect } from './use-update-effect';
 export { useControlledValue } from './use-controlled-value';
 export { useCx } from './use-cx';
-export { useLatestRef } from './use-latest-ref';

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/src/v-stack/test/index.tsx

@@ -39,4 +39,14 @@ describe( 'props', () => {
 		);
 		expect( container ).toMatchSnapshot();
 	} );
+
+	test( 'should not pass through invalid props to the `as` component', () => {
+		const AsComponent = ( props: JSX.IntrinsicElements[ 'div' ] ) => {
+			return <div { ...props } />;
+		};
+
+		render( <VStack as={ AsComponent }>foobar</VStack> );
+
+		expect( console ).not.toHaveErrored();
+	} );
 } );

package/tsconfig.json

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