@wordpress/components 27.5.0 → 28.0.0

package/src/circular-option-picker/circular-option-picker-option-group.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -22,7 +22,7 @@ export function OptionGroup( {
 		<div
 			{ ...additionalProps }
 			role={ role }
-			className={ classnames(
+			className={ clsx(
 				'components-circular-option-picker__option-group',
 				'components-circular-option-picker__swatches',
 				className

package/src/circular-option-picker/circular-option-picker-option.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -107,7 +107,7 @@ export function Option( {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				className,
 				'components-circular-option-picker__option-wrapper'
 			) }

package/src/circular-option-picker/circular-option-picker.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -102,7 +102,7 @@ function ListboxCircularOptionPicker(
 					{ ...additionalProps }
 					id={ baseId }
 					store={ compositeStore }
-					role={ 'listbox' }
+					role="listbox"
 				>
 					{ options }
 				</Composite>
@@ -156,7 +156,7 @@ function CircularOptionPicker( props: CircularOptionPickerProps ) {
 	) : undefined;
 
 	const options = (
-		<div className={ 'components-circular-option-picker__swatches' }>
+		<div className="components-circular-option-picker__swatches">
 			{ optionsProp }
 		</div>
 	);
@@ -165,10 +165,7 @@ function CircularOptionPicker( props: CircularOptionPickerProps ) {
 		<OptionPickerImplementation
 			{ ...additionalProps }
 			baseId={ baseId }
-			className={ classnames(
-				'components-circular-option-picker',
-				className
-			) }
+			className={ clsx( 'components-circular-option-picker', className ) }
 			actions={ actions }
 			options={ options }
 		>

package/src/circular-option-picker/stories/index.story.tsx

@@ -101,7 +101,7 @@ const DefaultActions = () => {
 		<CircularOptionPicker.ButtonAction
 			onClick={ () => setCurrentColor?.( undefined ) }
 		>
-			{ 'Clear' }
+			Clear
 		</CircularOptionPicker.ButtonAction>
 	);
 };

package/src/circular-option-picker/style.scss

@@ -60,8 +60,7 @@ $color-palette-circle-spacing: 12px;
 	border-radius: $radius-round;
 	// Show a thin circular outline in Windows high contrast mode, otherwise the button is invisible.
 	z-index: z-index(".components-circular-option-picker__option-wrapper::before");
-	// Need to disable the lint rule because given that we are in the presence of a data URL that needs quotes we need to wrap it with single quotes.
-	/* stylelint-disable-next-line function-url-quotes */
+	/* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
 	background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E');
 }
 

package/src/circular-option-picker/test/index.tsx

@@ -9,17 +9,11 @@ import { press, sleep } from '@ariakit/test';
  */
 import CircularOptionPicker from '..';
 
-const SINGLE_OPTION = [ <CircularOptionPicker.Option key={ 'option' } /> ];
+const SINGLE_OPTION = [ <CircularOptionPicker.Option key="option" /> ];
 
 const MULTIPLE_OPTIONS = [
-	<CircularOptionPicker.Option
-		key={ 'option-1' }
-		aria-label={ 'Option One' }
-	/>,
-	<CircularOptionPicker.Option
-		key={ 'option-2' }
-		aria-label={ 'Option Two' }
-	/>,
+	<CircularOptionPicker.Option key="option-1" aria-label="Option One" />,
+	<CircularOptionPicker.Option key="option-2" aria-label="Option Two" />,
 ];
 
 const DEFAULT_PROPS = {

package/src/clipboard-button/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -50,7 +50,7 @@ export default function ClipboardButton( {
 		}
 	}, [] );
 
-	const classes = classnames( 'components-clipboard-button', className );
+	const classes = clsx( 'components-clipboard-button', className );
 
 	// Workaround for inconsistent behavior in Safari, where <textarea> is not
 	// the document.activeElement at the moment when the copy event fires.

package/src/color-indicator/index.native.js

@@ -6,12 +6,12 @@ import { View, Animated } from 'react-native';
  * WordPress dependencies
  */
 import { Icon, check } from '@wordpress/icons';
-import { Gradient } from '@wordpress/components';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
+import Gradient from '../mobile/gradient';
 import { colorsUtils } from '../mobile/color-settings/utils';
 
 function SelectedIcon( { opacity } ) {

package/src/color-indicator/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -23,7 +23,7 @@ function UnforwardedColorIndicator(
 
 	return (
 		<span
-			className={ classnames( 'component-color-indicator', className ) }
+			className={ clsx( 'component-color-indicator', className ) }
 			style={ { background: colorValue } }
 			ref={ forwardedRef }
 			{ ...additionalProps }

package/src/color-palette/index.native.js

@@ -285,7 +285,7 @@ function ColorPalette( {
 						<View key={ `${ color }-${ isSelected( color ) }` }>
 							<TouchableWithoutFeedback
 								onPress={ () => onColorPress( color ) }
-								accessibilityRole={ 'button' }
+								accessibilityRole="button"
 								accessibilityState={ {
 									selected: isSelected( color ),
 								} }
@@ -326,7 +326,7 @@ function ColorPalette( {
 						) }
 						<TouchableWithoutFeedback
 							onPress={ onCustomPress }
-							accessibilityRole={ 'button' }
+							accessibilityRole="button"
 							accessibilityState={ {
 								selected: isSelectedCustom(),
 							} }

package/src/color-palette/index.tsx

@@ -5,7 +5,7 @@ import type { ForwardedRef } from 'react';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -320,7 +320,7 @@ function UnforwardedColorPalette(
 								does not shift
 								*/ }
 								<Truncate
-									className={ classnames(
+									className={ clsx(
 										'components-color-palette__custom-color-value',
 										{
 											'components-color-palette__custom-color-value--is-hex':

package/src/color-palette/stories/index.story.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import type { CSSProperties } from 'react';
 import type { Meta, StoryFn } from '@storybook/react';
 
 /**
@@ -92,13 +91,11 @@ MultipleOrigins.args = {
 export const CSSVariables: StoryFn< typeof ColorPalette > = ( args ) => {
 	return (
 		<div
-			style={
-				{
-					'--red': '#f00',
-					'--yellow': '#ff0',
-					'--blue': '#00f',
-				} as CSSProperties
-			}
+			style={ {
+				'--red': '#f00',
+				'--yellow': '#ff0',
+				'--blue': '#00f',
+			} }
 		>
 			<Template { ...args } />
 		</div>

package/src/color-picker/index.native.js

@@ -9,7 +9,6 @@ import namesPlugin from 'colord/plugins/names';
  */
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { BottomSheet } from '@wordpress/components';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { Icon, check, close } from '@wordpress/icons';
 /**
@@ -17,6 +16,7 @@ import { Icon, check, close } from '@wordpress/icons';
  */
 import styles from './style.scss';
 import HsvColorPicker from './hsv-color-picker.native.js';
+import BottomSheet from '../mobile/bottom-sheet';
 
 extend( [ namesPlugin ] );
 

package/src/combobox-control/README.md

@@ -77,7 +77,7 @@ If this property is added, a help text will be generated using help property as
 
 The options that can be chosen from.
 
--   Type: `Array<{ value: string, label: string }>`
+-   Type: `Array<{ value: string, label: string, disabled?: boolean }>`
 -   Required: Yes
 
 #### onFilterValueChange
@@ -101,6 +101,15 @@ The current value of the control.
 -   Type: `string | null`
 -   Required: No
 
+#### expandOnFocus
+
+Automatically expand the dropdown when the control is focused.
+If the control is clicked, the dropdown will expand regardless of this prop.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `true`
+
 #### __experimentalRenderItem
 
 Custom renderer invoked for each option in the suggestion list. The render prop receives as its argument an object containing, under the `item` key, the single option's data (directly from the array of data passed to the `options` prop).

package/src/combobox-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -78,10 +78,12 @@ const getIndexOfMatchingSuggestion = (
  * 	{
  * 		value: 'normal',
  * 		label: 'Normal',
+ * 		disabled: true,
  * 	},
  * 	{
  * 		value: 'large',
  * 		label: 'Large',
+ * 		disabled: false,
  * 	},
  * ];
  *
@@ -125,6 +127,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 			selected: __( 'Item selected.' ),
 		},
 		__experimentalRenderItem,
+		expandOnFocus = true,
 	} = useDeprecated36pxDefaultSizeProp( props );
 
 	const [ value, setValue ] = useControlledValue( {
@@ -165,6 +168,10 @@ function ComboboxControl( props: ComboboxControlProps ) {
 	const onSuggestionSelected = (
 		newSelectedSuggestion: ComboboxControlOption
 	) => {
+		if ( newSelectedSuggestion.disabled ) {
+			return;
+		}
+
 		setValue( newSelectedSuggestion.value );
 		speak( messages.selected, 'assertive' );
 		setSelectedSuggestion( newSelectedSuggestion );
@@ -230,11 +237,18 @@ function ComboboxControl( props: ComboboxControlProps ) {
 
 	const onFocus = () => {
 		setInputHasFocus( true );
-		setIsExpanded( true );
+		if ( expandOnFocus ) {
+			setIsExpanded( true );
+		}
+
 		onFilterValueChange( '' );
 		setInputValue( '' );
 	};
 
+	const onClick = () => {
+		setIsExpanded( true );
+	};
+
 	const onFocusOutside = () => {
 		setIsExpanded( false );
 	};
@@ -296,10 +310,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		<DetectOutside onFocusOutside={ onFocusOutside }>
 			<BaseControl
 				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-				className={ classnames(
-					className,
-					'components-combobox-control'
-				) }
+				className={ clsx( className, 'components-combobox-control' ) }
 				label={ label }
 				id={ `components-form-token-input-${ instanceId }` }
 				hideLabelFromVision={ hideLabelFromVision }
@@ -321,6 +332,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 								value={ isExpanded ? inputValue : currentLabel }
 								onFocus={ onFocus }
 								onBlur={ onBlur }
+								onClick={ onClick }
 								isExpanded={ isExpanded }
 								selectedSuggestionIndex={ getIndexOfMatchingSuggestion(
 									selectedSuggestion,

package/src/combobox-control/stories/index.story.tsx

@@ -20,6 +20,17 @@ const countries = [
 	{ name: 'Albania', code: 'AL' },
 	{ name: 'Algeria', code: 'DZ' },
 	{ name: 'American Samoa', code: 'AS' },
+	{ name: 'Andorra', code: 'AD' },
+	{ name: 'Angola', code: 'AO' },
+	{ name: 'Anguilla', code: 'AI' },
+	{ name: 'Antarctica', code: 'AQ' },
+	{ name: 'Antigua and Barbuda', code: 'AG' },
+	{ name: 'Argentina', code: 'AR' },
+	{ name: 'Armenia', code: 'AM' },
+	{ name: 'Aruba', code: 'AW' },
+	{ name: 'Australia', code: 'AU' },
+	{ name: 'Austria', code: 'AT' },
+	{ name: 'Azerbaijan', code: 'AZ' },
 ];
 
 const meta: Meta< typeof ComboboxControl > = {
@@ -111,3 +122,34 @@ WithCustomRenderItem.args = {
 		);
 	},
 };
+
+/**
+ * You can disable options in the list
+ * by setting the `disabled` property to true
+ * for individual items in the option object.
+ */
+export const WithDisabledOptions = Template.bind( {} );
+const optionsWithDisabledOptions = countryOptions.map( ( option, index ) => ( {
+	...option,
+	disabled: index % 3 === 0, // Disable options at index 0, 3, 6, etc.
+} ) );
+
+WithDisabledOptions.args = {
+	allowReset: false,
+	label: 'Select a country',
+	options: optionsWithDisabledOptions,
+};
+
+/**
+ * By default, the combobox expands when focused.
+ * You can disable this behavior by setting the `expandOnFocus` prop to `false`.
+ * This is useful when you want to show the suggestions only when the user interacts with the input.
+ */
+export const NotExpandOnFocus = Template.bind( {} );
+
+NotExpandOnFocus.args = {
+	allowReset: false,
+	label: 'Select a country',
+	options: countryOptions,
+	expandOnFocus: false,
+};

package/src/combobox-control/types.ts

@@ -6,6 +6,7 @@ import type { BaseControlProps } from '../base-control/types';
 export type ComboboxControlOption = {
 	label: string;
 	value: string;
+	disabled?: boolean;
 	[ key: string ]: any;
 };
 
@@ -44,6 +45,13 @@ export type ComboboxControlProps = Pick<
 	 * @default true
 	 */
 	allowReset?: boolean;
+	/**
+	 * Automatically expand the dropdown when the control is focused.
+	 * If the control is clicked, the dropdown will expand regardless of this prop.
+	 *
+	 * @default true
+	 */
+	expandOnFocus?: boolean;
 	/**
 	 * Customizable UI messages.
 	 */

package/src/composite/current/stories/index.story.tsx

@@ -33,8 +33,8 @@ const meta: Meta< typeof UseCompositeStorePlaceholder > = {
 		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		CompositeItem,
 	},
+	tags: [ 'status-private' ],
 	parameters: {
-		badges: [ 'private' ],
 		docs: {
 			canvas: { sourceState: 'shown' },
 			source: { transform },

package/src/css.d.ts

@@ -0,0 +1,9 @@
+import type * as CSS from 'csstype';
+
+// See: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/f6d4d15522356eba4a0267142834e3abc6b603fc/types/react/index.d.ts#L2580-L2587
+declare module 'csstype' {
+	interface Properties {
+		// Allow any CSS Custom Properties
+		[ index: `--${ string }` ]: any;
+	}
+}

package/src/custom-gradient-picker/gradient-bar/control-points.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 import { colord } from 'colord';
 
 /**
@@ -66,7 +66,7 @@ function ControlPointButton( {
 				aria-describedby={ descriptionId }
 				aria-haspopup="true"
 				aria-expanded={ isOpen }
-				className={ classnames(
+				className={ clsx(
 					'components-custom-gradient-picker__control-point-button',
 					{
 						'is-active': isOpen,
@@ -102,7 +102,7 @@ function GradientColorPickerDropdown( {
 		[]
 	);
 
-	const mergedClassName = classnames(
+	const mergedClassName = clsx(
 		'components-custom-gradient-picker__control-point-dropdown',
 		className
 	);

package/src/custom-gradient-picker/gradient-bar/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -133,7 +133,7 @@ export default function CustomGradientBar( {
 
 	return (
 		<div
-			className={ classnames(
+			className={ clsx(
 				'components-custom-gradient-picker__gradient-bar',
 				{ 'has-gradient': hasGradient }
 			) }

package/src/custom-gradient-picker/index.native.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { PanelBody, RadioControl, RangeControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 
@@ -16,6 +15,9 @@ import {
 	HORIZONTAL_GRADIENT_ORIENTATION,
 } from './constants';
 import styles from './style.scss';
+import PanelBody from '../panel/body';
+import RadioControl from '../radio-control';
+import RangeControl from '../range-control';
 
 function CustomGradientPicker( { setColor, currentValue, isGradientColor } ) {
 	const [ gradientOrientation, setGradientOrientation ] = useState(

package/src/custom-gradient-picker/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type gradientParser from 'gradient-parser';
+import { type LinearGradientNode } from 'gradient-parser';
 
 /**
  * WordPress dependencies
@@ -79,7 +79,7 @@ const GradientTypePicker = ( {
 					? undefined
 					: HORIZONTAL_GRADIENT_ORIENTATION,
 				type: 'linear-gradient',
-			} as gradientParser.LinearGradientNode )
+			} satisfies LinearGradientNode )
 		);
 	};
 

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

@@ -3,7 +3,7 @@
  * External dependencies
  */
 import { useSelect } from 'downshift';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -114,7 +114,7 @@ export default function CustomSelectControl( props ) {
 		return sprintf( __( 'Currently selected: %s' ), selectedItem.name );
 	}
 
-	const menuProps = getMenuProps( {
+	let menuProps = getMenuProps( {
 		className: 'components-custom-select-control__menu',
 		'aria-hidden': ! isOpen,
 	} );
@@ -131,14 +131,15 @@ export default function CustomSelectControl( props ) {
 	if (
 		menuProps[ 'aria-activedescendant' ]?.startsWith( 'downshift-null' )
 	) {
-		delete menuProps[ 'aria-activedescendant' ];
+		const {
+			'aria-activedescendant': ariaActivedescendant,
+			...restMenuProps
+		} = menuProps;
+		menuProps = restMenuProps;
 	}
 	return (
 		<div
-			className={ classnames(
-				'components-custom-select-control',
-				className
-			) }
+			className={ clsx( 'components-custom-select-control', className ) }
 		>
 			{ hideLabelFromVision ? (
 				<VisuallyHidden as="label" { ...getLabelProps() }>
@@ -188,13 +189,12 @@ export default function CustomSelectControl( props ) {
 					<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>
 						{ isOpen &&
 							items.map( ( item, index ) => (
-								// eslint-disable-next-line react/jsx-key
 								<li
+									key={ item.key }
 									{ ...getItemProps( {
 										item,
 										index,
-										key: item.key,
-										className: classnames(
+										className: clsx(
 											item.className,
 											'components-custom-select-control__item',
 											{