@wordpress/components 23.4.0 → 23.6.0

package/src/query-controls/category-select.tsx

@@ -3,7 +3,6 @@
  */
 import { buildTermsTree } from './terms';
 import TreeSelect from '../tree-select';
-import type { TreeSelectProps } from '../tree-select/types';
 
 /**
  * WordPress dependencies
@@ -28,11 +27,7 @@ export default function CategorySelect( {
 			{ ...{
 				label,
 				noOptionLabel,
-				// Since the `multiple` attribute is not passed to `TreeSelect`, it is
-				// safe to assume that the argument of `onChange` cannot be `string[]`.
-				// The correct solution would be to type `SelectControl` better, so that
-				// the type of `value` and `onChange` vary depending on `multiple`.
-				onChange: onChangeProp as TreeSelectProps[ 'onChange' ],
+				onChange: onChangeProp,
 			} }
 			tree={ termsTree }
 			selectedId={

package/src/query-controls/terms.ts

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { groupBy } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -13,6 +8,11 @@ import type {
 	TermsByParent,
 } from './types';
 
+const ensureParentsAreDefined = (
+	terms: TermWithParentAndChildren[]
+): terms is ( TermWithParentAndChildren & { parent: number } )[] => {
+	return terms.every( ( term ) => term.parent !== null );
+};
 /**
  * Returns terms in a tree form.
  *
@@ -22,22 +22,33 @@ import type {
  */
 export function buildTermsTree( flatTerms: readonly ( Author | Category )[] ) {
 	const flatTermsWithParentAndChildren: TermWithParentAndChildren[] =
-		flatTerms.map( ( term ) => {
-			return {
-				children: [],
-				parent: null,
-				...term,
-				id: String( term.id ),
-			};
-		} );
+		flatTerms.map( ( term ) => ( {
+			children: [],
+			parent: null,
+			...term,
+			id: String( term.id ),
+		} ) );
 
-	const termsByParent: TermsByParent = groupBy(
-		flatTermsWithParentAndChildren,
-		'parent'
-	);
-	if ( termsByParent.null && termsByParent.null.length ) {
+	// We use a custom type guard here to ensure that the parent property is
+	// defined on all terms. The type of the `parent` property is `number | null`
+	// and we need to ensure that it is `number`. This is because we use the
+	// `parent` property as a key in the `termsByParent` object.
+	if ( ! ensureParentsAreDefined( flatTermsWithParentAndChildren ) ) {
 		return flatTermsWithParentAndChildren;
 	}
+
+	const termsByParent = flatTermsWithParentAndChildren.reduce(
+		( acc: TermsByParent, term ) => {
+			const { parent } = term;
+			if ( ! acc[ parent ] ) {
+				acc[ parent ] = [];
+			}
+			acc[ parent ].push( term );
+			return acc;
+		},
+		{}
+	);
+
 	const fillWithChildren = (
 		terms: TermWithParentAndChildren[]
 	): TermWithParentAndChildren[] => {

package/src/range-control/index.tsx

@@ -40,12 +40,8 @@ import type { WordPressComponentProps } from '../ui/context';
 
 const noop = () => {};
 
-function UnforwardedRangeControl< IconProps = unknown >(
-	props: WordPressComponentProps<
-		RangeControlProps< IconProps >,
-		'input',
-		false
-	>,
+function UnforwardedRangeControl(
+	props: WordPressComponentProps< RangeControlProps, 'input', false >,
 	forwardedRef: ForwardedRef< HTMLInputElement >
 ) {
 	const {
@@ -269,7 +265,11 @@ function UnforwardedRangeControl< IconProps = unknown >(
 						style={ { width: fillValueOffset } }
 						trackColor={ trackColor }
 					/>
-					<ThumbWrapper style={ offsetStyle } disabled={ disabled }>
+					<ThumbWrapper
+						className="components-range-control__thumb-wrapper"
+						style={ offsetStyle }
+						disabled={ disabled }
+					>
 						<Thumb
 							aria-hidden={ true }
 							isFocused={ isThumbFocused }

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/stories/index.tsx

@@ -3,16 +3,25 @@
  */
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
+/**
+ * WordPress dependencies
+ */
+import { link, more, wordpress } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import TabPanel from '..';
+import Popover from '../../popover';
+import { Provider as SlotFillProvider } from '../../slot-fill';
 
 const meta: ComponentMeta< typeof TabPanel > = {
 	title: 'Components/TabPanel',
 	component: TabPanel,
 	parameters: {
+		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 export default meta;
@@ -55,3 +64,35 @@ DisabledTab.args = {
 		},
 	],
 };
+
+const SlotFillTemplate: ComponentStory< typeof TabPanel > = ( props ) => {
+	return (
+		<SlotFillProvider>
+			<TabPanel { ...props } />
+			{ /* @ts-expect-error The 'Slot' component hasn't been typed yet. */ }
+			<Popover.Slot />
+		</SlotFillProvider>
+	);
+};
+
+export const WithTabIconsAndTooltips = SlotFillTemplate.bind( {} );
+WithTabIconsAndTooltips.args = {
+	children: ( tab ) => <p>Selected tab: { tab.title }</p>,
+	tabs: [
+		{
+			name: 'tab1',
+			title: 'Tab 1',
+			icon: wordpress,
+		},
+		{
+			name: 'tab2',
+			title: 'Tab 2',
+			icon: link,
+		},
+		{
+			name: 'tab3',
+			title: 'Tab 3',
+			icon: more,
+		},
+	],
+};