@wordpress/components 19.16.0 → 19.17.0

package/src/flex/flex-block/{component.js → component.tsx}

@@ -1,24 +1,29 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { View } from '../../view';
+import type { FlexBlockProps } from '../types';
 import { useFlexBlock } from './hook';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexBlockProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                            forwardedRef
- */
-function FlexBlock( props, forwardedRef ) {
+function UnconnectedFlexBlock(
+	props: WordPressComponentProps< FlexBlockProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const flexBlockProps = useFlexBlock( props );
 
 	return <View { ...flexBlockProps } ref={ forwardedRef } />;
 }
 
 /**
- * `FlexBlock` is a primitive layout component that adaptively resizes content within layout containers like `Flex`.
+ * `FlexBlock` is a primitive layout component that adaptively resizes content
+ * within layout containers like `Flex`.
  *
- * @example
  * ```jsx
  * import { Flex, FlexBlock } from '@wordpress/components';
  *
@@ -31,6 +36,6 @@ function FlexBlock( props, forwardedRef ) {
  * }
  * ```
  */
-const ConnectedFlexBlock = contextConnect( FlexBlock, 'FlexBlock' );
+export const FlexBlock = contextConnect( UnconnectedFlexBlock, 'FlexBlock' );
 
-export default ConnectedFlexBlock;
+export default FlexBlock;

package/src/flex/flex-block/{hook.js → hook.ts}

@@ -1,13 +1,13 @@
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import { useFlexItem } from '../flex-item';
+import type { FlexBlockProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexBlockProps, 'div'>} props
- */
-export function useFlexBlock( props ) {
+export function useFlexBlock(
+	props: WordPressComponentProps< FlexBlockProps, 'div' >
+) {
 	const otherProps = useContextSystem( props, 'FlexBlock' );
 	const flexItemProps = useFlexItem( { isBlock: true, ...otherProps } );
 

package/src/flex/flex-item/README.md

@@ -8,14 +8,15 @@ See [`flex/README.md#usage`](/packages/components/src/flex/flex/README.md#usage)
 
 ## Props
 
-### display
-
-**Type**: `[CSSProperties['display']]`
+### `display`: `CSSProperties['display']`
 
 The CSS display property of `FlexItem`.
 
-### isBlock
+-   Required: No
 
-**Type**: `[boolean]`
+### `isBlock`: `boolean`
 
 Determins if `FlexItem` should render as an adaptive full-width block.
+
+-   Required: No
+-   Default: `false`

package/src/flex/flex-item/{component.js → component.tsx}

@@ -1,24 +1,29 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { View } from '../../view';
 import { useFlexItem } from './hook';
+import type { FlexItemProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexItemProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                           forwardedRef
- */
-function FlexItem( props, forwardedRef ) {
+function UnconnectedFlexItem(
+	props: WordPressComponentProps< FlexItemProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const flexItemProps = useFlexItem( props );
 
 	return <View { ...flexItemProps } ref={ forwardedRef } />;
 }
 
 /**
- * `FlexItem` is a primitive layout component that aligns content within layout containers like `Flex`.
+ * `FlexItem` is a primitive layout component that aligns content within layout
+ * containers like `Flex`.
  *
- * @example
  * ```jsx
  * import { Flex, FlexItem } from '@wordpress/components';
  *
@@ -31,6 +36,6 @@ function FlexItem( props, forwardedRef ) {
  * }
  * ```
  */
-const ConnectedFlexItem = contextConnect( FlexItem, 'FlexItem' );
+export const FlexItem = contextConnect( UnconnectedFlexItem, 'FlexItem' );
 
-export default ConnectedFlexItem;
+export default FlexItem;

package/src/flex/flex-item/{hook.js → hook.ts}

@@ -1,27 +1,30 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/react';
+import { css, SerializedStyles } from '@emotion/react';
 
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
 import { useFlexContext } from '../context';
 import * as styles from '../styles';
 import { useCx } from '../../utils/hooks/use-cx';
+import type { FlexItemProps } from '../types';
 
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexItemProps, 'div'>} props
- */
-export function useFlexItem( props ) {
+export function useFlexItem(
+	props: WordPressComponentProps< FlexItemProps, 'div' >
+) {
 	const {
 		className,
 		display: displayProp,
 		isBlock = false,
 		...otherProps
 	} = useContextSystem( props, 'FlexItem' );
-	const sx = {};
+
+	const sx: {
+		Base?: SerializedStyles;
+	} = {};
 
 	const contextDisplay = useFlexContext().flexItemDisplay;
 

package/src/flex/stories/index.tsx

@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Flex, FlexItem, FlexBlock } from '../';
+import { View } from '../../view';
+
+const meta: ComponentMeta< typeof Flex > = {
+	component: Flex,
+	title: 'Components/Flex',
+	subcomponents: { FlexBlock, FlexItem },
+	argTypes: {
+		align: { control: { type: 'text' } },
+		as: { control: { type: 'text' } },
+		children: { control: { type: null } },
+		gap: { control: { type: 'text' } },
+		justify: { control: { type: 'text' } },
+		// Disabled isReversed because it's deprecated.
+		isReversed: {
+			table: {
+				disable: true,
+			},
+		},
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const GrayBox = ( { children }: { children: string } ) => (
+	<View style={ { backgroundColor: '#eee', padding: 10 } }>{ children }</View>
+);
+
+export const Default: ComponentStory< typeof Flex > = ( { ...args } ) => {
+	return (
+		<Flex { ...args }>
+			<FlexItem>
+				<GrayBox>Item 1</GrayBox>
+			</FlexItem>
+			<FlexItem>
+				<GrayBox>Item 2</GrayBox>
+			</FlexItem>
+			<FlexItem>
+				<GrayBox>Item 3</GrayBox>
+			</FlexItem>
+		</Flex>
+	);
+};
+Default.args = {};
+
+export const ResponsiveDirection: ComponentStory< typeof Flex > = ( {
+	...args
+} ) => {
+	return (
+		<Flex { ...args }>
+			<FlexItem>
+				<GrayBox>Item 1</GrayBox>
+			</FlexItem>
+			<FlexBlock>
+				<GrayBox>Item 2</GrayBox>
+			</FlexBlock>
+			<FlexItem>
+				<GrayBox>Item 3</GrayBox>
+			</FlexItem>
+			<FlexItem>
+				<GrayBox>Item 4</GrayBox>
+			</FlexItem>
+		</Flex>
+	);
+};
+ResponsiveDirection.args = {
+	direction: [ 'column', 'row' ],
+};

package/src/flex/test/__snapshots__/{index.js.snap → index.tsx.snap}

@@ -5,21 +5,30 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -7,14 +7,10 @@
+@@ -1,22 +1,18 @@
+  <div
+    class="components-flex css-1giw1wa-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+-   data-testid="flex"
++   data-testid="base-flex"
+    data-wp-c16t="true"
+    data-wp-component="Flex"
+  >
+    <div
       class="components-flex-item css-mw3lhz-View-Item-sx-Base em57xhy0"
       data-wp-c16t="true"
       data-wp-component="FlexItem"
-    />
-    <div
+    >
+      Item
+    </div>
+-   <div
 -     class="css-1mm2cvy-View em57xhy0"
 -   />
 -   <div />
--   <div
+    <div
       class="components-flex-item components-flex-block css-14wzr73-View-Item-sx-Base-block em57xhy0"
       data-wp-c16t="true"
       data-wp-component="FlexBlock"
-    />
-  </div>
+    >
 `;
 
 exports[`props should render align 1`] = `
@@ -97,6 +106,7 @@ exports[`props should render correctly 1`] = `
 
 <div
   class="components-flex emotion-0 emotion-1"
+  data-testid="base-flex"
   data-wp-c16t="true"
   data-wp-component="Flex"
 >
@@ -104,12 +114,16 @@ exports[`props should render correctly 1`] = `
     class="components-flex-item emotion-2 emotion-1"
     data-wp-c16t="true"
     data-wp-component="FlexItem"
-  />
+  >
+    Item
+  </div>
   <div
     class="components-flex-item components-flex-block emotion-4 emotion-1"
     data-wp-c16t="true"
     data-wp-component="FlexBlock"
-  />
+  >
+    Item
+  </div>
 </div>
 `;
 
@@ -142,5 +156,31 @@ Snapshot Diff:
 
 exports[`props should render spacing 1`] = `
 Snapshot Diff:
-Compared values have no visual difference.
+- Received styles
++ Base styles
+
+  Array [
+    Object {
+-     "margin-left": "calc(4px * 2)",
+-   },
+-   Object {
+-     "min-width": "0",
+-   },
+-   Object {
+      "-ms-flex": "1",
+      "-webkit-flex": "1",
+      "display": "block",
+      "flex": "1",
+      "max-height": "100%",
+      "max-width": "100%",
+      "min-height": "0",
++     "min-width": "0",
++   },
++   Object {
++     "margin-left": "calc(4px * 5)",
++   },
++   Object {
+      "min-width": "0",
+    },
+  ]
 `;

package/src/flex/test/index.tsx

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../view';
+import { Flex, FlexBlock, FlexItem } from '../';
+
+describe( 'props', () => {
+	beforeEach( () => {
+		render(
+			<Flex data-testid="base-flex">
+				<FlexItem>Item</FlexItem>
+				<FlexBlock>Item</FlexBlock>
+			</Flex>
+		);
+	} );
+
+	test( 'should render correctly', () => {
+		expect( screen.getByTestId( 'base-flex' ) ).toMatchSnapshot();
+	} );
+
+	test( 'should render + wrap non Flex children', () => {
+		render(
+			<Flex data-testid="flex">
+				<FlexItem>Item</FlexItem>
+				<View />
+				<div />
+				<FlexBlock>Item</FlexBlock>
+			</Flex>
+		);
+
+		expect( screen.getByTestId( 'flex' ) ).toMatchDiffSnapshot(
+			screen.getByTestId( 'base-flex' )
+		);
+	} );
+
+	test( 'should render align', () => {
+		render(
+			<Flex align="flex-start" data-testid="flex">
+				<FlexItem>Item</FlexItem>
+				<FlexBlock>Item</FlexBlock>
+			</Flex>
+		);
+		expect( screen.getByTestId( 'flex' ) ).toMatchStyleDiffSnapshot(
+			screen.getByTestId( 'base-flex' )
+		);
+	} );
+
+	test( 'should render justify', () => {
+		render(
+			<Flex justify="flex-start" data-testid="flex">
+				<FlexItem>Item</FlexItem>
+				<FlexBlock>Item</FlexBlock>
+			</Flex>
+		);
+		expect( screen.getByTestId( 'flex' ) ).toMatchStyleDiffSnapshot(
+			screen.getByTestId( 'base-flex' )
+		);
+	} );
+
+	test( 'should render spacing', () => {
+		render(
+			<>
+				<Flex>
+					<FlexItem>Item</FlexItem>
+					<FlexBlock data-testid="flex-block">Item</FlexBlock>
+				</Flex>
+				<Flex gap={ 5 }>
+					<FlexItem>Item</FlexItem>
+					<FlexBlock data-testid="flex-block-with-gap">
+						Item
+					</FlexBlock>
+				</Flex>
+			</>
+		);
+		expect( screen.getByTestId( 'flex-block' ) ).toMatchStyleDiffSnapshot(
+			screen.getByTestId( 'flex-block-with-gap' )
+		);
+	} );
+} );

package/src/flex/types.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 /**
  * Internal dependencies
@@ -15,21 +15,24 @@ export type FlexDirection = ResponsiveCSSValue<
 
 export type FlexProps = {
 	/**
-	 * Aligns children using CSS Flexbox `align-items`. Vertically aligns content if the `direction` is `row`, or horizontally aligns content if the `direction` is `column`.
-	 *
-	 * In the example below, `flex-start` will align the children content to the top.
+	 * Aligns children using CSS Flexbox `align-items`. Vertically aligns
+	 * content if the `direction` is `row`, or horizontally aligns content if
+	 * the `direction` is `column`.
 	 *
 	 * @default 'center'
 	 */
 	align?: CSSProperties[ 'alignItems' ];
 	/**
-	 * The direction flow of the children content can be adjusted with `direction`. `column` will align children vertically and `row` will align children horizontally.
+	 * The direction flow of the children content can be adjusted with
+	 * `direction`. `column` will align children vertically and `row` will align
+	 * children horizontally.
 	 *
 	 * @default 'row'
 	 */
 	direction?: FlexDirection;
 	/**
-	 * Expands to the maximum available width (if horizontal) or height (if vertical).
+	 * Expands to the maximum available width (if horizontal) or height (if
+	 * vertical).
 	 *
 	 * @default true
 	 */
@@ -37,14 +40,15 @@ export type FlexProps = {
 	/**
 	 * Spacing in between each child can be adjusted by using `gap`.
 	 *
-	 * Can either be a number (which will act as a multiplier to the library's grid system base of 4px),
-	 * or a literal CSS value string.
+	 * Can either be a number (which will act as a multiplier to the library's
+	 * grid system base of 4px), or a literal CSS value string.
 	 *
 	 * @default 2
 	 */
 	gap?: SpaceInput;
 	/**
-	 * Horizontally aligns content if the `direction` is `row`, or vertically aligns content if the `direction` is `column`.
+	 * Horizontally aligns content if the `direction` is `row`, or vertically
+	 * aligns content if the `direction` is `column`.
 	 *
 	 * @default 'space-between'
 	 */
@@ -58,7 +62,7 @@ export type FlexProps = {
 	/**
 	 * The children elements.
 	 */
-	children: React.ReactNode;
+	children: ReactNode;
 	/**
 	 * @deprecated
 	 */
@@ -79,7 +83,7 @@ export type FlexItemProps = {
 	/**
 	 * The children elements.
 	 */
-	children: React.ReactNode;
+	children?: ReactNode;
 };
 
 export type FlexBlockProps = Omit< FlexItemProps, 'isBlock' >;

package/src/focal-point-picker/styles/focal-point-picker-style.js

@@ -12,14 +12,12 @@ import { COLORS } from '../../utils';
 
 export const MediaWrapper = styled.div`
 	background-color: transparent;
-	box-sizing: border-box;
 	text-align: center;
 	width: 100%;
 `;
 
 export const MediaContainer = styled.div`
 	align-items: center;
-	box-sizing: border-box;
 	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );
 	cursor: pointer;
 	display: inline-flex;
@@ -44,7 +42,6 @@ export const MediaContainer = styled.div`
 
 export const MediaPlaceholder = styled.div`
 	background: ${ COLORS.lightGray[ 300 ] };
-	box-sizing: border-box;
 	height: 170px;
 	max-width: 280px;
 	min-width: 200px;
@@ -61,7 +58,6 @@ export const ControlWrapper = styled( Flex )`
 `;
 
 export const GridView = styled.div`
-	box-sizing: border-box;
 	left: 50%;
 	opacity: 0;
 	overflow: hidden;
@@ -80,7 +76,6 @@ export const GridView = styled.div`
 `;
 
 export const GridLine = styled.div`
-	box-sizing: border-box;
 	background: white;
 	box-shadow: 0 0 2px rgba( 0, 0, 0, 0.6 );
 	position: absolute;

package/src/focal-point-picker/styles/focal-point-style.js

@@ -15,7 +15,6 @@ import { COLORS } from '../../utils';
 
 export const FocalPointWrapper = styled.div`
 	background-color: transparent;
-	box-sizing: border-box;
 	cursor: grab;
 	height: 30px;
 	margin: -15px 0 0 -15px;

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

@@ -8,6 +8,7 @@ import { useState, useMemo, forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { BaseControl } from '../base-control';
 import Button from '../button';
 import RangeControl from '../range-control';
 import { Flex, FlexItem } from '../flex';
@@ -32,6 +33,8 @@ function FontSizePicker(
 		fontSizes = [],
 		disableCustomFontSizes = false,
 		onChange,
+		/** @type {'default' | '__unstable-large'} */
+		size = 'default',
 		value,
 		withSlider = false,
 		withReset = true,
@@ -52,7 +55,7 @@ function FontSizePicker(
 	 * than six and a select control when they are more.
 	 */
 	const fontSizesContainComplexValues = fontSizes.some(
-		( { size } ) => ! isSimpleCssValue( size )
+		( { size: sizeArg } ) => ! isSimpleCssValue( sizeArg )
 	);
 	const shouldUseSelectControl = fontSizes.length > 5;
 	const options = useMemo(
@@ -131,12 +134,16 @@ function FontSizePicker(
 				className={ `${ baseClassName }__header` }
 			>
 				<FlexItem>
-					{ __( 'Size' ) }
-					{ headerHint && (
-						<span className={ `${ baseClassName }__header__hint` }>
-							{ headerHint }
-						</span>
-					) }
+					<BaseControl.VisualLabel>
+						{ __( 'Size' ) }
+						{ headerHint && (
+							<span
+								className={ `${ baseClassName }__header__hint` }
+							>
+								{ headerHint }
+							</span>
+						) }
+					</BaseControl.VisualLabel>
 				</FlexItem>
 				{ ! disableCustomFontSizes && (
 					<FlexItem>
@@ -163,6 +170,7 @@ function FontSizePicker(
 					shouldUseSelectControl &&
 					! showCustomValueControl && (
 						<CustomSelectControl
+							__nextUnconstrainedWidth
 							className={ `${ baseClassName }__select` }
 							label={ __( 'Font size' ) }
 							hideLabelFromVision
@@ -181,6 +189,7 @@ function FontSizePicker(
 									setShowCustomValueControl( true );
 								}
 							} }
+							size={ size }
 						/>
 					) }
 				{ ! shouldUseSelectControl && ! showCustomValueControl && (
@@ -194,6 +203,7 @@ function FontSizePicker(
 							);
 						} }
 						isBlock
+						size={ size }
 					>
 						{ options.map( ( option ) => (
 							<ToggleGroupControlOption
@@ -233,6 +243,7 @@ function FontSizePicker(
 											);
 										}
 									} }
+									size={ size }
 									units={ hasUnits ? units : [] }
 								/>
 							</FlexItem>

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

@@ -17,6 +17,12 @@ export default {
 			description:
 				'If no value exists, this prop defines the starting position for the font size picker slider. Only relevant if `withSlider` is `true`.',
 		},
+		size: {
+			control: {
+				type: 'radio',
+				options: [ 'default', '__unstable-large' ],
+			},
+		},
 		withReset: {
 			description:
 				'If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` or `withSlider` is `true`.',

package/src/form-token-field/README.md

@@ -56,6 +56,7 @@ The `value` property is handled in a manner similar to controlled form component
     -   `removed` - The user removed an existing token.
     -   `remove` - The user focused the button to remove the token.
     -   `__experimentalInvalid` - The user tried to add a token that didn't pass the validation.
+-   `__experimentalRenderItem` - Custom renderer invoked for each option in the suggestion list. The render prop receives as its argument an object containing, under the `item` key, the single option's data (directly from the array of data passed to the `options` prop).
 -   `__experimentalExpandOnFocus` - If true, the suggestions list will be always expanded when the input field has the focus.
 -   `__experimentalShowHowTo` - If false, the text on how to use the select (ie: _Separate with commas or the Enter key._) will be hidden.
 -   `__experimentalValidateInput` - If passed, all introduced values will be validated before being added as tokens.
@@ -78,7 +79,7 @@ const continents = [
 const MyFormTokenField = () => {
 	const [ selectedContinents, setSelectedContinents ] = useState( [] );
 
-	return(
+	return (
 		<FormTokenField
 			value={ selectedContinents }
 			suggestions={ continents }