@wordpress/components 19.10.0 → 19.13.0

package/src/tree-grid/roving-tab-index-item.js

@@ -14,10 +14,8 @@ export default forwardRef( function RovingTabIndexItem(
 ) {
 	const localRef = useRef();
 	const ref = forwardedRef || localRef;
-	const {
-		lastFocusedElement,
-		setLastFocusedElement,
-	} = useRovingTabIndexContext();
+	const { lastFocusedElement, setLastFocusedElement } =
+		useRovingTabIndexContext();
 	let tabIndex;
 
 	if ( lastFocusedElement ) {

package/src/tree-grid/test/index.js

@@ -35,9 +35,8 @@ describe( 'TreeGrid', () => {
 	] );
 
 	beforeAll( () => {
-		window.Element.prototype.getClientRects = jest.fn(
-			mockedGetClientRects
-		);
+		window.Element.prototype.getClientRects =
+			jest.fn( mockedGetClientRects );
 	} );
 
 	afterAll( () => {

package/src/tree-select/README.md

@@ -80,12 +80,12 @@ A function that receives the id of the new node element that is being selected.
 
 The id of the currently selected node.
 
--   Type: `Object`
+-   Type: `string` | `string[]`
 -   Required: No
 
 ### tree
 
 An array containing the tree objects with the possible nodes the user can select.
 
--   Type: `String`
+-   Type: `Object[]`
 -   Required: No

package/src/tree-select/index.tsx

@@ -0,0 +1,99 @@
+/**
+ * External dependencies
+ */
+import { unescape as unescapeString, repeat, flatMap, compact } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { SelectControl } from '../select-control';
+import type { TreeSelectProps, Tree, SelectOptions } from './types';
+
+function getSelectOptions( tree: Tree[], level = 0 ): SelectOptions {
+	return flatMap( tree, ( treeNode ) => [
+		{
+			value: treeNode.id,
+			label:
+				repeat( '\u00A0', level * 3 ) + unescapeString( treeNode.name ),
+		},
+		...getSelectOptions( treeNode.children || [], level + 1 ),
+	] );
+}
+
+/**
+ * TreeSelect component is used to generate select input fields.
+ *
+ * @example
+ * ```jsx
+ * import { TreeSelect } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyTreeSelect = () => {
+ * 	const [ page, setPage ] = useState( 'p21' );
+ *
+ * 	return (
+ * 		<TreeSelect
+ * 			label="Parent page"
+ * 			noOptionLabel="No parent page"
+ * 			onChange={ ( newPage ) => setPage( newPage ) }
+ * 			selectedId={ page }
+ * 			tree={ [
+ * 				{
+ * 					name: 'Page 1',
+ * 					id: 'p1',
+ * 					children: [
+ * 						{ name: 'Descend 1 of page 1', id: 'p11' },
+ * 						{ name: 'Descend 2 of page 1', id: 'p12' },
+ * 					],
+ * 				},
+ * 				{
+ * 					name: 'Page 2',
+ * 					id: 'p2',
+ * 					children: [
+ * 						{
+ * 							name: 'Descend 1 of page 2',
+ * 							id: 'p21',
+ * 							children: [
+ * 								{
+ * 									name: 'Descend 1 of Descend 1 of page 2',
+ * 									id: 'p211',
+ * 								},
+ * 							],
+ * 						},
+ * 					],
+ * 				},
+ * 			] }
+ * 		/>
+ * 	);
+ * }
+ * ```
+ */
+export function TreeSelect( {
+	label,
+	noOptionLabel,
+	onChange,
+	selectedId,
+	tree = [],
+	...props
+}: TreeSelectProps ) {
+	const options = useMemo( () => {
+		return compact( [
+			noOptionLabel && { value: '', label: noOptionLabel },
+			...getSelectOptions( tree ),
+		] );
+	}, [ noOptionLabel, tree ] );
+
+	return (
+		<SelectControl
+			{ ...{ label, options, onChange } }
+			value={ selectedId }
+			{ ...props }
+		/>
+	);
+}
+
+export default TreeSelect;

package/src/tree-select/stories/index.tsx

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentProps } from 'react';
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TreeSelect from '../';
+
+const meta: ComponentMeta< typeof TreeSelect > = {
+	title: 'Components/TreeSelect',
+	component: TreeSelect,
+	argTypes: {
+		help: { control: { type: 'text' } },
+		label: { control: { type: 'text' } },
+		prefix: { control: { type: 'text' } },
+		suffix: { control: { type: 'text' } },
+		selectedId: { control: { type: null } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+
+export default meta;
+
+const TreeSelectWithState: ComponentStory< typeof TreeSelect > = ( props ) => {
+	const [ selection, setSelection ] =
+		useState< ComponentProps< typeof TreeSelect >[ 'selectedId' ] >();
+
+	return (
+		<TreeSelect
+			{ ...props }
+			onChange={ setSelection }
+			selectedId={ selection }
+		/>
+	);
+};
+
+export const Default = TreeSelectWithState.bind( {} );
+Default.args = {
+	label: 'Label Text',
+	noOptionLabel: 'No parent page',
+	help: 'Help text to explain the select control.',
+	tree: [
+		{
+			name: 'Page 1',
+			id: 'p1',
+			children: [
+				{ name: 'Descend 1 of page 1', id: 'p11' },
+				{ name: 'Descend 2 of page 1', id: 'p12' },
+			],
+		},
+		{
+			name: 'Page 2',
+			id: 'p2',
+			children: [
+				{
+					name: 'Descend 1 of page 2',
+					id: 'p21',
+					children: [
+						{
+							name: 'Descend 1 of Descend 1 of page 2',
+							id: 'p211',
+						},
+					],
+				},
+			],
+		},
+	],
+};

package/src/tree-select/types.ts

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import type { ComponentProps } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type SelectControl from '../select-control';
+import type { SelectControlProps } from '../select-control/types';
+
+export type SelectOptions = Required<
+	ComponentProps< typeof SelectControl >
+>[ 'options' ];
+
+export interface Tree {
+	id: string;
+	name: string;
+	children?: Tree[];
+}
+
+export interface TreeSelectProps extends Omit< SelectControlProps, 'value' > {
+	/**
+	 * If this property is added, an option will be added with this label to represent empty selection.
+	 */
+	noOptionLabel?: string;
+	/**
+	 * An array containing the tree objects with the possible nodes the user can select.
+	 */
+	tree?: Tree[];
+	/**
+	 * The id of the currently selected node.
+	 */
+	selectedId?: ComponentProps< typeof SelectControl >[ 'value' ];
+}

package/src/ui/context/wordpress-component.ts

@@ -47,8 +47,7 @@ export type WordPressComponent<
 	selector: `.${ string }`;
 };
 
-export type WordPressComponentFromProps<
-	Props
-> = Props extends WordPressComponentProps< infer P, infer T, infer I >
-	? WordPressComponent< T, P, I >
-	: never;
+export type WordPressComponentFromProps< Props > =
+	Props extends WordPressComponentProps< infer P, infer T, infer I >
+		? WordPressComponent< T, P, I >
+		: never;

package/src/ui/form-group/form-group-content.js

@@ -26,10 +26,10 @@ function FormGroupContent( {
 	truncate,
 	...props
 } ) {
-	const contextProps = useMemo( () => ( { id, horizontal } ), [
-		id,
-		horizontal,
-	] );
+	const contextProps = useMemo(
+		() => ( { id, horizontal } ),
+		[ id, horizontal ]
+	);
 
 	const content = help ? (
 		<VStack expanded={ false } spacing={ spacing }>

package/src/unit-control/index.tsx

@@ -160,15 +160,13 @@ function UnforwardedUnitControl(
 			refParsedQuantity.current = undefined;
 			return;
 		}
-		const [
-			validParsedQuantity,
-			validParsedUnit,
-		] = getValidParsedQuantityAndUnit(
-			event.currentTarget.value,
-			units,
-			parsedQuantity,
-			unit
-		);
+		const [ validParsedQuantity, validParsedUnit ] =
+			getValidParsedQuantityAndUnit(
+				event.currentTarget.value,
+				units,
+				parsedQuantity,
+				unit
+			);
 
 		refParsedQuantity.current = validParsedQuantity;
 

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

@@ -67,9 +67,8 @@ const DefaultTemplate: ComponentStory< typeof UnitControl > = ( {
 	);
 };
 
-export const Default: ComponentStory<
-	typeof UnitControl
-> = DefaultTemplate.bind( {} );
+export const Default: ComponentStory< typeof UnitControl > =
+	DefaultTemplate.bind( {} );
 Default.args = {
 	label: 'Label',
 };
@@ -79,9 +78,8 @@ Default.args = {
  * will not fire while a new value is typed in the input field (you can verify this
  * behavior by inspecting the console's output).
  */
-export const PressEnterToChange: ComponentStory<
-	typeof UnitControl
-> = DefaultTemplate.bind( {} );
+export const PressEnterToChange: ComponentStory< typeof UnitControl > =
+	DefaultTemplate.bind( {} );
 PressEnterToChange.args = {
 	...Default.args,
 	isPressEnterToChange: true,
@@ -95,9 +93,8 @@ PressEnterToChange.args = {
  * Most of `NumberControl`'s props can be passed to `UnitControl`, and they will
  * affect its numeric input field.
  */
-export const TweakingTheNumberInput: ComponentStory<
-	typeof UnitControl
-> = DefaultTemplate.bind( {} );
+export const TweakingTheNumberInput: ComponentStory< typeof UnitControl > =
+	DefaultTemplate.bind( {} );
 TweakingTheNumberInput.args = {
 	...Default.args,
 	min: 0,
@@ -109,9 +106,8 @@ TweakingTheNumberInput.args = {
 /**
  * When only one unit is available, the unit selection dropdown becomes static text.
  */
-export const WithSingleUnit: ComponentStory<
-	typeof UnitControl
-> = DefaultTemplate.bind( {} );
+export const WithSingleUnit: ComponentStory< typeof UnitControl > =
+	DefaultTemplate.bind( {} );
 WithSingleUnit.args = {
 	...Default.args,
 	units: CSS_UNITS.slice( 0, 1 ),

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

@@ -16,10 +16,6 @@ import UnitControl from '..';
 import { parseQuantityAndUnitFromRawValue } from '../utils';
 import type { UnitControlOnChangeCallback } from '../types';
 
-const user = userEvent.setup( {
-	advanceTimers: jest.advanceTimersByTime,
-} );
-
 const getInput = ( {
 	isInputTypeText = false,
 }: {
@@ -43,9 +39,8 @@ const ControlledSyncUnits = () => {
 		fieldName: 'valueA' | 'valueB',
 		newValue?: string | number
 	) => {
-		const parsedQuantityAndUnit = parseQuantityAndUnitFromRawValue(
-			newValue
-		);
+		const parsedQuantityAndUnit =
+			parseQuantityAndUnitFromRawValue( newValue );
 		const quantity = parsedQuantityAndUnit[ 0 ];
 
 		if ( ! Number.isFinite( quantity ) ) {
@@ -60,10 +55,8 @@ const ControlledSyncUnits = () => {
 		};
 
 		Object.entries( state ).forEach( ( [ stateProp, stateValue ] ) => {
-			const [
-				stateQuantity,
-				stateUnit,
-			] = parseQuantityAndUnitFromRawValue( stateValue );
+			const [ stateQuantity, stateUnit ] =
+				parseQuantityAndUnitFromRawValue( stateValue );
 
 			if ( stateProp !== fieldName && stateUnit !== newUnit ) {
 				nextState[
@@ -147,6 +140,10 @@ describe( 'UnitControl', () => {
 
 	describe( 'Value', () => {
 		it( 'should update value on change', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			let state = '50px';
 			const setState = jest.fn( ( value ) => ( state = value ) );
 
@@ -165,6 +162,10 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should increment value on UP press', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			let state: string | undefined = '50px';
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
 				( state = nextState );
@@ -178,6 +179,10 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should increment value on UP + SHIFT press, with step', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			let state: string | undefined = '50px';
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
 				( state = nextState );
@@ -191,6 +196,10 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should decrement value on DOWN press', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			let state: string | number | undefined = 50;
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
 				( state = nextState );
@@ -204,6 +213,10 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should decrement value on DOWN + SHIFT press, with step', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			let state: string | number | undefined = 50;
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
 				( state = nextState );
@@ -217,6 +230,10 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should cancel change when ESCAPE key is pressed', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			let state: string | number | undefined = 50;
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
 				( state = nextState );
@@ -244,6 +261,10 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should run onBlur callback when quantity input is blurred', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const onChangeSpy = jest.fn();
 			const onBlurSpy = jest.fn();
 
@@ -275,6 +296,10 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should invoke onChange and onUnitChange callbacks when isPressEnterToChange is true and the component is blurred with an uncommitted value', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const onUnitChangeSpy = jest.fn();
 			const onChangeSpy = jest.fn();
 
@@ -316,6 +341,10 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should update value correctly when typed and blurred when a single unit is passed', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const onChangeSpy = jest.fn();
 			render(
 				<>
@@ -348,6 +377,10 @@ describe( 'UnitControl', () => {
 
 	describe( 'Unit', () => {
 		it( 'should update unit value on change', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			let state: string | undefined = '14rem';
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
 				( state = nextState );
@@ -388,6 +421,10 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should reset value on unit change, if unit has default value', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			let state: string | number | undefined = 50;
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
 				( state = nextState );
@@ -417,6 +454,10 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should not reset value on unit change, if disabled', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			let state: string | number | undefined = 50;
 			const setState: UnitControlOnChangeCallback = ( nextState ) =>
 				( state = nextState );
@@ -446,6 +487,10 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should set correct unit if single units', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			let state: string | undefined = '50%';
 			const setState: UnitControlOnChangeCallback = ( value ) =>
 				( state = value );
@@ -466,6 +511,10 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should update unit value when a new raw value is passed', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			render( <ControlledSyncUnits /> );
 
 			const [ inputA, inputB ] = screen.getAllByRole( 'spinbutton' );
@@ -494,6 +543,10 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should maintain the chosen non-default unit when value is cleared', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const units = [
 				{ value: 'pt', label: 'pt' },
 				{ value: 'vmax', label: 'vmax' },
@@ -511,6 +564,10 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should run onBlur callback when the unit select is blurred', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const onUnitChangeSpy = jest.fn();
 			const onBlurSpy = jest.fn();
 
@@ -540,6 +597,10 @@ describe( 'UnitControl', () => {
 
 	describe( 'Unit Parser', () => {
 		it( 'should parse unit from input', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			let state = '10px';
 			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
 
@@ -561,6 +622,10 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should parse PX unit from input', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			let state = '10px';
 			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
 
@@ -582,6 +647,10 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should parse EM unit from input', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			let state = '10px';
 			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
 
@@ -603,6 +672,10 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should parse % unit from input', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			let state = '10px';
 			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
 
@@ -624,6 +697,10 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should parse REM unit from input', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			let state = '10px';
 			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
 

package/src/utils/hooks/index.js

@@ -1,6 +1,5 @@
 export { default as useControlledState } from './use-controlled-state';
 export { default as useUpdateEffect } from './use-update-effect';
-export { useCombinedRef } from './use-combined-ref';
 export { useControlledValue } from './use-controlled-value';
 export { useCx } from './use-cx';
 export { useLatestRef } from './use-latest-ref';

package/src/utils/hooks/stories/use-cx.js

@@ -33,19 +33,20 @@ const ExampleWithUseMemoWrong = ( { serializedStyles, children } ) => {
 	const cx = useCx();
 	// Wrong: using 'useMemo' without adding 'cx' to the dependency list.
 	// eslint-disable-next-line react-hooks/exhaustive-deps
-	const classes = useMemo( () => cx( serializedStyles ), [
-		serializedStyles,
-	] );
+	const classes = useMemo(
+		() => cx( serializedStyles ),
+		[ serializedStyles ]
+	);
 	return <span className={ classes }>{ children }</span>;
 };
 
 const ExampleWithUseMemoRight = ( { serializedStyles, children } ) => {
 	const cx = useCx();
 	// Right: using 'useMemo' with 'cx' listed as a dependency.
-	const classes = useMemo( () => cx( serializedStyles ), [
-		cx,
-		serializedStyles,
-	] );
+	const classes = useMemo(
+		() => cx( serializedStyles ),
+		[ cx, serializedStyles ]
+	);
 	return <span className={ classes }>{ children }</span>;
 };
 

package/src/utils/hooks/test/use-controlled-state.js

@@ -2,13 +2,14 @@
  * External dependencies
  */
 import { render, fireEvent, screen } from '@testing-library/react';
-import { noop } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import useControlledState from '../use-controlled-state';
 
+const noop = () => {};
+
 describe( 'hooks', () => {
 	const getInput = () => screen.getByTestId( 'input' );
 

package/src/utils/unit-values.ts

@@ -1,4 +1,5 @@
-const UNITED_VALUE_REGEX = /^([\d.\-+]*)\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?$/;
+const UNITED_VALUE_REGEX =
+	/^([\d.\-+]*)\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?$/;
 
 /**
  * Parses a number and unit from a value.

package/src/utils/values.js

@@ -88,9 +88,8 @@ export function isValueNumeric( value, locale = window.navigator.language ) {
 		}
 	}
 
-	const [ delimiterRegexp, decimalRegexp ] = getDelimiterAndDecimalRegex(
-		locale
-	);
+	const [ delimiterRegexp, decimalRegexp ] =
+		getDelimiterAndDecimalRegex( locale );
 	const valueToCheck =
 		typeof value === 'string'
 			? value