@wordpress/components 21.3.0 → 22.1.0

package/src/angle-picker-control/stories/index.js

@@ -11,6 +11,9 @@ import AnglePickerControl from '../';
 export default {
 	title: 'Components/AnglePickerControl',
 	component: AnglePickerControl,
+	argTypes: {
+		label: { control: { type: 'text' } },
+	},
 };
 
 const AnglePickerWithState = ( args ) => {

package/src/autocomplete/autocompleter-ui.js

@@ -7,7 +7,7 @@ import { map } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useLayoutEffect } from '@wordpress/element';
+import { useLayoutEffect, useRef, useEffect } from '@wordpress/element';
 import { useAnchor } from '@wordpress/rich-text';
 
 /**
@@ -31,6 +31,7 @@ export function getAutoCompleterUI( autocompleter ) {
 		onChangeOptions,
 		onSelect,
 		onReset,
+		reset,
 		value,
 		contentRef,
 	} ) {
@@ -40,6 +41,10 @@ export function getAutoCompleterUI( autocompleter ) {
 			value,
 		} );
 
+		const popoverRef = useRef();
+
+		useOnClickOutside( popoverRef, reset );
+
 		useLayoutEffect( () => {
 			onChangeOptions( items );
 			// Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst.
@@ -55,9 +60,10 @@ export function getAutoCompleterUI( autocompleter ) {
 			<Popover
 				focusOnMount={ false }
 				onClose={ onReset }
-				position="top right"
+				placement="top-start"
 				className="components-autocomplete__popover"
 				anchor={ popoverAnchor }
+				ref={ popoverRef }
 			>
 				<div
 					id={ listBoxId }
@@ -90,3 +96,24 @@ export function getAutoCompleterUI( autocompleter ) {
 
 	return AutocompleterUI;
 }
+
+function useOnClickOutside( ref, handler ) {
+	useEffect( () => {
+		const listener = ( event ) => {
+			// Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element
+			if ( ! ref.current || ref.current.contains( event.target ) ) {
+				return;
+			}
+			handler( event );
+		};
+		document.addEventListener( 'mousedown', listener );
+		document.addEventListener( 'touchstart', listener );
+		return () => {
+			document.removeEventListener( 'mousedown', listener );
+			document.removeEventListener( 'touchstart', listener );
+		};
+		// Disable reason: `ref` is a ref object and should not be included in a
+		// hook's dependency list.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ handler ] );
+}

package/src/autocomplete/index.js

@@ -212,7 +212,7 @@ function useAutocomplete( {
 	}
 
 	function handleKeyDown( event ) {
-		backspacing.current = event.code === 'Backspace';
+		backspacing.current = event.key === 'Backspace';
 
 		if ( ! autocompleter ) {
 			return;
@@ -220,10 +220,19 @@ function useAutocomplete( {
 		if ( filteredOptions.length === 0 ) {
 			return;
 		}
-		if ( event.defaultPrevented ) {
+
+		if (
+			event.defaultPrevented ||
+			// Ignore keydowns from IMEs
+			event.isComposing ||
+			// Workaround for Mac Safari where the final Enter/Backspace of an IME composition
+			// is `isComposing=false`, even though it's technically still part of the composition.
+			// These can only be detected by keyCode.
+			event.keyCode === 229
+		) {
 			return;
 		}
-		switch ( event.code ) {
+		switch ( event.key ) {
 			case 'ArrowUp':
 				setSelectedIndex(
 					( selectedIndex === 0

package/src/autocomplete/style.scss

@@ -11,6 +11,6 @@
 	width: 100%;
 
 	&.is-selected {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 	}
 }

package/src/autocomplete/test/index.js

@@ -0,0 +1,89 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { getAutoCompleterUI } from '../autocompleter-ui';
+
+describe( 'AutocompleterUI', () => {
+	describe( 'click outside behavior', () => {
+		it( 'should call reset function when a click on another element occurs', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			const resetSpy = jest.fn();
+
+			const autocompleter = {
+				name: 'fruit',
+				// The prefix that triggers this completer
+				triggerPrefix: '~',
+				// Mock useItems function to return a autocomplete item.
+				useItems: () => {
+					return [
+						[
+							{
+								isDisabled: false,
+								key: 'Apple',
+								value: 'Apple',
+								label: (
+									<span>
+										<span className="icon">🍎</span>
+										{ 'Apple' }
+									</span>
+								),
+							},
+						],
+					];
+				},
+			};
+
+			const AutocompleterUI = getAutoCompleterUI( autocompleter );
+
+			const OtherElement = <div>Other Element</div>;
+
+			const Container = () => {
+				const contentRef = useRef();
+
+				return (
+					<div>
+						<AutocompleterUI
+							className={ 'test' }
+							filterValue={ '~' }
+							instanceId={ '1' }
+							listBoxId={ '1' }
+							selectedIndex={ 0 }
+							onChangeOptions={ () => {} }
+							onSelect={ () => {} }
+							value={ { visual: '🍎', name: 'Apple', id: 1 } }
+							contentRef={ contentRef }
+							reset={ resetSpy }
+						/>
+						{ OtherElement }
+					</div>
+				);
+			};
+
+			render( <Container /> );
+
+			// Click on autocompleter.
+			await user.click( screen.getByText( 'Apple' ) );
+
+			expect( resetSpy ).toHaveBeenCalledTimes( 0 );
+
+			// Click on other element out side of the tree.
+			await user.click( screen.getByText( 'Other Element' ) );
+
+			expect( resetSpy ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+} );

package/src/base-field/test/__snapshots__/index.js.snap

@@ -127,13 +127,15 @@ exports[`base field should render correctly 1`] = `
 
 .emotion-0:focus,
 .emotion-0[data-focused='true'] {
-  border-color: var( --wp-admin-theme-color, #007cba);
-  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 
-<div
-  class="components-flex components-base-field emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="BaseField"
-/>
+<div>
+  <div
+    class="components-flex components-base-field emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="BaseField"
+  />
+</div>
 `;

package/src/base-field/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -15,33 +15,45 @@ const TestField = ( props ) => {
 
 describe( 'base field', () => {
 	it( 'should render correctly', () => {
-		const base = render( <TestField /> ).container;
-		expect( base.firstChild ).toMatchSnapshot();
+		const { container } = render( <TestField /> );
+		expect( container ).toMatchSnapshot();
 	} );
 
 	describe( 'props', () => {
 		it( 'should render error styles', () => {
-			const base = render( <TestField /> ).container;
-			const { container } = render( <TestField hasError /> );
-			expect( container.firstChild ).toMatchStyleDiffSnapshot(
-				base.firstChild
+			render(
+				<>
+					<TestField data-testid="base-field" />
+					<TestField hasError data-testid="base-field-error" />
+				</>
 			);
+			expect(
+				screen.getByTestId( 'base-field-error' )
+			).toMatchStyleDiffSnapshot( screen.getByTestId( 'base-field' ) );
 		} );
 
 		it( 'should render inline styles', () => {
-			const base = render( <TestField /> ).container;
-			const { container } = render( <TestField isInline /> );
-			expect( container.firstChild ).toMatchStyleDiffSnapshot(
-				base.firstChild
+			render(
+				<>
+					<TestField data-testid="base-field" />
+					<TestField isInline data-testid="base-field-inline" />
+				</>
 			);
+			expect(
+				screen.getByTestId( 'base-field-inline' )
+			).toMatchStyleDiffSnapshot( screen.getByTestId( 'base-field' ) );
 		} );
 
 		it( 'should render subtle styles', () => {
-			const base = render( <TestField /> ).container;
-			const { container } = render( <TestField isSubtle /> );
-			expect( container.firstChild ).toMatchStyleDiffSnapshot(
-				base.firstChild
+			render(
+				<>
+					<TestField data-testid="base-field" />
+					<TestField isSubtle data-testid="base-field-subtle" />
+				</>
 			);
+			expect(
+				screen.getByTestId( 'base-field-subtle' )
+			).toMatchStyleDiffSnapshot( screen.getByTestId( 'base-field' ) );
 		} );
 	} );
 

package/src/border-box-control/border-box-control/README.md

@@ -68,7 +68,7 @@ a `SlotFillProvider` overall.
 
 ## Props
 
-### `colors`: `Array`
+### `colors`: `( PaletteObject | ColorObject )[]`
 
 An array of color definitions. This may also be a multi-dimensional array where
 colors are organized by multiple origins.
@@ -76,6 +76,7 @@ colors are organized by multiple origins.
 Each color may be an object containing a `name` and `color` value.
 
 - Required: No
+- Default: `[]`
 
 ### `disableCustomColors`: `boolean`
 
@@ -89,6 +90,7 @@ This controls whether the alpha channel will be offered when selecting
 custom colors.
 
 - Required: No
+- Default: `false`
 
 ### `enableStyle`: `boolean`
 
@@ -124,7 +126,7 @@ _Note: The will be `undefined` if a user clears all borders._
 
 ### `popoverPlacement`: `string`
 
-The position of the color popover relative to the control wrapper.
+The position of the color popovers relative to the control wrapper.
 
 By default, popovers are displayed relative to the button that initiated the popover. By supplying a popover placement, you force the popover to display in a specific location.
 
@@ -134,10 +136,18 @@ The available base placements are 'top', 'right', 'bottom', 'left'. Each of thes
 
 ### `popoverOffset`: `number`
 
-Works in conjunctions with `popoverPlacement` and allows leaving a space between the color popover and the control wrapper.
+The space between the popover and the control wrapper.
 
 - Required: No
 
+### `size`: `string`
+
+Size of the control.
+
+- Required: No
+- Default: `default`
+- Allowed values: `default`, `__unstable-large`
+
 ### `value`: `Object`
 
 An object representing the current border configuration.
@@ -158,17 +168,3 @@ const splitBorders = {
 ```
 
 - Required: No
-
-### `__experimentalHasMultipleOrigins`: `boolean`
-
-This is passed on to the color related sub-components which need to be made
-aware of whether the colors prop contains multiple origins.
-
-- Required: No
-
-### `__experimentalIsRenderedInSidebar`: `boolean`
-
-This is passed on to the color related sub-components so they may render more
-effectively when used within a sidebar.
-
-- Required: No

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

@@ -11,7 +11,6 @@ import { useMergeRefs } from '@wordpress/compose';
 import BorderBoxControlLinkedButton from '../border-box-control-linked-button';
 import BorderBoxControlSplitControls from '../border-box-control-split-controls';
 import { BorderControl } from '../../border-control';
-import { HStack } from '../../h-stack';
 import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import { View } from '../../view';
 import { VisuallyHidden } from '../../visually-hidden';
@@ -38,8 +37,8 @@ const BorderLabel = ( props: LabelProps ) => {
 	);
 };
 
-const BorderBoxControl = (
-	props: WordPressComponentProps< BorderBoxControlProps, 'div' >,
+const UnconnectedBorderBoxControl = (
+	props: WordPressComponentProps< BorderBoxControlProps, 'div', false >,
 	forwardedRef: React.ForwardedRef< any >
 ) => {
 	const {
@@ -59,11 +58,12 @@ const BorderBoxControl = (
 		onSplitChange,
 		popoverPlacement,
 		popoverOffset,
+		size,
 		splitValue,
 		toggleLinked,
+		wrapperClassName,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
-		__next36pxDefaultSize = false,
 		...otherProps
 	} = useBorderBoxControl( props );
 
@@ -96,7 +96,7 @@ const BorderBoxControl = (
 				label={ label }
 				hideLabelFromVision={ hideLabelFromVision }
 			/>
-			<HStack alignment={ 'start' } expanded={ true } spacing={ 0 }>
+			<View className={ wrapperClassName }>
 				{ isLinked ? (
 					<BorderControl
 						className={ linkedControlClassName }
@@ -113,14 +113,16 @@ const BorderBoxControl = (
 						shouldSanitizeBorder={ false } // This component will handle that.
 						value={ linkedValue }
 						withSlider={ true }
-						width={ '110px' }
+						width={
+							size === '__unstable-large' ? '116px' : '110px'
+						}
 						__experimentalHasMultipleOrigins={
 							__experimentalHasMultipleOrigins
 						}
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
-						__next36pxDefaultSize={ __next36pxDefaultSize }
+						size={ size }
 					/>
 				) : (
 					<BorderBoxControlSplitControls
@@ -138,22 +140,71 @@ const BorderBoxControl = (
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
-						__next36pxDefaultSize={ __next36pxDefaultSize }
+						size={ size }
 					/>
 				) }
 				<BorderBoxControlLinkedButton
 					onClick={ toggleLinked }
 					isLinked={ isLinked }
-					__next36pxDefaultSize={ __next36pxDefaultSize }
+					size={ size }
 				/>
-			</HStack>
+			</View>
 		</View>
 	);
 };
 
-const ConnectedBorderBoxControl = contextConnect(
-	BorderBoxControl,
+/**
+ * The `BorderBoxControl` effectively has two view states. The first, a "linked"
+ * view, allows configuration of a flat border via a single `BorderControl`.
+ * The second, a "split" view, contains a `BorderControl` for each side
+ * as well as a visualizer for the currently selected borders. Each view also
+ * contains a button to toggle between the two.
+ *
+ * When switching from the "split" view to "linked", if the individual side
+ * borders are not consistent, the "linked" view will display any border
+ * properties selections that are consistent while showing a mixed state for
+ * those that aren't. For example, if all borders had the same color and style
+ * but different widths, then the border dropdown in the "linked" view's
+ * `BorderControl` would show that consistent color and style but the "linked"
+ * view's width input would show "Mixed" placeholder text.
+ *
+ * ```jsx
+ * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
+ * import { __ } from '@wordpress/i18n';
+ *
+ * const colors = [
+ * 	{ name: 'Blue 20', color: '#72aee6' },
+ * 	// ...
+ * ];
+ *
+ * const MyBorderBoxControl = () => {
+ * 	const defaultBorder = {
+ * 		color: '#72aee6',
+ * 		style: 'dashed',
+ * 		width: '1px',
+ * 	};
+ * 	const [ borders, setBorders ] = useState( {
+ * 		top: defaultBorder,
+ * 		right: defaultBorder,
+ * 		bottom: defaultBorder,
+ * 		left: defaultBorder,
+ * 	} );
+ * 	const onChange = ( newBorders ) => setBorders( newBorders );
+ *
+ * 	return (
+ * 		<BorderBoxControl
+ * 			colors={ colors }
+ * 			label={ __( 'Borders' ) }
+ * 			onChange={ onChange }
+ * 			value={ borders }
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+export const BorderBoxControl = contextConnect(
+	UnconnectedBorderBoxControl,
 	'BorderBoxControl'
 );
 
-export default ConnectedBorderBoxControl;
+export default BorderBoxControl;

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

@@ -25,10 +25,18 @@ import type { Borders, BorderSide, BorderBoxControlProps } from '../types';
 export function useBorderBoxControl(
 	props: WordPressComponentProps< BorderBoxControlProps, 'div' >
 ) {
-	const { className, onChange, value, ...otherProps } = useContextSystem(
-		props,
-		'BorderBoxControl'
-	);
+	const {
+		className,
+		colors = [],
+		onChange,
+		enableAlpha = false,
+		enableStyle = true,
+		size = 'default',
+		value,
+		__experimentalHasMultipleOrigins = false,
+		__experimentalIsRenderedInSidebar = false,
+		...otherProps
+	} = useContextSystem( props, 'BorderBoxControl' );
 
 	const mixedBorders = hasMixedBorders( value );
 	const splitBorders = hasSplitBorders( value );
@@ -100,17 +108,24 @@ export function useBorderBoxControl(
 
 	const cx = useCx();
 	const classes = useMemo( () => {
-		return cx( styles.BorderBoxControl, className );
+		return cx( styles.borderBoxControl, className );
 	}, [ cx, className ] );
 
 	const linkedControlClassName = useMemo( () => {
-		return cx( styles.LinkedBorderControl );
+		return cx( styles.linkedBorderControl() );
+	}, [ cx ] );
+
+	const wrapperClassName = useMemo( () => {
+		return cx( styles.wrapper );
 	}, [ cx ] );
 
 	return {
 		...otherProps,
 		className: classes,
+		colors,
 		disableUnits: mixedBorders && ! hasWidthValue,
+		enableAlpha,
+		enableStyle,
 		hasMixedBorders: mixedBorders,
 		isLinked,
 		linkedControlClassName,
@@ -118,6 +133,10 @@ export function useBorderBoxControl(
 		onSplitChange,
 		toggleLinked,
 		linkedValue,
+		size,
 		splitValue,
+		wrapperClassName,
+		__experimentalHasMultipleOrigins,
+		__experimentalIsRenderedInSidebar,
 	};
 }

package/src/border-box-control/border-box-control-linked-button/hook.ts

@@ -17,18 +17,15 @@ export function useBorderBoxControlLinkedButton(
 ) {
 	const {
 		className,
-		__next36pxDefaultSize = false,
+		size = 'default',
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControlLinkedButton' );
 
 	// Generate class names.
 	const cx = useCx();
 	const classes = useMemo( () => {
-		return cx(
-			styles.BorderBoxControlLinkedButton( __next36pxDefaultSize ),
-			className
-		);
-	}, [ className, cx, __next36pxDefaultSize ] );
+		return cx( styles.borderBoxControlLinkedButton( size ), className );
+	}, [ className, cx, size ] );
 
 	return { ...otherProps, className: classes };
 }

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

@@ -31,10 +31,10 @@ const BorderBoxControlSplitControls = (
 		popoverPlacement,
 		popoverOffset,
 		rightAlignedClassName,
+		size = 'default',
 		value,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
-		__next36pxDefaultSize,
 		...otherProps
 	} = useBorderBoxControlSplitControls( props );
 
@@ -67,17 +67,14 @@ const BorderBoxControlSplitControls = (
 		isCompact: true,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
-		__next36pxDefaultSize,
+		size,
 	};
 
 	const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );
 
 	return (
 		<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>
-			<BorderBoxControlVisualizer
-				value={ value }
-				__next36pxDefaultSize={ __next36pxDefaultSize }
-			/>
+			<BorderBoxControlVisualizer value={ value } size={ size } />
 			<BorderControl
 				className={ centeredClassName }
 				hideLabelFromVision={ true }

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

@@ -8,41 +8,48 @@ import { useMemo } from '@wordpress/element';
  */
 import * as styles from '../styles';
 import { useContextSystem, WordPressComponentProps } from '../../ui/context';
-import { useCx, rtl } from '../../utils/';
+import { useCx } from '../../utils/';
 
 import type { SplitControlsProps } from '../types';
 
 export function useBorderBoxControlSplitControls(
 	props: WordPressComponentProps< SplitControlsProps, 'div' >
 ) {
-	const { className, ...otherProps } = useContextSystem(
-		props,
-		'BorderBoxControlSplitControls'
-	);
+	const {
+		className,
+		colors = [],
+		enableAlpha = false,
+		enableStyle = true,
+		size = 'default',
+		__experimentalHasMultipleOrigins = false,
+		__experimentalIsRenderedInSidebar = false,
+		...otherProps
+	} = useContextSystem( props, 'BorderBoxControlSplitControls' );
 
 	// Generate class names.
 	const cx = useCx();
-	const rtlWatchResult = rtl.watch();
 	const classes = useMemo( () => {
-		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 ] );
+		return cx( styles.borderBoxControlSplitControls( size ), className );
+	}, [ cx, className, size ] );
 
 	const centeredClassName = useMemo( () => {
-		return cx( styles.CenteredBorderControl, className );
+		return cx( styles.centeredBorderControl, className );
 	}, [ cx, className ] );
 
 	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 ] );
+	}, [ cx, className ] );
 
 	return {
 		...otherProps,
 		centeredClassName,
 		className: classes,
+		colors,
+		enableAlpha,
+		enableStyle,
 		rightAlignedClassName,
+		size,
+		__experimentalHasMultipleOrigins,
+		__experimentalIsRenderedInSidebar,
 	};
 }