@wordpress/components 19.1.2 → 19.2.1-next.33ec3857e2.0

package/src/divider/test/__snapshots__/index.js.snap

@@ -2,10 +2,10 @@
 
 exports[`props should render correctly 1`] = `
 .emotion-0 {
-  border-color: rgba(0, 0, 0, 0.1);
-  border-width: 0 0 1px 0;
-  height: 0;
+  border: 0;
   margin: 0;
+  border-bottom: 1px solid currentColor;
+  height: 0;
   width: auto;
 }
 
@@ -25,8 +25,8 @@ Snapshot Diff:
 
 @@ -2,10 +2,8 @@
     Object {
-      "border-color": "rgba(0, 0, 0, 0.1)",
-      "border-width": "0 0 1px 0",
+      "border": "0",
+      "border-bottom": "1px solid currentColor",
       "height": "0",
       "margin": "0",
 -     "margin-bottom": "calc(4px * 7)",
@@ -36,15 +36,15 @@ Snapshot Diff:
   ]
 `;
 
-exports[`props should render marginBottom 1`] = `
+exports[`props should render marginEnd 1`] = `
 Snapshot Diff:
 - Received styles
 + Base styles
 
 @@ -2,9 +2,8 @@
     Object {
-      "border-color": "rgba(0, 0, 0, 0.1)",
-      "border-width": "0 0 1px 0",
+      "border": "0",
+      "border-bottom": "1px solid currentColor",
       "height": "0",
       "margin": "0",
 -     "margin-bottom": "calc(4px * 5)",
@@ -53,15 +53,15 @@ Snapshot Diff:
   ]
 `;
 
-exports[`props should render marginTop 1`] = `
+exports[`props should render marginStart 1`] = `
 Snapshot Diff:
 - Received styles
 + Base styles
 
 @@ -2,9 +2,8 @@
     Object {
-      "border-color": "rgba(0, 0, 0, 0.1)",
-      "border-width": "0 0 1px 0",
+      "border": "0",
+      "border-bottom": "1px solid currentColor",
       "height": "0",
       "margin": "0",
 -     "margin-top": "calc(4px * 5)",

package/src/divider/test/index.js

@@ -18,15 +18,15 @@ describe( 'props', () => {
 		expect( base.container.firstChild ).toMatchSnapshot();
 	} );
 
-	test( 'should render marginTop', () => {
-		const { container } = render( <Divider marginTop={ 5 } /> );
+	test( 'should render marginStart', () => {
+		const { container } = render( <Divider marginStart={ 5 } /> );
 		expect( container.firstChild ).toMatchStyleDiffSnapshot(
 			base.container.firstChild
 		);
 	} );
 
-	test( 'should render marginBottom', () => {
-		const { container } = render( <Divider marginBottom={ 5 } /> );
+	test( 'should render marginEnd', () => {
+		const { container } = render( <Divider marginEnd={ 5 } /> );
 		expect( container.firstChild ).toMatchStyleDiffSnapshot(
 			base.container.firstChild
 		);

package/src/divider/types.ts

@@ -11,17 +11,17 @@ import type { SpaceInput } from '../ui/utils/space';
 
 export interface OwnProps {
 	/**
-	 * Adjusts all margins.
+	 * Adjusts all margins on the inline dimension.
 	 */
 	margin?: SpaceInput;
 	/**
-	 * Adjusts top margins.
+	 * Adjusts the inline-start margin.
 	 */
-	marginTop?: SpaceInput;
+	marginStart?: SpaceInput;
 	/**
-	 * Adjusts bottom margins.
+	 * Adjusts the inline-end margin.
 	 */
-	marginBottom?: SpaceInput;
+	marginEnd?: SpaceInput;
 }
 
 export interface Props extends Omit< SeparatorProps, 'children' >, OwnProps {}

package/src/drop-zone/index.js

@@ -39,10 +39,14 @@ export default function DropZoneComponent( {
 			const files = getFilesFromDataTransfer( event.dataTransfer );
 			const html = event.dataTransfer.getData( 'text/html' );
 
-			if ( files.length && onFilesDrop ) {
-				onFilesDrop( files );
-			} else if ( html && onHTMLDrop ) {
+			/**
+			 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
+			 * The order of the checks is important to recognise the HTML drop.
+			 */
+			if ( html && onHTMLDrop ) {
 				onHTMLDrop( html );
+			} else if ( files.length && onFilesDrop ) {
+				onFilesDrop( files );
 			} else if ( onDrop ) {
 				onDrop( event );
 			}
@@ -52,15 +56,19 @@ export default function DropZoneComponent( {
 
 			let _type = 'default';
 
-			if (
+			/**
+			 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
+			 * The order of the checks is important to recognise the HTML drop.
+			 */
+			if ( includes( event.dataTransfer.types, 'text/html' ) ) {
+				_type = 'html';
+			} else if (
 				// Check for the types because sometimes the files themselves
 				// are only available on drop.
 				includes( event.dataTransfer.types, 'Files' ) ||
 				getFilesFromDataTransfer( event.dataTransfer ).length > 0
 			) {
 				_type = 'file';
-			} else if ( includes( event.dataTransfer.types, 'text/html' ) ) {
-				_type = 'html';
 			}
 
 			setType( _type );

package/src/drop-zone/provider.js

@@ -5,6 +5,7 @@ import deprecated from '@wordpress/deprecated';
 
 export default function DropZoneProvider( { children } ) {
 	deprecated( 'wp.components.DropZoneProvider', {
+		since: '5.8',
 		hint:
 			'wp.component.DropZone no longer needs a provider. wp.components.DropZoneProvider is safe to remove from your code.',
 	} );

package/src/dropdown-menu/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/DropdownMenu',
 	component: DropdownMenu,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/duotone-picker/README.md

@@ -22,7 +22,7 @@ const Example = () => {
 	const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
 	return (
 		<>
-			<DuotoneControl
+			<DuotonePicker
 				duotonePalette={ DUOTONE_PALETTE }
 				colorPalette={ COLOR_PALETTE }
 				value={ duotone }

package/src/elevation/stories/index.js

@@ -26,7 +26,7 @@ export default {
 	component: Elevation,
 	title: 'Components (Experimental)/Elevation',
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/external-link/stories/index.js

@@ -11,7 +11,7 @@ export default {
 	title: 'Components/ExternalLink',
 	component: ExternalLink,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/flyout/styles.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import styled from '@emotion/styled';
+import styled, { StyledComponent } from '@emotion/styled';
 // eslint-disable-next-line no-restricted-imports
 import { Popover as ReakitPopover } from 'reakit';
 
@@ -12,7 +12,9 @@ import { Card, CardBody } from '../card';
 import * as ZIndex from '../utils/z-index';
 import CONFIG from '../utils/config-values';
 
-export const FlyoutContentView = styled( ReakitPopover )`
+export const FlyoutContentView: StyledComponent<
+	React.ComponentPropsWithoutRef< typeof ReakitPopover >
+> = styled( ReakitPopover )`
 	z-index: ${ ZIndex.Flyout };
 	box-sizing: border-box;
 	opacity: 0;

package/src/focusable-iframe/index.js

@@ -7,6 +7,7 @@ import deprecated from '@wordpress/deprecated';
 export default function FocusableIframe( { iframeRef, ...props } ) {
 	const ref = useMergeRefs( [ iframeRef, useFocusableIframe() ] );
 	deprecated( 'wp.components.FocusableIframe', {
+		since: '5.9',
 		alternative: 'wp.compose.useFocusableIframe',
 	} );
 	// Disable reason: The rendered iframe is a pass-through component,

package/src/font-size-picker/index.js

@@ -47,23 +47,28 @@ function FontSizePicker(
 		availableUnits: [ 'px', 'em', 'rem' ],
 	} );
 
-	// The main font size UI displays a toggle group when the presets are less
-	// than six and a select control when they are more.
-	//
-	// A select control is also used when the value of a preset cannot be
-	// immediately computed (eg. 'calc', 'var').
-	const shouldUseSelectControl =
-		fontSizes.length > 5 ||
-		fontSizes.some( ( { size } ) => ! isSimpleCssValue( size ) );
-
+	/**
+	 * The main font size UI displays a toggle group when the presets are less
+	 * than six and a select control when they are more.
+	 */
+	const fontSizesContainComplexValues = fontSizes.some(
+		( { size } ) => ! isSimpleCssValue( size )
+	);
+	const shouldUseSelectControl = fontSizes.length > 5;
 	const options = useMemo(
 		() =>
 			getFontSizeOptions(
 				shouldUseSelectControl,
 				fontSizes,
-				disableCustomFontSizes
+				disableCustomFontSizes,
+				fontSizesContainComplexValues
 			),
-		[ shouldUseSelectControl, fontSizes, disableCustomFontSizes ]
+		[
+			shouldUseSelectControl,
+			fontSizes,
+			disableCustomFontSizes,
+			fontSizesContainComplexValues,
+		]
 	);
 	const selectedOption = getSelectedOption( fontSizes, value );
 	const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;
@@ -88,12 +93,21 @@ function FontSizePicker(
 		}
 		// Calculate the `hint` for toggle group control.
 		let hint = selectedOption.name;
-		if ( typeof selectedOption.size === 'string' ) {
+		if (
+			! fontSizesContainComplexValues &&
+			typeof selectedOption.size === 'string'
+		) {
 			const [ , unit ] = splitValueAndUnitFromSize( selectedOption.size );
 			hint += `(${ unit })`;
 		}
 		return hint;
-	}, [ showCustomValueControl, selectedOption?.slug, value, isCustomValue ] );
+	}, [
+		showCustomValueControl,
+		selectedOption?.slug,
+		value,
+		isCustomValue,
+		fontSizesContainComplexValues,
+	] );
 
 	if ( ! options ) {
 		return null;

package/src/font-size-picker/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/FontSizePicker',
 	component: FontSizePicker,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 
@@ -156,3 +156,65 @@ export const differentControlBySize = () => {
 		<FontSizePickerWithState fontSizes={ fontSizes } initialValue={ 8 } />
 	);
 };
+
+export const withComplexCSSValues = () => {
+	const options = [
+		{
+			name: 'Small',
+			slug: 'small',
+			size: '0.65rem',
+		},
+		{
+			name: 'Medium',
+			slug: 'medium',
+			size: '1.125rem',
+		},
+		{
+			name: 'Large',
+			slug: 'large',
+			size: '1.7rem',
+		},
+		{
+			name: 'Extra Large',
+			slug: 'extra-large',
+			size: '1.95rem',
+		},
+		{
+			name: 'Extra Extra Large',
+			slug: 'extra-extra-large',
+			size: '2.5rem',
+		},
+		{
+			name: 'Huge',
+			slug: 'huge',
+			size: '2.8rem',
+		},
+	];
+	const showMoreFontSizes = boolean( 'Add more font sizes', false );
+	const addComplexCssValues = boolean(
+		'Add some complex css values(calc, var, etc..)',
+		true
+	);
+
+	const _options = options.map( ( option, index ) => {
+		const _option = { ...option };
+		// Adding just one complex css value is enough (first element);
+		if ( addComplexCssValues && ! index ) {
+			_option.size = 'clamp(1.75rem, 3vw, 2.25rem)';
+		}
+		return _option;
+	} );
+
+	const fontSizes = _options.slice(
+		0,
+		showMoreFontSizes ? _options.length : 5
+	);
+	return (
+		<div style={ { maxWidth: '248px' } }>
+			<FontSizePickerWithState
+				fontSizes={ fontSizes }
+				initialValue={ '1.125rem' }
+			/>
+		</div>
+	);
+};

package/src/font-size-picker/test/index.js

@@ -141,4 +141,91 @@ describe( 'FontSizePicker', () => {
 			expect( fontSize ).toBe( '16px' );
 		} );
 	} );
+	describe( 'renders different control', () => {
+		const options = [
+			{
+				name: 'Small',
+				slug: 'small',
+				size: '0.65rem',
+			},
+			{
+				name: 'Medium',
+				slug: 'medium',
+				size: '1.125rem',
+			},
+			{
+				name: 'Large',
+				slug: 'large',
+				size: '1.7rem',
+			},
+		];
+		it( 'should render select control when we have more than five font sizes', () => {
+			const extraOptions = [
+				{
+					name: 'Extra Large',
+					slug: 'extra-large',
+					size: '1.95rem',
+				},
+				{
+					name: 'Extra Extra Large',
+					slug: 'extra-extra-large',
+					size: '2.5rem',
+				},
+				{
+					name: 'Huge',
+					slug: 'huge',
+					size: '2.8rem',
+				},
+			];
+			const fontSizes = [ ...options, ...extraOptions ];
+			render(
+				<FontSizePicker
+					fontSizes={ fontSizes }
+					value={ fontSizes[ 0 ].size }
+				/>
+			);
+			// Trigger click to open the select menu and take into account
+			// the two extra options (default, custom);
+			fireEvent.click(
+				screen.getByLabelText( 'Font size', { selector: 'button' } )
+			);
+			const element = screen.getAllByRole( 'option' );
+			expect( element ).toHaveLength( fontSizes.length + 2 );
+		} );
+		describe( 'segmented control', () => {
+			it( 'should use numeric labels for simple css values', () => {
+				const fontSizes = [ ...options ];
+				render(
+					<FontSizePicker
+						fontSizes={ fontSizes }
+						value={ fontSizes[ 0 ].size }
+					/>
+				);
+				const element = screen.getByLabelText( 'Large' );
+				expect( element ).toBeInTheDocument();
+				expect( element.children ).toHaveLength( 2 );
+				expect( element.children[ 0 ].textContent ).toBe( '1.7' );
+			} );
+			it( 'should use incremental sequence of numbers as labels if we have complex css', () => {
+				const fontSizes = [
+					...options,
+					{
+						name: 'Extra Large',
+						slug: 'extra-large',
+						size: 'clamp(1.75rem, 3vw, 2.25rem)',
+					},
+				];
+				render(
+					<FontSizePicker
+						fontSizes={ fontSizes }
+						value={ fontSizes[ 0 ].size }
+					/>
+				);
+				const element = screen.getByLabelText( 'Large' );
+				expect( element ).toBeInTheDocument();
+				expect( element.children ).toHaveLength( 2 );
+				expect( element.children[ 0 ].textContent ).toBe( '3' );
+			} );
+		} );
+	} );
 } );

package/src/font-size-picker/test/util.js

@@ -0,0 +1,74 @@
+/**
+ * Internal dependencies
+ */
+import { isSimpleCssValue, splitValueAndUnitFromSize } from '../utils';
+
+const simpleCSSCases = [
+	// Test integers and non-integers.
+	[ 1, true ],
+	[ 1.25, true ],
+	[ '123', true ],
+	[ '1.5', true ],
+	[ '0.75', true ],
+	// CSS unit tests.
+	[ '20px', true ],
+	[ '0.8em', true ],
+	[ '2rem', true ],
+	[ '1.4vw', true ],
+	[ '0.4vh', true ],
+	// Invalid negative values,
+	[ '-5px', false ],
+	// Complex CSS values that should fail.
+	[ 'abs(-10px)', false ],
+	[ 'calc(10px + 1)', false ],
+	[ 'clamp(2.5rem, 4vw, 3rem)', false ],
+	[ 'max(4.5em, 3vh)', false ],
+	[ 'min(10px, 1rem)', false ],
+	[ 'minmax(30px, auto)', false ],
+	[ 'var(--wp--font-size)', false ],
+];
+
+describe( 'isSimpleCssValue', () => {
+	test.each( simpleCSSCases )(
+		'given %p as argument, returns %p',
+		( cssValue, result ) => {
+			expect( isSimpleCssValue( cssValue ) ).toBe( result );
+		}
+	);
+} );
+
+const splitValuesCases = [
+	// Test integers and non-integers.
+	[ 1, '1', undefined ],
+	[ 1.25, '1.25', undefined ],
+	[ '123', '123', undefined ],
+	[ '1.5', '1.5', undefined ],
+	[ '0.75', '0.75', undefined ],
+	// Valid simple CSS values.
+	[ '20px', '20', 'px' ],
+	[ '0.8em', '0.8', 'em' ],
+	[ '2rem', '2', 'rem' ],
+	[ '1.4vw', '1.4', 'vw' ],
+	[ '0.4vh', '0.4', 'vh' ],
+	// Invalid negative values,
+	[ '-5px', undefined, undefined ],
+	// Complex CSS values that shouldn't parse.
+	[ 'abs(-15px)', undefined, undefined ],
+	[ 'calc(10px + 1)', undefined, undefined ],
+	[ 'clamp(2.5rem, 4vw, 3rem)', undefined, undefined ],
+	[ 'max(4.5em, 3vh)', undefined, undefined ],
+	[ 'min(10px, 1rem)', undefined, undefined ],
+	[ 'minmax(30px, auto)', undefined, undefined ],
+	[ 'var(--wp--font-size)', undefined, undefined ],
+];
+
+describe( 'splitValueAndUnitFromSize', () => {
+	test.each( splitValuesCases )(
+		'given %p as argument, returns value = %p and unit = %p',
+		( cssValue, expectedValue, expectedUnit ) => {
+			const [ value, unit ] = splitValueAndUnitFromSize( cssValue );
+			expect( value ).toBe( expectedValue );
+			expect( unit ).toBe( expectedUnit );
+		}
+	);
+} );

package/src/font-size-picker/utils.js

@@ -14,6 +14,15 @@ const CUSTOM_FONT_SIZE_OPTION = {
 	name: __( 'Custom' ),
 };
 
+/**
+ * In case we have at most five font sizes, where at least one the them
+ * contain a complex css value(clamp, var, etc..) show a incremental sequence
+ * of numbers as a label of the font size. We do this because complex css values
+ * cannot be caluclated properly and the incremental sequence of numbers as labels
+ * can help the user better mentally map the different available font sizes.
+ */
+const FONT_SIZES_ALIASES = [ '1', '2', '3', '4', '5' ];
+
 /**
  * Helper util to split a font size to its numeric value
  * and its `unit`, if exists.
@@ -22,12 +31,13 @@ const CUSTOM_FONT_SIZE_OPTION = {
  * @return {[number, string]} An array with the numeric value and the unit if exists.
  */
 export function splitValueAndUnitFromSize( size ) {
-	/**
-	 * The first matched result is ignored as it's the left
-	 * hand side of the capturing group in the regex.
-	 */
-	const [ , numericValue, unit ] = size.split( /(\d+)/ );
-	return [ numericValue, unit ];
+	const [ numericValue, unit ] = `${ size }`.match( /[\d\.]+|\D+/g );
+
+	if ( ! isNaN( parseFloat( numericValue ) ) && isFinite( numericValue ) ) {
+		return [ numericValue, unit ];
+	}
+
+	return [];
 }
 
 /**
@@ -38,7 +48,7 @@ export function splitValueAndUnitFromSize( size ) {
  * @return {boolean} Whether the value is a simple css value.
  */
 export function isSimpleCssValue( value ) {
-	const sizeRegex = /^(?!0)\d+(px|em|rem|vw|vh|%)?$/i;
+	const sizeRegex = /^[\d\.]+(px|em|rem|vw|vh|%)?$/i;
 	return sizeRegex.test( value );
 }
 
@@ -46,22 +56,24 @@ export function isSimpleCssValue( value ) {
  * Return font size options in the proper format depending
  * on the currently used control (select, toggle group).
  *
- * @param {boolean}  useSelectControl       Whether to use a select control.
- * @param {Object[]} optionsArray           Array of available font sizes objects.
- * @param {*}        disableCustomFontSizes Flag that indicates if custom font sizes are disabled.
+ * @param {boolean}  useSelectControl               Whether to use a select control.
+ * @param {Object[]} optionsArray                   Array of available font sizes objects.
+ * @param {*}        disableCustomFontSizes         Flag that indicates if custom font sizes are disabled.
+ * @param {boolean}  optionsContainComplexCssValues Whether font sizes contain at least one complex css value(clamp, var, etc..).
  * @return {Object[]|null} Array of font sizes in proper format for the used control.
  */
 export function getFontSizeOptions(
 	useSelectControl,
 	optionsArray,
-	disableCustomFontSizes
+	disableCustomFontSizes,
+	optionsContainComplexCssValues
 ) {
 	if ( disableCustomFontSizes && ! optionsArray.length ) {
 		return null;
 	}
 	return useSelectControl
 		? getSelectOptions( optionsArray, disableCustomFontSizes )
-		: getToggleGroupOptions( optionsArray );
+		: getToggleGroupOptions( optionsArray, optionsContainComplexCssValues );
 }
 
 function getSelectOptions( optionsArray, disableCustomFontSizes ) {
@@ -75,14 +87,16 @@ function getSelectOptions( optionsArray, disableCustomFontSizes ) {
 		name,
 		size,
 		__experimentalHint:
-			size && isSimpleCssValue( size ) && parseInt( size ),
+			size && isSimpleCssValue( size ) && parseFloat( size ),
 	} ) );
 }
 
-function getToggleGroupOptions( optionsArray ) {
-	return optionsArray.map( ( { slug, size, name } ) => {
-		let label = size;
-		if ( typeof size === 'string' ) {
+function getToggleGroupOptions( optionsArray, optionsContainComplexCssValues ) {
+	return optionsArray.map( ( { slug, size, name }, index ) => {
+		let label = optionsContainComplexCssValues
+			? FONT_SIZES_ALIASES[ index ]
+			: size;
+		if ( ! optionsContainComplexCssValues && typeof size === 'string' ) {
 			const [ numericValue ] = splitValueAndUnitFromSize( size );
 			label = numericValue;
 		}

package/src/form-token-field/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/FormTokenField',
 	component: FormTokenField,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/gradient-picker/index.js

@@ -106,6 +106,7 @@ export default function GradientPicker( {
 	clearable = true,
 	disableCustomGradients = false,
 	__experimentalHasMultipleOrigins,
+	__experimentalIsRenderedInSidebar,
 } ) {
 	const clearGradient = useCallback( () => onChange( undefined ), [
 		onChange,
@@ -136,6 +137,9 @@ export default function GradientPicker( {
 			content={
 				! disableCustomGradients && (
 					<CustomGradientPicker
+						__experimentalIsRenderedInSidebar={
+							__experimentalIsRenderedInSidebar
+						}
 						value={ value }
 						onChange={ onChange }
 					/>

package/src/gradient-picker/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/GradientPicker',
 	component: GradientPicker,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/grid/stories/index.js

@@ -13,7 +13,7 @@ export default {
 	component: Grid,
 	title: 'Components (Experimental)/Grid',
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };