@wordpress/components 19.13.0 → 19.14.0

package/src/alignment-matrix-control/utils.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { flattenDeep } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -28,7 +23,7 @@ export const ALIGNMENT_LABEL = {
 };
 
 // Transforms GRID into a flat Array of values.
-export const ALIGNMENTS = flattenDeep( GRID );
+export const ALIGNMENTS = GRID.flat();
 
 /**
  * Parses and transforms an incoming value to better match the alignment values

package/src/autocomplete/autocompleter-ui.js

@@ -39,7 +39,10 @@ export function getAutoCompleterUI( autocompleter ) {
 
 		useLayoutEffect( () => {
 			onChangeOptions( items );
-		}, [ onChangeOptions, items ] );
+			// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+			// See https://github.com/WordPress/gutenberg/pull/41820
+			// eslint-disable-next-line react-hooks/exhaustive-deps
+		}, [ items ] );
 
 		if ( ! items.length > 0 ) {
 			return null;

package/src/autocomplete/autocompleter-ui.native.js

@@ -71,7 +71,10 @@ export function getAutoCompleterUI( autocompleter ) {
 			} else if ( isVisible && text.length === 0 ) {
 				startAnimation( false );
 			}
-		}, [ onChangeOptions, items, isVisible, text, startAnimation ] );
+			// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+			// See https://github.com/WordPress/gutenberg/pull/41820
+			// eslint-disable-next-line react-hooks/exhaustive-deps
+		}, [ items, isVisible, text ] );
 
 		const activeItemStyles = usePreferredColorSchemeStyle(
 			styles[ 'components-autocomplete__item-active' ],
@@ -111,7 +114,10 @@ export function getAutoCompleterUI( autocompleter ) {
 					}
 				} );
 			},
-			[ animationValue, isVisible, reset ]
+			// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+			// See https://github.com/WordPress/gutenberg/pull/41820
+			// eslint-disable-next-line react-hooks/exhaustive-deps
+			[ isVisible ]
 		);
 
 		const contentStyles = {

package/src/autocomplete/index.js

@@ -375,14 +375,10 @@ function useAutocomplete( {
 				: AutocompleterUI
 		);
 		setFilterValue( query );
-	}, [
-		textContent,
-		AutocompleterUI,
-		autocompleter,
-		completers,
-		record,
-		filteredOptions.length,
-	] );
+		// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
+		// See https://github.com/WordPress/gutenberg/pull/41820
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ textContent ] );
 
 	const { key: selectedKey = '' } = filteredOptions[ selectedIndex ] || {};
 	const { className } = autocompleter || {};

package/src/border-box-control/border-box-control/component.tsx

@@ -69,6 +69,7 @@ const BorderBoxControl = (
 				placement: popoverPlacement,
 				offset: popoverOffset,
 				anchorRef: containerRef,
+				__unstableShift: true,
 		  }
 		: undefined;
 

package/src/border-box-control/border-box-control-split-controls/component.tsx

@@ -43,6 +43,7 @@ const BorderBoxControlSplitControls = (
 				placement: popoverPlacement,
 				offset: popoverOffset,
 				anchorRef: containerRef,
+				__unstableShift: true,
 		  }
 		: undefined;
 

package/src/border-control/border-control/component.tsx

@@ -27,8 +27,8 @@ const BorderLabel = ( props: LabelProps ) => {
 	);
 };
 
-const BorderControl = (
-	props: WordPressComponentProps< BorderControlProps, 'div' >,
+const UnconnectedBorderControl = (
+	props: WordPressComponentProps< BorderControlProps, 'div', false >,
 	forwardedRef: React.ForwardedRef< any >
 ) => {
 	const {
@@ -109,6 +109,43 @@ const BorderControl = (
 	);
 };
 
-const ConnectedBorderControl = contextConnect( BorderControl, 'BorderControl' );
+/**
+ * The `BorderControl` brings together internal sub-components which allow users to
+ * set the various properties of a border. The first sub-component, a
+ * `BorderDropdown` contains options representing border color and style. The
+ * border width is controlled via a `UnitControl` and an optional `RangeControl`.
+ *
+ * Border radius is not covered by this control as it may be desired separate to
+ * color, style, and width. For example, the border radius may be absorbed under
+ * a "shape" abstraction.
+ *
+ * ```jsx
+ * import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
+ * import { __ } from '@wordpress/i18n';
+ *
+ * const colors = [
+ * 	{ name: 'Blue 20', color: '#72aee6' },
+ * 	// ...
+ * ];
+ *
+ * const MyBorderControl = () => {
+ * 	const [ border, setBorder ] = useState();
+ * 	const onChange = ( newBorder ) => setBorder( newBorder );
+ *
+ * 	return (
+ * 		<BorderControl
+ * 			colors={ colors }
+ * 			label={ __( 'Border' ) }
+ * 			onChange={ onChange }
+ * 			value={ border }
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+export const BorderControl = contextConnect(
+	UnconnectedBorderControl,
+	'BorderControl'
+);
 
-export default ConnectedBorderControl;
+export default BorderControl;

package/src/border-control/stories/index.tsx

@@ -0,0 +1,150 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { BorderControl } from '..';
+import { Provider as SlotFillProvider } from '../../slot-fill';
+import Popover from '../../popover';
+import type { Border } from '../types';
+
+const meta: ComponentMeta< typeof BorderControl > = {
+	title: 'Components (Experimental)/BorderControl',
+	component: BorderControl,
+	argTypes: {
+		onChange: {
+			action: 'onChange',
+		},
+		width: { control: { type: 'text' } },
+		value: { control: { type: null } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+// Available border colors.
+const colors = [
+	{ name: 'Blue', color: '#72aee6' },
+	{ name: 'Red', color: '#e65054' },
+	{ name: 'Yellow', color: '#f2d675' },
+];
+
+// Multiple origin colors.
+const multipleOriginColors = [
+	{
+		name: 'Default',
+		colors: [
+			{ name: 'Gray 20', color: '#a7aaad' },
+			{ name: 'Gray 70', color: '#3c434a' },
+		],
+	},
+	{
+		name: 'Theme',
+		colors: [
+			{ name: 'Blue 20', color: '#72aee6' },
+			{ name: 'Blue 40', color: '#3582c4' },
+			{ name: 'Blue 70', color: '#0a4b78' },
+		],
+	},
+	{
+		name: 'User',
+		colors: [
+			{ name: 'Green', color: '#00a32a' },
+			{ name: 'Yellow', color: '#f2d675' },
+		],
+	},
+];
+
+const Template: ComponentStory< typeof BorderControl > = ( {
+	onChange,
+	...props
+} ) => {
+	const [ border, setBorder ] = useState< Border >();
+	const onChangeMerged: ComponentProps<
+		typeof BorderControl
+	>[ 'onChange' ] = ( newBorder ) => {
+		setBorder( newBorder );
+		onChange( newBorder );
+	};
+
+	return (
+		<SlotFillProvider>
+			<div style={ { maxWidth: '280px' } }>
+				<BorderControl
+					onChange={ onChangeMerged }
+					value={ border }
+					{ ...props }
+				/>
+			</div>
+			{ /* @ts-expect-error Ignore until Popover is converted to TS */ }
+			<Popover.Slot />
+		</SlotFillProvider>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	colors,
+	label: 'Border',
+};
+
+/**
+ * Render a slider beside the control.
+ */
+export const WithSlider = Template.bind( {} );
+WithSlider.args = {
+	...Default.args,
+	withSlider: true,
+};
+
+/**
+ * When rendering with a slider, the `width` prop is useful to customize the width of the number input.
+ */
+export const WithSliderCustomWidth = Template.bind( {} );
+WithSliderCustomWidth.args = {
+	...Default.args,
+	withSlider: true,
+	width: '150px',
+};
+WithSliderCustomWidth.storyName = 'With Slider (Custom Width)';
+
+/**
+ * Restrict the width of the control and prevent it from expanding to take up additional space.
+ * When `true`, the `width` prop will be ignored.
+ */
+export const IsCompact = Template.bind( {} );
+IsCompact.args = {
+	...Default.args,
+	isCompact: true,
+};
+
+/**
+ * The `colors` object can contain multiple origins.
+ */
+export const WithMultipleOrigins = Template.bind( {} );
+WithMultipleOrigins.args = {
+	...Default.args,
+	colors: multipleOriginColors,
+	__experimentalHasMultipleOrigins: true,
+};
+
+/**
+ * Allow the alpha channel to be edited on each color.
+ */
+export const WithAlphaEnabled = Template.bind( {} );
+WithAlphaEnabled.args = {
+	...Default.args,
+	enableAlpha: true,
+};

package/src/box-control/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, isNumber } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -82,16 +82,16 @@ export function getAllValue(
 		: '';
 
 	/**
-	 * The isNumber check is important. On reset actions, the incoming value
+	 * The typeof === 'number' check is important. On reset actions, the incoming value
 	 * may be null or an empty string.
 	 *
 	 * Also, the value may also be zero (0), which is considered a valid unit value.
 	 *
-	 * isNumber() is more specific for these cases, rather than relying on a
+	 * typeof === 'number' is more specific for these cases, rather than relying on a
 	 * simple truthy check.
 	 */
 	let commonUnit;
-	if ( isNumber( commonQuantity ) ) {
+	if ( typeof commonQuantity === 'number' ) {
 		commonUnit = mode( allParsedUnits );
 	} else {
 		// Set meaningful unit selection if no commonQuantity and user has previously

package/src/color-indicator/README.md

@@ -1,6 +1,6 @@
 # ColorIndicator
 
-ColorIndicator is a React component that renders a specific color in a squared box. It's often used to summarize a collection of used colors in a child component.
+ColorIndicator is a React component that renders a specific color in a circle. It's often used to summarize a collection of used colors in a child component.
 
 ### Single component
 
@@ -22,16 +22,14 @@ const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />;
 
 The component accepts the following props:
 
-### colorValue
+### `className`: `string`
 
-The color of the indicator. Any value from the [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background) property is supported.
+Extra classes for the used `<span>` element. By default only `component-color-indicator` is added.
 
--   Type: `string`
--   Required: Yes
+-   Required: No
 
-### className
+### `colorValue`: `CSSProperties[ 'background' ]`
 
-Extra classes for the used `<span>` element. By default only `component-color-indicator` is added.
+The color of the indicator. Any value from the CSS [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background) property is supported.
 
--   Type: `string`
--   Required: No
+-   Required: Yes

package/src/color-indicator/index.tsx

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../ui/context';
+import type { ColorIndicatorProps } from './types';
+
+function UnforwardedColorIndicator(
+	props: WordPressComponentProps< ColorIndicatorProps, 'span', false >,
+	forwardedRef: ForwardedRef< HTMLSpanElement >
+) {
+	const { className, colorValue, ...additionalProps } = props;
+
+	return (
+		<span
+			className={ classnames( 'component-color-indicator', className ) }
+			style={ { background: colorValue } }
+			ref={ forwardedRef }
+			{ ...additionalProps }
+		/>
+	);
+}
+
+/**
+ * ColorIndicator is a React component that renders a specific color in a
+ * circle. It's often used to summarize a collection of used colors in a child
+ * component.
+ *
+ * ```jsx
+ * import { ColorIndicator } from '@wordpress/components';
+ *
+ * const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />;
+ * ```
+ */
+export const ColorIndicator = forwardRef( UnforwardedColorIndicator );
+
+export default ColorIndicator;

package/src/color-indicator/stories/index.tsx

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import ColorIndicator from '..';
+
+const meta: ComponentMeta< typeof ColorIndicator > = {
+	component: ColorIndicator,
+	title: 'Components/ColorIndicator',
+	argTypes: {
+		colorValue: {
+			control: { type: 'color' },
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ColorIndicator > = ( { ...args } ) => (
+	<ColorIndicator { ...args } />
+);
+
+export const Default: ComponentStory< typeof ColorIndicator > = Template.bind(
+	{}
+);
+Default.args = {
+	colorValue: '#0073aa',
+};

package/src/color-indicator/test/__snapshots__/index.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ColorIndicator matches the snapshot 1`] = `
+<div>
+  <span
+    aria-label="sample label"
+    class="component-color-indicator"
+    style="background: rgb(255, 255, 255);"
+  />
+</div>
+`;

package/src/color-indicator/test/{index.js → index.tsx}

@@ -1,19 +1,19 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
-import ColorIndicator from '../';
+import ColorIndicator from '..';
 
 describe( 'ColorIndicator', () => {
 	it( 'matches the snapshot', () => {
-		const wrapper = shallow(
+		const { container } = render(
 			<ColorIndicator aria-label="sample label" colorValue="#fff" />
 		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

package/src/color-indicator/types.ts

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+
+export type ColorIndicatorProps = {
+	/**
+	 * The color of the indicator. Any value from the CSS `background` property
+	 * is supported.
+	 */
+	colorValue: CSSProperties[ 'background' ];
+};

package/src/color-palette/index.js

@@ -118,7 +118,11 @@ export function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {
 			contentClassName="components-color-palette__custom-color-dropdown-content"
 			popoverProps={
 				isRenderedInSidebar
-					? { placement: 'left-start', offset: 20 }
+					? {
+							placement: 'left-start',
+							offset: 20,
+							__unstableShift: true,
+					  }
 					: undefined
 			}
 			{ ...props }

package/src/color-picker/component.tsx

@@ -20,12 +20,12 @@ import {
 	contextConnect,
 	WordPressComponentProps,
 } from '../ui/context';
-import { HStack } from '../h-stack';
-import { Spacer } from '../spacer';
 import {
 	ColorfulWrapper,
 	SelectControl,
 	AuxiliaryColorArtefactWrapper,
+	AuxiliaryColorArtefactHStackHeader,
+	ColorInputWrapper,
 } from './styles';
 import { ColorCopyButton } from './color-copy-button';
 import { ColorInput } from './color-input';
@@ -95,7 +95,7 @@ const ColorPicker = (
 				enableAlpha={ enableAlpha }
 			/>
 			<AuxiliaryColorArtefactWrapper>
-				<HStack justify="space-between">
+				<AuxiliaryColorArtefactHStackHeader justify="space-between">
 					<SelectControl
 						options={ options }
 						value={ colorType }
@@ -109,14 +109,15 @@ const ColorPicker = (
 						color={ safeColordColor }
 						colorType={ copyFormat || colorType }
 					/>
-				</HStack>
-				<Spacer margin={ 4 } />
-				<ColorInput
-					colorType={ colorType }
-					color={ safeColordColor }
-					onChange={ handleChange }
-					enableAlpha={ enableAlpha }
-				/>
+				</AuxiliaryColorArtefactHStackHeader>
+				<ColorInputWrapper direction="column" gap={ 2 }>
+					<ColorInput
+						colorType={ colorType }
+						color={ safeColordColor }
+						onChange={ handleChange }
+						enableAlpha={ enableAlpha }
+					/>
+				</ColorInputWrapper>
 			</AuxiliaryColorArtefactWrapper>
 		</ColorfulWrapper>
 	);

package/src/color-picker/input-with-slider.tsx

@@ -26,7 +26,7 @@ export const InputWithSlider = ( {
 	value,
 }: InputWithSliderProps ) => {
 	return (
-		<Spacer as={ HStack } spacing={ 4 }>
+		<HStack spacing={ 4 }>
 			<NumberControlWrapper
 				min={ min }
 				max={ max }
@@ -55,6 +55,6 @@ export const InputWithSlider = ( {
 				onChange={ onChange }
 				withInputField={ false }
 			/>
-		</Spacer>
+		</HStack>
 	);
 };

package/src/color-picker/styles.ts

@@ -12,6 +12,8 @@ import InnerRangeControl from '../range-control';
 import { StyledField } from '../base-control/styles/base-control-styles';
 import { space } from '../ui/utils/space';
 import Button from '../button';
+import { Flex } from '../flex';
+import { HStack } from '../h-stack';
 import {
 	BackdropUI,
 	Container as InputControlContainer,
@@ -36,6 +38,7 @@ export const SelectControl = styled( InnerSelectControl )`
 
 export const RangeControl = styled( InnerRangeControl )`
 	flex: 1;
+	margin-right: ${ space( 2 ) };
 
 	${ StyledField } {
 		margin-bottom: 0;
@@ -58,7 +61,22 @@ const interactiveHueStyles = `
 }`;
 
 export const AuxiliaryColorArtefactWrapper = styled.div`
-	padding: ${ space( 2 ) } ${ space( 4 ) };
+	padding-top: ${ space( 2 ) };
+	padding-right: 0;
+	padding-left: 0;
+	padding-bottom: 0;
+`;
+
+export const AuxiliaryColorArtefactHStackHeader = styled( HStack )`
+	padding-left: ${ space( 4 ) };
+	padding-right: ${ space( 4 ) };
+`;
+
+export const ColorInputWrapper = styled( Flex )`
+	padding-top: ${ space( 4 ) };
+	padding-left: ${ space( 4 ) };
+	padding-right: ${ space( 3 ) };
+	padding-bottom: ${ space( 5 ) };
 `;
 
 export const ColorfulWrapper = styled.div`
@@ -70,6 +88,7 @@ export const ColorfulWrapper = styled.div`
 		align-items: center;
 		width: 216px;
 		height: auto;
+		overflow: hidden;
 	}
 
 	.react-colorful__saturation {

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',
 			} )
 		);