@wordpress/components 25.15.1-next.79a6196f.0 → 26.0.0

package/src/custom-gradient-picker/types.ts

@@ -10,6 +10,8 @@ export type CustomGradientPickerProps = {
 	 * can be safely removed once this happens.)
 	 *
 	 * @default false
+	 * @deprecated Default behavior since WP 6.5. Prop can be safely removed.
+	 * @ignore
 	 */
 	__nextHasNoMargin?: boolean;
 	/**

package/src/custom-select-control/index.js

@@ -83,11 +83,7 @@ export default function CustomSelectControl( props ) {
 		onFocus,
 		onBlur,
 		__experimentalShowSelectedHint = false,
-	} = useDeprecated36pxDefaultSizeProp(
-		props,
-		'wp.components.CustomSelectControl',
-		'6.4'
-	);
+	} = useDeprecated36pxDefaultSizeProp( props );
 
 	const {
 		getLabelProps,

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

@@ -49,17 +49,22 @@ export function CustomSelect( {
 	onChange,
 	size = 'default',
 	value,
-	renderSelectedValue = defaultRenderSelectedValue,
+	renderSelectedValue,
 	...props
 }: WordPressComponentProps< CustomSelectProps, 'button', false > ) {
 	const store = Ariakit.useSelectStore( {
 		setValue: ( nextValue ) => onChange?.( nextValue ),
 		defaultValue,
 		value,
+		// fix for Safari bug: https://github.com/WordPress/gutenberg/issues/55023#issuecomment-1834035917
+		virtualFocus: false,
 	} );
 
 	const { value: currentValue } = store.useState();
 
+	const computedRenderSelectedValue =
+		renderSelectedValue ?? defaultRenderSelectedValue;
+
 	return (
 		<>
 			<Styled.CustomSelectLabel store={ store }>
@@ -71,7 +76,7 @@ export function CustomSelect( {
 				hasCustomRenderProp={ !! renderSelectedValue }
 				store={ store }
 			>
-				{ renderSelectedValue( currentValue ) }
+				{ computedRenderSelectedValue( currentValue ) }
 				<Ariakit.SelectArrow />
 			</Styled.CustomSelectButton>
 			<Styled.CustomSelectPopover gutter={ 12 } store={ store } sameWidth>

package/src/custom-select-control-v2/stories/index.story.tsx

@@ -26,6 +26,7 @@ const meta: Meta< typeof CustomSelect > = {
 		value: { control: { type: null } },
 	},
 	parameters: {
+		badges: [ 'wip' ],
 		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: {

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

@@ -0,0 +1,219 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { CustomSelect, CustomSelectItem } from '..';
+import type { CustomSelectProps } from '../types';
+
+const ControlledCustomSelect = ( props: CustomSelectProps ) => {
+	const [ value, setValue ] = useState< string | string[] >();
+	return (
+		<CustomSelect
+			{ ...props }
+			onChange={ ( nextValue ) => {
+				setValue( nextValue );
+				props.onChange?.( nextValue );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+describe.each( [
+	[ 'uncontrolled', CustomSelect ],
+	[ 'controlled', ControlledCustomSelect ],
+] )( 'CustomSelect %s', ( ...modeAndComponent ) => {
+	const [ , Component ] = modeAndComponent;
+
+	describe( 'Multiple selection', () => {
+		it( 'Should be able to select multiple items when provided an array', async () => {
+			const user = userEvent.setup();
+			const onChangeMock = jest.fn();
+
+			// initial selection as defaultValue
+			const defaultValues = [
+				'incandescent glow',
+				'ultraviolet morning light',
+			];
+
+			render(
+				<Component
+					defaultValue={ defaultValues }
+					onChange={ onChangeMock }
+					label="Multi-select"
+				>
+					{ [
+						'aurora borealis green',
+						'flamingo pink sunrise',
+						'incandescent glow',
+						'rose blush',
+						'ultraviolet morning light',
+					].map( ( item ) => (
+						<CustomSelectItem key={ item } value={ item }>
+							{ item }
+						</CustomSelectItem>
+					) ) }
+				</Component>
+			);
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			// ensure more than one item is selected due to defaultValues
+			expect( currentSelectedItem ).toHaveTextContent(
+				`${ defaultValues.length } items selected`
+			);
+
+			await user.click( currentSelectedItem );
+
+			expect( screen.getByRole( 'listbox' ) ).toHaveAttribute(
+				'aria-multiselectable'
+			);
+
+			// ensure defaultValues are selected in list of items
+			defaultValues.forEach( ( value ) =>
+				expect(
+					screen.getByRole( 'option', {
+						name: value,
+						selected: true,
+					} )
+				).toBeVisible()
+			);
+
+			// name of next selection
+			const nextSelectionName = 'rose blush';
+
+			// element for next selection
+			const nextSelection = screen.getByRole( 'option', {
+				name: nextSelectionName,
+			} );
+
+			// click next selection to add another item to current selection
+			await user.click( nextSelection );
+
+			// updated array containing defaultValues + the item just selected
+			const updatedSelection = defaultValues.concat( nextSelectionName );
+
+			expect( onChangeMock ).toHaveBeenCalledWith( updatedSelection );
+
+			expect( nextSelection ).toHaveAttribute( 'aria-selected' );
+
+			// expect increased array length for current selection
+			expect( currentSelectedItem ).toHaveTextContent(
+				`${ updatedSelection.length } items selected`
+			);
+		} );
+
+		it( 'Should be able to deselect items when provided an array', async () => {
+			const user = userEvent.setup();
+
+			// initial selection as defaultValue
+			const defaultValues = [
+				'aurora borealis green',
+				'incandescent glow',
+				'key lime green',
+				'rose blush',
+				'ultraviolet morning light',
+			];
+
+			render(
+				<Component defaultValue={ defaultValues } label="Multi-select">
+					{ defaultValues.map( ( item ) => (
+						<CustomSelectItem key={ item } value={ item }>
+							{ item }
+						</CustomSelectItem>
+					) ) }
+				</Component>
+			);
+
+			const currentSelectedItem = screen.getByRole( 'combobox', {
+				expanded: false,
+			} );
+
+			await user.click( currentSelectedItem );
+
+			// Array containing items to deselect
+			const nextSelection = [
+				'aurora borealis green',
+				'rose blush',
+				'incandescent glow',
+			];
+
+			// Deselect some items by clicking them to ensure that changes
+			// are reflected correctly
+			await Promise.all(
+				nextSelection.map( async ( value ) => {
+					await user.click(
+						screen.getByRole( 'option', { name: value } )
+					);
+					expect(
+						screen.getByRole( 'option', {
+							name: value,
+							selected: false,
+						} )
+					).toBeVisible();
+				} )
+			);
+
+			// expect different array length from defaultValues due to deselecting items
+			expect( currentSelectedItem ).toHaveTextContent(
+				`${
+					defaultValues.length - nextSelection.length
+				} items selected`
+			);
+		} );
+	} );
+
+	it( 'Should allow rendering a custom value when using `renderSelectedValue`', async () => {
+		const user = userEvent.setup();
+
+		const renderValue = ( value: string | string[] ) => {
+			return <img src={ `${ value }.jpg` } alt={ value as string } />;
+		};
+
+		render(
+			<Component label="Rendered" renderSelectedValue={ renderValue }>
+				<CustomSelectItem value="april-29">
+					{ renderValue( 'april-29' ) }
+				</CustomSelectItem>
+				<CustomSelectItem value="july-9">
+					{ renderValue( 'july-9' ) }
+				</CustomSelectItem>
+			</Component>
+		);
+
+		const currentSelectedItem = screen.getByRole( 'combobox', {
+			expanded: false,
+		} );
+
+		expect( currentSelectedItem ).toBeVisible();
+
+		// expect that the initial selection renders an image
+		expect( currentSelectedItem ).toContainElement(
+			screen.getByRole( 'img', { name: 'april-29' } )
+		);
+
+		expect(
+			screen.queryByRole( 'img', { name: 'july-9' } )
+		).not.toBeInTheDocument();
+
+		await user.click( currentSelectedItem );
+
+		// expect that the other image is only visible after opening popover with options
+		expect( screen.getByRole( 'img', { name: 'july-9' } ) ).toBeVisible();
+		expect(
+			screen.getByRole( 'option', { name: 'july-9' } )
+		).toBeVisible();
+	} );
+} );

package/src/date-time/time/timezone.tsx

@@ -30,7 +30,7 @@ const TimeZone = () => {
 	const zoneAbbr =
 		'' !== timezone.abbr && isNaN( Number( timezone.abbr ) )
 			? timezone.abbr
-			: `UTC${ offsetSymbol }${ timezone.offset }`;
+			: `UTC${ offsetSymbol }${ timezone.offsetFormatted }`;
 
 	// Replace underscore with space in strings like `America/Costa_Rica`.
 	const prettyTimezoneString = timezone.string.replace( '_', ' ' );

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

@@ -96,7 +96,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   -ms-flex: 1;
   flex: 1;
   position: relative;
-  background-color: #fff;
+  background-color: var(--wp-components-color-background, #fff);
   width: 100%;
 }
 
@@ -174,7 +174,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #949494;
+  border-color: var(--wp-components-color-gray-600, #949494);
   border-style: solid;
   border-width: 1px;
   padding-left: 2px;
@@ -188,9 +188,9 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
         data-wp-c16t="true"
-        data-wp-component="Flex"
+        data-wp-component="InputBase"
       >
         <div
           class="components-flex-item emotion-7 emotion-8 emotion-6"
@@ -367,7 +367,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   -ms-flex: 1;
   flex: 1;
   position: relative;
-  background-color: #fff;
+  background-color: var(--wp-components-color-background, #fff);
   width: 100%;
 }
 
@@ -445,7 +445,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #949494;
+  border-color: var(--wp-components-color-gray-600, #949494);
   border-style: solid;
   border-width: 1px;
   padding-left: 2px;
@@ -459,9 +459,9 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
         data-wp-c16t="true"
-        data-wp-component="Flex"
+        data-wp-component="InputBase"
       >
         <div
           class="components-flex-item emotion-7 emotion-8 emotion-6"
@@ -648,7 +648,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   -ms-flex: 1;
   flex: 1;
   position: relative;
-  background-color: #fff;
+  background-color: var(--wp-components-color-background, #fff);
   width: 100%;
 }
 
@@ -726,7 +726,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #949494;
+  border-color: var(--wp-components-color-gray-600, #949494);
   border-style: solid;
   border-width: 1px;
   padding-left: 2px;
@@ -740,9 +740,9 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
         data-wp-c16t="true"
-        data-wp-component="Flex"
+        data-wp-component="InputBase"
       >
         <div
           class="components-flex-item emotion-7 emotion-8 emotion-6"
@@ -941,7 +941,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   -ms-flex: 1;
   flex: 1;
   position: relative;
-  background-color: #fff;
+  background-color: var(--wp-components-color-background, #fff);
   width: 100%;
 }
 
@@ -1019,7 +1019,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #949494;
+  border-color: var(--wp-components-color-gray-600, #949494);
   border-style: solid;
   border-width: 1px;
   padding-left: 2px;
@@ -1033,9 +1033,9 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
       class="components-base-control__field emotion-2 emotion-3"
     >
       <div
-        class="components-flex components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
+        class="components-flex components-input-base components-select-control block-editor-dimension-control emotion-4 emotion-5 emotion-6"
         data-wp-c16t="true"
-        data-wp-component="Flex"
+        data-wp-component="InputBase"
       >
         <div
           class="components-flex-item emotion-7 emotion-8 emotion-6"

package/src/divider/README.md

@@ -55,4 +55,4 @@ Divider's orientation. When using inside a flex container, you may need to make
 
 ### Inherited props
 
-`Divider` also inherits all of the [`Separator` props](https://reakit.io/docs/separator/).
+`Divider` also inherits all of the [`Separator` props](https://ariakit.org/reference/separator#optional-props).

package/src/dropdown-menu-v2/stories/index.story.tsx

@@ -58,6 +58,7 @@ const meta: Meta< typeof DropdownMenu > = {
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },
+		badges: [ 'private' ],
 		controls: { expanded: true },
 		docs: {
 			canvas: { sourceState: 'shown' },

package/src/dropdown-menu-v2/styles.ts

@@ -180,7 +180,7 @@ const baseItem = css`
 
 	/* Keyboard focus (focus-visible) */
 	&[data-focus-visible] {
-		box-shadow: 0 0 0 1.5px var( --wp-admin-theme-color );
+		box-shadow: 0 0 0 1.5px ${ COLORS.theme.accent };
 
 		/* Only visible in Windows High Contrast mode */
 		outline: 2px solid transparent;

package/src/focal-point-picker/index.tsx

@@ -217,8 +217,8 @@ export function FocalPointPicker( {
 	};
 
 	const focalPointPosition = {
-		left: x * bounds.width,
-		top: y * bounds.height,
+		left: x !== undefined ? x * bounds.width : 0.5 * bounds.width,
+		top: y !== undefined ? y * bounds.height : 0.5 * bounds.height,
 	};
 
 	const classes = classnames(

package/src/focal-point-picker/styles/focal-point-picker-style.ts

@@ -9,19 +9,20 @@ import styled from '@emotion/styled';
  */
 import { Flex } from '../../flex';
 import UnitControl from '../../unit-control';
-import { COLORS } from '../../utils';
+import { COLORS, CONFIG, reduceMotion } from '../../utils';
 import type { FocalPointPickerControlsProps } from '../types';
 import { INITIAL_BOUNDS } from '../utils';
 
 export const MediaWrapper = styled.div`
 	background-color: transparent;
+	display: flex;
 	text-align: center;
 	width: 100%;
 `;
 
 export const MediaContainer = styled.div`
 	align-items: center;
-	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );
+	border-radius: ${ CONFIG.radiusBlockUi };
 	cursor: pointer;
 	display: inline-flex;
 	justify-content: center;
@@ -29,8 +30,21 @@ export const MediaContainer = styled.div`
 	position: relative;
 	height: 100%;
 
+	&:after {
+		border-radius: inherit;
+		bottom: 0;
+		box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.1 );
+		content: '';
+		left: 0;
+		pointer-events: none;
+		position: absolute;
+		right: 0;
+		top: 0;
+	}
+
 	img,
 	video {
+		border-radius: inherit;
 		box-sizing: border-box;
 		display: block;
 		height: auto;
@@ -45,6 +59,7 @@ export const MediaContainer = styled.div`
 
 export const MediaPlaceholder = styled.div`
 	background: ${ COLORS.gray[ 100 ] };
+	border-radius: inherit;
 	box-sizing: border-box;
 	height: ${ INITIAL_BOUNDS.height }px;
 	max-width: 280px;
@@ -91,29 +106,30 @@ export const GridView = styled.div`
 	position: absolute;
 	top: 50%;
 	transform: translate3d( -50%, -50%, 0 );
-	transition: opacity 120ms linear;
+	transition: opacity 100ms linear;
 	z-index: 1;
 
+	${ reduceMotion( 'transition' ) }
+
 	opacity: ${ ( { showOverlay }: { showOverlay?: boolean } ) =>
 		showOverlay ? 1 : 0 };
 `;
 
 export const GridLine = styled.div`
-	background: white;
-	box-shadow: 0 0 2px rgba( 0, 0, 0, 0.6 );
+	background: rgba( 255, 255, 255, 0.4 );
+	backdrop-filter: blur( 16px ) saturate( 180% );
 	position: absolute;
-	opacity: 0.4;
 	transform: translateZ( 0 );
 `;
 
 export const GridLineX = styled( GridLine )`
 	height: 1px;
-	left: 0;
-	right: 0;
+	left: 1px;
+	right: 1px;
 `;
 
 export const GridLineY = styled( GridLine )`
 	width: 1px;
-	top: 0;
-	bottom: 0;
+	top: 1px;
+	bottom: 1px;
 `;

package/src/focal-point-picker/styles/focal-point-style.ts

@@ -3,21 +3,35 @@
  */
 import styled from '@emotion/styled';
 
+/**
+ * Internal dependencies
+ */
+import { reduceMotion } from '../../utils';
+
 export const PointerCircle = styled.div`
 	background-color: transparent;
 	cursor: grab;
-	height: 48px;
-	margin: -24px 0 0 -24px;
+	height: 40px;
+	margin: -20px 0 0 -20px;
 	position: absolute;
 	user-select: none;
-	width: 48px;
+	width: 40px;
 	will-change: transform;
 	z-index: 10000;
-	background: rgba( 255, 255, 255, 0.6 );
+	background: rgba( 255, 255, 255, 0.4 );
+	border: 1px solid rgba( 255, 255, 255, 0.4 );
 	border-radius: 50%;
-	backdrop-filter: blur( 4px );
-	box-shadow: rgb( 0 0 0 / 20% ) 0px 0px 10px;
+	backdrop-filter: blur( 16px ) saturate( 180% );
+	box-shadow: rgb( 0 0 0 / 10% ) 0px 0px 8px;
+	transition: transform 100ms linear;
+
+	${ reduceMotion( 'transition' ) }
 
 	${ ( { isDragging }: { isDragging: boolean } ) =>
-		isDragging && 'cursor: grabbing;' }
+		isDragging &&
+		`
+			box-shadow: rgb( 0 0 0 / 12% ) 0px 0px 10px;
+			transform: scale( 1.1 );
+			cursor: grabbing;
+			` }
 `;

package/src/font-size-picker/README.md

@@ -29,7 +29,6 @@ const MyFontSizePicker = () => {
 
 	return (
 		<FontSizePicker
-			__nextHasNoMarginBottom
 			fontSizes={ fontSizes }
 			value={ fontSize }
 			fallbackFontSize={ fallbackFontSize }
@@ -113,10 +112,3 @@ If `true`, a slider will be displayed alongside the input field when a custom fo
 
 -   Required: no
 -   Default: `false`
-
-### `__nextHasNoMarginBottom`: `boolean`
-
-Start opting into the new margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4. (The prop can be safely removed once this happens.)
-
--   Required: no
--   Default: `false`

package/src/font-size-picker/font-size-picker-toggle-group.tsx

@@ -14,17 +14,10 @@ import { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';
 import type { FontSizePickerToggleGroupProps } from './types';
 
 const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
-	const {
-		fontSizes,
-		value,
-		__nextHasNoMarginBottom,
-		__next40pxDefaultSize,
-		size,
-		onChange,
-	} = props;
+	const { fontSizes, value, __next40pxDefaultSize, size, onChange } = props;
 	return (
 		<ToggleGroupControl
-			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			__nextHasNoMarginBottom
 			__next40pxDefaultSize={ __next40pxDefaultSize }
 			label={ __( 'Font size' ) }
 			hideLabelFromVision