@wordpress/components 28.2.0 → 28.4.0

package/src/disabled/README.md

@@ -33,7 +33,7 @@ const MyDisabled = () => {
 };
 ```
 
-A component can detect if it has been wrapped in a `<Disabled />` by accessing its [context](https://reactjs.org/docs/context.html) using `Disabled.Context`.
+A component can detect if it has been wrapped in a `<Disabled />` by accessing its [context](https://react.dev/learn/passing-data-deeply-with-context) using `Disabled.Context`.
 
 ```jsx
 function CustomButton( props ) {

package/src/disclosure/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 
 /**

package/src/divider/component.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 import type { ForwardedRef } from 'react';
 

package/src/divider/types.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { SeparatorProps } from '@ariakit/react';
 
 /**

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -41,36 +41,37 @@ const meta: Meta< typeof Dropdown > = {
 };
 export default meta;
 
-const Template: StoryFn< typeof Dropdown > = ( args ) => (
-	<div style={ { height: 150 } }>
-		<Dropdown { ...args } />
-	</div>
-);
-
-export const Default = Template.bind( {} );
-Default.args = {
-	renderToggle: ( { isOpen, onToggle } ) => (
-		<Button onClick={ onToggle } aria-expanded={ isOpen } variant="primary">
-			Open dropdown
-		</Button>
-	),
-	renderContent: () => <div>This is the dropdown content.</div>,
+export const Default: StoryObj< typeof Dropdown > = {
+	args: {
+		renderToggle: ( { isOpen, onToggle } ) => (
+			<Button
+				onClick={ onToggle }
+				aria-expanded={ isOpen }
+				variant="primary"
+			>
+				Open dropdown
+			</Button>
+		),
+		renderContent: () => <div>This is the dropdown content.</div>,
+	},
 };
 
 /**
  * To apply more padding to the dropdown content, use the provided `<DropdownContentWrapper>`
  * convenience wrapper. A `paddingSize` of `"medium"` is suitable for relatively larger dropdowns (default is `"small"`).
  */
-export const WithMorePadding = Template.bind( {} );
-WithMorePadding.args = {
-	...Default.args,
-	renderContent: () => (
-		<DropdownContentWrapper paddingSize="medium">
-			{ /* eslint-disable react/no-unescaped-entities */ }
-			Content wrapped with <code>paddingSize="medium"</code>.
-			{ /* eslint-enable react/no-unescaped-entities */ }
-		</DropdownContentWrapper>
-	),
+export const WithMorePadding: StoryObj< typeof Dropdown > = {
+	...Default,
+	args: {
+		...Default.args,
+		renderContent: () => (
+			<DropdownContentWrapper paddingSize="medium">
+				{ /* eslint-disable react/no-unescaped-entities */ }
+				Content wrapped with <code>paddingSize="medium"</code>.
+				{ /* eslint-enable react/no-unescaped-entities */ }
+			</DropdownContentWrapper>
+		),
+	},
 };
 
 /**
@@ -78,31 +79,35 @@ WithMorePadding.args = {
  * with a `paddingSize` of `"none"`. This can also serve as a clean foundation to add arbitrary
  * paddings, for example when child components already have padding on their own.
  */
-export const WithNoPadding = Template.bind( {} );
-WithNoPadding.args = {
-	...Default.args,
-	renderContent: () => (
-		<DropdownContentWrapper paddingSize="none">
-			{ /* eslint-disable react/no-unescaped-entities */ }
-			Content wrapped with <code>paddingSize="none"</code>.
-			{ /* eslint-enable react/no-unescaped-entities */ }
-		</DropdownContentWrapper>
-	),
+export const WithNoPadding: StoryObj< typeof Dropdown > = {
+	...Default,
+	args: {
+		...Default.args,
+		renderContent: () => (
+			<DropdownContentWrapper paddingSize="none">
+				{ /* eslint-disable react/no-unescaped-entities */ }
+				Content wrapped with <code>paddingSize="none"</code>.
+				{ /* eslint-enable react/no-unescaped-entities */ }
+			</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>
-		</>
-	),
+export const WithMenuItems: StoryObj< typeof Dropdown > = {
+	...Default,
+	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-menu/index.tsx

@@ -199,6 +199,7 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) {
 											? control.role
 											: 'menuitem'
 									}
+									accessibleWhenDisabled
 									disabled={ control.isDisabled }
 								>
 									{ control.title }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -43,39 +43,35 @@ const meta: Meta< typeof DropdownMenu > = {
 };
 export default meta;
 
-const Template: StoryFn< typeof DropdownMenu > = ( props ) => (
-	<div style={ { height: 150 } }>
-		<DropdownMenu { ...props } />
-	</div>
-);
-
-export const Default = Template.bind( {} );
-Default.args = {
-	label: 'Select a direction.',
-	icon: menu,
-	controls: [
-		{
-			title: 'First Menu Item Label',
-			icon: arrowUp,
-			// eslint-disable-next-line no-console
-			onClick: () => console.log( 'up!' ),
-		},
-		{
-			title: 'Second Menu Item Label',
-			icon: arrowDown,
-			// eslint-disable-next-line no-console
-			onClick: () => console.log( 'down!' ),
-		},
-	],
+export const Default: StoryObj< typeof DropdownMenu > = {
+	args: {
+		label: 'Select a direction.',
+		icon: menu,
+		controls: [
+			{
+				title: 'First Menu Item Label',
+				icon: arrowUp,
+				// eslint-disable-next-line no-console
+				onClick: () => console.log( 'up!' ),
+			},
+			{
+				title: 'Second Menu Item Label',
+				icon: arrowDown,
+				// eslint-disable-next-line no-console
+				onClick: () => console.log( 'down!' ),
+			},
+		],
+	},
 };
 
-export const WithChildren = Template.bind( {} );
-// Adding custom source because Storybook is not able to show the contents of
-// the `children` prop correctly in the code snippet.
-WithChildren.parameters = {
-	docs: {
-		source: {
-			code: `<DropdownMenu label="Select a direction." icon={ more }>
+export const WithChildren: StoryObj< typeof DropdownMenu > = {
+	...Default,
+	// Adding custom source because Storybook is not able to show the contents of
+	// the `children` prop correctly in the code snippet.
+	parameters: {
+		docs: {
+			source: {
+				code: `<DropdownMenu label="Select a direction." icon={ more }>
   <MenuGroup>
     <MenuItem icon={ arrowUp } onClick={ onClose }>
       Move Up
@@ -90,29 +86,30 @@ WithChildren.parameters = {
     </MenuItem>
   </MenuGroup>
 </DropdownMenu>`,
-			language: 'jsx',
-			type: 'auto',
+				language: 'jsx',
+				type: 'auto',
+			},
 		},
 	},
-};
-WithChildren.args = {
-	label: 'Select a direction.',
-	icon: more,
-	children: ( { onClose } ) => (
-		<>
-			<MenuGroup>
-				<MenuItem icon={ arrowUp } onClick={ onClose }>
-					Move Up
-				</MenuItem>
-				<MenuItem icon={ arrowDown } onClick={ onClose }>
-					Move Down
-				</MenuItem>
-			</MenuGroup>
-			<MenuGroup>
-				<MenuItem icon={ trash } onClick={ onClose }>
-					Remove
-				</MenuItem>
-			</MenuGroup>
-		</>
-	),
+	args: {
+		label: 'Select a direction.',
+		icon: more,
+		children: ( { onClose } ) => (
+			<>
+				<MenuGroup>
+					<MenuItem icon={ arrowUp } onClick={ onClose }>
+						Move Up
+					</MenuItem>
+					<MenuItem icon={ arrowDown } onClick={ onClose }>
+						Move Down
+					</MenuItem>
+				</MenuGroup>
+				<MenuGroup>
+					<MenuItem icon={ trash } onClick={ onClose }>
+						Remove
+					</MenuItem>
+				</MenuGroup>
+			</>
+		),
+	},
 };

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 
 /**

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

@@ -65,18 +65,6 @@ const meta: Meta< typeof DropdownMenu > = {
 			source: { excludeDecorators: true },
 		},
 	},
-	decorators: [
-		// Layout wrapper
-		( Story ) => (
-			<div
-				style={ {
-					minHeight: '300px',
-				} }
-			>
-				<Story />
-			</div>
-		),
-	],
 };
 export default meta;
 

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 import { css, keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
@@ -108,13 +107,13 @@ export const DropdownMenu = styled( Ariakit.Menu )<
 	/* Default animation.*/
 	animation-name: ${ slideDownAndFade };
 
-	&[data-side='right'] {
+	&[data-side='left'] {
 		animation-name: ${ slideLeftAndFade };
 	}
-	&[data-side='bottom'] {
+	&[data-side='up'] {
 		animation-name: ${ slideUpAndFade };
 	}
-	&[data-side='left'] {
+	&[data-side='right'] {
 		animation-name: ${ slideRightAndFade };
 	}
 	@media ( prefers-reduced-motion ) {

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type * as Ariakit from '@ariakit/react';
 import type { Placement } from '@floating-ui/react-dom';
 

package/src/focal-point-picker/README.md

@@ -28,6 +28,7 @@ const Example = () => {
 	return (
 		<>
 			<FocalPointPicker
+			  __nextHasNoMarginBottom
 				url={ url }
 				value={ focalPoint }
 				onDragStart={ setFocalPoint }
@@ -98,3 +99,11 @@ Callback which is called at the start of drag operations.
 -   Required: No
 
 Function which is called before internal updates to the value state. It receives the upcoming value and may return a modified one.
+
+#### __nextHasNoMarginBottom
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`

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

@@ -70,6 +70,7 @@ const GRID_OVERLAY_TIMEOUT = 600;
  * 	return (
  * 		<>
  * 			<FocalPointPicker
+ *        __nextHasNoMarginBottom
  * 				url={ url }
  * 				value={ focalPoint }
  * 				onDragStart={ setFocalPoint }

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

@@ -92,7 +92,7 @@ Size of the control.
 Available units for custom font size selection.
 
 -   Required: No
--   Default: `[ 'px', 'em', 'rem' ]`
+-   Default: `[ 'px', 'em', 'rem', 'vw', 'vh' ]`
 
 ### `value`: `number | string`
 

package/src/font-size-picker/font-size-picker-select.tsx

@@ -56,7 +56,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 				key: fontSize.slug,
 				name: fontSize.name || fontSize.slug,
 				value: fontSize.size,
-				__experimentalHint: hint,
+				hint,
 			};
 		} ),
 		...( disableCustomFontSizes ? [] : [ CUSTOM_OPTION ] ),
@@ -79,7 +79,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 			) }
 			options={ options }
 			value={ selectedOption }
-			__experimentalShowSelectedHint
+			showSelectedHint
 			onChange={ ( {
 				selectedItem,
 			}: {

package/src/font-size-picker/index.tsx

@@ -38,6 +38,8 @@ import { T_SHIRT_NAMES } from './constants';
 
 const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
 
+const MAX_TOGGLE_GROUP_SIZES = 5;
+
 const UnforwardedFontSizePicker = (
 	props: FontSizePickerProps,
 	ref: ForwardedRef< any >
@@ -59,43 +61,49 @@ const UnforwardedFontSizePicker = (
 		availableUnits: unitsProp,
 	} );
 
-	const shouldUseSelectControl = fontSizes.length > 5;
 	const selectedFontSize = fontSizes.find(
 		( fontSize ) => fontSize.size === value
 	);
 	const isCustomValue = !! value && ! selectedFontSize;
 
-	const [ showCustomValueControl, setShowCustomValueControl ] = useState(
-		! disableCustomFontSizes && isCustomValue
-	);
-
-	const headerHint = useMemo( () => {
-		if ( showCustomValueControl ) {
-			return __( 'Custom' );
-		}
+	// Initially request a custom picker if the value is not from the predef list.
+	const [ userRequestedCustom, setUserRequestedCustom ] =
+		useState( isCustomValue );
 
-		if ( ! shouldUseSelectControl ) {
-			if ( selectedFontSize ) {
-				return (
-					selectedFontSize.name ||
-					T_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]
-				);
-			}
-			return '';
-		}
+	let currentPickerType;
+	if ( ! disableCustomFontSizes && userRequestedCustom ) {
+		// While showing the custom value picker, switch back to predef only if
+		// `disableCustomFontSizes` is set to `true`.
+		currentPickerType = 'custom' as const;
+	} else {
+		currentPickerType =
+			fontSizes.length > MAX_TOGGLE_GROUP_SIZES
+				? ( 'select' as const )
+				: ( 'togglegroup' as const );
+	}
 
-		const commonUnit = getCommonSizeUnit( fontSizes );
-		if ( commonUnit ) {
-			return `(${ commonUnit })`;
+	const headerHint = useMemo( () => {
+		switch ( currentPickerType ) {
+			case 'custom':
+				return __( 'Custom' );
+			case 'togglegroup':
+				if ( selectedFontSize ) {
+					return (
+						selectedFontSize.name ||
+						T_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]
+					);
+				}
+				break;
+			case 'select':
+				const commonUnit = getCommonSizeUnit( fontSizes );
+				if ( commonUnit ) {
+					return `(${ commonUnit })`;
+				}
+				break;
 		}
 
 		return '';
-	}, [
-		showCustomValueControl,
-		shouldUseSelectControl,
-		selectedFontSize,
-		fontSizes,
-	] );
+	}, [ currentPickerType, selectedFontSize, fontSizes ] );
 
 	if ( fontSizes.length === 0 && disableCustomFontSizes ) {
 		return null;
@@ -133,53 +141,45 @@ const UnforwardedFontSizePicker = (
 					{ ! disableCustomFontSizes && (
 						<HeaderToggle
 							label={
-								showCustomValueControl
+								currentPickerType === 'custom'
 									? __( 'Use size preset' )
 									: __( 'Set custom size' )
 							}
 							icon={ settings }
-							onClick={ () => {
-								setShowCustomValueControl(
-									! showCustomValueControl
-								);
-							} }
-							isPressed={ showCustomValueControl }
+							onClick={ () =>
+								setUserRequestedCustom( ! userRequestedCustom )
+							}
+							isPressed={ currentPickerType === 'custom' }
 							size="small"
 						/>
 					) }
 				</Header>
 			</Spacer>
 			<div>
-				{ !! fontSizes.length &&
-					shouldUseSelectControl &&
-					! showCustomValueControl && (
-						<FontSizePickerSelect
-							__next40pxDefaultSize={ __next40pxDefaultSize }
-							fontSizes={ fontSizes }
-							value={ value }
-							disableCustomFontSizes={ disableCustomFontSizes }
-							size={ size }
-							onChange={ ( newValue ) => {
-								if ( newValue === undefined ) {
-									onChange?.( undefined );
-								} else {
-									onChange?.(
-										hasUnits
-											? newValue
-											: Number( newValue ),
-										fontSizes.find(
-											( fontSize ) =>
-												fontSize.size === newValue
-										)
-									);
-								}
-							} }
-							onSelectCustom={ () =>
-								setShowCustomValueControl( true )
+				{ currentPickerType === 'select' && (
+					<FontSizePickerSelect
+						__next40pxDefaultSize={ __next40pxDefaultSize }
+						fontSizes={ fontSizes }
+						value={ value }
+						disableCustomFontSizes={ disableCustomFontSizes }
+						size={ size }
+						onChange={ ( newValue ) => {
+							if ( newValue === undefined ) {
+								onChange?.( undefined );
+							} else {
+								onChange?.(
+									hasUnits ? newValue : Number( newValue ),
+									fontSizes.find(
+										( fontSize ) =>
+											fontSize.size === newValue
+									)
+								);
 							}
-						/>
-					) }
-				{ ! shouldUseSelectControl && ! showCustomValueControl && (
+						} }
+						onSelectCustom={ () => setUserRequestedCustom( true ) }
+					/>
+				) }
+				{ currentPickerType === 'togglegroup' && (
 					<FontSizePickerToggleGroup
 						fontSizes={ fontSizes }
 						value={ value }
@@ -200,7 +200,7 @@ const UnforwardedFontSizePicker = (
 						} }
 					/>
 				) }
-				{ ! disableCustomFontSizes && showCustomValueControl && (
+				{ currentPickerType === 'custom' && (
 					<Flex className="components-font-size-picker__custom-size-control">
 						<FlexItem isBlock>
 							<UnitControl
@@ -210,6 +210,8 @@ const UnforwardedFontSizePicker = (
 								hideLabelFromVision
 								value={ value }
 								onChange={ ( newValue ) => {
+									setUserRequestedCustom( true );
+
 									if ( newValue === undefined ) {
 										onChange?.( undefined );
 									} else {
@@ -240,6 +242,8 @@ const UnforwardedFontSizePicker = (
 										initialPosition={ fallbackFontSize }
 										withInputField={ false }
 										onChange={ ( newValue ) => {
+											setUserRequestedCustom( true );
+
 											if ( newValue === undefined ) {
 												onChange?.( undefined );
 											} else if ( hasUnits ) {
@@ -262,7 +266,7 @@ const UnforwardedFontSizePicker = (
 							<FlexItem>
 								<Button
 									disabled={ isDisabled }
-									__experimentalIsFocusable
+									accessibleWhenDisabled
 									onClick={ () => {
 										onChange?.( undefined );
 									} }