@wordpress/components 27.0.0 → 27.2.0

package/src/custom-select-control-v2/types.ts

@@ -92,7 +92,6 @@ type LegacyOnChangeObject = {
 };
 
 export type LegacyCustomSelectProps = {
-	children?: never;
 	/**
 	 * Optional classname for the 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/disabled/test/index.tsx

@@ -94,7 +94,7 @@ describe( 'Disabled', () => {
 			'This is contentEditable.'
 		);
 
-		rerender( <MaybeDisable isDisabled={ true } /> );
+		rerender( <MaybeDisable isDisabled /> );
 		expect( getInput() ).toHaveValue( 'This is input.' );
 		expect( getContentEditable() ).toHaveTextContent(
 			'This is contentEditable.'

package/src/draggable/index.native.js

@@ -63,7 +63,7 @@ const Draggable = ( {
 	useAnimatedReaction(
 		() => isDragging.value,
 		( result, previous ) => {
-			if ( result === previous || previous === null ) {
+			if ( result === previous ) {
 				return;
 			}
 
@@ -75,7 +75,7 @@ const Draggable = ( {
 						id: draggingId.value,
 					} );
 				}
-			} else if ( onDragEnd ) {
+			} else if ( previous !== null && onDragEnd ) {
 				onDragEnd( {
 					x: lastPosition.x.value,
 					y: lastPosition.y.value,

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

@@ -28,10 +28,12 @@ const TouchEventType = {
 // For testing, we mock the "requestAnimationFrame" so it calls the callback passed instantly.
 let requestAnimationFrameCopy;
 beforeEach( () => {
+	jest.useFakeTimers();
 	requestAnimationFrameCopy = global.requestAnimationFrame;
 	global.requestAnimationFrame = ( callback ) => callback();
 } );
 afterEach( () => {
+	jest.useRealTimers();
 	global.requestAnimationFrame = requestAnimationFrameCopy;
 } );
 
@@ -43,7 +45,7 @@ describe( 'Draggable', () => {
 			<Draggable>
 				<DraggableTrigger
 					id={ triggerId }
-					enabled={ true }
+					enabled
 					minDuration={ 500 }
 					onLongPress={ onLongPress }
 					testID="draggableTrigger"
@@ -58,6 +60,7 @@ describe( 'Draggable', () => {
 			{ oldState: State.BEGAN, state: State.ACTIVE },
 			{ state: State.ACTIVE },
 		] );
+		jest.runOnlyPendingTimers();
 
 		expect( onLongPress ).toHaveBeenCalledTimes( 1 );
 		expect( onLongPress ).toHaveBeenCalledWith( triggerId );
@@ -93,6 +96,7 @@ describe( 'Draggable', () => {
 			{ oldState: State.BEGAN, state: State.ACTIVE },
 			{ state: State.ACTIVE },
 		] );
+		jest.runOnlyPendingTimers();
 		fireGestureHandler( draggable, [
 			// TOUCHES_DOWN event is only received on ACTIVE state, so we have to fire it manually.
 			{ oldState: State.BEGAN, state: State.ACTIVE },
@@ -112,7 +116,7 @@ describe( 'Draggable', () => {
 		] );
 		// TODO(jest-console): Fix the warning and remove the expect below.
 		expect( console ).toHaveWarnedWith(
-			'[Reanimated] You can not use setGestureState in non-worklet function.'
+			'[Reanimated] setGestureState() cannot be used with Jest.'
 		);
 
 		expect( onDragStart ).toHaveBeenCalledTimes( 1 );

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 & {
+			border-color: $gray-900;
+		}
+	}
 }

package/src/dropdown-menu/index.native.js

@@ -108,7 +108,7 @@ function DropdownMenu( {
 			renderContent={ ( { isOpen, onClose, ...props } ) => {
 				return (
 					<BottomSheet
-						hideHeader={ true }
+						hideHeader
 						isVisible={ isOpen }
 						onClose={ onClose }
 					>
@@ -135,7 +135,7 @@ function DropdownMenu( {
 												} }
 												editable={ false }
 												icon={ control.icon }
-												leftAlign={ true }
+												leftAlign
 												isSelected={ control.isActive }
 												separatorType={
 													Platform.OS === 'android'

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/flex/flex/hook.ts

@@ -22,7 +22,7 @@ import type { FlexProps } from '../types';
 
 function useDeprecatedProps(
 	props: WordPressComponentProps< FlexProps, 'div' >
-): WordPressComponentProps< FlexProps, 'div' > {
+): Omit< typeof props, 'isReversed' > {
 	const { isReversed, ...otherProps } = props;
 
 	if ( typeof isReversed !== 'undefined' ) {

package/src/font-size-picker/index.native.js

@@ -111,7 +111,7 @@ function FontSizePicker( {
 						separatorType="none"
 						label={ __( 'Default' ) }
 						onPress={ onChangeValue( undefined ) }
-						leftAlign={ true }
+						leftAlign
 						key={ 'default' }
 						accessibilityRole={ 'button' }
 						accessibilityLabel={ __( 'Selected: Default' ) }
@@ -137,7 +137,7 @@ function FontSizePicker( {
 								label={ item.name }
 								subLabel={ item.sizePx }
 								onPress={ onChangeValue( item.sizePx ) }
-								leftAlign={ true }
+								leftAlign
 								key={ index }
 								accessibilityRole={ 'button' }
 								accessibilityLabel={

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 {
@@ -711,7 +711,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 					justify="flex-start"
 					align="center"
 					gap={ 1 }
-					wrap={ true }
+					wrap
 					__next40pxDefaultSize={ __next40pxDefaultSize }
 					hasTokens={ !! value.length }
 				>

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/h-stack/hook.tsx

@@ -47,7 +47,8 @@ export function useHStack( props: WordPressComponentProps< Props, 'div' > ) {
 		gap: spacing,
 	};
 
-	const flexProps = useFlex( propsForFlex );
+	// Omit `isColumn` because it's not used in HStack.
+	const { isColumn, ...flexProps } = useFlex( propsForFlex );
 
 	return flexProps;
 }

package/src/h-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( <HStack as={ AsComponent }>foobar</HStack> );
+
+		expect( console ).not.toHaveErrored();
+	} );
 } );

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/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/item-group/test/index.js

@@ -29,7 +29,7 @@ describe( 'ItemGroup', () => {
 			);
 
 			const { container: withBorders } = render(
-				<ItemGroup isBordered={ true }>
+				<ItemGroup isBordered>
 					<Item>Code is poetry</Item>
 				</ItemGroup>
 			);
@@ -63,7 +63,7 @@ describe( 'ItemGroup', () => {
 			);
 
 			const { container: separatedItems } = render(
-				<ItemGroup isSeparated={ true }>
+				<ItemGroup isSeparated>
 					<Item>Code is poetry</Item>
 				</ItemGroup>
 			);