@wordpress/components 22.0.0 → 23.0.0

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

@@ -6,42 +6,8 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import type {
-	FontSize,
-	FontSizeOption,
-	FontSizeSelectOption,
-	FontSizeToggleGroupOption,
-	FontSizePickerProps,
-} from './types';
-
-const DEFAULT_FONT_SIZE = 'default';
-const DEFAULT_FONT_SIZE_OPTION = {
-	slug: DEFAULT_FONT_SIZE,
-	name: __( 'Default' ),
-};
-export const CUSTOM_FONT_SIZE = 'custom';
-const CUSTOM_FONT_SIZE_OPTION = {
-	slug: CUSTOM_FONT_SIZE,
-	name: __( 'Custom' ),
-};
-
-/**
- * In case we have at most five font sizes, show a `T-shirt size`
- * alias as a label of the font size. The label assumes that the font sizes
- * are ordered accordingly - from smallest to largest.
- */
-const FONT_SIZES_ALIASES = [
-	/* translators: S stands for 'small' and is a size label. */
-	__( 'S' ),
-	/* translators: M stands for 'medium' and is a size label. */
-	__( 'M' ),
-	/* translators: L stands for 'large' and is a size label. */
-	__( 'L' ),
-	/* translators: XL stands for 'extra large' and is a size label. */
-	__( 'XL' ),
-	/* translators: XXL stands for 'extra extra large' and is a size label. */
-	__( 'XXL' ),
-];
+import type { FontSizePickerProps, FontSize } from './types';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 
 /**
  * Some themes use css vars for their font sizes, so until we
@@ -58,75 +24,23 @@ export function isSimpleCssValue(
 }
 
 /**
- * Return font size options in the proper format depending
- * on the currently used control (select, toggle group).
+ * If all of the given font sizes have the same unit (e.g. 'px'), return that
+ * unit. Otherwise return null.
  *
- * @param  useSelectControl       Whether to use a select control.
- * @param  optionsArray           Array of available font sizes objects.
- * @param  disableCustomFontSizes Flag that indicates if custom font sizes are disabled.
- * @return Array of font sizes in proper format for the used control.
+ * @param  fontSizes List of font sizes.
+ * @return The common unit, or null.
  */
-export function getFontSizeOptions(
-	useSelectControl: boolean,
-	optionsArray: FontSize[],
-	disableCustomFontSizes: boolean
-): FontSizeSelectOption[] | FontSizeToggleGroupOption[] | null {
-	if ( disableCustomFontSizes && ! optionsArray.length ) {
+export function getCommonSizeUnit( fontSizes: FontSize[] ) {
+	const [ firstFontSize, ...otherFontSizes ] = fontSizes;
+	if ( ! firstFontSize ) {
 		return null;
 	}
-	return useSelectControl
-		? getSelectOptions( optionsArray, disableCustomFontSizes )
-		: getToggleGroupOptions( optionsArray );
-}
-
-function getSelectOptions(
-	optionsArray: FontSize[],
-	disableCustomFontSizes: boolean
-): FontSizeSelectOption[] {
-	const options: FontSizeOption[] = [
-		DEFAULT_FONT_SIZE_OPTION,
-		...optionsArray,
-		...( disableCustomFontSizes ? [] : [ CUSTOM_FONT_SIZE_OPTION ] ),
-	];
-	return options.map( ( { slug, name, size } ) => ( {
-		key: slug,
-		name: name || slug,
-		size,
-		__experimentalHint:
-			size && isSimpleCssValue( size ) && parseFloat( String( size ) ),
-	} ) );
-}
-
-/**
- * Build options for the toggle group options.
- *
- * @param  optionsArray An array of font size options.
- * @param  labelAliases An array of alternative labels.
- * @return Remapped optionsArray.
- */
-export function getToggleGroupOptions(
-	optionsArray: FontSize[],
-	labelAliases: string[] = FONT_SIZES_ALIASES
-): FontSizeToggleGroupOption[] {
-	return optionsArray.map( ( { slug, size, name }, index ) => {
-		return {
-			key: slug,
-			value: size,
-			label: labelAliases[ index ],
-			name: name || labelAliases[ index ],
-		};
-	} );
-}
-
-export function getSelectedOption(
-	fontSizes: FontSize[],
-	value: FontSizePickerProps[ 'value' ]
-): FontSizeOption {
-	if ( ! value ) {
-		return DEFAULT_FONT_SIZE_OPTION;
-	}
-	return (
-		fontSizes.find( ( font ) => font.size === value ) ||
-		CUSTOM_FONT_SIZE_OPTION
+	const [ , firstUnit ] = parseQuantityAndUnitFromRawValue(
+		firstFontSize.size
 	);
+	const areAllSizesSameUnit = otherFontSizes.every( ( fontSize ) => {
+		const [ , unit ] = parseQuantityAndUnitFromRawValue( fontSize.size );
+		return unit === firstUnit;
+	} );
+	return areAllSizesSameUnit ? firstUnit : null;
 }

package/src/form-toggle/style.scss

@@ -38,13 +38,13 @@ $toggle-border-width: 1px;
 
 	// Checked state.
 	&.is-checked .components-form-toggle__track {
-		background-color: var(--wp-admin-theme-color);
-		border: $toggle-border-width solid var(--wp-admin-theme-color);
+		background-color: $components-color-accent;
+		border: $toggle-border-width solid $components-color-accent;
 		border: #{ $toggle-height * 0.5 } solid transparent; // Expand the border to fake a solid in Windows High Contrast Mode.
 	}
 
 	.components-form-toggle__input:focus + .components-form-toggle__track {
-		box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 2px $white, 0 0 0 (2px + $border-width-focus) $components-color-accent;
 
 		// Windows High Contrast mode will show this outline, but not the box-shadow.
 		outline: 2px solid transparent;

package/src/form-token-field/index.tsx

@@ -169,10 +169,18 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 	function onKeyDown( event: KeyboardEvent ) {
 		let preventDefault = false;
 
-		if ( event.defaultPrevented ) {
+		if (
+			event.defaultPrevented ||
+			// Ignore keydowns from IMEs
+			event.nativeEvent.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 'Backspace':
 				preventDefault = handleDeleteKey( deleteTokenBeforeInput );
 				break;
@@ -213,9 +221,9 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 
 	function onKeyPress( event: KeyboardEvent ) {
 		let preventDefault = false;
-		// TODO: replace to event.code;
-		switch ( event.charCode ) {
-			case 44: // Comma.
+
+		switch ( event.key ) {
+			case ',':
 				preventDefault = handleCommaKey();
 				break;
 			default:

package/src/form-token-field/style.scss

@@ -88,7 +88,7 @@
 
 		.components-form-token-field__token-text {
 			background: transparent;
-			color: var(--wp-admin-theme-color);
+			color: $components-color-accent;
 		}
 
 		.components-form-token-field__remove-token {
@@ -169,7 +169,7 @@
 	transition: all 0.15s ease-in-out;
 	@include reduce-motion("transition");
 	list-style: none;
-	border-top: $border-width solid $gray-700;
+	border-top: $border-width solid $components-color-border;
 	margin: 0;
 	padding: 0;
 }
@@ -183,7 +183,7 @@
 	cursor: pointer;
 
 	&.is-selected {
-		background: var(--wp-admin-theme-color);
+		background: $components-color-accent;
 		color: $white;
 	}
 }

package/src/form-token-field/test/index.tsx

@@ -277,8 +277,8 @@ describe( 'FormTokenField', () => {
 
 			// There should be 1 "remove item" button for the "bergamot" token
 			expect(
-				screen.getAllByRole( 'button', { name: 'Remove item' } )
-			).toHaveLength( 1 );
+				screen.getByRole( 'button', { name: 'Remove item' } )
+			).toBeInTheDocument();
 
 			// Click the "X" button for the "bergamot" token (the only one)
 			await user.click(
@@ -827,10 +827,10 @@ describe( 'FormTokenField', () => {
 
 			// Currently, none of the suggestions are selected
 			expect(
-				within( suggestionList ).queryAllByRole( 'option', {
+				within( suggestionList ).queryByRole( 'option', {
 					selected: true,
 				} )
-			).toHaveLength( 0 );
+			).not.toBeInTheDocument();
 
 			// Pressing the down arrow will select "Salmon"
 			await user.keyboard( '[ArrowDown]' );
@@ -900,10 +900,10 @@ describe( 'FormTokenField', () => {
 
 			// Currently, none of the suggestions are selected
 			expect(
-				within( suggestionList ).queryAllByRole( 'option', {
+				within( suggestionList ).queryByRole( 'option', {
 					selected: true,
 				} )
-			).toHaveLength( 0 );
+			).not.toBeInTheDocument();
 
 			const tigerOption = within( suggestionList ).getByRole( 'option', {
 				name: 'Tiger',

package/src/gradient-picker/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -28,7 +23,7 @@ function SingleOrigin( {
 	actions,
 } ) {
 	const gradientOptions = useMemo( () => {
-		return map( gradients, ( { gradient, name } ) => (
+		return gradients.map( ( { gradient, name }, index ) => (
 			<CircularOptionPicker.Option
 				key={ gradient }
 				value={ gradient }
@@ -42,7 +37,7 @@ function SingleOrigin( {
 				onClick={
 					value === gradient
 						? clearGradient
-						: () => onChange( gradient )
+						: () => onChange( gradient, index )
 				}
 				aria-label={
 					name
@@ -80,7 +75,9 @@ function MultipleOrigin( {
 						<SingleOrigin
 							clearGradient={ clearGradient }
 							gradients={ gradientSet }
-							onChange={ onChange }
+							onChange={ ( gradient ) =>
+								onChange( gradient, index )
+							}
 							value={ value }
 							{ ...( gradients.length === index + 1
 								? { actions }

package/src/grid/test/grid.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -12,14 +12,14 @@ import CONFIG from '../../utils/config-values';
 
 describe( 'props', () => {
 	test( 'should render correctly', () => {
-		const { container } = render(
-			<Grid>
+		render(
+			<Grid data-testid="grid">
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 2, 1fr )',
 			gap: `calc( ${ CONFIG.gridBase } * 3 )`,
@@ -27,15 +27,15 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render gap', () => {
-		const { container } = render(
-			<Grid columns={ 3 } gap={ 4 }>
+		render(
+			<Grid columns={ 3 } gap={ 4 } data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 3, 1fr )',
 			gap: `calc( ${ CONFIG.gridBase } * 4 )`,
@@ -43,60 +43,60 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render custom columns', () => {
-		const { container } = render(
-			<Grid columns={ 7 }>
+		render(
+			<Grid columns={ 7 } data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: 'repeat( 7, 1fr )',
 		} );
 	} );
 
 	test( 'should render custom rows', () => {
-		const { container } = render(
-			<Grid rows={ 7 }>
+		render(
+			<Grid rows={ 7 } data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateRows: 'repeat( 7, 1fr )',
 		} );
 	} );
 
 	test( 'should render align', () => {
-		const { container } = render(
-			<Grid align="flex-start">
+		render(
+			<Grid align="flex-start" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			alignItems: 'flex-start',
 			display: 'grid',
 		} );
 	} );
 
 	test( 'should render alignment spaced', () => {
-		const { container } = render(
-			<Grid alignment="spaced">
+		render(
+			<Grid alignment="spaced" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			alignItems: 'center',
 			justifyContent: 'space-between',
@@ -104,60 +104,60 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render justify', () => {
-		const { container } = render(
-			<Grid justify="flex-start">
+		render(
+			<Grid justify="flex-start" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			justifyContent: 'flex-start',
 		} );
 	} );
 
 	test( 'should render isInline', () => {
-		const { container } = render(
-			<Grid columns={ 3 } isInline>
+		render(
+			<Grid columns={ 3 } isInline data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'inline-grid',
 			gridTemplateColumns: 'repeat( 3, 1fr )',
 		} );
 	} );
 
 	test( 'should render custom templateColumns', () => {
-		const { container } = render(
-			<Grid templateColumns="1fr auto 1fr">
+		render(
+			<Grid templateColumns="1fr auto 1fr" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateColumns: '1fr auto 1fr',
 		} );
 	} );
 
 	test( 'should render custom templateRows', () => {
-		const { container } = render(
-			<Grid templateRows="1fr auto 1fr">
+		render(
+			<Grid templateRows="1fr auto 1fr" data-testid="grid">
 				<View />
 				<View />
 				<View />
 			</Grid>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByTestId( 'grid' ) ).toHaveStyle( {
 			display: 'grid',
 			gridTemplateRows: '1fr auto 1fr',
 		} );

package/src/higher-order/navigate-regions/index.js

@@ -15,6 +15,10 @@ const defaultShortcuts = {
 			modifier: 'ctrlShift',
 			character: '`',
 		},
+		{
+			modifier: 'ctrlShift',
+			character: '~',
+		},
 		{
 			modifier: 'access',
 			character: 'p',

package/src/higher-order/navigate-regions/style.scss

@@ -3,30 +3,62 @@
 	position: relative;
 }
 
-.is-focusing-regions [role="region"] {
-	// For browsers that don't support outline-offset (IE11).
-	&:focus::after {
-		content: "";
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		pointer-events: none;
-		outline: 4px solid transparent; // Shown in Windows High Contrast mode.
-		box-shadow: inset 0 0 0 4px var(--wp-admin-theme-color);
+.is-focusing-regions {
+	[role="region"]:focus {
+		outline: 4px solid $components-color-accent;
+		outline-offset: -4px;
+
+		.interface-navigable-region__stacker {
+			position: relative;
+			z-index: z-index(".is-focusing-regions [role='region']:focus .interface-navigable-region__stacker");
+		}
 	}
 
-	@supports ( outline-offset: 1px ) {
-		&:focus::after {
-			content: none;
+	// Fixes for edge cases.
+	// Some of the regions are currently used for layout purposes as 'interface skeleton'
+	// items. When they're absolutely positioned or when they contain absolutely
+	// positioned elements, they may have no size therefore the focus style is not
+	// visible. For the future, it's important to take into consideration that
+	// the navigable regions should always have a computed size. For now, we can
+	// fix some edge cases but these CSS rules should be later removed in favor of
+	// a more abstracted approach to make the navigabel regions focus style work
+	// regardles of the CSS used on other components.
+
+	// Header top bar when Distraction free mode is on.
+	&.is-distraction-free .interface-interface-skeleton__header {
+		.interface-navigable-region__stacker,
+		.edit-post-header {
+			outline: inherit;
+			outline-offset: inherit;
 		}
+	}
 
-		&:focus {
-			outline-style: solid;
-			outline-color: var(--wp-admin-theme-color);
-			outline-width: 4px;
-			outline-offset: -4px;
+	// Sidebar toggle button shown when navigating regions.
+	.interface-interface-skeleton__sidebar {
+		.interface-navigable-region__stacker,
+		.edit-post-layout__toggle-sidebar-panel {
+			outline: inherit;
+			outline-offset: inherit;
 		}
 	}
+
+	// Publish sidebar toggle button shown when navigating regions.
+	.interface-interface-skeleton__actions {
+		.interface-navigable-region__stacker,
+		.edit-post-layout__toggle-publish-panel {
+			outline: inherit;
+			outline-offset: inherit;
+		}
+	}
+
+	// Publish sidebar.
+	[role="region"].interface-interface-skeleton__actions:focus  .editor-post-publish-panel {
+		outline: 4px solid $components-color-accent;
+		outline-offset: -4px;
+	}
+}
+
+.interface-navigable-region__stacker {
+	height: 100%;
+	width: 100%;
 }

package/src/higher-order/with-fallback-styles/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEqual } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * WordPress dependencies
@@ -46,7 +46,9 @@ export default ( mapNodeToProps ) =>
 						this.props
 					);
 
-					if ( ! isEqual( newFallbackStyles, fallbackStyles ) ) {
+					if (
+						! fastDeepEqual( newFallbackStyles, fallbackStyles )
+					) {
 						this.setState( {
 							fallbackStyles: newFallbackStyles,
 							grabStylesCompleted: