@wordpress/components 28.3.0 → 28.4.0

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import type * as Ariakit from '@ariakit/react';
-import type { FocusEventHandler, MouseEventHandler } from 'react';
 
 export type CustomSelectStore = {
 	/**
@@ -82,114 +81,6 @@ export type _CustomSelectProps = CustomSelectButtonProps & {
 
 export type CustomSelectProps = _CustomSelectProps & CustomSelectSize;
 
-/**
- * The legacy object structure for the options array.
- */
-type LegacyOption = {
-	key: string;
-	name: string;
-	style?: React.CSSProperties;
-	className?: string;
-	__experimentalHint?: string;
-	[ key: string ]: any;
-};
-
-/**
- * The legacy object returned from the onChange event.
- */
-type LegacyOnChangeObject = {
-	highlightedIndex?: number;
-	inputValue?: string;
-	isOpen?: boolean;
-	type?: string;
-	selectedItem: LegacyOption;
-};
-
-export type LegacyCustomSelectProps = {
-	/**
-	 * Optional classname for the component.
-	 */
-	className?: string;
-	/**
-	 * Used to visually hide the label. It will always be visible to screen readers.
-	 *
-	 */
-	hideLabelFromVision?: boolean;
-	/**
-	 * Pass in a description that will be shown to screen readers associated with the
-	 * select trigger button. If no value is passed, the text "Currently selected:
-	 * selectedItem.name" will be used fully translated.
-	 */
-	describedBy?: string;
-	/**
-	 * Label for the control.
-	 */
-	label: string;
-	/**
-	 * Function called with the control's internal state changes. The `selectedItem`
-	 * property contains the next selected item.
-	 */
-	onChange?: ( newValue: LegacyOnChangeObject ) => void;
-	/**
-	 * A handler for `onBlur` events.
-	 *
-	 * @ignore
-	 */
-	onBlur?: FocusEventHandler< HTMLButtonElement >;
-	/**
-	 * A handler for `onFocus` events.
-	 *
-	 * @ignore
-	 */
-	onFocus?: FocusEventHandler< HTMLButtonElement >;
-	/**
-	 * A handler for `onMouseOver` events.
-	 *
-	 * @ignore
-	 */
-	onMouseOut?: MouseEventHandler< HTMLButtonElement >;
-	/**
-	 * A handler for `onMouseOut` events.
-	 *
-	 * @ignore
-	 */
-	onMouseOver?: MouseEventHandler< HTMLButtonElement >;
-	/**
-	 * The options that can be chosen from.
-	 */
-	options: Array< LegacyOption >;
-	/**
-	 * The size of the control.
-	 *
-	 * @default 'default'
-	 */
-	size?: 'default' | 'small' | '__unstable-large';
-	/**
-	 * Can be used to externally control the value of the control.
-	 */
-	value?: LegacyOption;
-	/**
-	 * Legacy way to add additional text to the right of each option.
-	 *
-	 * @default false
-	 */
-	__experimentalShowSelectedHint?: boolean;
-	/**
-	 * Opt-in prop for an unconstrained width style which became the default in
-	 * WordPress 6.5. The prop is no longer needed and can be safely removed.
-	 *
-	 * @deprecated
-	 * @ignore
-	 */
-	__nextUnconstrainedWidth?: boolean;
-	/**
-	 * Start opting into the larger default height that will become the default size in a future version.
-	 *
-	 * @default false
-	 */
-	__next40pxDefaultSize?: boolean;
-};
-
 export type CustomSelectItemProps = {
 	/**
 	 * The value of the select item. This will be used as the children if

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

@@ -120,6 +120,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
+  color: currentColor;
   cursor: inherit;
   display: block;
   font-family: inherit;
@@ -405,6 +406,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
+  color: currentColor;
   cursor: inherit;
   display: block;
   font-family: inherit;
@@ -700,6 +702,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
+  color: currentColor;
   cursor: inherit;
   display: block;
   font-family: inherit;
@@ -1007,6 +1010,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   box-sizing: border-box;
   border: none;
   box-shadow: none!important;
+  color: currentColor;
   cursor: inherit;
   display: block;
   font-family: inherit;

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/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/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/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

@@ -107,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/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

@@ -6,7 +6,7 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import CustomSelectControl from '../custom-select-control-v2/legacy-component';
+import CustomSelectControl from '../custom-select-control';
 import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 import type {
 	FontSizePickerSelectProps,
@@ -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,
 			}: {