@wordpress/components 21.3.0 → 22.0.0

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

@@ -1,11 +1,7 @@
 /**
  * Internal dependencies
  */
-import {
-	isSimpleCssValue,
-	splitValueAndUnitFromSize,
-	getToggleGroupOptions,
-} from '../utils';
+import { isSimpleCssValue, getToggleGroupOptions } from '../utils';
 
 const simpleCSSCases: [ number | string, boolean ][] = [
 	// Test integers and non-integers.
@@ -41,46 +37,6 @@ describe( 'isSimpleCssValue', () => {
 	);
 } );
 
-const splitValuesCases: [
-	number | string,
-	string | undefined,
-	string | undefined
-][] = [
-	// 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 );
-		}
-	);
-} );
-
 describe( 'getToggleGroupOptions', () => {
 	test( 'should assign t-shirt sizes by default up until the aliases length', () => {
 		const optionsArray = [

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

@@ -58,7 +58,7 @@ export type FontSizePickerProps = {
 	/**
 	 * Size of the control.
 	 *
-	 * @default default
+	 * @default 'default'
 	 */
 	size?: 'default' | '__unstable-large';
 };

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

@@ -43,28 +43,6 @@ const FONT_SIZES_ALIASES = [
 	__( 'XXL' ),
 ];
 
-/**
- * Helper util to split a font size to its numeric value
- * and its `unit`, if exists.
- *
- * @param  size Font size.
- * @return An array with the numeric value and the unit if exists.
- */
-export function splitValueAndUnitFromSize(
-	size: NonNullable< FontSizePickerProps[ 'value' ] >
-) {
-	const [ numericValue, unit ] = `${ size }`.match( /[\d\.]+|\D+/g ) ?? [];
-
-	if (
-		! isNaN( parseFloat( numericValue ) ) &&
-		isFinite( Number( numericValue ) )
-	) {
-		return [ numericValue, unit ];
-	}
-
-	return [];
-}
-
 /**
  * Some themes use css vars for their font sizes, so until we
  * have the way of calculating them don't display them.

package/src/form-file-upload/README.md

@@ -81,9 +81,7 @@ This can be useful when you want to force a `change` event to fire when the user
 
 ### render
 
-Optional callback function used to render the UI. If passed the component does not render any UI and calls this function to render it.
-
-This function receives an object with the property `openFileDialog`. The property is a function that when called opens the browser window to upload files.
+Optional callback function used to render the UI. If passed, the component does not render the default UI (a button) and calls this function to render it. The function receives an object with property `openFileDialog`, a function that, when called, opens the browser native file upload modal window.
 
 -   Type: `Function`
 -   Required: No

package/src/form-file-upload/index.tsx

@@ -47,6 +47,7 @@ export function FormFileUpload( {
 			{ children }
 		</Button>
 	);
+
 	return (
 		<div className="components-form-file-upload">
 			{ ui }

package/src/form-file-upload/types.ts

@@ -55,9 +55,10 @@ export type FormFileUploadProps = {
 	/**
 	 * Optional callback function used to render the UI.
 	 *
-	 * If passed, the component does not render any UI and calls this function to render it.
-	 * This function receives an object with the property `openFileDialog`.
-	 * The property is a function that when called opens the browser window to upload files.
+	 * If passed, the component does not render the default UI (a button) and
+	 * calls this function to render it. The function receives an object with
+	 * property `openFileDialog`, a function that, when called, opens the browser
+	 * native file upload modal window.
 	 */
-	render?: ( arg: { openFileDialog: () => void } ) => void;
+	render?: ( arg: { openFileDialog: () => void } ) => ReactNode;
 };

package/src/form-toggle/test/__snapshots__/index.tsx.snap

@@ -1,20 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FormToggle basic rendering should render a span element with an unchecked checkbox 1`] = `
-<span
-  class="components-form-toggle"
->
-  <input
-    class="components-form-toggle__input"
-    type="checkbox"
-  />
+<div>
   <span
-    class="components-form-toggle__track"
-  />
-  <span
-    class="components-form-toggle__thumb"
-  />
-</span>
+    class="components-form-toggle"
+  >
+    <input
+      class="components-form-toggle__input"
+      type="checkbox"
+    />
+    <span
+      class="components-form-toggle__track"
+    />
+    <span
+      class="components-form-toggle__thumb"
+    />
+  </span>
+</div>
 `;
 
 exports[`FormToggle basic rendering should render an id prop for the input checkbox 1`] = `

package/src/form-toggle/test/index.tsx

@@ -36,7 +36,7 @@ describe( 'FormToggle', () => {
 			const { container } = render( <FormToggle onChange={ noop } /> );
 
 			expect( getInput() ).not.toBeChecked();
-			expect( container.firstChild ).toMatchSnapshot();
+			expect( container ).toMatchSnapshot();
 		} );
 
 		it( 'should render a checked checkbox when providing checked prop', () => {

package/src/h-stack/test/__snapshots__/index.tsx.snap

@@ -25,17 +25,19 @@ exports[`props should render alignment 1`] = `
   min-width: 0;
 }
 
-<div
-  class="components-flex components-h-stack emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="HStack"
->
+<div>
   <div
-    class="emotion-2 emotion-1"
-  />
-  <div
-    class="emotion-2 emotion-1"
-  />
+    class="components-flex components-h-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="HStack"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    />
+    <div
+      class="emotion-2 emotion-1"
+    />
+  </div>
 </div>
 `;
 
@@ -63,17 +65,19 @@ exports[`props should render correctly 1`] = `
   min-width: 0;
 }
 
-<div
-  class="components-flex components-h-stack emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="HStack"
->
-  <div
-    class="emotion-2 emotion-1"
-  />
+<div>
   <div
-    class="emotion-2 emotion-1"
-  />
+    class="components-flex components-h-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="HStack"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    />
+    <div
+      class="emotion-2 emotion-1"
+    />
+  </div>
 </div>
 `;
 
@@ -101,16 +105,18 @@ exports[`props should render spacing 1`] = `
   min-width: 0;
 }
 
-<div
-  class="components-flex components-h-stack emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="HStack"
->
-  <div
-    class="emotion-2 emotion-1"
-  />
+<div>
   <div
-    class="emotion-2 emotion-1"
-  />
+    class="components-flex components-h-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="HStack"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    />
+    <div
+      class="emotion-2 emotion-1"
+    />
+  </div>
 </div>
 `;

package/src/h-stack/test/index.tsx

@@ -17,7 +17,7 @@ describe( 'props', () => {
 				<View />
 			</HStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render alignment', () => {
@@ -27,7 +27,7 @@ describe( 'props', () => {
 				<View />
 			</HStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render spacing', () => {
@@ -37,6 +37,6 @@ describe( 'props', () => {
 				<View />
 			</HStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { without } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -64,10 +59,10 @@ export default function withFilters( hookName ) {
 			}
 
 			componentWillUnmount() {
-				FilteredComponentRenderer.instances = without(
-					FilteredComponentRenderer.instances,
-					this
-				);
+				FilteredComponentRenderer.instances =
+					FilteredComponentRenderer.instances.filter(
+						( instance ) => instance !== this
+					);
 
 				// If this was the last of the mounted components filtered on
 				// this hook, remove the hook handler.

package/src/index.js

@@ -6,6 +6,7 @@ export {
 	Polygon,
 	Rect,
 	G,
+	Line,
 	HorizontalRule,
 	BlockQuotation,
 } from '@wordpress/primitives';
@@ -126,7 +127,7 @@ export { default as PanelRow } from './panel/row';
 export { default as Placeholder } from './placeholder';
 export { default as Popover } from './popover';
 export { default as QueryControls } from './query-controls';
-export { default as __experimentalRadio } from './radio';
+export { default as __experimentalRadio } from './radio-group/radio';
 export { default as __experimentalRadioGroup } from './radio-group';
 export { default as RadioControl } from './radio-control';
 export { default as RangeControl } from './range-control';

package/src/input-control/index.tsx

@@ -45,6 +45,7 @@ export function UnforwardedInputControl(
 		onKeyDown = noop,
 		prefix,
 		size = 'default',
+		style,
 		suffix,
 		value,
 		...props
@@ -77,6 +78,7 @@ export function UnforwardedInputControl(
 			labelPosition={ labelPosition }
 			prefix={ prefix }
 			size={ size }
+			style={ style }
 			suffix={ suffix }
 		>
 			<InputField

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

@@ -22,7 +22,7 @@ import {
 	getSizeConfig,
 } from './styles/input-control-styles';
 import type { InputBaseProps, LabelPosition } from './types';
-import { ContextSystemProvider } from '../ui/context';
+import { ContextSystemProvider, WordPressComponentProps } from '../ui/context';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( InputBase );
@@ -31,7 +31,7 @@ function useUniqueId( idProp?: string ) {
 	return idProp || id;
 }
 
-// Adapter to map props for the new ui/flex compopnent.
+// Adapter to map props for the new ui/flex component.
 function getUIFlexProps( labelPosition?: LabelPosition ) {
 	const props: { direction?: string; gap?: number; justify?: string } = {};
 	switch ( labelPosition ) {
@@ -67,7 +67,7 @@ export function InputBase(
 		size = 'default',
 		suffix,
 		...props
-	}: InputBaseProps,
+	}: WordPressComponentProps< InputBaseProps, 'div' >,
 	ref: ForwardedRef< HTMLDivElement >
 ) {
 	const id = useUniqueId( idProp );

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

@@ -34,6 +34,7 @@ const rootFocusedStyles = ( { isFocused }: RootProps ) => {
 };
 
 export const Root = styled( Flex )< RootProps >`
+	box-sizing: border-box;
 	position: relative;
 	border-radius: 2px;
 	padding-top: 0;

package/src/input-control/types.ts

@@ -4,9 +4,7 @@
 import type {
 	CSSProperties,
 	ReactNode,
-	ChangeEvent,
 	SyntheticEvent,
-	PointerEvent,
 	HTMLInputTypeAttribute,
 } from 'react';
 import type { useDrag } from '@use-gesture/react';
@@ -62,10 +60,10 @@ interface BaseProps {
 	size?: Size;
 }
 
-export type InputChangeCallback<
-	E = ChangeEvent< HTMLInputElement > | PointerEvent< HTMLInputElement >,
-	P = {}
-> = ( nextValue: string | undefined, extra: { event: E } & P ) => void;
+export type InputChangeCallback< P = {} > = (
+	nextValue: string | undefined,
+	extra: { event: SyntheticEvent } & P
+) => void;
 
 export interface InputFieldProps extends BaseProps {
 	/**
@@ -165,11 +163,6 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 	 * @default false
 	 */
 	disabled?: boolean;
-	/**
-	 * The class name to be added to the wrapper element.
-	 */
-	className?: string;
-	id?: string;
 	/**
 	 * If this property is added, a label will be generated using label property as the content.
 	 */

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

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { ComponentPropsWithoutRef, MouseEvent } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
+
+function stopPropagation( event: MouseEvent ) {
+	event.stopPropagation();
+}
+
+type DivProps = ComponentPropsWithoutRef< 'div' >;
+
+const IsolatedEventContainer = forwardRef< HTMLDivElement, DivProps >(
+	( props, ref ) => {
+		deprecated( 'wp.components.IsolatedEventContainer', {
+			since: '5.7',
+		} );
+
+		// Disable reason: this stops certain events from propagating outside of the component.
+		// - 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 } />;
+		/* eslint-enable jsx-a11y/no-static-element-interactions */
+	}
+);
+
+export default IsolatedEventContainer;

package/src/item-group/styles.ts

@@ -13,7 +13,7 @@ export const unstyledButton = css`
 	border: 1px solid transparent;
 	cursor: pointer;
 	background: none;
-	text-align: left;
+	text-align: start;
 
 	&:hover {
 		color: ${ COLORS.ui.theme };