@wordpress/components 19.10.0 → 19.13.0

package/src/resizable-box/resize-tooltip/utils.ts

@@ -1,15 +1,11 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-import useResizeAware from 'react-resize-aware';
-
 /**
  * WordPress dependencies
  */
 import { useEffect, useRef, useState } from '@wordpress/element';
+import { useResizeObserver } from '@wordpress/compose';
 
 const { clearTimeout, setTimeout } = window;
+const noop = () => {};
 
 export type Axis = 'x' | 'y';
 
@@ -56,11 +52,10 @@ export function useResizeLabel( {
 	showPx = false,
 }: UseResizeLabelArgs ): UseResizeLabelProps {
 	/*
-	 * The width/height values derive from this special useResizeAware hook.
-	 * This custom hook uses injects an iFrame into the element, allowing it
-	 * to tap into the onResize (window) callback events.
+	 * The width/height values derive from this special useResizeObserver hook.
+	 * This custom hook uses the ResizeObserver API to listen for resize events.
 	 */
-	const [ resizeListener, sizes ] = useResizeAware();
+	const [ resizeListener, sizes ] = useResizeObserver();
 
 	/*
 	 * Indicates if the x/y axis is preferred.

package/src/responsive-wrapper/index.js

@@ -15,10 +15,8 @@ function ResponsiveWrapper( {
 	children,
 	isInline = false,
 } ) {
-	const [
-		containerResizeListener,
-		{ width: containerWidth },
-	] = useResizeObserver();
+	const [ containerResizeListener, { width: containerWidth } ] =
+		useResizeObserver();
 	if ( Children.count( children ) !== 1 ) {
 		return null;
 	}

package/src/sandbox/index.native.js

@@ -110,7 +110,7 @@ const style = `
 	/**
 	 * Add responsiveness to embeds with aspect ratios.
 	 *
-	 * These styles have been copied from the web version (https://git.io/JEFcX) and
+	 * These styles have been copied from the web version (https://github.com/WordPress/gutenberg/blob/7901895ca20cf61e402925e31571d659dab64721/packages/block-library/src/embed/style.scss#L42-L89) and
 	 * adapted for the native version.
 	 */
 	.wp-has-aspect-ratio.wp-block-embed__wrapper::before {

package/src/sandbox/test/index.js

@@ -46,9 +46,8 @@ describe( 'Sandbox', () => {
 
 		const iframe = result.container.querySelector( '.components-sandbox' );
 
-		let sandboxedIframe = iframe.contentWindow.document.body.querySelector(
-			'.mock-iframe'
-		);
+		let sandboxedIframe =
+			iframe.contentWindow.document.body.querySelector( '.mock-iframe' );
 
 		expect( sandboxedIframe.getAttribute( 'src' ) ).toBe(
 			'https://super.embed'
@@ -58,9 +57,8 @@ describe( 'Sandbox', () => {
 			fireEvent.click( result.getByRole( 'button' ) );
 		} );
 
-		sandboxedIframe = iframe.contentWindow.document.body.querySelector(
-			'.mock-iframe'
-		);
+		sandboxedIframe =
+			iframe.contentWindow.document.body.querySelector( '.mock-iframe' );
 
 		expect( sandboxedIframe.getAttribute( 'src' ) ).toBe(
 			'https://another.super.embed'

package/src/search-control/index.js

@@ -6,17 +6,16 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { Icon, search, closeSmall } from '@wordpress/icons';
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { Button } from '../';
 import BaseControl from '../base-control';
-import { useCombinedRef } from '../utils';
 
 function SearchControl(
 	{
@@ -30,10 +29,10 @@ function SearchControl(
 		help,
 		onClose,
 	},
-	ref
+	forwardedRef
 ) {
+	const searchRef = useRef();
 	const instanceId = useInstanceId( SearchControl );
-	const searchInput = useCombinedRef( ref );
 	const id = `components-search-control-${ instanceId }`;
 
 	const renderRightButton = () => {
@@ -54,7 +53,7 @@ function SearchControl(
 					label={ __( 'Reset search' ) }
 					onClick={ () => {
 						onChange( '' );
-						searchInput.current.focus();
+						searchRef.current.focus();
 					} }
 				/>
 			);
@@ -73,7 +72,7 @@ function SearchControl(
 		>
 			<div className="components-search-control__input-wrapper">
 				<input
-					ref={ searchInput }
+					ref={ useMergeRefs( [ searchRef, forwardedRef ] ) }
 					className="components-search-control__input"
 					id={ id }
 					type="search"

package/src/select-control/README.md

@@ -98,6 +98,7 @@ const MySelectControl = () => {
 				{ label: 'Small', value: '25%' },
 			] }
 			onChange={ ( newSize ) => setSize( newSize ) }
+			__nextHasNoMarginBottom
 		/>
 	);
 };
@@ -119,6 +120,7 @@ Render a user interface to select multiple users from a list.
 		{ value: 'b', label: 'User B' },
 		{ value: 'c', label: 'User c' },
 	] }
+	__nextHasNoMarginBottom
 />
 ```
 
@@ -133,6 +135,7 @@ const [ item, setItem ] = useState( '' );
     label={ __( 'Select an item:' ) }
     value={ item } // e.g: value = 'a'
     onChange={ ( selection ) => { setItem( selection ) } }
+    __nextHasNoMarginBottom
 >
 	<optgroup label="Theropods">
 		<option value="Tyrannosaurus">Tyrannosaurus</option>
@@ -215,6 +218,14 @@ If multiple is false the value received is a single value with the new selected
 -   Type: `function`
 -   Required: Yes
 
+### __nextHasNoMarginBottom
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 -   To select one option from a set, and you want to show them all the available options at once, use the `Radio` component.

package/src/select-control/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, noop } from 'lodash';
+import { isEmpty } from 'lodash';
 import classNames from 'classnames';
 import type { ChangeEvent, FocusEvent, ForwardedRef } from 'react';
 
@@ -21,6 +21,8 @@ import { Select, DownArrowWrapper } from './styles/select-control-styles';
 import type { WordPressComponentProps } from '../ui/context';
 import type { SelectControlProps } from './types';
 
+const noop = () => {};
+
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( SelectControl );
 	const id = `inspector-select-control-${ instanceId }`;
@@ -47,6 +49,7 @@ function UnforwardedSelectControl(
 		children,
 		prefix,
 		suffix,
+		__nextHasNoMarginBottom = false,
 		...props
 	}: WordPressComponentProps< SelectControlProps, 'select', false >,
 	ref: ForwardedRef< HTMLSelectElement >
@@ -85,7 +88,11 @@ function UnforwardedSelectControl(
 
 	/* eslint-disable jsx-a11y/no-onchange */
 	return (
-		<BaseControl help={ help } id={ id }>
+		<BaseControl
+			help={ help }
+			id={ id }
+			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+		>
 			<InputBase
 				className={ classes }
 				disabled={ disabled }

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

@@ -12,7 +12,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import SelectControl from '..';
+import SelectControl from '../';
 
 const meta: ComponentMeta< typeof SelectControl > = {
 	title: 'Components/SelectControl',
@@ -34,9 +34,8 @@ export default meta;
 const SelectControlWithState: ComponentStory< typeof SelectControl > = (
 	args
 ) => {
-	const [ selection, setSelection ] = useState<
-		ComponentProps< typeof SelectControl >[ 'value' ]
-	>();
+	const [ selection, setSelection ] =
+		useState< ComponentProps< typeof SelectControl >[ 'value' ] >();
 
 	return (
 		<SelectControl

package/src/select-control/styles/select-control-styles.ts

@@ -49,18 +49,21 @@ const sizeStyles = ( { selectSize = 'default' }: SelectProps ) => {
 	const sizes = {
 		default: {
 			height: 30,
-			lineHeight: 1,
 			minHeight: 30,
+			paddingTop: 0,
+			paddingBottom: 0,
 		},
 		small: {
 			height: 24,
-			lineHeight: 1,
 			minHeight: 24,
+			paddingTop: 0,
+			paddingBottom: 0,
 		},
 		'__unstable-large': {
 			height: 40,
-			lineHeight: 1,
 			minHeight: 40,
+			paddingTop: 0,
+			paddingBottom: 0,
 		},
 	};
 

package/src/select-control/types.ts

@@ -20,7 +20,7 @@ export interface SelectControlProps
 			| 'size'
 			| 'suffix'
 		>,
-		Pick< BaseControlProps, 'help' > {
+		Pick< BaseControlProps, 'help' | '__nextHasNoMarginBottom' > {
 	/**
 	 * If this property is added, multiple values can be selected. The value passed should be an array.
 	 *

package/src/slot-fill/README.md

@@ -2,7 +2,7 @@
 
 Slot and Fill are a pair of components which enable developers to render elsewhere in a React element tree, a pattern often referred to as "portal" rendering. It is a pattern for component extensibility, where a single Slot may be occupied by an indeterminate number of Fills elsewhere in the application.
 
-Slot Fill is heavily inspired by the [`react-slot-fill` library](https://github.com/camwest/react-slot-fill), but uses React's own portal rendering API, exposed as an unstable API in React 16 and slated to be promoted to a stable API in React 17.
+Slot Fill is heavily inspired by the [`react-slot-fill` library](https://github.com/camwest/react-slot-fill), but uses React's own portal rendering API.
 
 ## Usage
 

package/src/slot-fill/fill.js

@@ -1,8 +1,4 @@
 // @ts-nocheck
-/**
- * External dependencies
- */
-import { isFunction } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -50,7 +46,7 @@ function FillComponent( { name, children, registerFill, unregisterFill } ) {
 	}
 
 	// If a function is passed as a child, provide it with the fillProps.
-	if ( isFunction( children ) ) {
+	if ( typeof children === 'function' ) {
 		children = children( slot.props.fillProps );
 	}
 

package/src/slot-fill/slot.js

@@ -2,7 +2,7 @@
 /**
  * External dependencies
  */
-import { isFunction, isString, map, negate } from 'lodash';
+import { isString, map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -19,6 +19,16 @@ import {
  */
 import SlotFillContext from './context';
 
+/**
+ * Whether the argument is a function.
+ *
+ * @param {*} maybeFunc The argument to check.
+ * @return {boolean} True if the argument is a function, false otherwise.
+ */
+function isFunction( maybeFunc ) {
+	return typeof maybeFunc === 'function';
+}
+
 class SlotComponent extends Component {
 	constructor() {
 		super( ...arguments );
@@ -79,7 +89,7 @@ class SlotComponent extends Component {
 			// In some cases fills are rendered only when some conditions apply.
 			// This ensures that we only use non-empty fills when rendering, i.e.,
 			// it allows us to render wrappers only when the fills are actually present.
-			negate( isEmptyElement )
+			( element ) => ! isEmptyElement( element )
 		);
 
 		return <>{ isFunction( children ) ? children( fills ) : fills }</>;

package/src/snackbar/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -17,6 +16,7 @@ import warning from '@wordpress/warning';
  */
 import { Button } from '../';
 
+const noop = () => {};
 const NOTICE_TIMEOUT = 10000;
 
 /** @typedef {import('@wordpress/element').WPElement} WPElement */

package/src/snackbar/list.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit, noop } from 'lodash';
+import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -19,6 +19,7 @@ import {
 	__unstableAnimatePresence as AnimatePresence,
 } from '../animation';
 
+const noop = () => {};
 const SNACKBAR_VARIANTS = {
 	init: {
 		height: 0,

package/src/spacer/hook.ts

@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
  */
 import { useContextSystem, WordPressComponentProps } from '../ui/context';
 import { space } from '../ui/utils/space';
-import { useCx } from '../utils/hooks/use-cx';
+import { rtl, useCx } from '../utils';
 import type { Props } from './types';
 
 const isDefined = < T >( o: T ): o is Exclude< T, null | undefined > =>
@@ -60,13 +60,13 @@ export function useSpacer( props: WordPressComponentProps< Props, 'div' > ) {
 				margin-bottom: ${ space( marginBottom ) };
 			`,
 		isDefined( marginLeft ) &&
-			css`
-				margin-left: ${ space( marginLeft ) };
-			`,
+			rtl( {
+				marginLeft: space( marginLeft ),
+			} )(),
 		isDefined( marginRight ) &&
-			css`
-				margin-right: ${ space( marginRight ) };
-			`,
+			rtl( {
+				marginRight: space( marginRight ),
+			} )(),
 		isDefined( padding ) &&
 			css`
 				padding: ${ space( padding ) };
@@ -90,13 +90,13 @@ export function useSpacer( props: WordPressComponentProps< Props, 'div' > ) {
 				padding-bottom: ${ space( paddingBottom ) };
 			`,
 		isDefined( paddingLeft ) &&
-			css`
-				padding-left: ${ space( paddingLeft ) };
-			`,
+			rtl( {
+				paddingLeft: space( paddingLeft ),
+			} )(),
 		isDefined( paddingRight ) &&
-			css`
-				padding-right: ${ space( paddingRight ) };
-			`,
+			rtl( {
+				paddingRight: space( paddingRight ),
+			} )(),
 		className
 	);
 

package/src/surface/README.md

@@ -13,7 +13,7 @@ In the example below, notice how the `Surface` renders in white (or dark gray if
 ```jsx
 import {
 	__experimentalSurface as Surface,
-	__experimentalText as Text
+	__experimentalText as Text,
 } from '@wordpress/components';
 
 function Example() {
@@ -27,46 +27,46 @@ function Example() {
 
 ## Props
 
-### `backgroundSize`: number
+### `backgroundSize`: `number`
 
-- Required: No
-- Default: `12`
+-   Required: No
+-   Default: `12`
 
 Determines the grid size for "dotted" and "grid" variants.
 
 ### `borderBottom`: `boolean`
 
-- Required: No
-- Default: `false`
+-   Required: No
+-   Default: `false`
 
 Renders a bottom border.
 
 ### `borderLeft`: `boolean`
 
-- Required: No
-- Default: `false`
+-   Required: No
+-   Default: `false`
 
 Renders a left border.
 
 ### `borderRight`: `boolean`
 
-- Required: No
-- Default: `false`
+-   Required: No
+-   Default: `false`
 
 Renders a right border.
 
 ### `borderTop`: `boolean`
 
-- Required: No
-- Default: `false`
+-   Required: No
+-   Default: `false`
 
 Renders a top border.
 
 ### `variant`: `string`
 
-- Required: No
-- Default: `false`
-- Allowed values: `primary`, `secondary`, `tertiary`, `dotted`, `grid`
+-   Required: No
+-   Default: `false`
+-   Allowed values: `primary`, `secondary`, `tertiary`, `dotted`, `grid`
 
 Modifies the background color of `Surface`.
 

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

@@ -1,15 +1,21 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
 /**
  * Internal dependencies
  */
 import { contextConnect } from '../ui/context';
 import { View } from '../view';
 import { useSurface } from './hook';
+import type { SurfaceProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
 
-/**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                               forwardedRef
- */
-function Surface( props, forwardedRef ) {
+function UnconnectedSurface(
+	props: WordPressComponentProps< SurfaceProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
 	const surfaceProps = useSurface( props );
 
 	return <View { ...surfaceProps } ref={ forwardedRef } />;
@@ -35,6 +41,6 @@ function Surface( props, forwardedRef ) {
  * }
  * ```
  */
-const ConnectedSurface = contextConnect( Surface, 'Surface' );
+export const Surface = contextConnect( UnconnectedSurface, 'Surface' );
 
-export default ConnectedSurface;
+export default Surface;

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

@@ -9,11 +9,12 @@ import { useMemo } from '@wordpress/element';
 import { useContextSystem } from '../ui/context';
 import * as styles from './styles';
 import { useCx } from '../utils/hooks/use-cx';
+import type { SurfaceProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
 
-/**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- */
-export function useSurface( props ) {
+export function useSurface(
+	props: WordPressComponentProps< SurfaceProps, 'div' >
+) {
 	const {
 		backgroundSize = 12,
 		borderBottom = false,
@@ -28,14 +29,14 @@ export function useSurface( props ) {
 	const cx = useCx();
 
 	const classes = useMemo( () => {
-		const sx = {};
-
-		sx.borders = styles.getBorders( {
-			borderBottom,
-			borderLeft,
-			borderRight,
-			borderTop,
-		} );
+		const sx = {
+			borders: styles.getBorders( {
+				borderBottom,
+				borderLeft,
+				borderRight,
+				borderTop,
+			} ),
+		};
 
 		return cx(
 			styles.Surface,

package/src/surface/stories/index.tsx

@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Surface } from '..';
+import { Text } from '../../text';
+
+const meta: ComponentMeta< typeof Surface > = {
+	component: Surface,
+	title: 'Components (Experimental)/Surface',
+	argTypes: {
+		children: { control: { type: null } },
+		as: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof Surface > = ( args ) => {
+	return (
+		<Surface
+			{ ...args }
+			style={ { padding: 20, maxWidth: 400, margin: '20vh auto' } }
+		>
+			<Text>Code is Poetry</Text>
+		</Surface>
+	);
+};
+
+export const Default: ComponentStory< typeof Surface > = Template.bind( {} );
+Default.args = {};