@wordpress/components 23.5.0 → 23.6.0

package/src/range-control/types.ts

@@ -74,7 +74,7 @@ export type RangeMarkProps = {
 
 export type ControlledRangeValue = number | '' | null;
 
-export type RangeControlProps< IconProps = unknown > = Pick<
+export type RangeControlProps = Pick<
 	BaseControlProps,
 	'hideLabelFromVision' | 'help' | '__nextHasNoMarginBottom'
 > &
@@ -86,7 +86,7 @@ export type RangeControlProps< IconProps = unknown > = Pick<
 		 * For more information on `IconType` see the Icon component:
 		 * /packages/components/src/icon/index.tsx
 		 */
-		afterIcon?: IconType< IconProps >;
+		afterIcon?: IconType;
 		/**
 		 * If this property is true, a button to reset the slider is
 		 * rendered.
@@ -101,7 +101,7 @@ export type RangeControlProps< IconProps = unknown > = Pick<
 		 * For more information on `IconType` see the Icon component:
 		 * /packages/components/src/icon/index.tsx
 		 */
-		beforeIcon?: IconType< IconProps >;
+		beforeIcon?: IconType;
 		/**
 		 * CSS color string for the `RangeControl` wrapper.
 		 *

package/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.ts

@@ -7,7 +7,7 @@ import styled from '@emotion/styled';
  * Internal dependencies
  */
 import { Text } from '../../../text';
-import { COLORS } from '../../../utils';
+import { font, COLORS } from '../../../utils';
 
 export const Root = styled.div`
 	bottom: 0;
@@ -33,6 +33,7 @@ export const Tooltip = styled.div`
 	background: ${ COLORS.gray[ 900 ] };
 	border-radius: 2px;
 	box-sizing: border-box;
+	font-family: ${ font( 'default.fontFamily' ) };
 	font-size: 12px;
 	color: ${ COLORS.ui.textDark };
 	padding: 4px 8px;

package/src/responsive-wrapper/README.md

@@ -17,6 +17,12 @@ const MyResponsiveWrapper = () => (
 );
 ```
 
+### Usage with `SVG` elements
+
+When passing an `SVG` element as the `<ResponsiveWrapper />`'s child, make sure that it has the `viewbox` and the `preserveAspectRatio` set.
+
+When dealing with SVGs, it may not be possible to derive its `naturalWidth` and `naturalHeight` and therefore passing them as propertied to `<ResponsiveWrapper />`. In this case, the SVG simply keeps scaling up to fill its container, unless the `height` and `width` attributes are specified.
+
 ## Props
 
 ### `children`: `React.ReactElement`
@@ -36,10 +42,10 @@ If true, the wrapper will be `span` instead of `div`.
 
 The intrinsic height of the element to wrap. Will be used to determine the aspect ratio.
 
--   Required: Yes
+-   Required: No
 
 ### `naturalWidth`: `number`
 
 The intrinsic width of the element to wrap. Will be used to determine the aspect ratio.
 
--   Required: Yes
+-   Required: No

package/src/responsive-wrapper/index.tsx

@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { cloneElement, Children } from '@wordpress/element';
-import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -36,28 +35,30 @@ function ResponsiveWrapper( {
 	children,
 	isInline = false,
 }: ResponsiveWrapperProps ) {
-	const [ containerResizeListener, { width: containerWidth } ] =
-		useResizeObserver();
 	if ( Children.count( children ) !== 1 ) {
 		return null;
 	}
-	const imageStyle = {
-		paddingBottom:
-			naturalWidth < ( containerWidth ?? 0 )
-				? naturalHeight
-				: ( naturalHeight / naturalWidth ) * 100 + '%',
-	};
+
 	const TagName = isInline ? 'span' : 'div';
+	let aspectRatio;
+	if ( naturalWidth && naturalHeight ) {
+		aspectRatio = `${ naturalWidth } / ${ naturalHeight }`;
+	}
+
 	return (
 		<TagName className="components-responsive-wrapper">
-			{ containerResizeListener }
-			<TagName style={ imageStyle } />
-			{ cloneElement( children, {
-				className: classnames(
-					'components-responsive-wrapper__content',
-					children.props.className
-				),
-			} ) }
+			<div>
+				{ cloneElement( children, {
+					className: classnames(
+						'components-responsive-wrapper__content',
+						children.props.className
+					),
+					style: {
+						...children.props.style,
+						aspectRatio,
+					},
+				} ) }
+			</div>
 		</TagName>
 	);
 }

package/src/responsive-wrapper/stories/index.tsx

@@ -36,3 +36,44 @@ Default.args = {
 		/>
 	),
 };
+
+/**
+ * When passing an `SVG` element as the `<ResponsiveWrapper />`'s child, make
+ * sure that it has the `viewbox` and the `preserveAspectRatio` set.
+ *
+ * When dealing with SVGs, it may not be possible to derive its `naturalWidth`
+ * and `naturalHeight` and therefore passing them as propertied to
+ * `<ResponsiveWrapper />`. In this case, the SVG simply keeps scaling up to fill
+ * its container, unless the `height` and `width` attributes are specified.
+ */
+export const WithSVG: ComponentStory< typeof ResponsiveWrapper > =
+	Template.bind( {} );
+WithSVG.args = {
+	children: (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 280 640"
+			preserveAspectRatio="xMinYMin meet"
+			width="280px"
+			height="640px"
+		>
+			<rect
+				x="0"
+				y="0"
+				width="280"
+				height="640"
+				style={ { fill: 'blue' } }
+			/>
+			<g>
+				<circle style={ { fill: 'red' } } cx="140" cy="160" r="60" />
+				<circle style={ { fill: 'yellow' } } cx="140" cy="320" r="60" />
+				<circle
+					style={ { fill: '#40CC40' } }
+					cx="140"
+					cy="480"
+					r="60"
+				/>
+			</g>
+		</svg>
+	),
+};

package/src/responsive-wrapper/style.scss

@@ -1,19 +1,13 @@
 .components-responsive-wrapper {
 	position: relative;
 	max-width: 100%;
-	&,
-	& > span {
-		display: block;
-	}
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .components-responsive-wrapper__content {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
+	display: block;
+	max-width: 100%;
 	width: 100%;
-	height: 100%;
-	margin: auto;
 }

package/src/responsive-wrapper/types.ts

@@ -2,11 +2,11 @@ export type ResponsiveWrapperProps = {
 	/**
 	 * The intrinsic width of the element to wrap. Will be used to determine the aspect ratio.
 	 */
-	naturalWidth: number;
+	naturalWidth?: number;
 	/**
 	 * The intrinsic height of the element to wrap. Will be used to determine the aspect ratio.
 	 */
-	naturalHeight: number;
+	naturalHeight?: number;
 	/**
 	 * The element to wrap.
 	 */

package/src/select-control/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classNames from 'classnames';
-import type { ChangeEvent, FocusEvent, ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -30,7 +29,10 @@ function useUniqueId( idProp?: string ) {
 }
 
 function UnforwardedSelectControl(
-	{
+	props: WordPressComponentProps< SelectControlProps, 'select', false >,
+	ref: React.ForwardedRef< HTMLSelectElement >
+) {
+	const {
 		className,
 		disabled = false,
 		help,
@@ -39,7 +41,7 @@ function UnforwardedSelectControl(
 		label,
 		multiple = false,
 		onBlur = noop,
-		onChange = noop,
+		onChange,
 		onFocus = noop,
 		options = [],
 		size = 'default',
@@ -50,10 +52,8 @@ function UnforwardedSelectControl(
 		suffix,
 		__next36pxDefaultSize = false,
 		__nextHasNoMarginBottom = false,
-		...props
-	}: WordPressComponentProps< SelectControlProps, 'select', false >,
-	ref: ForwardedRef< HTMLSelectElement >
-) {
+		...restProps
+	} = props;
 	const [ isFocused, setIsFocused ] = useState( false );
 	const id = useUniqueId( idProp );
 	const helpId = help ? `${ id }__help` : undefined;
@@ -61,32 +61,33 @@ function UnforwardedSelectControl(
 	// Disable reason: A select with an onchange throws a warning.
 	if ( ! options?.length && ! children ) return null;
 
-	const handleOnBlur = ( event: FocusEvent< HTMLSelectElement > ) => {
+	const handleOnBlur = ( event: React.FocusEvent< HTMLSelectElement > ) => {
 		onBlur( event );
 		setIsFocused( false );
 	};
 
-	const handleOnFocus = ( event: FocusEvent< HTMLSelectElement > ) => {
+	const handleOnFocus = ( event: React.FocusEvent< HTMLSelectElement > ) => {
 		onFocus( event );
 		setIsFocused( true );
 	};
 
-	const handleOnChange = ( event: ChangeEvent< HTMLSelectElement > ) => {
-		if ( multiple ) {
+	const handleOnChange = (
+		event: React.ChangeEvent< HTMLSelectElement >
+	) => {
+		if ( props.multiple ) {
 			const selectedOptions = Array.from( event.target.options ).filter(
 				( { selected } ) => selected
 			);
 			const newValues = selectedOptions.map( ( { value } ) => value );
-			onChange( newValues );
+			props.onChange?.( newValues, { event } );
 			return;
 		}
 
-		onChange( event.target.value, { event } );
+		props.onChange?.( event.target.value, { event } );
 	};
 
 	const classes = classNames( 'components-select-control', className );
 
-	/* eslint-disable jsx-a11y/no-onchange */
 	return (
 		<BaseControl
 			help={ help }
@@ -109,7 +110,7 @@ function UnforwardedSelectControl(
 				__next36pxDefaultSize={ __next36pxDefaultSize }
 			>
 				<Select
-					{ ...props }
+					{ ...restProps }
 					__next36pxDefaultSize={ __next36pxDefaultSize }
 					aria-describedby={ helpId }
 					className="components-select-control__input"
@@ -143,7 +144,6 @@ function UnforwardedSelectControl(
 			</InputBase>
 		</BaseControl>
 	);
-	/* eslint-enable jsx-a11y/no-onchange */
 }
 
 /**

package/src/select-control/stories/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import type { ComponentProps } from 'react';
 
 /**
  * WordPress dependencies
@@ -32,20 +31,33 @@ const meta: ComponentMeta< typeof SelectControl > = {
 };
 export default meta;
 
-const SelectControlWithState: ComponentStory< typeof SelectControl > = ( {
-	onChange,
-	...args
-} ) => {
-	const [ selection, setSelection ] =
-		useState< ComponentProps< typeof SelectControl >[ 'value' ] >();
+const SelectControlWithState: ComponentStory< typeof SelectControl > = (
+	props
+) => {
+	const [ selection, setSelection ] = useState< string[] >();
+
+	if ( props.multiple ) {
+		return (
+			<SelectControl
+				{ ...props }
+				multiple
+				value={ selection }
+				onChange={ ( value ) => {
+					setSelection( value );
+					props.onChange?.( value );
+				} }
+			/>
+		);
+	}
 
 	return (
 		<SelectControl
-			{ ...args }
-			value={ selection }
+			{ ...props }
+			multiple={ false }
+			value={ selection?.[ 0 ] }
 			onChange={ ( value ) => {
-				setSelection( value );
-				onChange?.( value );
+				setSelection( [ value ] );
+				props.onChange?.( value );
 			} }
 		/>
 	);
@@ -70,7 +82,7 @@ WithLabelAndHelpText.args = {
 
 /**
  * As an alternative to the `options` prop, `optgroup`s and `options` can be
- * passed in as `children` for more customizability.
+ * passed in as `children` for more customizeability.
  */
 export const WithCustomChildren: ComponentStory< typeof SelectControl > = (
 	args

package/src/select-control/types.ts

@@ -9,19 +9,46 @@ import type { ChangeEvent, FocusEvent, ReactNode } from 'react';
 import type { InputBaseProps } from '../input-control/types';
 import type { BaseControlProps } from '../base-control/types';
 
-export interface SelectControlProps
-	extends Pick<
-			InputBaseProps,
-			| '__next36pxDefaultSize'
-			| 'disabled'
-			| 'hideLabelFromVision'
-			| 'label'
-			| 'labelPosition'
-			| 'prefix'
-			| 'size'
-			| 'suffix'
-		>,
-		Pick< BaseControlProps, 'help' | '__nextHasNoMarginBottom' > {
+type SelectControlBaseProps = Pick<
+	InputBaseProps,
+	| '__next36pxDefaultSize'
+	| 'disabled'
+	| 'hideLabelFromVision'
+	| 'label'
+	| 'labelPosition'
+	| 'prefix'
+	| 'size'
+	| 'suffix'
+> &
+	Pick< BaseControlProps, 'help' | '__nextHasNoMarginBottom' > & {
+		onBlur?: ( event: FocusEvent< HTMLSelectElement > ) => void;
+		onFocus?: ( event: FocusEvent< HTMLSelectElement > ) => void;
+		options?: {
+			/**
+			 * The label to be shown to the user.
+			 */
+			label: string;
+			/**
+			 * The internal value used to choose the selected value.
+			 * This is also the value passed to `onChange` when the option is selected.
+			 */
+			value: string;
+			id?: string;
+			/**
+			 * Whether or not the option should have the disabled attribute.
+			 *
+			 * @default false
+			 */
+			disabled?: boolean;
+		}[];
+		/**
+		 * As an alternative to the `options` prop, `optgroup`s and `options` can be
+		 * passed in as `children` for more customizability.
+		 */
+		children?: ReactNode;
+	};
+
+export type SelectControlSingleSelectionProps = SelectControlBaseProps & {
 	/**
 	 * If this property is added, multiple values can be selected. The `value` passed should be an array.
 	 *
@@ -29,9 +56,8 @@ export interface SelectControlProps
 	 *
 	 * @default false
 	 */
-	multiple?: boolean;
-	onBlur?: ( event: FocusEvent< HTMLSelectElement > ) => void;
-	onFocus?: ( event: FocusEvent< HTMLSelectElement > ) => void;
+	multiple?: false;
+	value?: string;
 	/**
 	 * A function that receives the value of the new option that is being selected as input.
 	 *
@@ -39,31 +65,33 @@ export interface SelectControlProps
 	 * Otherwise, the value received is a single value with the new selected value.
 	 */
 	onChange?: (
-		value: string | string[],
+		value: string,
 		extra?: { event?: ChangeEvent< HTMLSelectElement > }
 	) => void;
-	options?: {
-		/**
-		 * The label to be shown to the user.
-		 */
-		label: string;
-		/**
-		 * The internal value used to choose the selected value.
-		 * This is also the value passed to `onChange` when the option is selected.
-		 */
-		value: string;
-		id?: string;
-		/**
-		 * Whether or not the option should have the disabled attribute.
-		 *
-		 * @default false
-		 */
-		disabled?: boolean;
-	}[];
-	value?: string | string[];
+};
+
+export type SelectControlMultipleSelectionProps = SelectControlBaseProps & {
 	/**
-	 * As an alternative to the `options` prop, `optgroup`s and `options` can be
-	 * passed in as `children` for more customizability.
+	 * If this property is added, multiple values can be selected. The `value` passed should be an array.
+	 *
+	 * In most cases, it is preferable to use the `FormTokenField` or `CheckboxControl` components instead.
+	 *
+	 * @default false
+	 */
+	multiple: true;
+	value?: string[];
+	/**
+	 * A function that receives the value of the new option that is being selected as input.
+	 *
+	 * If `multiple` is `true`, the value received is an array of the selected value.
+	 * Otherwise, the value received is a single value with the new selected value.
 	 */
-	children?: ReactNode;
-}
+	onChange?: (
+		value: string[],
+		extra?: { event?: ChangeEvent< HTMLSelectElement > }
+	) => void;
+};
+
+export type SelectControlProps =
+	| SelectControlSingleSelectionProps
+	| SelectControlMultipleSelectionProps;

package/src/tab-panel/types.ts

@@ -8,7 +8,7 @@ import type { MouseEvent, ReactNode } from 'react';
  */
 import type { IconType } from '../icon';
 
-type Tab< IconProps = unknown > = {
+type Tab = {
 	/**
 	 * The key of the tab.
 	 */
@@ -24,21 +24,21 @@ type Tab< IconProps = unknown > = {
 	/**
 	 * The icon used for the tab button.
 	 */
-	icon?: IconType< IconProps >;
+	icon?: IconType;
 	/**
 	 * Determines if the tab button should be disabled.
 	 */
 	disabled?: boolean;
 } & Record< any, any >;
 
-export type TabButtonProps< IconProps = unknown > = {
+export type TabButtonProps = {
 	children: ReactNode;
 	label?: string;
 	onClick: ( event: MouseEvent ) => void;
 	selected: boolean;
 	showTooltip?: boolean;
 	tabId: string;
-} & Pick< Tab< IconProps >, 'className' | 'icon' | 'disabled' >;
+} & Pick< Tab, 'className' | 'icon' | 'disabled' >;
 
 export type TabPanelProps = {
 	/**

package/src/toolbar/toolbar-button/README.md

@@ -51,7 +51,19 @@ function Edit() {
 
 ## Props
 
-This component accepts [the same API of the Button](/packages/components/src/button/README.md#props) component.
+This component accepts [the same API of the Button](/packages/components/src/button/README.md#props) component in addition to:
+
+#### `containerClassName`: `string`
+
+An optional additional class name to apply to the button container.
+
+-   Required: No
+
+#### `subscript`: `string`
+
+An optional subscript for the button.
+
+-   Required: No
 
 ## Related components
 

package/src/toolbar/toolbar-button/{index.js → index.tsx}

@@ -1,13 +1,14 @@
-// @ts-nocheck
-
 /**
  * External dependencies
  */
 import classnames from 'classnames';
+import type { ForwardedRef } from 'react';
+
 /**
  * WordPress dependencies
  */
 import { useContext, forwardRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -15,19 +16,22 @@ import Button from '../../button';
 import ToolbarItem from '../toolbar-item';
 import ToolbarContext from '../toolbar-context';
 import ToolbarButtonContainer from './toolbar-button-container';
+import type { ToolbarButtonProps } from './types';
+import type { WordPressComponentProps } from '../../ui/context';
+import type React from 'react';
 
-function ToolbarButton(
+function UnforwardedToolbarButton(
 	{
-		containerClassName,
+		children,
 		className,
+		containerClassName,
 		extraProps,
-		children,
-		title,
 		isActive,
 		isDisabled,
+		title,
 		...props
-	},
-	ref
+	}: WordPressComponentProps< ToolbarButtonProps, typeof Button, false >,
+	ref: ForwardedRef< any >
 ) {
 	const accessibleToolbarState = useContext( ToolbarContext );
 
@@ -40,8 +44,14 @@ function ToolbarButton(
 					label={ title }
 					shortcut={ props.shortcut }
 					data-subscript={ props.subscript }
-					onClick={ ( event ) => {
+					onClick={ (
+						event: React.MouseEvent<
+							HTMLButtonElement & HTMLAnchorElement,
+							MouseEvent
+						>
+					) => {
 						event.stopPropagation();
+						// TODO: Possible bug; maybe use onClick instead of props.onClick.
 						if ( props.onClick ) {
 							props.onClick( event );
 						}
@@ -72,18 +82,43 @@ function ToolbarButton(
 			{ ...props }
 			ref={ ref }
 		>
-			{ ( toolbarItemProps ) => (
-				<Button
-					label={ title }
-					isPressed={ isActive }
-					disabled={ isDisabled }
-					{ ...toolbarItemProps }
-				>
-					{ children }
-				</Button>
-			) }
+			{
+				// @ts-expect-error
+				( toolbarItemProps ) => (
+					<Button
+						label={ title }
+						isPressed={ isActive }
+						disabled={ isDisabled }
+						{ ...toolbarItemProps }
+					>
+						{ children }
+					</Button>
+				)
+			}
 		</ToolbarItem>
 	);
 }
 
-export default forwardRef( ToolbarButton );
+/**
+ * ToolbarButton can be used to add actions to a toolbar, usually inside a Toolbar
+ * or ToolbarGroup when used to create general interfaces.
+ *
+ * ```jsx
+ * import { Toolbar, ToolbarButton } from '@wordpress/components';
+ * import { edit } from '@wordpress/icons';
+ *
+ * function MyToolbar() {
+ *   return (
+ *		<Toolbar label="Options">
+ *			<ToolbarButton
+ *				icon={ edit }
+ *				label="Edit"
+ *				onClick={ () => alert( 'Editing' ) }
+ *			/>
+ *		</Toolbar>
+ *   );
+ * }
+ * ```
+ */
+export const ToolbarButton = forwardRef( UnforwardedToolbarButton );
+export default ToolbarButton;

package/src/toolbar/toolbar-button/toolbar-button-container.tsx

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import type { ToolbarButtonContainerProps } from './types';
+
+const ToolbarButtonContainer = ( {
+	children,
+	className,
+}: ToolbarButtonContainerProps ) => (
+	<div className={ className }>{ children }</div>
+);
+
+export default ToolbarButtonContainer;