@wordpress/components 19.12.0 → 19.15.0

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,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/get-default-use-items.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { debounce, deburr, escapeRegExp } from 'lodash';
+import { debounce, escapeRegExp } from 'lodash';
+import removeAccents from 'remove-accents';
 
 /**
  * WordPress dependencies
@@ -20,7 +21,7 @@ function filterOptions( search, options = [], maxResults = 10 ) {
 		}
 
 		const isMatch = keywords.some( ( keyword ) =>
-			search.test( deburr( keyword ) )
+			search.test( removeAccents( keyword ) )
 		);
 		if ( ! isMatch ) {
 			continue;

package/src/autocomplete/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { escapeRegExp, find, deburr } from 'lodash';
+import { escapeRegExp, find } from 'lodash';
+import removeAccents from 'remove-accents';
 
 /**
  * WordPress dependencies
@@ -284,7 +285,7 @@ function useAutocomplete( {
 			return;
 		}
 
-		const text = deburr( textContent );
+		const text = removeAccents( textContent );
 		const textAfterSelection = getTextContent(
 			slice( record, undefined, getTextContent( record ).length )
 		);
@@ -375,14 +376,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/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-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

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

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

@@ -62,9 +62,8 @@ export function useBorderControl(
 	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 };
@@ -107,7 +106,7 @@ export function useBorderControl(
 	);
 
 	const onSliderChange = useCallback(
-		( value: string ) => {
+		( value?: number ) => {
 			onWidthChange( `${ value }${ widthUnit }` );
 		},
 		[ onWidthChange, widthUnit ]

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

package/src/box-control/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -39,6 +34,8 @@ const defaultInputProps = {
 	min: 0,
 };
 
+const noop = () => {};
+
 function useUniqueId( idProp ) {
 	const instanceId = useInstanceId( BoxControl, 'inspector-box-control' );
 
@@ -120,7 +117,7 @@ export default function BoxControl( {
 	};
 
 	return (
-		<Root id={ id } role="region" aria-labelledby={ headingId }>
+		<Root id={ id } role="group" aria-labelledby={ headingId }>
 			<Header className="component-box-control__header">
 				<FlexItem>
 					<Text

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -11,6 +6,8 @@ import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import { ALL_SIDES, LABELS } from './utils';
 import { LayoutContainer, Layout } from './styles/box-control-styles';
 
+const noop = () => {};
+
 export default function BoxInputControls( {
 	onChange = noop,
 	onFocus = noop,
@@ -38,37 +35,39 @@ export default function BoxInputControls( {
 		onChange( nextValues );
 	};
 
-	const createHandleOnChange = ( side ) => ( next, { event } ) => {
-		const { altKey } = event;
-		const nextValues = { ...values };
-		const isNumeric = ! isNaN( parseFloat( next ) );
-		const nextValue = isNumeric ? next : undefined;
+	const createHandleOnChange =
+		( side ) =>
+		( next, { event } ) => {
+			const { altKey } = event;
+			const nextValues = { ...values };
+			const isNumeric = ! isNaN( parseFloat( next ) );
+			const nextValue = isNumeric ? next : undefined;
 
-		nextValues[ side ] = nextValue;
+			nextValues[ side ] = nextValue;
 
-		/**
-		 * Supports changing pair sides. For example, holding the ALT key
-		 * when changing the TOP will also update BOTTOM.
-		 */
-		if ( altKey ) {
-			switch ( side ) {
-				case 'top':
-					nextValues.bottom = nextValue;
-					break;
-				case 'bottom':
-					nextValues.top = nextValue;
-					break;
-				case 'left':
-					nextValues.right = nextValue;
-					break;
-				case 'right':
-					nextValues.left = nextValue;
-					break;
+			/**
+			 * Supports changing pair sides. For example, holding the ALT key
+			 * when changing the TOP will also update BOTTOM.
+			 */
+			if ( altKey ) {
+				switch ( side ) {
+					case 'top':
+						nextValues.bottom = nextValue;
+						break;
+					case 'bottom':
+						nextValues.top = nextValue;
+						break;
+					case 'left':
+						nextValues.right = nextValue;
+						break;
+					case 'right':
+						nextValues.left = nextValue;
+						break;
+				}
 			}
-		}
 
-		handleOnChange( nextValues );
-	};
+			handleOnChange( nextValues );
+		};
 
 	const createHandleOnUnitChange = ( side ) => ( next ) => {
 		const newUnits = { ...selectedUnits };
@@ -93,10 +92,8 @@ export default function BoxInputControls( {
 				className="component-box-control__input-controls"
 			>
 				{ filteredSides.map( ( side ) => {
-					const [
-						parsedQuantity,
-						parsedUnit,
-					] = parseQuantityAndUnitFromRawValue( values[ side ] );
+					const [ parsedQuantity, parsedUnit ] =
+						parseQuantityAndUnitFromRawValue( values[ side ] );
 
 					const computedUnit = values[ side ]
 						? parsedUnit

package/src/box-control/unit-control.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import { useHover } from '@use-gesture/react';
 
 /**
@@ -10,6 +9,8 @@ import { useHover } from '@use-gesture/react';
 import BaseTooltip from '../tooltip';
 import { UnitControlWrapper, UnitControl } from './styles/box-control-styles';
 
+const noop = () => {};
+
 export default function BoxUnitControl( {
 	isFirst,
 	isLast,

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/button/README.md

@@ -62,7 +62,7 @@ Since a high-emphasis button commands the most attention, a layout should contai
 
 #### Text label
 
-All button types use text labels to describe the action that happens when a user taps a button. If there’s no text label, there should be an icon to signify what the button does.
+All button types use text labels to describe the action that happens when a user taps a button. If there’s no text label, there needs to be a [label](#label) added and an icon to signify what the button does.
 
 ![](https://make.wordpress.org/design/files/2019/03/do-link-button.png)
 

package/src/button/index.native.js

@@ -8,7 +8,6 @@ import {
 	View,
 	Platform,
 } from 'react-native';
-import { isArray } from 'lodash';
 import { LongPressGestureHandler, State } from 'react-native-gesture-handler';
 
 /**
@@ -153,7 +152,7 @@ export function Button( props ) {
 			( !! label &&
 				// The children are empty and...
 				( ! children ||
-					( isArray( children ) && ! children.length ) ) &&
+					( Array.isArray( children ) && ! children.length ) ) &&
 				// The tooltip is not explicitly disabled.
 				false !== showTooltip ) );
 

package/src/card/stories/index.js

@@ -74,7 +74,8 @@ export const _default = () => {
 		isBorderless: select(
 			'CardHeader: isBorderless',
 			{
-				'unset (defaults to the value set on the <Card> parent)': PROP_UNSET,
+				'unset (defaults to the value set on the <Card> parent)':
+					PROP_UNSET,
 				true: true,
 				false: false,
 			},
@@ -89,7 +90,8 @@ export const _default = () => {
 		size: select(
 			'CardHeader: size',
 			{
-				'unset (defaults to the value set on the <Card> parent)': PROP_UNSET,
+				'unset (defaults to the value set on the <Card> parent)':
+					PROP_UNSET,
 				large: 'large',
 				medium: 'medium',
 				small: 'small',
@@ -105,7 +107,8 @@ export const _default = () => {
 		size: select(
 			'CardBody: size',
 			{
-				'unset (defaults to the value set on the <Card> parent)': PROP_UNSET,
+				'unset (defaults to the value set on the <Card> parent)':
+					PROP_UNSET,
 				large: 'large',
 				medium: 'medium',
 				small: 'small',
@@ -120,7 +123,8 @@ export const _default = () => {
 		isBorderless: select(
 			'CardFooter: isBorderless',
 			{
-				'unset (defaults to the value set on the <Card> parent)': PROP_UNSET,
+				'unset (defaults to the value set on the <Card> parent)':
+					PROP_UNSET,
 				true: true,
 				false: false,
 			},
@@ -148,7 +152,8 @@ export const _default = () => {
 		size: select(
 			'CardFooter: size',
 			{
-				'unset (defaults to the value set on the <Card> parent)': PROP_UNSET,
+				'unset (defaults to the value set on the <Card> parent)':
+					PROP_UNSET,
 				large: 'large',
 				medium: 'medium',
 				small: 'small',