@wordpress/components 19.12.0 → 19.15.0

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import type { ForwardedRef } from 'react';
 
 /**
@@ -25,6 +24,8 @@ import { Spacer } from '../../spacer';
 
 export { DatePicker, TimePicker };
 
+const noop = () => {};
+
 function UnforwardedDateTimePicker(
 	{
 		currentDate,
@@ -33,6 +34,7 @@ function UnforwardedDateTimePicker(
 		onMonthPreviewed = noop,
 		onChange,
 		events,
+		startOfWeek,
 		__nextRemoveHelpButton = false,
 		__nextRemoveResetButton = false,
 	}: DateTimePickerProps,
@@ -42,22 +44,19 @@ function UnforwardedDateTimePicker(
 		deprecated( 'Help button in wp.components.DateTimePicker', {
 			since: '13.4',
 			version: '14.6', // Six months of plugin releases.
-			hint:
-				'Set the `__nextRemoveHelpButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',
+			hint: 'Set the `__nextRemoveHelpButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',
 		} );
 	}
 	if ( ! __nextRemoveResetButton ) {
 		deprecated( 'Reset button in wp.components.DateTimePicker', {
 			since: '13.4',
 			version: '14.6', // Six months of plugin releases.
-			hint:
-				'Set the `__nextRemoveResetButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',
+			hint: 'Set the `__nextRemoveResetButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',
 		} );
 	}
 
-	const [ calendarHelpIsVisible, setCalendarHelpIsVisible ] = useState(
-		false
-	);
+	const [ calendarHelpIsVisible, setCalendarHelpIsVisible ] =
+		useState( false );
 
 	function onClickDescriptionToggle() {
 		setCalendarHelpIsVisible( ! calendarHelpIsVisible );
@@ -78,6 +77,7 @@ function UnforwardedDateTimePicker(
 						isInvalidDate={ isInvalidDate }
 						events={ events }
 						onMonthPreviewed={ onMonthPreviewed }
+						startOfWeek={ startOfWeek }
 					/>
 				</>
 			) }

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

@@ -53,9 +53,8 @@ export const Default: ComponentStory< typeof DateTimePicker > = Template.bind(
 	{}
 );
 
-export const WithEvents: ComponentStory<
-	typeof DateTimePicker
-> = Template.bind( {} );
+export const WithEvents: ComponentStory< typeof DateTimePicker > =
+	Template.bind( {} );
 WithEvents.args = {
 	currentDate: new Date(),
 	events: [
@@ -66,9 +65,8 @@ WithEvents.args = {
 	],
 };
 
-export const WithInvalidDates: ComponentStory<
-	typeof DateTimePicker
-> = Template.bind( {} );
+export const WithInvalidDates: ComponentStory< typeof DateTimePicker > =
+	Template.bind( {} );
 WithInvalidDates.args = {
 	currentDate: new Date(),
 	isInvalidDate: isWeekend,

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

@@ -64,9 +64,8 @@ WithEvents.args = {
 	],
 };
 
-export const WithInvalidDates: ComponentStory<
-	typeof DatePicker
-> = Template.bind( {} );
+export const WithInvalidDates: ComponentStory< typeof DatePicker > =
+	Template.bind( {} );
 WithInvalidDates.args = {
 	currentDate: new Date(),
 	isInvalidDate: isWeekend,

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

@@ -366,20 +366,20 @@ describe( 'TimePicker', () => {
 			/>
 		);
 
-		const monthInput = ( screen.getByLabelText(
-			'Month'
-		) as HTMLInputElement ).value;
+		const monthInput = (
+			screen.getByLabelText( 'Month' ) as HTMLInputElement
+		 ).value;
 		const dayInput = ( screen.getByLabelText( 'Day' ) as HTMLInputElement )
 			.value;
-		const yearInput = ( screen.getByLabelText(
-			'Year'
-		) as HTMLInputElement ).value;
-		const hoursInput = ( screen.getByLabelText(
-			'Hours'
-		) as HTMLInputElement ).value;
-		const minutesInput = ( screen.getByLabelText(
-			'Minutes'
-		) as HTMLInputElement ).value;
+		const yearInput = (
+			screen.getByLabelText( 'Year' ) as HTMLInputElement
+		 ).value;
+		const hoursInput = (
+			screen.getByLabelText( 'Hours' ) as HTMLInputElement
+		 ).value;
+		const minutesInput = (
+			screen.getByLabelText( 'Minutes' ) as HTMLInputElement
+		 ).value;
 
 		expect( Number.isNaN( parseInt( monthInput, 10 ) ) ).toBe( false );
 		expect( Number.isNaN( parseInt( dayInput, 10 ) ) ).toBe( false );

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/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isFunction } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -35,7 +34,7 @@ export function DimensionControl( props ) {
 
 		if ( ! theSize || value === theSize.slug ) {
 			onChange( undefined );
-		} else if ( isFunction( onChange ) ) {
+		} else if ( typeof onChange === 'function' ) {
 			onChange( theSize.slug );
 		}
 	};

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/styles.ts

@@ -57,9 +57,8 @@ const renderBorder = ( {
 	'aria-orientation': orientation = 'horizontal',
 }: Props ) => {
 	return css( {
-		[ orientation === 'vertical'
-			? 'borderRight'
-			: 'borderBottom' ]: '1px solid currentColor',
+		[ orientation === 'vertical' ? 'borderRight' : 'borderBottom' ]:
+			'1px solid currentColor',
 	} );
 };
 

package/src/draggable/index.js

@@ -144,9 +144,9 @@ export default function Draggable( {
 			cloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;
 
 			// Hack: Remove iFrames as it's causing the embeds drag clone to freeze.
-			Array.from(
-				clone.querySelectorAll( 'iframe' )
-			).forEach( ( child ) => child.parentNode.removeChild( child ) );
+			Array.from( clone.querySelectorAll( 'iframe' ) ).forEach(
+				( child ) => child.parentNode.removeChild( child )
+			);
 
 			cloneWrapper.appendChild( clone );
 

package/src/draggable/index.native.js

@@ -142,7 +142,16 @@ const Draggable = ( {
 
 	const providerValue = useMemo( () => {
 		return { panGestureRef, isDragging, isPanActive, draggingId };
-	}, [] );
+	}, [
+		// `isDragging`, `isPanActive` and `draggingId` are created using the
+		// `useSharedValue` hook provided by the `react-native-reanimated`, which in
+		// theory should guarantee that the value of these variables remains stable.
+		// ESLint can't pick this up, and that's why they have to be specified as
+		// dependencies for this hook call.
+		isDragging,
+		isPanActive,
+		draggingId,
+	] );
 
 	return (
 		<GestureDetector gesture={ panGesture }>
@@ -180,9 +189,8 @@ const DraggableTrigger = ( {
 	onLongPressEnd,
 	testID,
 } ) => {
-	const { panGestureRef, isDragging, isPanActive, draggingId } = useContext(
-		Context
-	);
+	const { panGestureRef, isDragging, isPanActive, draggingId } =
+		useContext( Context );
 
 	const gestureHandler = useAnimatedGestureHandler( {
 		onActive: () => {

package/src/drop-zone/provider.js

@@ -6,8 +6,7 @@ import deprecated from '@wordpress/deprecated';
 export default function DropZoneProvider( { children } ) {
 	deprecated( 'wp.components.DropZoneProvider', {
 		since: '5.8',
-		hint:
-			'wp.component.DropZone no longer needs a provider. wp.components.DropZoneProvider is safe to remove from your code.',
+		hint: 'wp.component.DropZone no longer needs a provider. wp.components.DropZoneProvider is safe to remove from your code.',
 	} );
 	return children;
 }

package/src/dropdown/index.js

@@ -46,11 +46,11 @@ export default function Dropdown( props ) {
 
 	useEffect(
 		() => () => {
-			if ( onToggle ) {
+			if ( onToggle && isOpen ) {
 				onToggle( false );
 			}
 		},
-		[]
+		[ onToggle, isOpen ]
 	);
 
 	function toggle() {

package/src/dropdown-menu/index.js

@@ -3,7 +3,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { flatMap, isEmpty, isFunction } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -34,6 +33,16 @@ function mergeProps( defaultProps = {}, props = {} ) {
 	return mergedProps;
 }
 
+/**
+ * Whether the argument is a function.
+ *
+ * @param {*} maybeFunc The argument to check.
+ * @return {boolean} True if the argument is a function, false otherwise.
+ */
+function isFunction( maybeFunc ) {
+	return typeof maybeFunc === 'function';
+}
+
 function DropdownMenu( dropdownMenuProps ) {
 	const {
 		children,
@@ -49,13 +58,13 @@ function DropdownMenu( dropdownMenuProps ) {
 		noIcons,
 	} = dropdownMenuProps;
 
-	if ( isEmpty( controls ) && ! isFunction( children ) ) {
+	if ( ! controls?.length && ! isFunction( children ) ) {
 		return null;
 	}
 
 	// Normalize controls to nested array of objects (sets of controls)
 	let controlSets;
-	if ( ! isEmpty( controls ) ) {
+	if ( controls?.length ) {
 		controlSets = controls;
 		if ( ! Array.isArray( controlSets[ 0 ] ) ) {
 			controlSets = [ controlSets ];
@@ -136,7 +145,7 @@ function DropdownMenu( dropdownMenuProps ) {
 				return (
 					<NavigableMenu { ...mergedMenuProps } role="menu">
 						{ isFunction( children ) ? children( props ) : null }
-						{ flatMap( controlSets, ( controlSet, indexOfSet ) =>
+						{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>
 							controlSet.map( ( control, indexOfControl ) => (
 								<Button
 									key={ [

package/src/dropdown-menu/index.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { flatMap, isEmpty, isFunction } from 'lodash';
 import { Platform } from 'react-native';
 /**
  * WordPress dependencies
@@ -34,6 +33,16 @@ function mergeProps( defaultProps = {}, props = {} ) {
 	return mergedProps;
 }
 
+/**
+ * Whether the argument is a function.
+ *
+ * @param {*} maybeFunc The argument to check.
+ * @return {boolean} True if the argument is a function, false otherwise.
+ */
+function isFunction( maybeFunc ) {
+	return typeof maybeFunc === 'function';
+}
+
 function DropdownMenu( {
 	children,
 	className,
@@ -43,13 +52,13 @@ function DropdownMenu( {
 	popoverProps,
 	toggleProps,
 } ) {
-	if ( isEmpty( controls ) && ! isFunction( children ) ) {
+	if ( ! controls?.length && ! isFunction( children ) ) {
 		return null;
 	}
 
 	// Normalize controls to nested array of objects (sets of controls)
 	let controlSets;
-	if ( ! isEmpty( controls ) ) {
+	if ( controls?.length ) {
 		controlSets = controls;
 		if ( ! Array.isArray( controlSets[ 0 ] ) ) {
 			controlSets = [ controlSets ];
@@ -121,8 +130,7 @@ function DropdownMenu( {
 							title={ label }
 							style={ { paddingLeft: 0, paddingRight: 0 } }
 						>
-							{ flatMap(
-								controlSets,
+							{ controlSets?.flatMap(
 								( controlSet, indexOfSet ) =>
 									controlSet.map(
 										( control, indexOfControl ) => (

package/src/duotone-picker/duotone-picker.js

@@ -20,6 +20,7 @@ import { getDefaultColors, getGradientFromCSSColors } from './utils';
 
 function DuotonePicker( {
 	clearable = true,
+	unsetable = true,
 	colorPalette,
 	duotonePalette,
 	disableCustomColors,
@@ -32,43 +33,60 @@ function DuotonePicker( {
 		[ colorPalette ]
 	);
 
+	const isUnset = value === 'unset';
+
+	const unsetOption = (
+		<CircularOptionPicker.Option
+			key="unset"
+			value="unset"
+			isSelected={ isUnset }
+			tooltipText={ __( 'Unset' ) }
+			className="components-duotone-picker__color-indicator"
+			onClick={ () => {
+				onChange( isUnset ? undefined : 'unset' );
+			} }
+		/>
+	);
+
+	const options = duotonePalette.map( ( { colors, slug, name } ) => {
+		const style = {
+			background: getGradientFromCSSColors( colors, '135deg' ),
+			color: 'transparent',
+		};
+		const tooltipText =
+			name ??
+			sprintf(
+				// translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
+				__( 'Duotone code: %s' ),
+				slug
+			);
+		const label = name
+			? sprintf(
+					// translators: %s: The name of the option e.g: "Dark grayscale".
+					__( 'Duotone: %s' ),
+					name
+			  )
+			: tooltipText;
+		const isSelected = isEqual( colors, value );
+
+		return (
+			<CircularOptionPicker.Option
+				key={ slug }
+				value={ colors }
+				isSelected={ isSelected }
+				aria-label={ label }
+				tooltipText={ tooltipText }
+				style={ style }
+				onClick={ () => {
+					onChange( isSelected ? undefined : colors );
+				} }
+			/>
+		);
+	} );
+
 	return (
 		<CircularOptionPicker
-			options={ duotonePalette.map( ( { colors, slug, name } ) => {
-				const style = {
-					background: getGradientFromCSSColors( colors, '135deg' ),
-					color: 'transparent',
-				};
-				const tooltipText =
-					name ??
-					sprintf(
-						// translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff".
-						__( 'Duotone code: %s' ),
-						slug
-					);
-				const label = name
-					? sprintf(
-							// translators: %s: The name of the option e.g: "Dark grayscale".
-							__( 'Duotone: %s' ),
-							name
-					  )
-					: tooltipText;
-				const isSelected = isEqual( colors, value );
-
-				return (
-					<CircularOptionPicker.Option
-						key={ slug }
-						value={ colors }
-						isSelected={ isSelected }
-						aria-label={ label }
-						tooltipText={ tooltipText }
-						style={ style }
-						onClick={ () => {
-							onChange( isSelected ? undefined : colors );
-						} }
-					/>
-				);
-			} ) }
+			options={ unsetable ? [ unsetOption, ...options ] : options }
 			actions={
 				!! clearable && (
 					<CircularOptionPicker.ButtonAction
@@ -80,13 +98,16 @@ function DuotonePicker( {
 			}
 		>
 			{ ! disableCustomColors && ! disableCustomDuotone && (
-				<CustomDuotoneBar value={ value } onChange={ onChange } />
+				<CustomDuotoneBar
+					value={ isUnset ? undefined : value }
+					onChange={ onChange }
+				/>
 			) }
 			{ ! disableCustomDuotone && (
 				<ColorListPicker
 					labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }
 					colors={ colorPalette }
-					value={ value }
+					value={ isUnset ? undefined : value }
 					disableCustomColors={ disableCustomColors }
 					enableAlpha
 					onChange={ ( newColors ) => {

package/src/duotone-picker/style.scss

@@ -0,0 +1,19 @@
+.components-duotone-picker__color-indicator::before {
+	background: transparent;
+}
+
+.components-duotone-picker__color-indicator > .components-button {
+	// Show a diagonal line (crossed out) for empty swatches.
+	background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+	color: transparent;
+
+	&.is-pressed:hover:not(:disabled) {
+		// Hover state has to be overridden too.
+		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+		color: transparent;
+	}
+
+	&:not([aria-disabled="true"]):active {
+		color: transparent;
+	}
+}

package/src/elevation/hook.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { css } from '@emotion/react';
-import { isNil } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,6 +15,7 @@ import { useContextSystem } from '../ui/context';
 import * as styles from './styles';
 import { CONFIG, reduceMotion } from '../utils';
 import { useCx } from '../utils/hooks/use-cx';
+import { isValueDefined } from '../utils/values';
 
 /**
  * @param {number} value
@@ -49,13 +49,13 @@ export function useElevation( props ) {
 
 	const classes = useMemo( () => {
 		/** @type {number | undefined} */
-		let hoverValue = ! isNil( hover ) ? hover : value * 2;
+		let hoverValue = isValueDefined( hover ) ? hover : value * 2;
 		/** @type {number | undefined} */
-		let activeValue = ! isNil( active ) ? active : value / 2;
+		let activeValue = isValueDefined( active ) ? active : value / 2;
 
 		if ( ! isInteractive ) {
-			hoverValue = ! isNil( hover ) ? hover : undefined;
-			activeValue = ! isNil( active ) ? active : undefined;
+			hoverValue = isValueDefined( hover ) ? hover : undefined;
+			activeValue = isValueDefined( active ) ? active : undefined;
 		}
 
 		const transition = `box-shadow ${ CONFIG.transitionDuration } ${ CONFIG.transitionTimingFunction }`;
@@ -76,7 +76,7 @@ export function useElevation( props ) {
 			reduceMotion( 'transition' )
 		);
 
-		if ( ! isNil( hoverValue ) ) {
+		if ( isValueDefined( hoverValue ) ) {
 			sx.hover = css`
 				*:hover > & {
 					box-shadow: ${ getBoxShadow( hoverValue ) };
@@ -84,7 +84,7 @@ export function useElevation( props ) {
 			`;
 		}
 
-		if ( ! isNil( activeValue ) ) {
+		if ( isValueDefined( activeValue ) ) {
 			sx.active = css`
 				*:active > & {
 					box-shadow: ${ getBoxShadow( activeValue ) };
@@ -92,7 +92,7 @@ export function useElevation( props ) {
 			`;
 		}
 
-		if ( ! isNil( focus ) ) {
+		if ( isValueDefined( focus ) ) {
 			sx.focus = css`
 				*:focus > & {
 					box-shadow: ${ getBoxShadow( focus ) };
@@ -103,9 +103,9 @@ export function useElevation( props ) {
 		return cx(
 			styles.Elevation,
 			sx.Base,
-			sx.hover && sx.hover,
-			sx.focus && sx.focus,
-			sx.active && sx.active,
+			sx.hover,
+			sx.focus,
+			sx.active,
 			className
 		);
 	}, [

package/src/external-link/README.md

@@ -1,5 +1,7 @@
 # ExternalLink
 
+Link to an external resource.
+
 ## Usage
 
 ```jsx
@@ -9,3 +11,19 @@ const MyExternalLink = () => (
 	<ExternalLink href="https://wordpress.org">WordPress.org</ExternalLink>
 );
 ```
+
+## Props
+
+The component accepts the following props. Any other props will be passed through to the `a`.
+
+### `children`: `ReactNode`
+
+The content to be displayed within the link.
+
+-   Required: Yes
+
+### `href`: `string`
+
+The URL of the external resource.
+
+-   Required: Yes