@wordpress/components 19.4.1 → 19.7.0-next.e230fbab09.0

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

@@ -75,7 +75,7 @@ describe( 'FormTokenField', () => {
 
 		// This suggestion is part of a partial match; return up to three
 		// sections of the suggestion (before match, match, and after
-		// match)
+		// match).
 		const div = document.createElement( 'div' );
 		div.innerHTML = node.querySelector( 'span' ).outerHTML;
 		return map(
@@ -247,21 +247,21 @@ describe( 'FormTokenField', () => {
 				fixtures.matchingSuggestions.th
 			);
 			expect( getSelectedSuggestion() ).toBe( null );
-			sendKeyDown( keyCodes.downArrow ); // 'the'
+			sendKeyDown( keyCodes.downArrow ); // 'the'.
 			expect( getSelectedSuggestion() ).toEqual( [ 'th', 'e' ] );
-			sendKeyDown( keyCodes.downArrow ); // 'that'
+			sendKeyDown( keyCodes.downArrow ); // 'that'.
 			expect( getSelectedSuggestion() ).toEqual( [ 'th', 'at' ] );
 
 			const hoverSuggestion = wrapperElement().querySelectorAll(
 				'.components-form-token-field__suggestion'
-			)[ 3 ]; // 'with'
+			)[ 3 ]; // 'with'.
 			expect( getSuggestionNodeText( hoverSuggestion ) ).toEqual( [
 				'wi',
 				'th',
 			] );
 
-			// before sending a hover event, we need to wait for
-			// SuggestionList#_scrollingIntoView to become false
+			// Before sending a hover event, we need to wait for
+			// SuggestionList#_scrollingIntoView to become false.
 			act( () => {
 				jest.advanceTimersByTime( 100 );
 			} );

package/src/grid/component.js

@@ -7,7 +7,7 @@ import useGrid from './hook';
 
 /**
  * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').Ref<any>}                                                        forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                               forwardedRef
  */
 function Grid( props, forwardedRef ) {
 	const gridProps = useGrid( props );

package/src/h-stack/component.js

@@ -7,7 +7,7 @@ import { useHStack } from './hook';
 
 /**
  * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').Ref<any>}                                                        forwardedRef
+ * @param {import('react').ForwardedRef<any>}                                               forwardedRef
  */
 function HStack( props, forwardedRef ) {
 	const hStackProps = useHStack( props );

package/src/heading/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -10,9 +10,9 @@ import { contextConnect, WordPressComponentProps } from '../ui/context';
 import { View } from '../view';
 import { useHeading, HeadingProps } from './hook';
 
-function Heading(
+function UnconnectedHeading(
 	props: WordPressComponentProps< HeadingProps, 'h1' >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const headerProps = useHeading( props );
 
@@ -24,13 +24,13 @@ function Heading(
  *
  * @example
  * ```jsx
- * import { Heading } from `@wordpress/components`
+ * import { __experimentalHeading as Heading } from "@wordpress/components";
  *
  * function Example() {
  *   return <Heading>Code is Poetry</Heading>;
  * }
  * ```
  */
-const ConnectedHeading = contextConnect( Heading, 'Heading' );
+export const Heading = contextConnect( UnconnectedHeading, 'Heading' );
 
-export default ConnectedHeading;
+export default Heading;

package/src/heading/hook.ts

@@ -63,7 +63,7 @@ export function useHeading(
 		'aria-level'?: number;
 	} = {};
 	if ( typeof as === 'string' && as[ 0 ] !== 'h' ) {
-		// if not a semantic `h` element, add a11y props:
+		// If not a semantic `h` element, add a11y props:
 		a11yProps.role = 'heading';
 		a11yProps[ 'aria-level' ] =
 			typeof level === 'string' ? parseInt( level ) : level;

package/src/heading/stories/index.tsx

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Heading } from '..';
+
+const meta: ComponentMeta< typeof Heading > = {
+	component: Heading,
+	title: 'Components (Experimental)/Heading',
+	argTypes: {
+		adjustLineHeightForInnerControls: { control: { type: 'text' } },
+		as: { control: { type: 'text' } },
+		color: { control: { type: 'color' } },
+		display: { control: { type: 'text' } },
+		letterSpacing: { control: { type: 'text' } },
+		lineHeight: { control: { type: 'text' } },
+		optimizeReadabilityFor: { control: { type: 'color' } },
+		variant: { control: { type: 'radio' }, options: [ 'muted' ] },
+		weight: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+export const Default: ComponentStory< typeof Heading > = ( props ) => (
+	<Heading { ...props } />
+);
+Default.args = {
+	children: 'Heading',
+};

package/src/higher-order/with-filters/test/index.js

@@ -22,7 +22,7 @@ const assertExpectedHtml = ( wrapper, expectedHTML ) => {
 	expect( element.outerHTML ).toBe( expectedHTML );
 };
 
-// this is needed because TestUtils does not accept a stateless component.
+// This is needed because TestUtils does not accept a stateless component.
 // anything run through a HOC ends up as a stateless component.
 const getTestComponent = ( WrappedComponent ) => {
 	class TestComponent extends Component {

package/src/higher-order/with-focus-outside/test/index.js

@@ -36,7 +36,7 @@ describe( 'withFocusOutside', () => {
 		}
 	);
 
-	// this is needed because TestUtils does not accept a stateless component.
+	// This is needed because TestUtils does not accept a stateless component.
 	// anything run through a HOC ends up as a stateless component.
 	const getTestComponent = ( WrappedComponent, props ) => {
 		class TestComponent extends Component {

package/src/higher-order/with-notices/index.js

@@ -95,7 +95,7 @@ export default createHigherOrderComponent( ( OriginalComponent ) => {
 
 	let isForwardRef;
 	const { render } = OriginalComponent;
-	// Returns a forwardRef if OriginalComponent appears to be a forwardRef
+	// Returns a forwardRef if OriginalComponent appears to be a forwardRef.
 	if ( typeof render === 'function' ) {
 		isForwardRef = true;
 		return forwardRef( Component );

package/src/higher-order/with-notices/test/index.js

@@ -24,7 +24,7 @@ import {
  */
 import withNotices from '..';
 
-// Implementation detail of Notice component used to query the dismissal button
+// Implementation detail of Notice component used to query the dismissal button.
 const stockDismissText = 'Dismiss this notice';
 
 function noticesFrom( list ) {
@@ -151,13 +151,13 @@ describe( 'withNotices rendering', () => {
 		const [ buttonRemoveFirst ] = getAllByLabelText( stockDismissText );
 		const getRemovalTarget = () =>
 			within( container ).getByText(
-				// the last item corresponds to the first notice in the DOM
+				// The last item corresponds to the first notice in the DOM.
 				messages[ messages.length - 1 ]
 			);
 		expect(
 			await waitForElementToBeRemoved( () => {
 				const target = getRemovalTarget();
-				// Removes the first notice in the DOM
+				// Removes the first notice in the DOM.
 				fireEvent.click( buttonRemoveFirst );
 				return target;
 			} ).then( () => true )

package/src/index.js

@@ -1,4 +1,4 @@
-// Primitives
+// Primitives.
 export {
 	SVG,
 	Path,
@@ -10,7 +10,7 @@ export {
 	BlockQuotation,
 } from '@wordpress/primitives';
 
-// Components
+// Components.
 export { default as __experimentalAlignmentMatrixControl } from './alignment-matrix-control';
 export {
 	default as Animate,
@@ -100,6 +100,8 @@ export { default as __experimentalNavigationMenu } from './navigation/menu';
 export {
 	NavigatorProvider as __experimentalNavigatorProvider,
 	NavigatorScreen as __experimentalNavigatorScreen,
+	NavigatorButton as __experimentalNavigatorButton,
+	NavigatorBackButton as __experimentalNavigatorBackButton,
 	useNavigator as __experimentalUseNavigator,
 } from './navigator';
 export { default as Notice } from './notice';
@@ -161,7 +163,7 @@ export { Truncate as __experimentalTruncate } from './truncate';
 export {
 	default as __experimentalUnitControl,
 	useCustomUnits as __experimentalUseCustomUnits,
-	parseUnit as __experimentalParseUnit,
+	parseQuantityAndUnitFromRawValue as __experimentalParseQuantityAndUnitFromRawValue,
 } from './unit-control';
 export { View as __experimentalView } from './view';
 export { VisuallyHidden } from './visually-hidden';
@@ -177,7 +179,7 @@ export {
 export { default as __experimentalStyleProvider } from './style-provider';
 export { ZStack as __experimentalZStack } from './z-stack';
 
-// Higher-Order Components
+// Higher-Order Components.
 export {
 	default as navigateRegions,
 	useNavigateRegions as __unstableUseNavigateRegions,

package/src/index.native.js

@@ -62,7 +62,7 @@ export {
 } from './unit-control/utils';
 export { default as Disabled } from './disabled';
 
-// Higher-Order Components
+// Higher-Order Components.
 export { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing';
 export { default as withFallbackStyles } from './higher-order/with-fallback-styles';
 export { default as withFilters } from './higher-order/with-filters';
@@ -73,7 +73,7 @@ export { default as withNotices } from './higher-order/with-notices';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
 export * from './text';
 
-// Mobile Components
+// Mobile Components.
 export {
 	__unstableAutocompletionItemsFill,
 	__unstableAutocompletionItemsSlot,
@@ -113,7 +113,7 @@ export { default as AudioPlayer } from './mobile/audio-player';
 export { default as Badge } from './mobile/badge';
 export { default as Gridicons } from './mobile/gridicons';
 
-// Utils
+// Utils.
 export { colorsUtils } from './mobile/color-settings/utils';
 export {
 	WIDE_ALIGNMENTS,
@@ -121,7 +121,7 @@ export {
 	alignmentHelpers,
 } from './mobile/utils/alignments';
 
-// Hooks
+// Hooks.
 export {
 	convertUnitToMobile,
 	useConvertUnitToMobile,
@@ -134,4 +134,8 @@ export {
 	withGlobalStyles,
 	getMergedGlobalStyles,
 } from './mobile/global-styles-context';
-export { getGlobalStyles } from './mobile/global-styles-context/utils';
+export {
+	getGlobalStyles,
+	getColorsAndGradients,
+	useMobileGlobalStylesColors,
+} from './mobile/global-styles-context/utils';

package/src/input-control/index.tsx

@@ -3,7 +3,7 @@
  */
 import { noop } from 'lodash';
 import classNames from 'classnames';
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -45,7 +45,7 @@ export function InputControl(
 		value,
 		...props
 	}: InputControlProps,
-	ref: Ref< HTMLInputElement >
+	ref: ForwardedRef< HTMLInputElement >
 ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 

package/src/input-control/input-base.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -66,13 +66,13 @@ export function InputBase(
 		suffix,
 		...props
 	}: InputBaseProps,
-	ref: Ref< HTMLDivElement >
+	ref: ForwardedRef< HTMLDivElement >
 ) {
 	const id = useUniqueId( idProp );
 	const hideLabel = hideLabelFromVision || ! label;
 
 	return (
-		// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions
+		// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
 		<Root
 			{ ...props }
 			{ ...getUIFlexProps( labelPosition ) }

package/src/input-control/input-field.tsx

@@ -2,14 +2,14 @@
  * External dependencies
  */
 import { noop } from 'lodash';
-import { useDrag } from 'react-use-gesture';
+import { useDrag } from '@use-gesture/react';
 import type {
 	SyntheticEvent,
 	ChangeEvent,
 	KeyboardEvent,
 	PointerEvent,
 	FocusEvent,
-	Ref,
+	ForwardedRef,
 	MouseEvent,
 } from 'react';
 
@@ -17,7 +17,7 @@ import type {
  * WordPress dependencies
  */
 import { forwardRef, useRef } from '@wordpress/element';
-import { UP, DOWN, ENTER } from '@wordpress/keycodes';
+import { UP, DOWN, ENTER, ESCAPE } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
@@ -25,7 +25,6 @@ import type { WordPressComponentProps } from '../ui/context';
 import { useDragCursor } from './utils';
 import { Input } from './styles/input-control-styles';
 import { useInputControlStateReducer } from './reducer/reducer';
-import { isValueEmpty } from '../utils/values';
 import { useUpdateEffect } from '../utils';
 import type { InputFieldProps } from './types';
 
@@ -53,12 +52,12 @@ function InputField(
 		type,
 		...props
 	}: WordPressComponentProps< InputFieldProps, 'input', false >,
-	ref: Ref< HTMLInputElement >
+	ref: ForwardedRef< HTMLInputElement >
 ) {
 	const {
-		// State
+		// State.
 		state,
-		// Actions
+		// Actions.
 		change,
 		commit,
 		drag,
@@ -112,11 +111,7 @@ function InputField(
 		 */
 		if ( isPressEnterToChange && isDirty ) {
 			wasDirtyOnBlur.current = true;
-			if ( ! isValueEmpty( value ) ) {
-				handleOnCommit( event );
-			} else {
-				reset( valueProp, event );
-			}
+			handleOnCommit( event );
 		}
 	};
 
@@ -162,15 +157,19 @@ function InputField(
 					handleOnCommit( event );
 				}
 				break;
+
+			case ESCAPE:
+				if ( isPressEnterToChange && isDirty ) {
+					event.preventDefault();
+					reset( valueProp, event );
+				}
+				break;
 		}
 	};
 
 	const dragGestureProps = useDrag< PointerEvent< HTMLInputElement > >(
 		( dragProps ) => {
 			const { distance, dragging, event } = dragProps;
-			// The event is persisted to prevent errors in components using this
-			// to check if a modifier key was held while dragging.
-			event.persist();
 
 			if ( ! distance ) return;
 			event.stopPropagation();
@@ -194,8 +193,10 @@ function InputField(
 			}
 		},
 		{
+			axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y',
 			threshold: dragThreshold,
 			enabled: isDragEnabled,
+			pointer: { capture: false },
 		}
 	);
 

package/src/input-control/reducer/reducer.ts

@@ -50,6 +50,9 @@ export const composeStateReducers = (
 ): StateReducer => {
 	return ( ...args ) => {
 		return fns.reduceRight( ( state, fn ) => {
+			// TODO: Assess whether this can be replaced with a more standard `compose` implementation
+			// like wp.data.compose() (aka lodash flowRight) or Redux compose().
+			// The current implementation only works by functions mutating the original state object.
 			const fnState = fn( ...args );
 			return isEmpty( fnState ) ? state : { ...state, ...fnState };
 		}, {} as InputState );

package/src/input-control/stories/index.js

@@ -14,7 +14,7 @@ import { useState } from '@wordpress/element';
 import InputControl from '../';
 
 export default {
-	title: 'Components/InputControl',
+	title: 'Components (Experimental)/InputControl',
 	component: InputControl,
 	parameters: {
 		knobs: { disable: false },

package/src/input-control/styles/input-control-styles.tsx

@@ -212,6 +212,7 @@ export const Input = styled.input< InputProps >`
 		box-shadow: none !important;
 		color: ${ COLORS.black };
 		display: block;
+		font-family: inherit;
 		margin: 0;
 		outline: none;
 		width: 100%;

package/src/input-control/test/index.js

@@ -77,10 +77,10 @@ describe( 'InputControl', () => {
 			input.focus();
 			fireEvent.change( input, { target: { value: 'two' } } );
 
-			// Ensuring <InputControl /> is controlled
+			// Ensuring <InputControl /> is controlled.
 			fireEvent.blur( input );
 
-			// Updating the value
+			// Updating the value.
 			rerender( <InputControl value="three" onChange={ spy } /> );
 
 			expect( input.value ).toBe( 'three' );
@@ -103,12 +103,12 @@ describe( 'InputControl', () => {
 
 			// Assuming <InputControl /> is controlled (not focused)
 
-			// Updating the value
+			// Updating the value.
 			rerender( <InputControl value="New" onChange={ spy } /> );
 
 			expect( input.value ).toBe( 'New' );
 
-			// Change it back to the original value
+			// Change it back to the original value.
 			rerender( <InputControl value="Original" onChange={ spy } /> );
 
 			expect( input.value ).toBe( 'Original' );

package/src/input-control/types.ts

@@ -7,7 +7,7 @@ import type {
 	ChangeEvent,
 	SyntheticEvent,
 } from 'react';
-import type { useDrag } from 'react-use-gesture';
+import type { useDrag } from '@use-gesture/react';
 
 /**
  * Internal dependencies

package/src/isolated-event-container/index.js

@@ -14,7 +14,7 @@ export default forwardRef( ( { children, ...props }, ref ) => {
 	} );
 
 	// Disable reason: this stops certain events from propagating outside of the component.
-	//   - onMouseDown is disabled as this can cause interactions with other DOM elements
+	// - onMouseDown is disabled as this can cause interactions with other DOM elements.
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
 		<div { ...props } ref={ ref } onMouseDown={ stopPropagation }>

package/src/item-group/item/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -13,7 +13,7 @@ import { View } from '../../view';
 
 function Item(
 	props: WordPressComponentProps< ItemProps, 'div' >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const { role, wrapperClassName, ...otherProps } = useItem( props );
 

package/src/item-group/item-group/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -14,7 +14,7 @@ import type { ItemGroupProps } from '../types';
 
 function ItemGroup(
 	props: WordPressComponentProps< ItemGroupProps, 'div' >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const {
 		isBordered,

package/src/item-group/test/index.js

@@ -7,7 +7,6 @@ import { fireEvent, render, screen } from '@testing-library/react';
  * Internal dependencies
  */
 import { Item, ItemGroup } from '..';
-//  import { CONFIG } from '../../utils';
 
 describe( 'ItemGroup', () => {
 	describe( 'ItemGroup component', () => {

package/src/mobile/bottom-sheet/bottom-sheet-context.native.js

@@ -19,18 +19,18 @@ if (
 // Context in BottomSheet is necessary for controlling the
 // transition flow between subsheets and replacing a content inside them
 export const BottomSheetContext = createContext( {
-	// Specifies whether content is currently scrolling
+	// Specifies whether content is currently scrolling.
 	isBottomSheetContentScrolling: false,
-	// Function called to enable scroll within bottom sheet
+	// Function called to enable scroll within bottom sheet.
 	shouldEnableBottomSheetScroll: () => {},
 	// Function called to enable/disable bottom sheet max height.
 	// E.g. used to extend bottom sheet on full screen in ColorPicker,
 	// which is helpful on small devices with set the largest font/display size.
 	shouldEnableBottomSheetMaxHeight: () => {},
-	// Callback that is called on closing bottom sheet
+	// Callback that is called on closing bottom sheet.
 	onHandleClosingBottomSheet: () => {},
 	// Android only: Function called to control android hardware back button functionality
-	// Return true if the bottom-sheet default close action shouldn't be called
+	// Return true if the bottom-sheet default close action shouldn't be called.
 	onHandleHardwareButtonPress: () => {},
 	// Toggle full-screen styles and dimensions
 	setIsFullScreen: () => {},

package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js

@@ -87,7 +87,7 @@ function BottomSheetNavigationContainer( {
 
 	const setHeight = useCallback(
 		( height ) => {
-			// The screen is fullHeight
+			// The screen is fullHeight.
 			if (
 				typeof height === 'string' &&
 				typeof height !== typeof currentHeight

package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js

@@ -128,7 +128,16 @@ const BottomSheetNavigationScreen = ( {
 				</TouchableHighlight>
 			</ScrollView>
 		);
-	}, [ children, isFocused, safeAreaBottomInset, listProps ] );
+	}, [
+		children,
+		isFocused,
+		safeAreaBottomInset,
+		listProps,
+		name,
+		isScrollable,
+		isNested,
+		onLayout,
+	] );
 };
 
 export default BottomSheetNavigationScreen;

package/src/mobile/bottom-sheet/cell.native.js

@@ -190,7 +190,7 @@ class BottomSheetCell extends Component {
 		};
 
 		const separatorStyle = () => {
-			//eslint-disable-next-line @wordpress/no-unused-vars-before-return
+			// eslint-disable-next-line @wordpress/no-unused-vars-before-return
 			const defaultSeparatorStyle = this.props.getStylesFromColorScheme(
 				styles.separator,
 				styles.separatorDark