@wordpress/components 19.12.0 → 19.15.0

package/src/checkbox-control/index.tsx

@@ -66,9 +66,8 @@ export function CheckboxControl(
 	}
 
 	const [ showCheckedIcon, setShowCheckedIcon ] = useState( false );
-	const [ showIndeterminateIcon, setShowIndeterminateIcon ] = useState(
-		false
-	);
+	const [ showIndeterminateIcon, setShowIndeterminateIcon ] =
+		useState( false );
 
 	// Run the following callback every time the `ref` (and the additional
 	// dependencies) change.

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

@@ -53,9 +53,8 @@ const DefaultTemplate: ComponentStory< typeof CheckboxControl > = ( {
 	);
 };
 
-export const Default: ComponentStory<
-	typeof CheckboxControl
-> = DefaultTemplate.bind( {} );
+export const Default: ComponentStory< typeof CheckboxControl > =
+	DefaultTemplate.bind( {} );
 Default.args = {
 	label: 'Is author',
 	help: 'Is the user an author or not?',

package/src/checkbox-control/test/index.tsx

@@ -3,7 +3,6 @@
  */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,6 +15,8 @@ import { useState } from '@wordpress/element';
 import BaseCheckboxControl from '..';
 import type { CheckboxControlProps } from '../types';
 
+const noop = () => {};
+
 const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
 
 const CheckboxControl = ( props: Omit< CheckboxControlProps, 'onChange' > ) => {

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/hex-input.tsx

@@ -11,10 +11,10 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { InputControl } from '../input-control';
 import { Text } from '../text';
 import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
-import { ColorHexInputControl } from './styles';
 import { COLORS } from '../utils/colors-values';
 import type { StateReducer } from '../input-control/reducer/state';
 
@@ -49,7 +49,7 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 	};
 
 	return (
-		<ColorHexInputControl
+		<InputControl
 			prefix={
 				<Spacer
 					as={ Text }
@@ -66,6 +66,7 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 			label={ __( 'Hex color' ) }
 			hideLabelFromVision
 			__unstableStateReducer={ stateReducer }
+			__unstableInputWidth="9em"
 		/>
 	);
 };

package/src/color-picker/index.native.js

@@ -8,7 +8,7 @@ import namesPlugin from 'colord/plugins/names';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { BottomSheet } from '@wordpress/components';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
@@ -33,13 +33,15 @@ function ColorPicker( {
 	onHandleHardwareButtonPress,
 	bottomLabelText,
 } ) {
-	const didMount = useRef( false );
 	const isIOS = Platform.OS === 'ios';
 	const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
-	const { h: initH, s: initS, v: initV } =
-		! isGradientColor && activeColor
-			? colord( activeColor ).toHsv()
-			: { h: 0, s: 50, v: 50 };
+	const {
+		h: initH,
+		s: initS,
+		v: initV,
+	} = ! isGradientColor && activeColor
+		? colord( activeColor ).toHsv()
+		: { h: 0, s: 50, v: 50 };
 	const [ hue, setHue ] = useState( initH );
 	const [ sat, setSaturation ] = useState( initS / 100 );
 	const [ val, setValue ] = useState( initV / 100 );
@@ -74,19 +76,17 @@ function ColorPicker( {
 		styles.footerDark
 	);
 
-	const currentColor = colord( {
-		h: hue,
-		s: sat * 100,
-		v: val * 100,
-	} ).toHex();
+	const combineToHex = ( h = hue, s = sat, v = val ) =>
+		colord( { h, s: s * 100, v: v * 100 } ).toHex();
 
-	useEffect( () => {
-		if ( ! didMount.current ) {
-			didMount.current = true;
-			return;
-		}
-		setColor( currentColor );
-	}, [ currentColor ] );
+	const currentColor = combineToHex();
+
+	const updateColor = ( { hue: h, saturation: s, value: v } ) => {
+		if ( h !== undefined ) setHue( h );
+		if ( s !== undefined ) setSaturation( s );
+		if ( v !== undefined ) setValue( v );
+		setColor( combineToHex( h, s, v ) );
+	};
 
 	useEffect( () => {
 		shouldEnableBottomSheetMaxHeight( false );
@@ -101,17 +101,13 @@ function ColorPicker( {
 		if ( onHandleHardwareButtonPress ) {
 			onHandleHardwareButtonPress( onButtonPress );
 		}
+		// TODO: Revisit this to discover if there's a good reason for omitting
+		// the hook’s dependencies and running it a single time. Ideally there
+		// may be a way to refactor and obviate the disabled lint rule. If not,
+		// this comment should be replaced by one that explains the reasoning.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
-	function onHuePickerChange( { hue: h } ) {
-		setHue( h );
-	}
-
-	function onSatValPickerChange( { saturation: s, value: v } ) {
-		setSaturation( s );
-		setValue( v );
-	}
-
 	function onButtonPress( action ) {
 		onNavigationBack();
 		onHandleClosingBottomSheet( null );
@@ -126,16 +122,16 @@ function ColorPicker( {
 		<>
 			<HsvColorPicker
 				huePickerHue={ hue }
-				onHuePickerDragMove={ onHuePickerChange }
+				onHuePickerDragMove={ updateColor }
 				onHuePickerPress={
-					! isBottomSheetContentScrolling && onHuePickerChange
+					! isBottomSheetContentScrolling && updateColor
 				}
 				satValPickerHue={ hue }
 				satValPickerSaturation={ sat }
 				satValPickerValue={ val }
-				onSatValPickerDragMove={ onSatValPickerChange }
+				onSatValPickerDragMove={ updateColor }
 				onSatValPickerPress={
-					! isBottomSheetContentScrolling && onSatValPickerChange
+					! isBottomSheetContentScrolling && updateColor
 				}
 				onSatValPickerDragStart={ () => {
 					shouldEnableBottomSheetScroll( false );

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 }
@@ -52,9 +52,11 @@ export const InputWithSlider = ( {
 				min={ min }
 				max={ max }
 				value={ value }
+				// @ts-expect-error
+				// See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185
 				onChange={ onChange }
 				withInputField={ false }
 			/>
-		</Spacer>
+		</HStack>
 	);
 };

package/src/color-picker/styles.ts

@@ -12,12 +12,13 @@ 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,
 	Input,
 } from '../input-control/styles/input-control-styles';
-import InputControl from '../input-control';
 import CONFIG from '../utils/config-values';
 
 export const NumberControlWrapper = styled( NumberControl )`
@@ -36,6 +37,7 @@ export const SelectControl = styled( InnerSelectControl )`
 
 export const RangeControl = styled( InnerRangeControl )`
 	flex: 1;
+	margin-right: ${ space( 2 ) };
 
 	${ StyledField } {
 		margin-bottom: 0;
@@ -58,7 +60,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 +87,7 @@ export const ColorfulWrapper = styled.div`
 		align-items: center;
 		width: 216px;
 		height: auto;
+		overflow: hidden;
 	}
 
 	.react-colorful__saturation {
@@ -121,7 +139,3 @@ export const CopyButton = styled( Button )`
 		}
 	}
 `;
-
-export const ColorHexInputControl = styled( InputControl )`
-	width: 8em;
-`;

package/src/color-picker/use-deprecated-props.ts

@@ -16,7 +16,7 @@ import memoize from 'memize';
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -73,16 +73,14 @@ function isLegacyProps( props: any ): props is LegacyProps {
 	);
 }
 
-function getColorFromLegacyProps( props: LegacyProps ): string | undefined {
-	if ( typeof props?.color === 'undefined' ) {
-		return undefined;
-	}
-	if ( typeof props.color === 'string' ) {
-		return props.color;
-	}
-	if ( props.color.hex ) {
-		return props.color.hex;
-	}
+function getColorFromLegacyProps(
+	color: LegacyProps[ 'color' ]
+): string | undefined {
+	if ( color === undefined ) return;
+
+	if ( typeof color === 'string' ) return color;
+
+	if ( color.hex ) return color.hex;
 
 	return undefined;
 }
@@ -109,41 +107,24 @@ const transformColorStringToLegacyColor = memoize(
 export function useDeprecatedProps(
 	props: LegacyProps | ColorPickerProps
 ): ColorPickerProps {
-	const onChange = useCallback(
+	const { onChangeComplete } = props as LegacyProps;
+	const legacyChangeHandler = useCallback(
 		( color: string ) => {
-			if ( isLegacyProps( props ) ) {
-				return props.onChangeComplete(
-					transformColorStringToLegacyColor( color )
-				);
-			}
-
-			return props.onChange?.( color );
+			onChangeComplete( transformColorStringToLegacyColor( color ) );
 		},
-		[
-			( props as LegacyProps ).onChangeComplete,
-			( props as ColorPickerProps ).onChange,
-		]
+		[ onChangeComplete ]
 	);
-
-	const color = useMemo( () => {
-		return isLegacyProps( props )
-			? getColorFromLegacyProps( props )
-			: props.color;
-	}, [ props.color ] );
-
-	const enableAlpha = useMemo( () => {
-		return isLegacyProps( props )
-			? ! props.disableAlpha
-			: props.enableAlpha;
-	}, [
-		( props as LegacyProps ).disableAlpha,
-		( props as ColorPickerProps ).enableAlpha,
-	] );
-
+	if ( isLegacyProps( props ) ) {
+		return {
+			color: getColorFromLegacyProps( props.color ),
+			enableAlpha: ! props.disableAlpha,
+			onChange: legacyChangeHandler,
+		};
+	}
 	return {
-		...( isLegacyProps( props ) ? {} : props ),
-		onChange,
-		color,
-		enableAlpha,
+		...props,
+		color: props.color as ColorPickerProps[ 'color' ],
+		enableAlpha: ( props as ColorPickerProps ).enableAlpha,
+		onChange: ( props as ColorPickerProps ).onChange,
 	};
 }

package/src/combobox-control/index.js

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop, deburr } from 'lodash';
+import removeAccents from 'remove-accents';
+
 /**
  * WordPress dependencies
  */
@@ -22,13 +23,16 @@ import { closeSmall } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import { InputWrapperFlex } from './styles';
 import TokenInput from '../form-token-field/token-input';
 import SuggestionsList from '../form-token-field/suggestions-list';
 import BaseControl from '../base-control';
 import Button from '../button';
-import { Flex, FlexBlock, FlexItem } from '../flex';
+import { FlexBlock, FlexItem } from '../flex';
 import withFocusOutside from '../higher-order/with-focus-outside';
 
+const noop = () => {};
+
 const DetectOutside = withFocusOutside(
 	class extends Component {
 		handleFocusOutside( event ) {
@@ -42,6 +46,7 @@ const DetectOutside = withFocusOutside(
 );
 
 function ComboboxControl( {
+	__next36pxDefaultSize,
 	value,
 	label,
 	options,
@@ -57,7 +62,10 @@ function ComboboxControl( {
 } ) {
 	const currentOption = options.find( ( option ) => option.value === value );
 	const currentLabel = currentOption?.label ?? '';
-	const instanceId = useInstanceId( ComboboxControl );
+	// Use a custom prefix when generating the `instanceId` to avoid having
+	// duplicate input IDs when rendering this component and `FormTokenField`
+	// in the same page (see https://github.com/WordPress/gutenberg/issues/42112).
+	const instanceId = useInstanceId( ComboboxControl, 'combobox-control' );
 	const [ selectedSuggestion, setSelectedSuggestion ] = useState(
 		currentOption || null
 	);
@@ -69,9 +77,9 @@ function ComboboxControl( {
 	const matchingSuggestions = useMemo( () => {
 		const startsWithMatch = [];
 		const containsMatch = [];
-		const match = deburr( inputValue.toLocaleLowerCase() );
+		const match = removeAccents( inputValue.toLocaleLowerCase() );
 		options.forEach( ( option ) => {
-			const index = deburr( option.label )
+			const index = removeAccents( option.label )
 				.toLocaleLowerCase()
 				.indexOf( match );
 			if ( index === 0 ) {
@@ -166,7 +174,7 @@ function ComboboxControl( {
 
 	const handleOnReset = () => {
 		onChange( null );
-		inputContainer.current.input.focus();
+		inputContainer.current.focus();
 	};
 
 	// Update current selections when the filter input changes.
@@ -223,7 +231,9 @@ function ComboboxControl( {
 					tabIndex="-1"
 					onKeyDown={ onKeyDown }
 				>
-					<Flex>
+					<InputWrapperFlex
+						__next36pxDefaultSize={ __next36pxDefaultSize }
+					>
 						<FlexBlock>
 							<TokenInput
 								className="components-combobox-control__input"
@@ -255,7 +265,7 @@ function ComboboxControl( {
 								/>
 							</FlexItem>
 						) }
-					</Flex>
+					</InputWrapperFlex>
 					{ isExpanded && (
 						<SuggestionsList
 							instanceId={ instanceId }