@wordpress/components 27.1.0 → 27.3.0

package/src/custom-select-control-v2/test/index.tsx

@@ -12,7 +12,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { CustomSelect as UncontrolledCustomSelect, CustomSelectItem } from '..';
+import UncontrolledCustomSelectControlV2 from '..';
 import type { CustomSelectProps } from '../types';
 
 const items = [
@@ -41,14 +41,14 @@ const items = [
 const defaultProps = {
 	label: 'label!',
 	children: items.map( ( { value, key } ) => (
-		<CustomSelectItem value={ value } key={ key } />
+		<UncontrolledCustomSelectControlV2.Item value={ value } key={ key } />
 	) ),
 };
 
-const ControlledCustomSelect = ( props: CustomSelectProps ) => {
+const ControlledCustomSelectControl = ( props: CustomSelectProps ) => {
 	const [ value, setValue ] = useState< string | string[] >();
 	return (
-		<UncontrolledCustomSelect
+		<UncontrolledCustomSelectControlV2
 			{ ...props }
 			onChange={ ( nextValue: string | string[] ) => {
 				setValue( nextValue );
@@ -60,8 +60,8 @@ const ControlledCustomSelect = ( props: CustomSelectProps ) => {
 };
 
 describe.each( [
-	[ 'Uncontrolled', UncontrolledCustomSelect ],
-	[ 'Controlled', ControlledCustomSelect ],
+	[ 'Uncontrolled', UncontrolledCustomSelectControlV2 ],
+	[ 'Controlled', ControlledCustomSelectControl ],
 ] )( 'CustomSelectControlV2 (%s)', ( ...modeAndComponent ) => {
 	const [ , Component ] = modeAndComponent;
 
@@ -175,8 +175,10 @@ describe.each( [
 			await sleep();
 			await press.Tab();
 			expect( currentSelectedItem ).toHaveFocus();
+			expect( currentSelectedItem ).toHaveTextContent( 'violets' );
 
-			await type( 'aq' );
+			// Ideally we would test a multi-character typeahead, but anything more than a single character is flaky
+			await type( 'a' );
 
 			expect(
 				screen.queryByRole( 'listbox', {
@@ -185,8 +187,10 @@ describe.each( [
 				} )
 			).not.toBeInTheDocument();
 
+			// This Enter is a workaround for flakiness, and shouldn't be necessary in an actual browser
 			await press.Enter();
-			expect( currentSelectedItem ).toHaveTextContent( 'aquamarine' );
+
+			expect( currentSelectedItem ).toHaveTextContent( 'amber' );
 		} );
 
 		it( 'Should have correct aria-selected value for selections', async () => {
@@ -253,9 +257,12 @@ describe.each( [
 						'rose blush',
 						'ultraviolet morning light',
 					].map( ( item ) => (
-						<CustomSelectItem key={ item } value={ item }>
+						<UncontrolledCustomSelectControlV2.Item
+							key={ item }
+							value={ item }
+						>
 							{ item }
-						</CustomSelectItem>
+						</UncontrolledCustomSelectControlV2.Item>
 					) ) }
 				</Component>
 			);
@@ -322,9 +329,12 @@ describe.each( [
 			render(
 				<Component defaultValue={ defaultValues } label="Multi-select">
 					{ defaultValues.map( ( item ) => (
-						<CustomSelectItem key={ item } value={ item }>
+						<UncontrolledCustomSelectControlV2.Item
+							key={ item }
+							value={ item }
+						>
 							{ item }
-						</CustomSelectItem>
+						</UncontrolledCustomSelectControlV2.Item>
 					) ) }
 				</Component>
 			);
@@ -374,12 +384,12 @@ describe.each( [
 
 		render(
 			<Component label="Rendered" renderSelectedValue={ renderValue }>
-				<CustomSelectItem value="april-29">
+				<UncontrolledCustomSelectControlV2.Item value="april-29">
 					{ renderValue( 'april-29' ) }
-				</CustomSelectItem>
-				<CustomSelectItem value="july-9">
+				</UncontrolledCustomSelectControlV2.Item>
+				<UncontrolledCustomSelectControlV2.Item value="july-9">
 					{ renderValue( 'july-9' ) }
-				</CustomSelectItem>
+				</UncontrolledCustomSelectControlV2.Item>
 			</Component>
 		);
 

package/src/date-time/date/styles.ts

@@ -84,8 +84,8 @@ export const DayButton = styled( Button, {
 
 	&&& {
 		border-radius: 100%;
-		height: ${ space( 8 ) };
-		width: ${ space( 8 ) };
+		height: ${ space( 7 ) };
+		width: ${ space( 7 ) };
 
 		${ ( props ) =>
 			props.isSelected &&

package/src/dimension-control/test/__snapshots__/index.test.js.snap

@@ -59,7 +59,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
 
 .emotion-11 {
   color: #1e1e1e;
-  line-height: 1.2;
+  line-height: 1.4;
   margin: 0;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -330,7 +330,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
 
 .emotion-11 {
   color: #1e1e1e;
-  line-height: 1.2;
+  line-height: 1.4;
   margin: 0;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -611,7 +611,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
 
 .emotion-11 {
   color: #1e1e1e;
-  line-height: 1.2;
+  line-height: 1.4;
   margin: 0;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;
@@ -904,7 +904,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
 
 .emotion-11 {
   color: #1e1e1e;
-  line-height: 1.2;
+  line-height: 1.4;
   margin: 0;
   font-size: calc((13 / 13) * 13px);
   font-weight: normal;

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

@@ -8,6 +8,8 @@ import type { Meta, StoryFn } from '@storybook/react';
  */
 import Dropdown from '..';
 import Button from '../../button';
+import MenuGroup from '../../menu-group';
+import MenuItem from '../../menu-item';
 import { DropdownContentWrapper } from '../dropdown-content-wrapper';
 
 const meta: Meta< typeof Dropdown > = {
@@ -83,3 +85,20 @@ WithNoPadding.args = {
 		</DropdownContentWrapper>
 	),
 };
+
+export const WithMenuItems = Template.bind( {} );
+WithMenuItems.args = {
+	...Default.args,
+	renderContent: () => (
+		<>
+			<MenuGroup label="Group 1">
+				<MenuItem>Item 1</MenuItem>
+				<MenuItem>Item 2</MenuItem>
+			</MenuGroup>
+			<MenuGroup label="Group 2">
+				<MenuItem>Item 1</MenuItem>
+				<MenuItem>Item 2</MenuItem>
+			</MenuGroup>
+		</>
+	),
+};

package/src/dropdown/style.scss

@@ -10,4 +10,30 @@
 	[role="menuitem"] {
 		white-space: nowrap;
 	}
+
+	.components-menu-group {
+		padding: $grid-unit-10;
+		margin-top: 0;
+		margin-bottom: 0;
+		margin-left: -$grid-unit-10;
+		margin-right: -$grid-unit-10;
+
+		&:first-child {
+			margin-top: -$grid-unit-10;
+		}
+
+		&:last-child {
+			margin-bottom: -$grid-unit-10;
+		}
+	}
+
+	.components-menu-group + .components-menu-group {
+		margin-top: 0;
+		border-top: $border-width solid $gray-400;
+		padding: $grid-unit-10;
+	}
+
+	&.is-alternate .components-menu-group + .components-menu-group {
+		border-color: $gray-900;
+	}
 }

package/src/dropdown-menu/style.scss

@@ -60,29 +60,4 @@
 		padding-right: $grid-unit-10;
 	}
 
-	.components-menu-group {
-		padding: $grid-unit-10;
-		margin-top: 0;
-		margin-bottom: 0;
-		margin-left: -$grid-unit-10;
-		margin-right: -$grid-unit-10;
-
-		&:first-child {
-			margin-top: -$grid-unit-10;
-		}
-
-		&:last-child {
-			margin-bottom: -$grid-unit-10;
-		}
-	}
-
-	.components-menu-group + .components-menu-group {
-		margin-top: 0;
-		border-top: $border-width solid $gray-400;
-		padding: $grid-unit-10;
-
-		.is-alternate & {
-			border-color: $gray-900;
-		}
-	}
 }

package/src/flex/flex/README.md

@@ -53,14 +53,14 @@ Spacing in between each child can be adjusted by using `gap`. The value of `gap`
 -   Required: No
 -   Default: `2`
 
-##### `justify`: `CSSProperties['justifyContent']`
+### `justify`: `CSSProperties['justifyContent']`
 
 Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
 
 -   Required: No
 -   Default: `space-between`
 
-##### `wrap`: `boolean`
+### `wrap`: `boolean`
 
 Determines if children should wrap.
 

package/src/form-token-field/README.md

@@ -4,7 +4,7 @@ A `FormTokenField` is a field similar to the tags and categories fields in the i
 
 Up to one hundred suggestions that match what the user has typed so far will be shown from which the user can pick from (auto-complete). Tokens are separated by the "," character. Suggestions can be selected with the up or down arrows and added with the tab or enter key.
 
-The `value` property is handled in a manner similar to controlled form components. See [Forms](http://facebook.github.io/react/docs/forms.html) in the React Documentation for more information.
+The `value` property is handled in a manner similar to controlled form components. See [Forms](https://react.dev/reference/react-dom/components#form-components) in the React Documentation for more information.
 
 ## Keyboard Accessibility
 

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

@@ -40,7 +40,7 @@ const identity = ( value: string ) => value;
  * Tokens are separated by the "," character. Suggestions can be selected with the up or down arrows and added with the tab or enter key.
  *
  * The `value` property is handled in a manner similar to controlled form components.
- * See [Forms](http://facebook.github.io/react/docs/forms.html) in the React Documentation for more information.
+ * See [Forms](https://react.dev/reference/react-dom/components#form-components) in the React Documentation for more information.
  */
 export function FormTokenField( props: FormTokenFieldProps ) {
 	const {

package/src/grid/README.md

@@ -27,69 +27,69 @@ function Example() {
 
 ## Props
 
-##### `align`: `CSS['alignItems']`
+### `align`: `CSS['alignItems']`
 
 Adjusts the block alignment of children.
 
 -   Required: No
 
-##### `alignment`: `GridAlignment`
+### `alignment`: `GridAlignment`
 
 Adjusts the horizontal and vertical alignment of children.
 
 -   Required: No
 
-##### `columnGap`: `CSSProperties['gridColumnGap']`
+### `columnGap`: `CSSProperties['gridColumnGap']`
 
 Adjusts the `grid-column-gap`.
 
 -   Required: No
 
-##### `columns`: `number`
+### `columns`: `number`
 
 Adjusts the number of columns of the `Grid`.
 
 -   Required: No
 -   Default: `2`
 
-##### `gap`: `number`
+### `gap`: `number`
 
 Gap between each child.
 
 -   Required: No
 -   Default: `3`
 
-##### `isInline`: `boolean`
+### `isInline`: `boolean`
 
 Changes the CSS display from `grid` to `inline-grid`.
 
 -   Required: No
 
-##### `justify`: `CSS['justifyContent']`
+### `justify`: `CSS['justifyContent']`
 
 Adjusts the inline alignment of children.
 
 -   Required: No
 
-##### `rowGap`: `CSSProperties['gridRowGap']`
+### `rowGap`: `CSSProperties['gridRowGap']`
 
 Adjusts the `grid-row-gap`.
 
 -   Required: No
 
-##### `rows`: `number`
+### `rows`: `number`
 
 Adjusts the number of rows of the `Grid`.
 
 -   Required: No
 
-##### `templateColumns`: `CSS['gridTemplateColumns']`
+### `templateColumns`: `CSS['gridTemplateColumns']`
 
 Adjusts the CSS grid `template-columns`.
 
 -   Required: No
 
-##### `templateRows`: `CSS['gridTemplateRows']`
+### `templateRows`: `CSS['gridTemplateRows']`
 
 Adjusts the CSS grid `template-rows`.
 

package/src/h-stack/README.md

@@ -29,7 +29,7 @@ function Example() {
 
 ## Props
 
-##### alignment
+### alignment
 
 **Type**: `HStackAlignment` | `CSS[ 'alignItems' ]`
 
@@ -47,33 +47,33 @@ Determines how the child elements are aligned.
 -   `edge`: Justifies content to be evenly spread out up to the main axis edges of the container.
 -   `stretch`: Stretches content to the cross axis edges of the container.
 
-##### direction
+### direction
 
 **Type**: `FlexDirection`
 
 The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally.
 
-##### expanded
+### expanded
 
 **Type**: `boolean`
 
 Expands to the maximum available width (if horizontal) or height (if vertical).
 
-##### justify
+### justify
 
 **Type**: `CSS['justifyContent']`
 
 Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
 In the example below, `flex-start` will align the children content to the left.
 
-##### spacing
+### spacing
 
 **Type**: `CSS['width']`
 
 The amount of space between each child element. Spacing in between each child can be adjusted by using `spacing`.
 The value of `spacing` works as a multiplier to the library's grid system (base of `4px`).
 
-##### wrap
+### wrap
 
 **Type**: `boolean`
 

package/src/heading/README.md

@@ -25,7 +25,7 @@ function Example() {
 
 For a complete list of those props, check out [`Text`](/packages/components/src/text/README.md#props).
 
-##### `level`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'`
+### `level`: `1 | 2 | 3 | 4 | 5 | 6 | '1' | '2' | '3' | '4' | '5' | '6'`
 
 Passing any of the heading levels to `level` will both render the correct typographic text size as well as the semantic element corresponding to the level (`h1` for `1` for example).
 

package/src/heading/test/__snapshots__/index.tsx.snap

@@ -3,7 +3,7 @@
 exports[`props should render correctly 1`] = `
 .emotion-0 {
   color: #1e1e1e;
-  line-height: 1.2;
+  line-height: 1.4;
   margin: 0;
   color: #1e1e1e;
   font-size: calc(1.95 * 13px);
@@ -32,7 +32,7 @@ Snapshot Diff:
 -     "font-size": "calc(1.25 * 13px)",
 +     "font-size": "calc(1.95 * 13px)",
       "font-weight": "600",
-      "line-height": "1.2",
+      "line-height": "1.4",
       "margin": "0",
     },
   ]
@@ -50,7 +50,7 @@ Snapshot Diff:
 -     "font-size": "calc(1.25 * 13px)",
 +     "font-size": "calc(1.95 * 13px)",
       "font-weight": "600",
-      "line-height": "1.2",
+      "line-height": "1.4",
       "margin": "0",
     },
   ]

package/src/input-control/README.md

@@ -10,7 +10,7 @@ InputControl components let users enter and edit text. This is an experimental c
 
 ```js
 import { __experimentalInputControl as InputControl } from '@wordpress/components';
-import { useState } from '@wordpress/compose';
+import { useState } from 'react';
 
 const Example = () => {
 	const [ value, setValue ] = useState( '' );

package/src/input-control/index.tsx

@@ -126,7 +126,7 @@ export function UnforwardedInputControl(
  *
  * ```jsx
  * import { __experimentalInputControl as InputControl } from '@wordpress/components';
- * import { useState } from '@wordpress/compose';
+ * import { useState } from 'react';
  *
  * const Example = () => {
  *   const [ value, setValue ] = useState( '' );

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

@@ -24,6 +24,7 @@ import { useDragCursor } from './utils';
 import { Input } from './styles/input-control-styles';
 import { useInputControlStateReducer } from './reducer/reducer';
 import type { InputFieldProps } from './types';
+import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 
 const noop = () => {};
 
@@ -222,7 +223,7 @@ function InputField(
 			onBlur={ handleOnBlur }
 			onChange={ handleOnChange }
 			onFocus={ handleOnFocus }
-			onKeyDown={ handleOnKeyDown }
+			onKeyDown={ withIgnoreIMEEvents( handleOnKeyDown ) }
 			onMouseDown={ handleOnMouseDown }
 			ref={ ref }
 			inputSize={ size }

package/src/input-control/stories/index.story.tsx

@@ -25,6 +25,7 @@ const meta: Meta< typeof InputControl > = {
 		value: { control: { disable: true } },
 	},
 	parameters: {
+		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},

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

@@ -11,8 +11,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-17haj95-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-gg7ygh-View-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -24,8 +24,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-17haj95-View-large-item-spacedAround e19lxcc00"
+-         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-gg7ygh-View-large-item-spacedAround e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -44,8 +44,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-cl593w-View-medium-item e19lxcc00"
-+       class="components-item css-1yvqxd-View-large-item e19lxcc00"
+-       class="components-item css-1lf4kzd-View-medium-item e19lxcc00"
++       class="components-item css-1vv4aem-View-large-item e19lxcc00"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -74,7 +74,7 @@ exports[`ItemGroup ItemGroup component should render correctly 1`] = `
 }
 
 .emotion-3 {
-  padding: calc((36px - calc(13px * 1.2) - 2px) / 2) 12px;
+  padding: calc((36px - calc(13px * 1.4) - 2px) / 2) 12px;
   box-sizing: border-box;
   width: 100%;
   display: block;
@@ -125,8 +125,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-cl593w-View-medium-item e19lxcc00"
+-         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-1lf4kzd-View-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >
@@ -153,8 +153,8 @@ Snapshot Diff:
         role="listitem"
       >
         <div
--         class="components-item css-ufjlmj-View-medium-item-spacedAround e19lxcc00"
-+         class="components-item css-cl593w-View-medium-item e19lxcc00"
+-         class="components-item css-1n28wmo-View-medium-item-spacedAround e19lxcc00"
++         class="components-item css-1lf4kzd-View-medium-item e19lxcc00"
           data-wp-c16t="true"
           data-wp-component="Item"
         >

package/src/mobile/bottom-sheet-select-control/README.md

@@ -10,7 +10,7 @@ However, instead of opening up the selection in a modal, the selection opens up
  * WordPress dependencies
  */
 import { BottomSheetSelectControl } from '@wordpress/components';
-import { useState } from '@wordpress/compose';
+import { useState } from 'react';
 
 const options = [
 	{

package/src/mobile/color-settings/palette.screen.native.js

@@ -112,7 +112,11 @@ const PaletteScreen = () => {
 
 	function getClearButton() {
 		return (
-			<TouchableWithoutFeedback onPress={ onClear } hitSlop={ HIT_SLOP }>
+			<TouchableWithoutFeedback
+				accessibilityLabel={ __( 'Clear selected color' ) }
+				onPress={ onClear }
+				hitSlop={ HIT_SLOP }
+			>
 				<View style={ styles.clearButtonContainer }>
 					<Text style={ clearButtonStyle }>{ __( 'Reset' ) }</Text>
 				</View>

package/src/navigable-container/container.tsx

@@ -79,7 +79,7 @@ class NavigableContainer extends Component< NavigableContainerProps > {
 
 		const { onlyBrowserTabstops } = this.props;
 		const finder = onlyBrowserTabstops ? focus.tabbable : focus.focusable;
-		const focusables = finder.find( this.container ) as HTMLElement[];
+		const focusables = finder.find( this.container );
 
 		const index = this.getFocusableIndex( focusables, target );
 		if ( index > -1 && target ) {