@wordpress/components 19.13.0 → 19.16.0

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

@@ -1,14 +1,10 @@
 .components-form-token-field__input-container {
 	@include input-control();
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
 	width: 100%;
 	margin: 0 0 $grid-unit-10 0;
-	padding: $grid-unit-05*0.5 $grid-unit-05;
+	padding: 0;
 	cursor: text;
 
-
 	&.is-disabled {
 		background: $gray-300;
 		border-color: $gray-300;
@@ -67,7 +63,6 @@
 .components-form-token-field__token {
 	font-size: $default-font-size;
 	display: flex;
-	margin: 2px 4px 2px 0;
 	color: $gray-900;
 	max-width: 100%;
 
@@ -180,7 +175,7 @@
 	@include reduce-motion("transition");
 	list-style: none;
 	border-top: $border-width solid $gray-700;
-	margin: $grid-unit-05 (-$grid-unit-05) (-$grid-unit-05);
+	margin: 0;
 	padding: 0;
 }
 

package/src/form-token-field/styles.ts

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import { Flex } from '../flex';
+import { space } from '../ui/utils/space';
+
+type TokensAndInputWrapperProps = {
+	__next36pxDefaultSize: boolean;
+	hasTokens: boolean;
+};
+
+const deprecatedPaddings = ( {
+	__next36pxDefaultSize,
+	hasTokens,
+}: TokensAndInputWrapperProps ) =>
+	! __next36pxDefaultSize &&
+	css`
+		padding-top: ${ space( hasTokens ? 1 : 0.5 ) };
+		padding-bottom: ${ space( hasTokens ? 1 : 0.5 ) };
+	`;
+
+export const TokensAndInputWrapperFlex = styled( Flex )`
+	padding: 5px ${ space( 1 ) };
+
+	${ deprecatedPaddings }
+`;

package/src/form-token-field/suggestions-list.tsx

@@ -17,8 +17,6 @@ import { useRefEffect } from '@wordpress/compose';
  */
 import type { SuggestionsListProps } from './types';
 
-const { setTimeout, clearTimeout } = window;
-
 const handleMouseDown: MouseEventHandler = ( e ) => {
 	// By preventing default here, we will not lose focus of <input> when clicking a suggestion.
 	e.preventDefault();
@@ -54,14 +52,14 @@ export function SuggestionsList< T extends string | { value: string } >( {
 						onlyScrollIfNeeded: true,
 					}
 				);
-				id = setTimeout( () => {
+				id = window.setTimeout( () => {
 					setScrollingIntoView( false );
 				}, 100 );
 			}
 
 			return () => {
 				if ( id !== undefined ) {
-					clearTimeout( id );
+					window.clearTimeout( id );
 				}
 			};
 		},

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { filter, map } from 'lodash';
 import TestUtils, { act } from 'react-dom/test-utils';
 import ReactDOM from 'react-dom';
 
@@ -56,7 +55,7 @@ describe( 'FormTokenField', () => {
 		const textNodes = wrapperElement().querySelectorAll(
 			'.components-form-token-field__token-text span[aria-hidden]'
 		);
-		return map( textNodes, ( node ) => node.innerHTML );
+		return Array.from( textNodes ).map( ( node ) => node.innerHTML );
 	}
 
 	function getSuggestionsText( selector ) {
@@ -64,7 +63,7 @@ describe( 'FormTokenField', () => {
 			selector || '.components-form-token-field__suggestion'
 		);
 
-		return map( suggestionNodes, getSuggestionNodeText );
+		return Array.from( suggestionNodes ).map( getSuggestionNodeText );
 	}
 
 	function getSuggestionNodeText( node ) {
@@ -77,13 +76,11 @@ describe( 'FormTokenField', () => {
 		// match).
 		const div = document.createElement( 'div' );
 		div.innerHTML = node.querySelector( 'span' ).outerHTML;
-		return map(
-			filter(
-				div.firstChild.childNodes,
+		return Array.from( div.firstChild.childNodes )
+			.filter(
 				( childNode ) => childNode.nodeType !== childNode.COMMENT_NODE
-			),
-			( childNode ) => childNode.textContent
-		);
+			)
+			.map( ( childNode ) => childNode.textContent );
 	}
 
 	function getSelectedSuggestion() {
@@ -165,7 +162,7 @@ describe( 'FormTokenField', () => {
 			);
 		} );
 
-		it( 'should show suggestions when when input is empty if expandOnFocus is set to true', () => {
+		it( 'should show suggestions when input is empty if expandOnFocus is set to true', () => {
 			setUp( { __experimentalExpandOnFocus: true } );
 			wrapper.setState( {
 				isExpanded: true,

package/src/form-token-field/test/lib/token-field-wrapper.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { unescape } from 'lodash';
 import type { ComponentProps } from 'react';
 
 /**
@@ -22,7 +21,8 @@ const {
 
 function unescapeAndFormatSpaces( str: string ) {
 	const nbsp = String.fromCharCode( 160 );
-	return unescape( str ).replace( / /g, nbsp );
+	const escaped = new DOMParser().parseFromString( str, 'text/html' );
+	return escaped.documentElement.textContent?.replace( / /g, nbsp ) ?? '';
 }
 
 class TokenFieldWrapper extends Component<

package/src/form-token-field/types.ts

@@ -147,6 +147,13 @@ export interface FormTokenFieldProps
 	 * @default true
 	 */
 	__experimentalShowHowTo?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the
+	 * default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next36pxDefaultSize?: boolean;
 }
 
 export interface SuggestionsListProps< T = string | { value: string } > {

package/src/grid/README.md

@@ -27,56 +27,70 @@ function Example() {
 
 ## Props
 
-##### align
-
-**Type**: `CSS['alignItems']`
+##### `align`: `CSS['alignItems']`
 
 Adjusts the block alignment of children.
 
-##### alignment
+-   Required: No
 
-**Type**: `GridAlignment`
+##### `alignment`: `GridAlignment`
 
 Adjusts the horizontal and vertical alignment of children.
 
-##### columns
+-   Required: No
+
+##### `columnGap`: `CSSProperties['gridColumnGap']`
+
+Adjusts the `grid-column-gap`.
+
+-   Required: No
 
-**Type**: `number`,`(number`,`null)[]`
+##### `columns`: `number`
 
 Adjusts the number of columns of the `Grid`.
 
-##### gap
+-   Required: No
+-   Default: `2`
 
-**Type**: `number`
+##### `gap`: `number`
 
 Gap between each child.
 
-##### isInline
+-   Required: No
+-   Default: `3`
 
-**Type**: `boolean`
+##### `isInline`: `boolean`
 
 Changes the CSS display from `grid` to `inline-grid`.
 
-##### justify
+-   Required: No
 
-**Type**: `CSS['justifyContent']`
+##### `justify`: `CSS['justifyContent']`
 
 Adjusts the inline alignment of children.
 
-##### rows
+-   Required: No
 
-**Type**: `number`,`(number`,`null)[]`
+##### `rowGap`: `CSSProperties['gridRowGap']`
+
+Adjusts the `grid-row-gap`.
+
+-   Required: No
+
+##### `rows`: `number`
 
 Adjusts the number of rows of the `Grid`.
 
-##### templateColumns
+-   Required: No
 
-**Type**: `CSS['gridTemplateColumns']`
+##### `templateColumns`: `CSS['gridTemplateColumns']`
 
 Adjusts the CSS grid `template-columns`.
 
-##### templateRows
+-   Required: No
 
-**Type**: `CSS['gridTemplateRows']`
+##### `templateRows`: `CSS['gridTemplateRows']`
 
 Adjusts the CSS grid `template-rows`.
+
+-   Required: No

package/src/grid/{component.js → component.tsx}

@@ -1,15 +1,20 @@
+/**
+ * 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 useGrid from './hook';
+import type { GridProps } from './types';
 
-/**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                               forwardedRef
- */
-function Grid( props, forwardedRef ) {
+function UnconnectedGrid(
+	props: WordPressComponentProps< GridProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const gridProps = useGrid( props );
 
 	return <View { ...gridProps } ref={ forwardedRef } />;
@@ -18,7 +23,6 @@ function Grid( props, forwardedRef ) {
 /**
  * `Grid` is a primitive layout component that can arrange content in a grid configuration.
  *
- * @example
  * ```jsx
  * import {
  * 	__experimentalGrid as Grid,
@@ -36,6 +40,6 @@ function Grid( props, forwardedRef ) {
  * }
  * ```
  */
-const ConnectedGrid = contextConnect( Grid, 'Grid' );
+export const Grid = contextConnect( UnconnectedGrid, 'Grid' );
 
-export default ConnectedGrid;
+export default Grid;

package/src/grid/{hook.js → hook.ts}

@@ -11,16 +11,16 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../ui/context';
 import { getAlignmentProps } from './utils';
 import { useResponsiveValue } from '../ui/utils/use-responsive-value';
 import CONFIG from '../utils/config-values';
 import { useCx } from '../utils/hooks/use-cx';
+import type { GridProps } from './types';
 
-/**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- */
-export default function useGrid( props ) {
+export default function useGrid(
+	props: WordPressComponentProps< GridProps, 'div' >
+) {
 	const {
 		align,
 		alignment,

package/src/grid/stories/index.tsx

@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { View } from '../../view';
+import { Grid } from '..';
+
+const meta: ComponentMeta< typeof Grid > = {
+	component: Grid,
+	title: 'Components (Experimental)/Grid',
+	argTypes: {
+		as: { control: { type: 'text' } },
+		align: { control: { type: 'text' } },
+		children: { control: { type: null } },
+		columnGap: { control: { type: 'text' } },
+		columns: {
+			table: { type: { summary: 'number' } },
+			control: { type: 'number' },
+		},
+		justify: { control: { type: 'text' } },
+		rowGap: { control: { type: 'text' } },
+		rows: {
+			table: { type: { summary: 'number' } },
+			control: { type: 'number' },
+		},
+		templateColumns: { control: { type: 'text' } },
+		templateRows: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Item = ( props: { children: string } ) => (
+	<View
+		style={ {
+			borderRadius: 8,
+			background: '#eee',
+			padding: 8,
+			textAlign: 'center',
+		} }
+		{ ...props }
+	/>
+);
+
+const Template: ComponentStory< typeof Grid > = ( props ) => (
+	<Grid { ...props }>
+		<Item>One</Item>
+		<Item>Two</Item>
+		<Item>Three</Item>
+		<Item>Four</Item>
+		<Item>Five</Item>
+		<Item>Six</Item>
+		<Item>Seven</Item>
+		<Item>Eight</Item>
+	</Grid>
+);
+
+export const Default: ComponentStory< typeof Grid > = Template.bind( {} );
+Default.args = {
+	alignment: 'bottom',
+	columns: 4,
+	gap: 2,
+};

package/src/grid/test/{grid.js → grid.tsx}

@@ -28,7 +28,7 @@ describe( 'props', () => {
 
 	test( 'should render gap', () => {
 		const { container } = render(
-			<Grid columns="3" gap={ 4 }>
+			<Grid columns={ 3 } gap={ 4 }>
 				<View />
 				<View />
 				<View />
@@ -44,7 +44,7 @@ describe( 'props', () => {
 
 	test( 'should render custom columns', () => {
 		const { container } = render(
-			<Grid columns="7">
+			<Grid columns={ 7 }>
 				<View />
 				<View />
 				<View />
@@ -59,7 +59,7 @@ describe( 'props', () => {
 
 	test( 'should render custom rows', () => {
 		const { container } = render(
-			<Grid rows="7">
+			<Grid rows={ 7 }>
 				<View />
 				<View />
 				<View />
@@ -120,7 +120,7 @@ describe( 'props', () => {
 
 	test( 'should render isInline', () => {
 		const { container } = render(
-			<Grid columns="3" isInline>
+			<Grid columns={ 3 } isInline>
 				<View />
 				<View />
 				<View />

package/src/grid/types.ts

@@ -1,9 +1,12 @@
 /**
  * External dependencies
  */
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
-type ResponsiveCSSValue< T > = Array< T | undefined > | T;
+/**
+ * Internal dependencies
+ */
+import type { ResponsiveCSSValue } from '../ui/utils/types';
 
 type GridAlignment =
 	| 'bottom'
@@ -18,11 +21,7 @@ type GridAlignment =
 	| 'topLeft'
 	| 'topRight';
 
-type GridColumns = ResponsiveCSSValue< number >;
-
-type GridRows = ResponsiveCSSValue< number >;
-
-export type Props = {
+export type GridProps = {
 	/**
 	 * Adjusts the block alignment of children.
 	 */
@@ -31,26 +30,30 @@ export type Props = {
 	 * Adjusts the horizontal and vertical alignment of children.
 	 */
 	alignment?: GridAlignment;
+	/**
+	 * The children elements.
+	 */
+	children: ReactNode;
 	/**
 	 * Adjusts the number of columns of the `Grid`.
 	 *
 	 * @default 2
 	 */
-	columns?: GridColumns;
+	columns?: ResponsiveCSSValue< number >;
 	/**
 	 * Adjusts the `grid-column-gap`.
 	 */
 	columnGap?: CSSProperties[ 'gridColumnGap' ];
-	/**
-	 * Changes the CSS display from `grid` to `inline-grid`.
-	 */
-	isInline?: boolean;
 	/**
 	 * Gap between each child.
 	 *
 	 * @default 3
 	 */
 	gap?: number;
+	/**
+	 * Changes the CSS display from `grid` to `inline-grid`.
+	 */
+	isInline?: boolean;
 	/**
 	 * Adjusts the inline alignment of children.
 	 */
@@ -62,7 +65,7 @@ export type Props = {
 	/**
 	 * Adjusts the number of rows of the `Grid`.
 	 */
-	rows?: GridRows;
+	rows?: ResponsiveCSSValue< number >;
 	/**
 	 * Adjusts the CSS grid `template-columns`.
 	 */
@@ -71,8 +74,4 @@ export type Props = {
 	 * Adjusts the CSS grid `template-rows`.
 	 */
 	templateRows?: CSSProperties[ 'gridTemplateRows' ];
-	/**
-	 * The children elements.
-	 */
-	children: React.ReactNode;
 };

package/src/grid/{utils.js → utils.ts}

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+
 const ALIGNMENTS = {
 	bottom: { alignItems: 'flex-end', justifyContent: 'center' },
 	bottomLeft: { alignItems: 'flex-start', justifyContent: 'flex-end' },
@@ -12,14 +17,11 @@ const ALIGNMENTS = {
 	topRight: { alignItems: 'flex-start', justifyContent: 'flex-end' },
 };
 
-/* eslint-disable jsdoc/valid-types */
-/**
- * @param {keyof typeof ALIGNMENTS | undefined} alignment
- * @return {{ alignItems?: import('react').CSSProperties['alignItems'], justifyContent?: import('react').CSSProperties['justifyContent']}} CSS props for alignment
- */
-export function getAlignmentProps( alignment ) {
+export function getAlignmentProps( alignment?: keyof typeof ALIGNMENTS ): {
+	alignItems?: CSSProperties[ 'alignItems' ];
+	justifyContent?: CSSProperties[ 'justifyContent' ];
+} {
 	const alignmentProps = alignment ? ALIGNMENTS[ alignment ] : {};
 
 	return alignmentProps;
 }
-/* eslint-enable jsdoc/valid-types */

package/src/guide/style.scss

@@ -20,6 +20,7 @@
 		border-bottom: none;
 		padding: 0;
 		position: sticky;
+		height: $header-height;
 
 		.components-button {
 			align-self: flex-start;

package/src/h-stack/{component.js → component.tsx}

@@ -1,15 +1,15 @@
 /**
  * Internal dependencies
  */
-import { contextConnect } from '../ui/context';
+import { contextConnect, WordPressComponentProps } from '../ui/context';
 import { View } from '../view';
 import { useHStack } from './hook';
+import type { Props } from './types';
 
-/**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                               forwardedRef
- */
-function HStack( props, forwardedRef ) {
+function UnconnectedHStack(
+	props: WordPressComponentProps< Props, 'div' >,
+	forwardedRef: React.ForwardedRef< any >
+) {
 	const hStackProps = useHStack( props );
 
 	return <View { ...hStackProps } ref={ forwardedRef } />;
@@ -38,6 +38,6 @@ function HStack( props, forwardedRef ) {
  * }
  * ```
  */
-const ConnectedHStack = contextConnect( HStack, 'HStack' );
+export const HStack = contextConnect( UnconnectedHStack, 'HStack' );
 
-export default ConnectedHStack;
+export default HStack;

package/src/h-stack/{hook.js → hook.tsx}

@@ -1,16 +1,22 @@
+/**
+ * External dependencies
+ */
+import type { ReactElement } from 'react';
+
 /**
  * Internal dependencies
  */
-import { hasConnectNamespace, useContextSystem } from '../ui/context';
+import {
+	hasConnectNamespace,
+	useContextSystem,
+	WordPressComponentProps,
+} from '../ui/context';
 import { FlexItem, useFlex } from '../flex';
 import { getAlignmentProps } from './utils';
 import { getValidChildren } from '../ui/utils/get-valid-children';
+import type { Props } from './types';
 
-/**
- *
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- */
-export function useHStack( props ) {
+export function useHStack( props: WordPressComponentProps< Props, 'div' > ) {
 	const {
 		alignment = 'edge',
 		children,
@@ -22,19 +28,18 @@ export function useHStack( props ) {
 	const align = getAlignmentProps( alignment, direction );
 
 	const validChildren = getValidChildren( children );
-	const clonedChildren = validChildren.map(
-		// @ts-ignore
-		( /** @type {import('react').ReactElement} */ child, index ) => {
-			const _key = child.key || `hstack-${ index }`;
-			const _isSpacer = hasConnectNamespace( child, [ 'Spacer' ] );
+	const clonedChildren = validChildren.map( ( child, index ) => {
+		const _isSpacer = hasConnectNamespace( child, [ 'Spacer' ] );
 
-			if ( _isSpacer ) {
-				return <FlexItem isBlock key={ _key } { ...child.props } />;
-			}
+		if ( _isSpacer ) {
+			const childElement = child as ReactElement;
+			const _key = childElement.key || `hstack-${ index }`;
 
-			return child;
+			return <FlexItem isBlock key={ _key } { ...childElement.props } />;
 		}
-	);
+
+		return child;
+	} );
 
 	const propsForFlex = {
 		children: clonedChildren,