@wordpress/components 19.13.0 → 19.14.0

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/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/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 ) };

package/src/flex/flex/README.md

@@ -1,9 +1,5 @@
 # Flex
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
-
 `Flex` is a primitive layout component that adaptively aligns child content horizontally or vertically. `Flex` powers components like `HStack` and `VStack`.
 
 ## Usage
@@ -12,20 +8,19 @@ This feature is still experimental. “Experimental” means this is an early im
 
 ```jsx
 import {
-	__experimentalFlex as Flex,
-	__experimentalFlexBlock as FlexBlock,
-	__experimentalFlexItem as FlexItem,
-	__experimentalText as Text,
+	Flex,
+	FlexBlock,
+	FlexItem,
 } from '@wordpress/components';
 
 function Example() {
 	return (
 		<Flex>
 			<FlexItem>
-				<Text>Code</Text>
+				<p>Code</p>
 			</FlexItem>
 			<FlexBlock>
-				<Text>Poetry</Text>
+				<p>Poetry</p>
 			</FlexBlock>
 		</Flex>
 	);

package/src/flex/flex-item/README.md

@@ -8,7 +8,7 @@ A layout component to contain items of a fixed width within `Flex`.
 
 ## Usage
 
-See [`flex/README.md#usage`](/packages/components/src/flex/README.md#usage) for how to use `FlexItem`.
+See [`flex/README.md#usage`](/packages/components/src/flex/flex/README.md#usage) for how to use `FlexItem`.
 
 ## Props
 

package/src/focal-point-picker/index.native.js

@@ -3,7 +3,6 @@
  */
 import { Animated, PanResponder, View } from 'react-native';
 import Video from 'react-native-video';
-import { clamp } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -24,6 +23,7 @@ import FocalPoint from './focal-point';
 import Tooltip from './tooltip';
 import styles from './style.scss';
 import { isVideoType } from './utils';
+import { clamp } from '../utils/math';
 
 const MIN_POSITION_VALUE = 0;
 const MAX_POSITION_VALUE = 100;

package/src/form-toggle/README.md

@@ -60,10 +60,12 @@ import { useState } from '@wordpress/element';
 const MyFormToggle = () => {
 	const [ isChecked, setChecked ] = useState( true );
 
-	<FormToggle
-		checked={ isChecked }
-		onChange={ () => setChecked( ( state ) => ! state ) }
-	/>
+	return (
+		<FormToggle
+			checked={ isChecked }
+			onChange={ () => setChecked( ( state ) => ! state ) }
+		/>
+	);
 };
 ```
 
@@ -71,26 +73,23 @@ const MyFormToggle = () => {
 
 The component accepts the following props:
 
-#### checked
+#### `checked`: `boolean`
 
 If checked is true the toggle will be checked. If checked is false the toggle will be unchecked.
 If no value is passed the toggle will be unchecked.
 
--   Type: `Boolean`
 -   Required: No
 
-#### disabled
+#### `disabled`: `boolean`
 
 If disabled is true the toggle will be disabled and apply the appropriate styles.
 
--   Type: `Boolean`
 -   Required: No
 
-#### onChange
+#### `onChange`: `( event: ChangeEvent<HTMLInputElement> ) => void`
 
-A function that receives the checked state (boolean) as input.
+A callback function invoked when the toggle is clicked.
 
--   Type: `function`
 -   Required: Yes
 
 ## Related components

package/src/form-toggle/index.tsx

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import type { FormToggleProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
+
+export const noop = () => {};
+
+/**
+ * FormToggle switches a single setting on or off.
+ *
+ * ```jsx
+ * import { FormToggle } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyFormToggle = () => {
+ *   const [ isChecked, setChecked ] = useState( true );
+ *
+ *   return (
+ *     <FormToggle
+ *       checked={ isChecked }
+ *       onChange={ () => setChecked( ( state ) => ! state ) }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export function FormToggle(
+	// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add
+	// ref forwarding to FormToggle.
+	props: Omit<
+		WordPressComponentProps< FormToggleProps, 'input', false >,
+		'ref'
+	>
+) {
+	const {
+		className,
+		checked,
+		id,
+		disabled,
+		onChange = noop,
+		...additionalProps
+	} = props;
+	const wrapperClasses = classnames( 'components-form-toggle', className, {
+		'is-checked': checked,
+		'is-disabled': disabled,
+	} );
+
+	return (
+		<span className={ wrapperClasses }>
+			<input
+				className="components-form-toggle__input"
+				id={ id }
+				type="checkbox"
+				checked={ checked }
+				onChange={ onChange }
+				disabled={ disabled }
+				{ ...additionalProps }
+			/>
+			<span className="components-form-toggle__track"></span>
+			<span className="components-form-toggle__thumb"></span>
+		</span>
+	);
+}
+
+export default FormToggle;

package/src/form-toggle/stories/index.tsx

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { FormToggle } from '..';
+
+const meta: ComponentMeta< typeof FormToggle > = {
+	component: FormToggle,
+	title: 'Components/FormToggle',
+	argTypes: {
+		onChange: {
+			action: 'onChange',
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof FormToggle > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ isChecked, setChecked ] = useState( true );
+
+	return (
+		<FormToggle
+			{ ...args }
+			checked={ isChecked }
+			onChange={ ( e ) => {
+				setChecked( ( state ) => ! state );
+				onChange( e );
+			} }
+		/>
+	);
+};
+
+export const Default: ComponentStory< typeof FormToggle > = Template.bind( {} );
+Default.args = {};