@wordpress/components 19.10.0 → 19.13.0

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

@@ -7,6 +7,7 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { CONFIG, COLORS } from '../utils';
+import type { SurfaceVariant, SurfaceProps } from './types';
 
 export const Surface = css`
 	background-color: ${ CONFIG.surfaceColor };
@@ -18,19 +19,15 @@ export const background = css`
 	background-color: ${ CONFIG.surfaceBackgroundColor };
 `;
 
-/**
- * @param {Object}  props
- * @param {boolean} [props.borderBottom]
- * @param {boolean} [props.borderLeft]
- * @param {boolean} [props.borderRight]
- * @param {boolean} [props.borderTop]
- */
 export function getBorders( {
 	borderBottom,
 	borderLeft,
 	borderRight,
 	borderTop,
-} ) {
+}: Pick<
+	SurfaceProps,
+	'borderBottom' | 'borderLeft' | 'borderRight' | 'borderTop'
+> ) {
 	const borderStyle = `1px solid ${ CONFIG.surfaceBorderColor }`;
 
 	return css( {
@@ -51,16 +48,10 @@ export const tertiary = css`
 	background: ${ CONFIG.surfaceBackgroundTertiaryColor };
 `;
 
-/**
- * @param {string} surfaceBackgroundSize
- */
-const customBackgroundSize = ( surfaceBackgroundSize ) =>
+const customBackgroundSize = ( surfaceBackgroundSize: string ) =>
 	[ surfaceBackgroundSize, surfaceBackgroundSize ].join( ' ' );
 
-/**
- * @param {string} surfaceBackgroundSizeDotted
- */
-const dottedBackground1 = ( surfaceBackgroundSizeDotted ) =>
+const dottedBackground1 = ( surfaceBackgroundSizeDotted: string ) =>
 	[
 		'90deg',
 		[ CONFIG.surfaceBackgroundColor, surfaceBackgroundSizeDotted ].join(
@@ -69,10 +60,7 @@ const dottedBackground1 = ( surfaceBackgroundSizeDotted ) =>
 		'transparent 1%',
 	].join( ',' );
 
-/**
- * @param {string} surfaceBackgroundSizeDotted
- */
-const dottedBackground2 = ( surfaceBackgroundSizeDotted ) =>
+const dottedBackground2 = ( surfaceBackgroundSizeDotted: string ) =>
 	[
 		[ CONFIG.surfaceBackgroundColor, surfaceBackgroundSizeDotted ].join(
 			' '
@@ -80,10 +68,7 @@ const dottedBackground2 = ( surfaceBackgroundSizeDotted ) =>
 		'transparent 1%',
 	].join( ',' );
 
-/**
- * @param {string} surfaceBackgroundSizeDotted
- */
-const dottedBackgroundCombined = ( surfaceBackgroundSizeDotted ) =>
+const dottedBackgroundCombined = ( surfaceBackgroundSizeDotted: string ) =>
 	[
 		`linear-gradient( ${ dottedBackground1(
 			surfaceBackgroundSizeDotted
@@ -94,14 +79,9 @@ const dottedBackgroundCombined = ( surfaceBackgroundSizeDotted ) =>
 		CONFIG.surfaceBorderBoldColor,
 	].join( ',' );
 
-/**
- *
- * @param {string} surfaceBackgroundSize
- * @param {string} surfaceBackgroundSizeDotted
- */
 export const getDotted = (
-	surfaceBackgroundSize,
-	surfaceBackgroundSizeDotted
+	surfaceBackgroundSize: string,
+	surfaceBackgroundSizeDotted: string
 ) => css`
 	background: ${ dottedBackgroundCombined( surfaceBackgroundSizeDotted ) };
 	background-size: ${ customBackgroundSize( surfaceBackgroundSize ) };
@@ -123,11 +103,7 @@ const gridBackgroundCombined = [
 	`linear-gradient( ${ gridBackground2 } )`,
 ].join( ',' );
 
-/**
- * @param {string} surfaceBackgroundSize
- * @return {import('@emotion/react').SerializedStyles} CSS.
- */
-export const getGrid = ( surfaceBackgroundSize ) => {
+export const getGrid = ( surfaceBackgroundSize: string ) => {
 	return css`
 		background: ${ CONFIG.surfaceBackgroundColor };
 		background-image: ${ gridBackgroundCombined };
@@ -135,15 +111,10 @@ export const getGrid = ( surfaceBackgroundSize ) => {
 	`;
 };
 
-/**
- * @param {'dotted' | 'grid' | 'primary' | 'secondary' | 'tertiary'} variant
- * @param {string}                                                   surfaceBackgroundSize
- * @param {string}                                                   surfaceBackgroundSizeDotted
- */
 export const getVariant = (
-	variant,
-	surfaceBackgroundSize,
-	surfaceBackgroundSizeDotted
+	variant: SurfaceVariant,
+	surfaceBackgroundSize: string,
+	surfaceBackgroundSizeDotted: string
 ) => {
 	switch ( variant ) {
 		case 'dotted': {

package/src/surface/test/{index.js → index.tsx}

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { render } from '@testing-library/react';
+import type { RenderResult } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -9,7 +10,7 @@ import { render } from '@testing-library/react';
 import { Surface } from '../index';
 
 describe( 'props', () => {
-	let base;
+	let base: RenderResult;
 	beforeEach( () => {
 		base = render( <Surface>Surface</Surface> );
 	} );

package/src/surface/types.ts

@@ -5,7 +5,7 @@ export type SurfaceVariant =
 	| 'dotted'
 	| 'grid';
 
-export type Props = {
+export type SurfaceProps = {
 	/**
 	 * Determines the grid size for "dotted" and "grid" variants.
 	 *

package/src/tab-panel/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { partial, noop, find } from 'lodash';
+import { partial, find } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,6 +16,8 @@ import { useInstanceId } from '@wordpress/compose';
 import { NavigableMenu } from '../navigable-container';
 import Button from '../button';
 
+const noop = () => {};
+
 const TabButton = ( { tabId, onClick, children, selected, ...rest } ) => (
 	<Button
 		role="tab"

package/src/tab-panel/style.scss

@@ -59,6 +59,6 @@
 	}
 
 	&.is-active:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -#{$border-width-tab * 2} 0 0 var(--wp-admin-theme-color);
 	}
 }

package/src/text/hook.js

@@ -89,7 +89,10 @@ export default function useText( props ) {
 			display,
 			fontSize: getFontSize( size ),
 			/* eslint-disable jsdoc/valid-types */
-			fontWeight: /** @type {import('react').CSSProperties['fontWeight']} */ ( weight ),
+			fontWeight:
+				/** @type {import('react').CSSProperties['fontWeight']} */ (
+					weight
+				),
 			/* eslint-enable jsdoc/valid-types */
 			lineHeight,
 			letterSpacing,

package/src/text/utils.js

@@ -102,9 +102,8 @@ export function createHighlighterText( {
 			let highlightClass;
 			if ( typeof highlightClassName === 'object' ) {
 				if ( ! caseSensitive ) {
-					highlightClassName = memoizedLowercaseProps(
-						highlightClassName
-					);
+					highlightClassName =
+						memoizedLowercaseProps( highlightClassName );
 					highlightClass = highlightClassName[ text.toLowerCase() ];
 				} else {
 					highlightClass = highlightClassName[ text ];

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

@@ -51,14 +51,12 @@ const DefaultTemplate: ComponentStory< typeof TextControl > = ( {
 	);
 };
 
-export const Default: ComponentStory<
-	typeof TextControl
-> = DefaultTemplate.bind( {} );
+export const Default: ComponentStory< typeof TextControl > =
+	DefaultTemplate.bind( {} );
 Default.args = {};
 
-export const WithLabelAndHelpText: ComponentStory<
-	typeof TextControl
-> = DefaultTemplate.bind( {} );
+export const WithLabelAndHelpText: ComponentStory< typeof TextControl > =
+	DefaultTemplate.bind( {} );
 WithLabelAndHelpText.args = {
 	...Default.args,
 	label: 'Label Text',

package/src/textarea-control/README.md

@@ -100,47 +100,41 @@ The set of props accepted by the component will be specified below.
 
 Props not included in this set will be applied to the textarea element.
 
-#### label
+#### `help`: `string | WPElement`
 
-If this property is added, a label will be generated using label property as the content.
+If this property is added, a help text will be generated using help property as the content.
 
--   Type: `String`
 -   Required: No
 
-#### hideLabelFromVision
+#### `hideLabelFromVision`: `boolean`
 
 If true, the label will only be visible to screen readers.
 
--   Type: `Boolean`
 -   Required: No
 
-#### help
+#### `label`: `string`
 
-If this property is added, a help text will be generated using help property as the content.
+If this property is added, a label will be generated using label property as the content.
 
--   Type: `String|WPElement`
 -   Required: No
 
-#### rows
+#### `onChange`: `( value: string ) => void`
 
-The number of rows the textarea should contain. Defaults to four.
+A function that receives the new value of the textarea each time it changes.
 
--   Type: `String`
--   Required: No
--   Default: 4
+-   Required: Yes
 
-#### value
+#### `rows`: `number`
 
-The current value of the textarea.
+The number of rows the textarea should contain.
 
--   Type: `String`
--   Required: Yes
+-   Required: No
+-   Default: 4
 
-#### onChange
+#### `value`: `string`
 
-A function that receives the new value of the textarea each time it changes.
+The current value of the textarea.
 
--   Type: `function`
 -   Required: Yes
 
 ## Related components

package/src/textarea-control/index.tsx

@@ -0,0 +1,86 @@
+/**
+ * External dependencies
+ */
+import type { ChangeEvent } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import BaseControl from '../base-control';
+import { StyledTextarea } from './styles/textarea-control-styles';
+import type { TextareaControlProps } from './types';
+import type { WordPressComponentProps } from '../ui/context';
+
+/**
+ * TextareaControls are TextControls that allow for multiple lines of text, and
+ * wrap overflow text onto a new line. They are a fixed height and scroll
+ * vertically when the cursor reaches the bottom of the field.
+ *
+ * ```jsx
+ * import { TextareaControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const MyTextareaControl = () => {
+ *   const [ text, setText ] = useState( '' );
+ *
+ *   return (
+ *     <TextareaControl
+ *       label="Text"
+ *       help="Enter some text"
+ *       value={ text }
+ *       onChange={ ( value ) => setText( value ) }
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export function TextareaControl(
+	// ref is omitted until we have `WordPressComponentPropsWithoutRef` or add
+	// ref forwarding to TextareaControl.
+	props: Omit<
+		WordPressComponentProps< TextareaControlProps, 'textarea', false >,
+		'ref'
+	>
+) {
+	const {
+		label,
+		hideLabelFromVision,
+		value,
+		help,
+		onChange,
+		rows = 4,
+		className,
+		...additionalProps
+	} = props;
+	const instanceId = useInstanceId( TextareaControl );
+	const id = `inspector-textarea-control-${ instanceId }`;
+	const onChangeValue = ( event: ChangeEvent< HTMLTextAreaElement > ) =>
+		onChange( event.target.value );
+
+	return (
+		<BaseControl
+			label={ label }
+			hideLabelFromVision={ hideLabelFromVision }
+			id={ id }
+			help={ help }
+			className={ className }
+		>
+			<StyledTextarea
+				className="components-textarea-control__input"
+				id={ id }
+				rows={ rows }
+				onChange={ onChangeValue }
+				aria-describedby={ !! help ? id + '__help' : undefined }
+				value={ value }
+				{ ...additionalProps }
+			/>
+		</BaseControl>
+	);
+}
+
+export default TextareaControl;

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

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TextareaControl from '..';
+
+const meta: ComponentMeta< typeof TextareaControl > = {
+	component: TextareaControl,
+	title: 'Components/TextareaControl',
+	argTypes: {
+		onChange: { action: 'onChange' },
+		label: { control: { type: 'text' } },
+		help: { control: { type: 'text' } },
+		value: { control: { type: null } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof TextareaControl > = ( {
+	onChange,
+	...args
+} ) => {
+	const [ value, setValue ] = useState( '' );
+
+	return (
+		<TextareaControl
+			{ ...args }
+			value={ value }
+			onChange={ ( v ) => {
+				setValue( v );
+				onChange( v );
+			} }
+		/>
+	);
+};
+
+export const Default: ComponentStory< typeof TextareaControl > = Template.bind(
+	{}
+);
+Default.args = {
+	label: 'Text',
+	help: 'Enter some text',
+};

package/src/textarea-control/types.ts

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import type { TextareaHTMLAttributes } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { BaseControlProps } from '../base-control/types';
+
+export type TextareaControlProps = Pick<
+	BaseControlProps,
+	'hideLabelFromVision' | 'help' | 'label'
+> & {
+	/**
+	 * A function that receives the new value of the textarea each time it
+	 * changes.
+	 */
+	onChange: ( value: string ) => void;
+	/**
+	 * The current value of the textarea.
+	 */
+	value: string;
+	/**
+	 * The number of rows the textarea should contain.
+	 *
+	 * @default 4
+	 */
+	rows?: TextareaHTMLAttributes< HTMLTextAreaElement >[ 'rows' ];
+};

package/src/toggle-control/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { isFunction } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -32,7 +31,7 @@ export default function ToggleControl( {
 	let describedBy, helpLabel;
 	if ( help ) {
 		describedBy = id + '__help';
-		helpLabel = isFunction( help ) ? help( checked ) : help;
+		helpLabel = typeof help === 'function' ? help( checked ) : help;
 	}
 
 	return (

package/src/toggle-control/index.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isFunction } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -16,7 +11,8 @@ const ToggleControl = memo(
 	( { label, checked, help, instanceId, className, onChange, ...props } ) => {
 		const id = `inspector-toggle-control-${ instanceId }`;
 
-		const helpLabel = help && isFunction( help ) ? help( checked ) : help;
+		const helpLabel =
+			help && typeof help === 'function' ? help( checked ) : help;
 
 		return (
 			<SwitchCell

package/src/toggle-group-control/test/__snapshots__/index.js.snap

@@ -173,12 +173,9 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
       id="toggle-group-control-1"
       role="radiogroup"
     >
-      <iframe
+      <div
         aria-hidden="true"
-        frameborder="0"
-        src="about:blank"
-        style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
-        tabindex="-1"
+        style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
       />
       <div
         class="emotion-8 emotion-9"
@@ -402,12 +399,9 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
       id="toggle-group-control-0"
       role="radiogroup"
     >
-      <iframe
+      <div
         aria-hidden="true"
-        frameborder="0"
-        src="about:blank"
-        style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
-        tabindex="-1"
+        style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
       />
       <div
         class="emotion-8 emotion-9"

package/src/toggle-group-control/toggle-group-control/component.tsx

@@ -4,14 +4,18 @@
 import type { ForwardedRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { RadioGroup, useRadioState } from 'reakit';
-import useResizeAware from 'react-resize-aware';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { useRef, useMemo } from '@wordpress/element';
-import { useMergeRefs, useInstanceId, usePrevious } from '@wordpress/compose';
+import {
+	useMergeRefs,
+	useInstanceId,
+	usePrevious,
+	useResizeObserver,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -49,7 +53,7 @@ function ToggleGroupControl(
 	} = useContextSystem( props, 'ToggleGroupControl' );
 	const cx = useCx();
 	const containerRef = useRef();
-	const [ resizeListener, sizes ] = useResizeAware();
+	const [ resizeListener, sizes ] = useResizeObserver();
 	const baseId = useInstanceId(
 		ToggleGroupControl,
 		'toggle-group-control'

package/src/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.tsx

@@ -36,10 +36,8 @@ function ToggleGroupControlBackdrop( {
 		}
 
 		const computeDimensions = () => {
-			const {
-				width: offsetWidth,
-				x,
-			} = targetNode.getBoundingClientRect();
+			const { width: offsetWidth, x } =
+				targetNode.getBoundingClientRect();
 
 			const { x: parentX } = containerNode.getBoundingClientRect();
 

package/src/toolbar/index.js

@@ -30,8 +30,7 @@ function Toolbar( { className, label, ...props }, ref ) {
 		deprecated( 'Using Toolbar without label prop', {
 			since: '5.6',
 			alternative: 'ToolbarGroup component',
-			link:
-				'https://developer.wordpress.org/block-editor/components/toolbar/',
+			link: 'https://developer.wordpress.org/block-editor/components/toolbar/',
 		} );
 		return <ToolbarGroup { ...props } className={ className } />;
 	}

package/src/tools-panel/tools-panel/hook.ts

@@ -165,10 +165,8 @@ export function useToolsPanel(
 	// in order to later determine if the panel display is empty and handle
 	// conditional display of a plus icon to indicate the presence of further
 	// menu items.
-	const [
-		areAllOptionalControlsHidden,
-		setAreAllOptionalControlsHidden,
-	] = useState( false );
+	const [ areAllOptionalControlsHidden, setAreAllOptionalControlsHidden ] =
+		useState( false );
 
 	useEffect( () => {
 		if (

package/src/tools-panel/tools-panel-header/hook.ts

@@ -33,11 +33,8 @@ export function useToolsPanelHeader(
 		return cx( styles.ToolsPanelHeading );
 	}, [ cx ] );
 
-	const {
-		menuItems,
-		hasMenuItems,
-		areAllOptionalControlsHidden,
-	} = useToolsPanelContext();
+	const { menuItems, hasMenuItems, areAllOptionalControlsHidden } =
+		useToolsPanelContext();
 
 	return {
 		...otherProps,

package/src/tooltip/index.js

@@ -64,7 +64,8 @@ const addPopoverToGrandchildren = ( {
 				className="components-tooltip"
 				aria-hidden="true"
 				animate={ false }
-				noArrow={ true }
+				offset={ 12 }
+				__unstableShift
 			>
 				{ text }
 				<Shortcut
@@ -93,7 +94,13 @@ const emitToChild = ( children, eventName, event ) => {
 };
 
 function Tooltip( props ) {
-	const { children, position, text, shortcut, delay = TOOLTIP_DELAY } = props;
+	const {
+		children,
+		position = 'bottom middle',
+		text,
+		shortcut,
+		delay = TOOLTIP_DELAY,
+	} = props;
 	/**
 	 * Whether a mouse is currently pressed, used in determining whether
 	 * to handle a focus event as displaying the tooltip immediately.

package/src/tooltip/style.scss

@@ -10,16 +10,14 @@
 	background: $gray-900;
 	border-radius: $radius-block-ui;
 	border-width: 0;
+	outline: none;
 	color: $white;
 	white-space: nowrap;
 	text-align: center;
 	line-height: 1.4;
 	font-size: 12px;
 	box-shadow: none;
-
-	> div {
-		padding: $grid-unit-05 $grid-unit-10;
-	}
+	padding: $grid-unit-05 $grid-unit-10;
 }
 
 .components-tooltip__shortcut {

package/src/tooltip/test/index.native.js

@@ -55,7 +55,7 @@ it( 'displays the message', () => {
 } );
 
 // Skipped until `pointerEvents: 'box-none'` no longer erroneously prevents
-// triggering `onTouch*` on the element: https://git.io/JSHZt
+// triggering `onTouch*` on the element: https://github.com/callstack/react-native-testing-library/issues/897
 it.skip( 'dismisses when the screen is tapped', () => {
 	const screen = render(
 		<TooltipSlot>