@wordpress/components 19.11.0 → 19.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.11.0",
+	"version": "19.14.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,21 +38,21 @@
 		"@emotion/utils": "1.0.0",
 		"@floating-ui/react-dom": "0.6.3",
 		"@use-gesture/react": "^10.2.6",
-		"@wordpress/a11y": "^3.9.0",
-		"@wordpress/compose": "^5.7.0",
-		"@wordpress/date": "^4.9.0",
-		"@wordpress/deprecated": "^3.9.0",
-		"@wordpress/dom": "^3.9.0",
-		"@wordpress/element": "^4.7.0",
-		"@wordpress/escape-html": "^2.9.0",
-		"@wordpress/hooks": "^3.9.0",
-		"@wordpress/i18n": "^4.9.0",
-		"@wordpress/icons": "^9.0.0",
-		"@wordpress/is-shallow-equal": "^4.9.0",
-		"@wordpress/keycodes": "^3.9.0",
-		"@wordpress/primitives": "^3.7.0",
-		"@wordpress/rich-text": "^5.7.0",
-		"@wordpress/warning": "^2.9.0",
+		"@wordpress/a11y": "^3.12.0",
+		"@wordpress/compose": "^5.10.0",
+		"@wordpress/date": "^4.12.0",
+		"@wordpress/deprecated": "^3.12.0",
+		"@wordpress/dom": "^3.12.0",
+		"@wordpress/element": "^4.10.0",
+		"@wordpress/escape-html": "^2.12.0",
+		"@wordpress/hooks": "^3.12.0",
+		"@wordpress/i18n": "^4.12.0",
+		"@wordpress/icons": "^9.3.0",
+		"@wordpress/is-shallow-equal": "^4.12.0",
+		"@wordpress/keycodes": "^3.12.0",
+		"@wordpress/primitives": "^3.10.0",
+		"@wordpress/rich-text": "^5.10.0",
+		"@wordpress/warning": "^2.12.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"dom-scroll-into-view": "^1.2.1",
@@ -62,11 +62,12 @@
 		"highlight-words-core": "^1.2.2",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
-		"moment": "^2.22.1",
+		"moment": "^2.26.0",
 		"re-resizable": "^6.4.0",
 		"react-colorful": "^5.3.1",
 		"react-dates": "^21.8.0",
 		"reakit": "^1.3.8",
+		"remove-accents": "^0.4.2",
 		"uuid": "^8.3.0"
 	},
 	"peerDependencies": {
@@ -76,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "198fa129cf1af8dc615918987ea6795cd40ab7df"
+	"gitHead": "a80eeb62ec7cb1418b9915c277e084a29d6665e3"
 }

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -20,6 +19,8 @@ import { Root, Row } from './styles/alignment-matrix-control-styles';
 import AlignmentMatrixControlIcon from './icon';
 import { GRID, getItemId } from './utils';
 
+const noop = () => {};
+
 function useBaseId( id ) {
 	const instanceId = useInstanceId(
 		AlignmentMatrixControl,
@@ -53,11 +54,13 @@ export default function AlignmentMatrixControl( {
 		onChange( nextValue );
 	};
 
+	const { setCurrentId } = composite;
+
 	useEffect( () => {
 		if ( typeof value !== 'undefined' ) {
-			composite.setCurrentId( getItemId( baseId, value ) );
+			setCurrentId( getItemId( baseId, value ) );
 		}
-	}, [ value, composite.setCurrentId ] );
+	}, [ value, setCurrentId, baseId ] );
 
 	const classes = classnames(
 		'component-alignment-matrix-control',

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

@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { FlexBlock, FlexItem } from '../flex';
-import NumberControl from '../input-control';
+import NumberControl from '../number-control';
 import AngleCircle from './angle-circle';
 import { Root } from './styles/angle-picker-control-styles';
 import { space } from '../ui/utils/space';

package/src/autocomplete/autocompleter-ui.js

@@ -39,6 +39,9 @@ export function getAutoCompleterUI( autocompleter ) {
 
 		useLayoutEffect( () => {
 			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 ) {

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

@@ -71,6 +71,9 @@ export function getAutoCompleterUI( autocompleter ) {
 			} else if ( isVisible && text.length === 0 ) {
 				startAnimation( false );
 			}
+			// 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(
@@ -111,6 +114,9 @@ export function getAutoCompleterUI( autocompleter ) {
 					}
 				} );
 			},
+			// 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 ]
 		);
 

package/src/autocomplete/index.js

@@ -11,6 +11,7 @@ import {
 	useEffect,
 	useState,
 	useRef,
+	useMemo,
 } from '@wordpress/element';
 import {
 	ENTER,
@@ -132,7 +133,7 @@ function useAutocomplete( {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ autocompleter, setAutocompleter ] = useState( null );
 	const [ AutocompleterUI, setAutocompleterUI ] = useState( null );
-	const [ backspacing, setBackspacing ] = useState( false );
+	const backspacing = useRef( false );
 
 	function insertCompletion( replacement ) {
 		const end = record.start;
@@ -218,7 +219,7 @@ function useAutocomplete( {
 	}
 
 	function handleKeyDown( event ) {
-		setBackspacing( event.keyCode === BACKSPACE );
+		backspacing.current = event.keyCode === BACKSPACE;
 
 		if ( ! autocompleter ) {
 			return;
@@ -268,11 +269,14 @@ function useAutocomplete( {
 		event.preventDefault();
 	}
 
-	let textContent;
-
-	if ( isCollapsed( record ) ) {
-		textContent = getTextContent( slice( record, 0 ) );
-	}
+	// textContent is a primitive (string), memoizing is not strictly necessary
+	// but this is a preemptive performance improvement, since the autocompleter
+	// is a potential bottleneck for the editor type metric.
+	const textContent = useMemo( () => {
+		if ( isCollapsed( record ) ) {
+			return getTextContent( slice( record, 0 ) );
+		}
+	}, [ record ] );
 
 	useEffect( () => {
 		if ( ! textContent ) {
@@ -325,7 +329,8 @@ function useAutocomplete( {
 				// Ex: "Some text @marcelo sekkkk" <--- "kkkk" caused a mismatch, but
 				// if the user presses backspace here, it will show the completion popup again.
 				const matchingWhileBackspacing =
-					backspacing && textWithoutTrigger.split( /\s/ ).length <= 3;
+					backspacing.current &&
+					textWithoutTrigger.split( /\s/ ).length <= 3;
 
 				if (
 					mismatch &&
@@ -370,6 +375,9 @@ function useAutocomplete( {
 				: AutocompleterUI
 		);
 		setFilterValue( query );
+		// 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 ] || {};

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

@@ -35,9 +35,8 @@ const BaseControlWithTextarea: ComponentStory< typeof BaseControl > = ( {
 	);
 };
 
-export const Default: ComponentStory<
-	typeof BaseControl
-> = BaseControlWithTextarea.bind( {} );
+export const Default: ComponentStory< typeof BaseControl > =
+	BaseControlWithTextarea.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
 	id: 'textarea-default-1',

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

@@ -98,11 +98,11 @@ export function useBorderBoxControl(
 	const cx = useCx();
 	const classes = useMemo( () => {
 		return cx( styles.BorderBoxControl, className );
-	}, [ className ] );
+	}, [ cx, className ] );
 
 	const linkedControlClassName = useMemo( () => {
 		return cx( styles.LinkedBorderControl );
-	}, [] );
+	}, [ cx ] );
 
 	return {
 		...otherProps,

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

@@ -19,11 +19,8 @@ const BorderBoxControlLinkedButton = (
 	props: WordPressComponentProps< LinkedButtonProps, 'div' >,
 	forwardedRef: React.ForwardedRef< any >
 ) => {
-	const {
-		className,
-		isLinked,
-		...buttonProps
-	} = useBorderBoxControlLinkedButton( props );
+	const { className, isLinked, ...buttonProps } =
+		useBorderBoxControlLinkedButton( props );
 	const label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );
 
 	return (

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

@@ -29,6 +29,7 @@ const BorderBoxControlSplitControls = (
 		onChange,
 		popoverPlacement,
 		popoverOffset,
+		rightAlignedClassName,
 		value,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
@@ -42,6 +43,7 @@ const BorderBoxControlSplitControls = (
 				placement: popoverPlacement,
 				offset: popoverOffset,
 				anchorRef: containerRef,
+				__unstableShift: true,
 		  }
 		: undefined;
 
@@ -80,6 +82,7 @@ const BorderBoxControlSplitControls = (
 				{ ...sharedBorderControlProps }
 			/>
 			<BorderControl
+				className={ rightAlignedClassName }
 				hideLabelFromVision={ true }
 				label={ __( 'Right border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'right' ) }

package/src/border-box-control/border-box-control-split-controls/hook.ts

@@ -22,13 +22,27 @@ export function useBorderBoxControlSplitControls(
 
 	// Generate class names.
 	const cx = useCx();
+	const rtlWatchResult = rtl.watch();
 	const classes = useMemo( () => {
-		return cx( styles.BorderBoxControlSplitControls, className );
-	}, [ className, rtl.watch() ] );
+		return cx( styles.borderBoxControlSplitControls(), className );
+		// rtlWatchResult is needed to refresh styles when the writing direction changes
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ cx, className, rtlWatchResult ] );
 
 	const centeredClassName = useMemo( () => {
 		return cx( styles.CenteredBorderControl, className );
-	}, [] );
+	}, [ cx, className ] );
 
-	return { ...otherProps, centeredClassName, className: classes };
+	const rightAlignedClassName = useMemo( () => {
+		return cx( styles.rightBorderControl(), className );
+		// rtlWatchResult is needed to refresh styles when the writing direction changes
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ cx, className, rtlWatchResult ] );
+
+	return {
+		...otherProps,
+		centeredClassName,
+		className: classes,
+		rightAlignedClassName,
+	};
 }

package/src/border-box-control/border-box-control-visualizer/hook.ts

@@ -24,12 +24,15 @@ export function useBorderBoxControlVisualizer(
 
 	// Generate class names.
 	const cx = useCx();
+	const rtlWatchResult = rtl.watch();
 	const classes = useMemo( () => {
 		return cx(
-			styles.BorderBoxControlVisualizer( value, __next36pxDefaultSize ),
+			styles.borderBoxControlVisualizer( value, __next36pxDefaultSize ),
 			className
 		);
-	}, [ className, value, __next36pxDefaultSize, rtl.watch() ] );
+		// rtlWatchResult is needed to refresh styles when the writing direction changes
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ cx, className, value, __next36pxDefaultSize, rtlWatchResult ] );
 
 	return { ...otherProps, className: classes, value };
 }

package/src/border-box-control/styles.ts

@@ -43,7 +43,7 @@ const BorderBoxStyleWithFallback = ( border?: Border ) => {
 	return `${ color } ${ borderStyle } ${ clampedWidth }`;
 };
 
-export const BorderBoxControlVisualizer = (
+export const borderBoxControlVisualizer = (
 	borders?: Borders,
 	__next36pxDefaultSize?: boolean
 ) => {
@@ -64,7 +64,7 @@ export const BorderBoxControlVisualizer = (
 	`;
 };
 
-export const BorderBoxControlSplitControls = css`
+export const borderBoxControlSplitControls = () => css`
 	position: relative;
 	flex: 1;
 	${ rtl( { marginRight: space( 3 ) }, { marginLeft: space( 3 ) } )() }
@@ -74,3 +74,7 @@ export const CenteredBorderControl = css`
 	grid-column: span 2;
 	margin: 0 auto;
 `;
+
+export const rightBorderControl = () => css`
+	${ rtl( { marginLeft: 'auto' }, { marginRight: 'auto' } )() }
+`;

package/src/border-box-control/utils.ts

@@ -135,8 +135,11 @@ export const getShorthandBorderStyle = (
 		return fallbackBorder;
 	}
 
-	const { color: fallbackColor, style: fallbackStyle, width: fallbackWidth } =
-		fallbackBorder || {};
+	const {
+		color: fallbackColor,
+		style: fallbackStyle,
+		width: fallbackWidth,
+	} = fallbackBorder || {};
 
 	const {
 		color = fallbackColor,

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/border-control/hook.ts

@@ -56,15 +56,14 @@ export function useBorderControl(
 
 			onChange( newBorder );
 		},
-		[ onChange, shouldSanitizeBorder, sanitizeBorder ]
+		[ onChange, shouldSanitizeBorder ]
 	);
 
 	const onWidthChange = useCallback(
 		( newWidth?: string ) => {
 			const newWidthValue = newWidth === '' ? undefined : newWidth;
-			const [ parsedValue ] = parseQuantityAndUnitFromRawValue(
-				newWidth
-			);
+			const [ parsedValue ] =
+				parseQuantityAndUnitFromRawValue( newWidth );
 			const hasZeroWidth = parsedValue === 0;
 
 			const updatedBorder = { ...border, width: newWidthValue };
@@ -97,7 +96,13 @@ export function useBorderControl(
 
 			onBorderChange( updatedBorder );
 		},
-		[ border, hadPreviousZeroWidth, onBorderChange ]
+		[
+			border,
+			hadPreviousZeroWidth,
+			colorSelection,
+			styleSelection,
+			onBorderChange,
+		]
 	);
 
 	const onSliderChange = useCallback(

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/all-input-control.js

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
 /**
  * Internal dependencies
  */
@@ -14,6 +10,8 @@ import {
 	isValuesDefined,
 } from './utils';
 
+const noop = () => {};
+
 export default function AllInputControl( {
 	onChange = noop,
 	onFocus = noop,

package/src/box-control/axial-input-controls.js

@@ -115,12 +115,10 @@ export default function AxialInputControls( {
 			className="component-box-control__vertical-horizontal-input-controls"
 		>
 			{ filteredSides.map( ( side ) => {
-				const [
-					parsedQuantity,
-					parsedUnit,
-				] = parseQuantityAndUnitFromRawValue(
-					side === 'vertical' ? values.top : values.left
-				);
+				const [ parsedQuantity, parsedUnit ] =
+					parseQuantityAndUnitFromRawValue(
+						side === 'vertical' ? values.top : values.left
+					);
 				const selectedUnit =
 					side === 'vertical'
 						? selectedUnits.top