@wordpress/components 25.2.0 → 25.4.0

package/src/toolbar/toolbar-group/toolbar-group-container.native.js

@@ -1,31 +1,26 @@
 /**
  * External dependencies
  */
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
-import { withPreferredColorScheme } from '@wordpress/compose';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
-const ToolbarGroupContainer = ( {
-	getStylesFromColorScheme,
-	passedStyle,
-	children,
-} ) => (
-	<View
-		style={ [
-			getStylesFromColorScheme( styles.container, styles.containerDark ),
-			passedStyle,
-		] }
-	>
-		{ children }
-	</View>
-);
+const ToolbarGroupContainer = ( { passedStyle, children } ) => {
+	const groupStyles = [
+		usePreferredColorSchemeStyle( styles.container, styles.containerDark ),
+		{ borderLeftWidth: StyleSheet.hairlineWidth },
+		passedStyle,
+	];
 
-export default withPreferredColorScheme( ToolbarGroupContainer );
+	return <View style={ groupStyles }>{ children }</View>;
+};
+
+export default ToolbarGroupContainer;

package/src/tooltip/README.md

@@ -28,7 +28,7 @@ The direction in which the tooltip should open relative to its parent node. Spec
 
 -   Type: `String`
 -   Required: No
--   Default: `"top center"`
+-   Default: `"bottom"`
 
 ### children
 

package/src/unit-control/index.tsx

@@ -24,6 +24,7 @@ import {
 	getValidParsedQuantityAndUnit,
 } from './utils';
 import { useControlledState } from '../utils/hooks';
+import { escapeRegExp } from '../utils/strings';
 import type { UnitControlProps, UnitControlOnChangeCallback } from './types';
 
 function UnforwardedUnitControl(
@@ -76,9 +77,9 @@ function UnforwardedUnitControl(
 		);
 		const [ { value: firstUnitValue = '' } = {}, ...rest ] = list;
 		const firstCharacters = rest.reduce( ( carry, { value } ) => {
-			const first = value?.substring( 0, 1 ) || '';
+			const first = escapeRegExp( value?.substring( 0, 1 ) || '' );
 			return carry.includes( first ) ? carry : `${ carry }|${ first }`;
-		}, firstUnitValue.substring( 0, 1 ) );
+		}, escapeRegExp( firstUnitValue.substring( 0, 1 ) ) );
 		return [ list, new RegExp( `^(?:${ firstCharacters })$`, 'i' ) ];
 	}, [ nonNullValueProp, unitProp, unitsProp ] );
 	const [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(

package/src/unit-control/test/index.tsx

@@ -373,18 +373,21 @@ describe( 'UnitControl', () => {
 			const units = [
 				{ value: 'pt', label: 'pt', default: 0 },
 				{ value: 'vmax', label: 'vmax', default: 10 },
+				// Proves that units with regex control characters don't error.
+				{ value: '+', label: '+', default: 10 },
 			];
 
 			render( <UnitControl units={ units } /> );
 
 			const options = getSelectOptions();
 
-			expect( options.length ).toBe( 2 );
+			expect( options.length ).toBe( 3 );
 
-			const [ pt, vmax ] = options;
+			const [ pt, vmax, plus ] = options;
 
 			expect( pt.value ).toBe( 'pt' );
 			expect( vmax.value ).toBe( 'vmax' );
+			expect( plus.value ).toBe( '+' );
 		} );
 
 		it( 'should reset value on unit change, if unit has default value', async () => {

package/src/z-stack/component.tsx

@@ -35,13 +35,14 @@ function UnconnectedZStack(
 
 	const clonedChildren = validChildren.map( ( child, index ) => {
 		const zIndex = isReversed ? childrenLastIndex - index : index;
-		const offsetAmount = offset * index;
+		// Only when the component is layered, the offset needs to be multiplied by
+		// the item's index, so that items can correctly stack at the right distance
+		const offsetAmount = isLayered ? offset * index : offset;
 
 		const key = isValidElement( child ) ? child.key : index;
 
 		return (
 			<ZStackChildView
-				isLayered={ isLayered }
 				offsetAmount={ offsetAmount }
 				zIndex={ zIndex }
 				key={ key }
@@ -55,6 +56,7 @@ function UnconnectedZStack(
 		<ZStackView
 			{ ...otherProps }
 			className={ className }
+			isLayered={ isLayered }
 			ref={ forwardedRef }
 		>
 			{ clonedChildren }

package/src/z-stack/stories/index.tsx

@@ -8,7 +8,6 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
  * Internal dependencies
  */
 import { Elevation } from '../../elevation';
-import { HStack } from '../../h-stack';
 import { View } from '../../view';
 import { ZStack } from '..';
 
@@ -55,18 +54,12 @@ const Avatar = ( {
 
 const Template: ComponentStory< typeof ZStack > = ( args ) => {
 	return (
-		<View>
-			<HStack>
-				<View>
-					<ZStack { ...args }>
-						<Avatar backgroundColor="#444" />
-						<Avatar backgroundColor="#777" />
-						<Avatar backgroundColor="#aaa" />
-						<Avatar backgroundColor="#fff" />
-					</ZStack>
-				</View>
-			</HStack>
-		</View>
+		<ZStack { ...args }>
+			<Avatar backgroundColor="#444" />
+			<Avatar backgroundColor="#777" />
+			<Avatar backgroundColor="#aaa" />
+			<Avatar backgroundColor="#fff" />
+		</ZStack>
 	);
 };
 

package/src/z-stack/styles.ts

@@ -4,36 +4,35 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
-/**
- * Internal dependencies
- */
-import { rtl } from '../utils';
-
-export const ZStackView = styled.div`
-	display: flex;
-	position: relative;
-`;
-
 export const ZStackChildView = styled.div< {
-	isLayered: boolean;
 	offsetAmount: number;
 	zIndex: number;
 } >`
-	${ ( { isLayered, offsetAmount } ) =>
-		isLayered
-			? css( rtl( { marginLeft: offsetAmount } )() )
-			: css( rtl( { right: offsetAmount * -1 } )() ) }
+	&:not( :first-of-type ) {
+		${ ( { offsetAmount } ) =>
+			css( {
+				marginInlineStart: offsetAmount,
+			} ) };
+	}
 
-	${ ( { isLayered } ) =>
-		isLayered ? positionAbsolute : positionRelative }
-
-	${ ( { zIndex } ) => css( { zIndex } ) }
-`;
-
-const positionAbsolute = css`
-	position: absolute;
+	${ ( { zIndex } ) => css( { zIndex } ) };
 `;
 
-const positionRelative = css`
+export const ZStackView = styled.div< {
+	isLayered: boolean;
+} >`
+	display: inline-grid;
+	grid-auto-flow: column;
 	position: relative;
+
+	& > ${ ZStackChildView } {
+		position: relative;
+		justify-self: start;
+
+		${ ( { isLayered } ) =>
+			isLayered
+				? // When `isLayered` is true, all items overlap in the same grid cell
+				  css( { gridRowStart: 1, gridColumnStart: 1 } )
+				: undefined };
+	}
 `;