@wordpress/components 19.11.0 → 19.14.0

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/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/slot-fill/test/slot.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { isEmpty } from 'lodash';
 import { render, fireEvent } from '@testing-library/react';
 
 /**
@@ -120,9 +119,9 @@ describe( 'Slot', () => {
 				<div>
 					<Slot name="chicken">
 						{ ( fills ) =>
-							! isEmpty( fills ) && (
+							[ ...fills ].length ? (
 								<blockquote>{ fills }</blockquote>
-							)
+							) : null
 						}
 					</Slot>
 				</div>

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/component.tsx

@@ -11,7 +11,7 @@ import { View } from '../view';
 import { useSpacer } from './hook';
 import type { Props } from './types';
 
-function Spacer(
+function UnconnectedSpacer(
 	props: WordPressComponentProps< Props, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
@@ -25,7 +25,6 @@ function Spacer(
  *
  * `Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props work as a multiplier to the library's grid system (base of `4px`).
  *
- * @example
  * ```jsx
  * import { Spacer } from `@wordpress/components`
  *
@@ -43,6 +42,6 @@ function Spacer(
  * }
  * ```
  */
-const ConnectedSpacer = contextConnect( Spacer, 'Spacer' );
+export const Spacer = contextConnect( UnconnectedSpacer, 'Spacer' );
 
-export default ConnectedSpacer;
+export default Spacer;

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/spacer/stories/index.tsx

@@ -0,0 +1,70 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Spacer } from '..';
+
+const controls = [
+	'margin',
+	'marginY',
+	'marginX',
+	'marginTop',
+	'marginBottom',
+	'marginLeft',
+	'marginRight',
+
+	'padding',
+	'paddingY',
+	'paddingX',
+	'paddingTop',
+	'paddingBottom',
+	'paddingLeft',
+	'paddingRight',
+].reduce(
+	( acc, prop ) => ( { ...acc, [ prop ]: { control: { type: 'text' } } } ),
+	{}
+);
+
+const meta: ComponentMeta< typeof Spacer > = {
+	component: Spacer,
+	title: 'Components (Experimental)/Spacer',
+	argTypes: {
+		as: { control: { type: 'text' } },
+		children: {
+			control: { type: 'text' },
+		},
+		...controls,
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const BlackBox = () => (
+	<div
+		style={ { backgroundColor: 'black', width: '100px', height: '100px' } }
+	/>
+);
+
+const Template: ComponentStory< typeof Spacer > = ( { onChange, ...args } ) => {
+	return (
+		<>
+			<BlackBox />
+			<Spacer { ...args } />
+			<BlackBox />
+		</>
+	);
+};
+
+export const Default: ComponentStory< typeof Spacer > = Template.bind( {} );
+Default.args = {
+	children: 'This is the spacer',
+};

package/src/spinner/{index.js → index.tsx}

@@ -2,24 +2,23 @@
  * External dependencies
  */
 import classNames from 'classnames';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
  */
 import { StyledSpinner, SpinnerTrack, SpinnerIndicator } from './styles';
+import type { WordPressComponentProps } from '../ui/context';
 
 /**
- * @typedef OwnProps
- *
- * @property {string} [className] Class name
+ * WordPress dependencies
  */
-/** @typedef {import('react').ComponentPropsWithoutRef<'svg'> & OwnProps} Props */
+import { forwardRef } from '@wordpress/element';
 
-/**
- * @param {Props} props
- * @return {JSX.Element} Element
- */
-export default function Spinner( { className, ...props } ) {
+export function UnforwardedSpinner(
+	{ className, ...props }: WordPressComponentProps< {}, 'svg', false >,
+	forwardedRef: ForwardedRef< any >
+) {
 	return (
 		<StyledSpinner
 			className={ classNames( 'components-spinner', className ) }
@@ -28,6 +27,7 @@ export default function Spinner( { className, ...props } ) {
 			role="presentation"
 			focusable="false"
 			{ ...props }
+			ref={ forwardedRef }
 		>
 			{ /* Gray circular background */ }
 			<SpinnerTrack
@@ -45,3 +45,17 @@ export default function Spinner( { className, ...props } ) {
 		</StyledSpinner>
 	);
 }
+/**
+ * `Spinner` is a component used to notify users that their action is being processed.
+ *
+ * @example
+ * ```js
+ *   import { Spinner } from '@wordpress/components';
+ *
+ *   function Example() {
+ *     return <Spinner />;
+ *   }
+ * ```
+ */
+export const Spinner = forwardRef( UnforwardedSpinner );
+export default Spinner;

package/src/spinner/stories/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Spinner from '../';
+import { space } from '../../ui/utils/space';
+
+const meta: ComponentMeta< typeof Spinner > = {
+	title: 'Components/Spinner',
+	component: Spinner,
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof Spinner > = ( args ) => {
+	return <Spinner { ...args } />;
+};
+
+export const Default: ComponentStory< typeof Spinner > = Template.bind( {} );
+
+// The Spinner can be resized to any size, but the stroke width will remain unchanged.
+export const CustomSize: ComponentStory< typeof Spinner > = Template.bind( {} );
+CustomSize.args = { style: { width: space( 20 ), height: space( 20 ) } };

package/src/style.scss

@@ -17,6 +17,7 @@
 @import "./drop-zone/style.scss";
 @import "./dropdown/style.scss";
 @import "./dropdown-menu/style.scss";
+@import "./duotone-picker/style.scss";
 @import "./font-size-picker/style.scss";
 @import "./form-toggle/style.scss";
 @import "./form-token-field/style.scss";

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,