@wordpress/components 19.13.0 → 19.16.0

package/src/combobox-control/index.js

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { deburr } from 'lodash';
+import removeAccents from 'remove-accents';
+
 /**
  * WordPress dependencies
  */
@@ -15,18 +16,18 @@ import {
 	useEffect,
 } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
-import { ENTER, UP, DOWN, ESCAPE } from '@wordpress/keycodes';
 import { speak } from '@wordpress/a11y';
 import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
+import { InputWrapperFlex } from './styles';
 import TokenInput from '../form-token-field/token-input';
 import SuggestionsList from '../form-token-field/suggestions-list';
 import BaseControl from '../base-control';
 import Button from '../button';
-import { Flex, FlexBlock, FlexItem } from '../flex';
+import { FlexBlock, FlexItem } from '../flex';
 import withFocusOutside from '../higher-order/with-focus-outside';
 
 const noop = () => {};
@@ -44,6 +45,7 @@ const DetectOutside = withFocusOutside(
 );
 
 function ComboboxControl( {
+	__next36pxDefaultSize,
 	value,
 	label,
 	options,
@@ -59,7 +61,10 @@ function ComboboxControl( {
 } ) {
 	const currentOption = options.find( ( option ) => option.value === value );
 	const currentLabel = currentOption?.label ?? '';
-	const instanceId = useInstanceId( ComboboxControl );
+	// Use a custom prefix when generating the `instanceId` to avoid having
+	// duplicate input IDs when rendering this component and `FormTokenField`
+	// in the same page (see https://github.com/WordPress/gutenberg/issues/42112).
+	const instanceId = useInstanceId( ComboboxControl, 'combobox-control' );
 	const [ selectedSuggestion, setSelectedSuggestion ] = useState(
 		currentOption || null
 	);
@@ -71,9 +76,9 @@ function ComboboxControl( {
 	const matchingSuggestions = useMemo( () => {
 		const startsWithMatch = [];
 		const containsMatch = [];
-		const match = deburr( inputValue.toLocaleLowerCase() );
+		const match = removeAccents( inputValue.toLocaleLowerCase() );
 		options.forEach( ( option ) => {
-			const index = deburr( option.label )
+			const index = removeAccents( option.label )
 				.toLocaleLowerCase()
 				.indexOf( match );
 			if ( index === 0 ) {
@@ -113,22 +118,22 @@ function ComboboxControl( {
 			return;
 		}
 
-		switch ( event.keyCode ) {
-			case ENTER:
+		switch ( event.code ) {
+			case 'Enter':
 				if ( selectedSuggestion ) {
 					onSuggestionSelected( selectedSuggestion );
 					preventDefault = true;
 				}
 				break;
-			case UP:
+			case 'ArrowUp':
 				handleArrowNavigation( -1 );
 				preventDefault = true;
 				break;
-			case DOWN:
+			case 'ArrowDown':
 				handleArrowNavigation( 1 );
 				preventDefault = true;
 				break;
-			case ESCAPE:
+			case 'Escape':
 				setIsExpanded( false );
 				setSelectedSuggestion( null );
 				preventDefault = true;
@@ -225,7 +230,9 @@ function ComboboxControl( {
 					tabIndex="-1"
 					onKeyDown={ onKeyDown }
 				>
-					<Flex>
+					<InputWrapperFlex
+						__next36pxDefaultSize={ __next36pxDefaultSize }
+					>
 						<FlexBlock>
 							<TokenInput
 								className="components-combobox-control__input"
@@ -257,7 +264,7 @@ function ComboboxControl( {
 								/>
 							</FlexItem>
 						) }
-					</Flex>
+					</InputWrapperFlex>
 					{ isExpanded && (
 						<SuggestionsList
 							instanceId={ instanceId }

package/src/combobox-control/stories/index.js

@@ -266,17 +266,17 @@ const mapCountryOption = ( country ) => ( {
 
 const countryOptions = countries.map( mapCountryOption );
 
-function CountryCodeComboboxControl( { allowReset } ) {
+function CountryCodeComboboxControl( args ) {
 	const [ value, setValue ] = useState( null );
 
 	return (
 		<>
 			<ComboboxControl
+				{ ...args }
 				value={ value }
 				onChange={ setValue }
 				label="Select a country"
 				options={ countryOptions }
-				allowReset={ allowReset }
 			/>
 			<p>Value: { value }</p>
 		</>
@@ -284,5 +284,6 @@ function CountryCodeComboboxControl( { allowReset } ) {
 }
 export const _default = CountryCodeComboboxControl.bind( {} );
 _default.args = {
+	__next36pxDefaultSize: false,
 	allowReset: false,
 };

package/src/combobox-control/style.scss

@@ -32,7 +32,7 @@ input.components-combobox-control__input[type="text"] {
 	align-items: flex-start;
 	width: 100%;
 	margin: 0 0 $grid-unit-10 0;
-	padding: $grid-unit-05;
+	padding: 0;
 
 	&:focus-within {
 		@include input-style__focus();

package/src/combobox-control/styles.ts

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import { Flex } from '../flex';
+import { space } from '../ui/utils/space';
+
+const deprecatedDefaultSize = ( { __next36pxDefaultSize } ) =>
+	! __next36pxDefaultSize &&
+	css`
+		height: 28px; // 30px - 2px vertical borders on parent container
+		padding-left: ${ space( 1 ) };
+		padding-right: ${ space( 1 ) };
+	`;
+
+export const InputWrapperFlex = styled( Flex )`
+	height: 34px; // 36px - 2px vertical borders on parent container
+	padding-left: ${ space( 2 ) };
+	padding-right: ${ space( 2 ) };
+
+	${ deprecatedDefaultSize }
+`;

package/src/confirm-dialog/README.md

@@ -17,7 +17,7 @@ The dialog is confirmed by clicking the _confirm_ button or by pressing the `Ent
 Allows the component to be used standalone, just by declaring it as part of another React's component render method:
 
 -   It will be automatically open (displayed) upon mounting;
--   It will be automatically closed when when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);
+-   It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);
 -   `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.
 
 Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { get, omit } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -34,11 +29,8 @@ import {
 } from './styles/custom-gradient-picker-styles';
 
 const GradientAnglePicker = ( { gradientAST, hasGradient, onChange } ) => {
-	const angle = get(
-		gradientAST,
-		[ 'orientation', 'value' ],
-		DEFAULT_LINEAR_GRADIENT_ANGLE
-	);
+	const angle =
+		gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;
 	const onAngleChange = ( newAngle ) => {
 		onChange(
 			serializeGradient( {
@@ -74,9 +66,10 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 	};
 
 	const onSetRadialGradient = () => {
+		const { orientation, ...restGradientAST } = gradientAST;
 		onChange(
 			serializeGradient( {
-				...omit( gradientAST, [ 'orientation' ] ),
+				...restGradientAST,
 				type: 'radial-gradient',
 			} )
 		);

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

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import { get, omit } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -37,7 +33,7 @@ function CustomGradientPicker( { setColor, currentValue, isGradientColor } ) {
 	}
 
 	function getGradientColor( type ) {
-		const orientation = get( gradientAST, [ 'orientation' ] );
+		const { orientation, ...restGradientAST } = gradientAST;
 
 		if ( orientation ) {
 			setGradientOrientation( orientation );
@@ -55,7 +51,7 @@ function CustomGradientPicker( { setColor, currentValue, isGradientColor } ) {
 						type,
 				  }
 				: {
-						...omit( gradientAST, [ 'orientation' ] ),
+						...restGradientAST,
 						type,
 				  }
 		);
@@ -83,11 +79,7 @@ function CustomGradientPicker( { setColor, currentValue, isGradientColor } ) {
 	}
 
 	function getGradientAngle() {
-		return get(
-			gradientAST,
-			[ 'orientation', 'value' ],
-			DEFAULT_LINEAR_GRADIENT_ANGLE
-		);
+		return gradientAST?.orientation?.value ?? DEFAULT_LINEAR_GRADIENT_ANGLE;
 	}
 	return (
 		<>

package/src/custom-gradient-picker/serializer.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { compact, get } from 'lodash';
-
 export function serializeGradientColor( { type, value } ) {
 	if ( type === 'literal' ) {
 		return value;
@@ -40,13 +35,12 @@ export function serializeGradient( { type, orientation, colorStops } ) {
 	const serializedColorStops = colorStops
 		.sort( ( colorStop1, colorStop2 ) => {
 			return (
-				get( colorStop1, [ 'length', 'value' ], 0 ) -
-				get( colorStop2, [ 'length', 'value' ], 0 )
+				( colorStop1?.length?.value ?? 0 ) -
+				( colorStop2?.length?.value ?? 0 )
 			);
 		} )
 		.map( serializeGradientColorStop );
-	return `${ type }(${ compact( [
-		serializedOrientation,
-		...serializedColorStops,
-	] ).join( ',' ) })`;
+	return `${ type }(${ [ serializedOrientation, ...serializedColorStops ]
+		.filter( Boolean )
+		.join( ',' ) })`;
 }

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

@@ -9,12 +9,14 @@ import classnames from 'classnames';
  */
 import { Icon, check, chevronDown } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { Button, VisuallyHidden } from '../';
+import { VisuallyHidden } from '../';
+import { Select as SelectControlSelect } from '../select-control/styles/select-control-styles';
+import InputBase from '../input-control/input-base';
 
 const itemToString = ( item ) => item?.name;
 // This is needed so that in Windows, where
@@ -58,12 +60,16 @@ const stateReducer = (
 export default function CustomSelectControl( {
 	/** Start opting into the larger default height that will become the default size in a future version. */
 	__next36pxDefaultSize = false,
+	/** Start opting into the unconstrained width that will become the default in a future version. */
+	__nextUnconstrainedWidth = false,
 	className,
 	hideLabelFromVision,
 	label,
 	describedBy,
 	options: items,
 	onChange: onSelectedItemChange,
+	/** @type {import('../select-control/types').SelectControlProps.size} */
+	size = 'default',
 	value: _selectedItem,
 } ) {
 	const {
@@ -85,6 +91,8 @@ export default function CustomSelectControl( {
 		stateReducer,
 	} );
 
+	const [ isFocused, setIsFocused ] = useState( false );
+
 	function getDescribedBy() {
 		if ( describedBy ) {
 			return describedBy;
@@ -138,31 +146,41 @@ export default function CustomSelectControl( {
 					{ label }
 				</label>
 			) }
-			<Button
-				{ ...getToggleButtonProps( {
-					// This is needed because some speech recognition software don't support `aria-labelledby`.
-					'aria-label': label,
-					'aria-labelledby': undefined,
-					className: classnames(
-						'components-custom-select-control__button',
-						{ 'is-next-36px-default-size': __next36pxDefaultSize }
-					),
-					isSmall: ! __next36pxDefaultSize,
-					describedBy: getDescribedBy(),
-				} ) }
+			<InputBase
+				isFocused={ isOpen || isFocused }
+				__unstableInputWidth={
+					__nextUnconstrainedWidth ? undefined : 'auto'
+				}
+				labelPosition={ __nextUnconstrainedWidth ? undefined : 'top' }
 			>
-				{ itemToString( selectedItem ) }
-				<Icon
-					icon={ chevronDown }
-					className={ classnames(
-						'components-custom-select-control__button-icon',
-						{
-							'is-next-36px-default-size': __next36pxDefaultSize,
-						}
-					) }
-					size={ 18 }
-				/>
-			</Button>
+				<SelectControlSelect
+					as="button"
+					onFocus={ () => setIsFocused( true ) }
+					onBlur={ () => setIsFocused( false ) }
+					selectSize={ size }
+					__next36pxDefaultSize={ __next36pxDefaultSize }
+					{ ...getToggleButtonProps( {
+						// This is needed because some speech recognition software don't support `aria-labelledby`.
+						'aria-label': label,
+						'aria-labelledby': undefined,
+						className: classnames(
+							'components-custom-select-control__button',
+							{
+								'is-next-unconstrained-width':
+									__nextUnconstrainedWidth,
+							}
+						),
+						describedBy: getDescribedBy(),
+					} ) }
+				>
+					{ itemToString( selectedItem ) }
+					<Icon
+						icon={ chevronDown }
+						className="components-custom-select-control__button-icon"
+						size={ 18 }
+					/>
+				</SelectControlSelect>
+			</InputBase>
 			{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
 			<ul { ...menuProps } onKeyDown={ onKeyDownHandler }>
 				{ isOpen &&

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

@@ -7,8 +7,13 @@ export default {
 	title: 'Components/CustomSelectControl',
 	component: CustomSelectControl,
 	argTypes: {
-		__next36pxDefaultSize: {
-			control: { type: 'boolean' },
+		__next36pxDefaultSize: { control: { type: 'boolean' } },
+		__nextUnconstrainedWidth: { control: { type: 'boolean' } },
+		size: {
+			control: {
+				type: 'radio',
+				options: [ 'small', 'default', '__unstable-large' ],
+			},
 		},
 	},
 };

package/src/custom-select-control/style.scss

@@ -8,45 +8,20 @@
 }
 
 .components-custom-select-control__button {
-	border: 1px solid $gray-700;
-	border-radius: $radius-block-ui;
-	min-width: 130px;
 	position: relative;
 	text-align: left;
+	outline: 0; // focus ring is handled elsewhere
 
-	&:not(.is-next-36px-default-size) {
-		min-height: 30px;
-	}
-
-	// For all button sizes allow sufficient space for the
-	// dropdown "arrow" icon to display.
-	&.components-custom-select-control__button {
-		// TODO: Some of these can be removed after some internal inconsistencies are addressed, such as the chevron
-		// (https://github.com/WordPress/gutenberg/issues/39400) and Button padding (https://github.com/WordPress/gutenberg/issues/39431)
-		padding-left: $grid-unit-20;
-		padding-right: $icon-size + $grid-unit-10;
-
-		&:not(.is-next-36px-default-size) {
-			padding-left: $grid-unit-10;
-			padding-right: $icon-size;
-		}
-	}
-
-	&:focus:not(:disabled) {
-		border-color: var(--wp-admin-theme-color);
-		box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color);
+	&:not(.is-next-unconstrained-width) {
+		min-width: 130px;
 	}
 
 	.components-custom-select-control__button-icon {
 		height: 100%;
 		padding: 0;
 		position: absolute;
-		right: $grid-unit-10;
+		right: $grid-unit-05;
 		top: 0;
-
-		&:not(.is-next-36px-default-size) {
-			right: $grid-unit-05;
-		}
 	}
 }
 

package/src/date-time/README.md

@@ -77,6 +77,13 @@ List of events to show in the date picker. Each event will appear as a dot on th
 -   Type: `Array`
 -   Required: No
 
+### `startOfWeek`: `number`
+
+The day that the week should start on. 0 for Sunday, 1 for Monday, etc.
+
+- Required: No
+- Default: 0
+
 ### `__nextRemoveHelpButton`: `boolean`
 
 Start opting in to not displaying a Help button which will become the default in a future version.

package/src/date-time/date/index.tsx

@@ -103,6 +103,7 @@ export function DatePicker( {
 	events,
 	isInvalidDate,
 	onMonthPreviewed,
+	startOfWeek = 0,
 }: DatePickerProps ) {
 	const nodeRef = useRef< HTMLDivElement >( null );
 
@@ -197,6 +198,7 @@ export function DatePicker( {
 				isOutsideRange={ ( date ) => {
 					return !! isInvalidDate && isInvalidDate( date.toDate() );
 				} }
+				firstDayOfWeek={ startOfWeek }
 				onPrevMonthClick={ onMonthPreviewedHandler }
 				onNextMonthClick={ onMonthPreviewedHandler }
 				renderDayContents={ ( day ) => (

package/src/date-time/date-time/index.tsx

@@ -34,6 +34,7 @@ function UnforwardedDateTimePicker(
 		onMonthPreviewed = noop,
 		onChange,
 		events,
+		startOfWeek,
 		__nextRemoveHelpButton = false,
 		__nextRemoveResetButton = false,
 	}: DateTimePickerProps,
@@ -76,6 +77,7 @@ function UnforwardedDateTimePicker(
 						isInvalidDate={ isInvalidDate }
 						events={ events }
 						onMonthPreviewed={ onMonthPreviewed }
+						startOfWeek={ startOfWeek }
 					/>
 				</>
 			) }

package/src/date-time/types.ts

@@ -76,6 +76,13 @@ export type DatePickerProps = {
 	 * dot on the day of the event.
 	 */
 	events?: DatePickerEvent[];
+
+	/**
+	 * The day that the week should start on. 0 for Sunday, 1 for Monday, etc.
+	 *
+	 * @default 0
+	 */
+	startOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
 };
 
 export type DateTimePickerProps = Omit< DatePickerProps, 'onChange' > &

package/src/dimension-control/README.md

@@ -11,12 +11,15 @@ This feature is still experimental. “Experimental” means this is an early im
 In a block's `edit` implementation, render a `<DimensionControl />` component.
 
 ```jsx
-import { partialRight } from 'lodash';
-
 import { registerBlockType } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import { DimensionControl } from '@wordpress/components';
 
+const partialRight =
+	( fn, ...partialArgs ) =>
+	( ...args ) =>
+		fn( ...args, ...partialArgs );
+
 registerBlockType( 'my-plugin/my-block', {
 	// ...
 

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { shallow, mount } from 'enzyme';
-import { uniqueId } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,6 +15,7 @@ import { DimensionControl } from '../';
 
 describe( 'DimensionControl', () => {
 	const onChangeHandler = jest.fn();
+	const instanceId = 1;
 
 	afterEach( () => {
 		onChangeHandler.mockClear();
@@ -25,7 +25,7 @@ describe( 'DimensionControl', () => {
 		it( 'renders with defaults', () => {
 			const wrapper = shallow(
 				<DimensionControl
-					instanceId={ uniqueId() }
+					instanceId={ instanceId }
 					label={ 'Padding' }
 				/>
 			);
@@ -35,7 +35,7 @@ describe( 'DimensionControl', () => {
 		it( 'renders with icon and default icon label', () => {
 			const wrapper = shallow(
 				<DimensionControl
-					instanceId={ uniqueId() }
+					instanceId={ instanceId }
 					label={ 'Margin' }
 					icon={ plus }
 				/>
@@ -46,7 +46,7 @@ describe( 'DimensionControl', () => {
 		it( 'renders with icon and custom icon label', () => {
 			const wrapper = shallow(
 				<DimensionControl
-					instanceId={ uniqueId() }
+					instanceId={ instanceId }
 					label={ 'Margin' }
 					icon={ plus }
 					iconLabel={ 'Tablet Devices' }
@@ -76,7 +76,7 @@ describe( 'DimensionControl', () => {
 
 			const wrapper = shallow(
 				<DimensionControl
-					instanceId={ uniqueId() }
+					instanceId={ instanceId }
 					label={ 'Custom Dimension' }
 					sizes={ customSizes }
 				/>
@@ -89,7 +89,7 @@ describe( 'DimensionControl', () => {
 		it( 'should call onChange handler with correct args on size change', () => {
 			const wrapper = mount(
 				<DimensionControl
-					instanceId={ uniqueId() }
+					instanceId={ instanceId }
 					label={ 'Padding' }
 					onChange={ onChangeHandler }
 				/>
@@ -121,7 +121,7 @@ describe( 'DimensionControl', () => {
 		it( 'should call onChange handler with undefined value when no size is provided on change', () => {
 			const wrapper = mount(
 				<DimensionControl
-					instanceId={ uniqueId() }
+					instanceId={ instanceId }
 					label={ 'Padding' }
 					onChange={ onChangeHandler }
 				/>

package/src/divider/README.md

@@ -32,19 +32,26 @@ function Example() {
 
 Adjusts all margins on the inline dimension.
 
-- Required: No
+-   Required: No
+
+### `marginEnd`: `number`
+
+Adjusts the inline-end margin.
+
+-   Required: No
 
 ### `marginStart`: `number`
 
 Adjusts the inline-start margin.
 
-- Required: No
+-   Required: No
 
-### `marginEnd`: `number`
+### `orientation`: `horizontal | vertical`
 
-Adjusts the inline-end margin.
+Divider's orientation. When using inside a flex container, you may need to make sure the divider is `stretch` aligned in order for it to be visible.
 
-- Required: No
+-   Required: No
+-   Default: `horizontal`
 
 ### Inherited props
 

package/src/divider/component.tsx

@@ -14,10 +14,10 @@ import {
 	WordPressComponentProps,
 } from '../ui/context';
 import { DividerView } from './styles';
-import type { Props } from './types';
+import type { DividerProps } from './types';
 
 function UnconnectedDivider(
-	props: WordPressComponentProps< Props, 'hr', false >,
+	props: WordPressComponentProps< DividerProps, 'hr', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const contextProps = useContextSystem( props, 'Divider' );
@@ -34,7 +34,6 @@ function UnconnectedDivider(
 /**
  * `Divider` is a layout component that separates groups of related content.
  *
- * @example
  * ```js
  * import {
  * 		__experimentalDivider as Divider,

package/src/divider/index.ts

@@ -1,2 +1,2 @@
 export { default as Divider } from './component';
-export type { Props as DividerProps } from './types';
+export type { DividerProps } from './types';