@wordpress/components 17.0.0 → 19.0.2

package/src/resizable-box/index.tsx

@@ -0,0 +1,128 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { Resizable } from 're-resizable';
+import type { ResizableProps } from 're-resizable';
+// eslint-disable-next-line no-restricted-imports
+import type { ReactNode, Ref } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import ResizeTooltip from './resize-tooltip';
+
+const HANDLE_CLASS_NAME = 'components-resizable-box__handle';
+const SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';
+const CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';
+
+const HANDLE_CLASSES = {
+	top: classnames(
+		HANDLE_CLASS_NAME,
+		SIDE_HANDLE_CLASS_NAME,
+		'components-resizable-box__handle-top'
+	),
+	right: classnames(
+		HANDLE_CLASS_NAME,
+		SIDE_HANDLE_CLASS_NAME,
+		'components-resizable-box__handle-right'
+	),
+	bottom: classnames(
+		HANDLE_CLASS_NAME,
+		SIDE_HANDLE_CLASS_NAME,
+		'components-resizable-box__handle-bottom'
+	),
+	left: classnames(
+		HANDLE_CLASS_NAME,
+		SIDE_HANDLE_CLASS_NAME,
+		'components-resizable-box__handle-left'
+	),
+	topLeft: classnames(
+		HANDLE_CLASS_NAME,
+		CORNER_HANDLE_CLASS_NAME,
+		'components-resizable-box__handle-top',
+		'components-resizable-box__handle-left'
+	),
+	topRight: classnames(
+		HANDLE_CLASS_NAME,
+		CORNER_HANDLE_CLASS_NAME,
+		'components-resizable-box__handle-top',
+		'components-resizable-box__handle-right'
+	),
+	bottomRight: classnames(
+		HANDLE_CLASS_NAME,
+		CORNER_HANDLE_CLASS_NAME,
+		'components-resizable-box__handle-bottom',
+		'components-resizable-box__handle-right'
+	),
+	bottomLeft: classnames(
+		HANDLE_CLASS_NAME,
+		CORNER_HANDLE_CLASS_NAME,
+		'components-resizable-box__handle-bottom',
+		'components-resizable-box__handle-left'
+	),
+};
+
+// Removes the inline styles in the drag handles.
+const HANDLE_STYLES_OVERRIDES = {
+	width: undefined,
+	height: undefined,
+	top: undefined,
+	right: undefined,
+	bottom: undefined,
+	left: undefined,
+};
+const HANDLE_STYLES = {
+	top: HANDLE_STYLES_OVERRIDES,
+	right: HANDLE_STYLES_OVERRIDES,
+	bottom: HANDLE_STYLES_OVERRIDES,
+	left: HANDLE_STYLES_OVERRIDES,
+	topLeft: HANDLE_STYLES_OVERRIDES,
+	topRight: HANDLE_STYLES_OVERRIDES,
+	bottomRight: HANDLE_STYLES_OVERRIDES,
+	bottomLeft: HANDLE_STYLES_OVERRIDES,
+};
+
+type ResizableBoxProps = ResizableProps & {
+	className: string;
+	children: ReactNode;
+	showHandle: boolean;
+	__experimentalShowTooltip: boolean;
+	__experimentalTooltipProps: Parameters< typeof ResizeTooltip >[ 0 ];
+};
+
+function ResizableBox(
+	{
+		className,
+		children,
+		showHandle = true,
+		__experimentalShowTooltip: showTooltip = false,
+		__experimentalTooltipProps: tooltipProps = {},
+		...props
+	}: ResizableBoxProps,
+	ref: Ref< Resizable >
+): JSX.Element {
+	return (
+		<Resizable
+			className={ classnames(
+				'components-resizable-box__container',
+				showHandle && 'has-show-handle',
+				className
+			) }
+			handleClasses={ HANDLE_CLASSES }
+			handleStyles={ HANDLE_STYLES }
+			ref={ ref }
+			{ ...props }
+		>
+			{ children }
+			{ showTooltip && <ResizeTooltip { ...tooltipProps } /> }
+		</Resizable>
+	);
+}
+
+export default forwardRef( ResizableBox );

package/src/resizable-box/resize-tooltip/{index.js → index.tsx}

@@ -8,14 +8,29 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
+// eslint-disable-next-line no-restricted-imports
+import type { Ref } from 'react';
 
 /**
  * Internal dependencies
  */
 import Label from './label';
-import { useResizeLabel, POSITIONS } from './utils';
+import { useResizeLabel, Axis, Position, POSITIONS } from './utils';
 import { Root } from './styles/resize-tooltip.styles';
 
+type ResizeTooltipProps = React.ComponentProps< typeof Root > & {
+	'aria-hidden'?: boolean;
+	axis?: Axis;
+	className?: string;
+	fadeTimeout?: number;
+	isVisible?: boolean;
+	labelRef?: Ref< HTMLDivElement >;
+	onResize?: Parameters< typeof useResizeLabel >[ 0 ][ 'onResize' ];
+	position?: Position;
+	showPx?: boolean;
+	zIndex?: number;
+};
+
 function ResizeTooltip(
 	{
 		axis,
@@ -28,9 +43,9 @@ function ResizeTooltip(
 		showPx = true,
 		zIndex = 1000,
 		...props
-	},
-	ref
-) {
+	}: ResizeTooltipProps,
+	ref: Ref< HTMLDivElement >
+): JSX.Element | null {
 	const { label, resizeListener } = useResizeLabel( {
 		axis,
 		fadeTimeout,
@@ -48,8 +63,6 @@ function ResizeTooltip(
 			{ resizeListener }
 			<Label
 				aria-hidden={ props[ 'aria-hidden' ] }
-				fadeTimeout={ fadeTimeout }
-				isVisible={ isVisible }
 				label={ label }
 				position={ position }
 				ref={ labelRef }

package/src/resizable-box/resize-tooltip/{label.js → label.tsx}

@@ -1,3 +1,9 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { Ref } from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -7,7 +13,7 @@ import { isRTL } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { POSITIONS } from './utils';
+import { Position, POSITIONS } from './utils';
 import {
 	TooltipWrapper,
 	Tooltip,
@@ -17,10 +23,19 @@ import {
 const CORNER_OFFSET = 4;
 const CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;
 
+type LabelProps = React.DetailedHTMLProps<
+	React.HTMLAttributes< HTMLDivElement >,
+	HTMLDivElement
+> & {
+	label?: string;
+	position: Position;
+	zIndex: number;
+};
+
 function Label(
-	{ label, position = POSITIONS.corner, zIndex = 1000, ...props },
-	ref
-) {
+	{ label, position = POSITIONS.corner, zIndex = 1000, ...props }: LabelProps,
+	ref: Ref< HTMLDivElement >
+): JSX.Element | null {
 	const showLabel = !! label;
 
 	const isBottom = position === POSITIONS.bottom;
@@ -28,8 +43,8 @@ function Label(
 
 	if ( ! showLabel ) return null;
 
-	let style = {
-		opacity: showLabel ? 1 : null,
+	let style: React.CSSProperties = {
+		opacity: showLabel ? 1 : undefined,
 		zIndex,
 	};
 
@@ -54,8 +69,8 @@ function Label(
 			...style,
 			position: 'absolute',
 			top: CORNER_OFFSET,
-			right: isRTL() ? null : CORNER_OFFSET,
-			left: isRTL() ? CORNER_OFFSET : null,
+			right: isRTL() ? undefined : CORNER_OFFSET,
+			left: isRTL() ? CORNER_OFFSET : undefined,
 		};
 	}
 
@@ -63,7 +78,6 @@ function Label(
 		<TooltipWrapper
 			aria-hidden="true"
 			className="components-resizable-tooltip__tooltip-wrapper"
-			isActive={ showLabel }
 			ref={ ref }
 			style={ style }
 			{ ...props }

package/src/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js

@@ -44,7 +44,7 @@ export const Tooltip = styled.div`
 
 export const LabelText = styled( Text )`
 	&&& {
-		color: white;
+		color: ${ COLORS.ui.textDark };
 		display: block;
 		font-size: 13px;
 		line-height: 1.4;

package/src/resizable-box/resize-tooltip/{utils.js → utils.ts}

@@ -9,33 +9,44 @@ import useResizeAware from 'react-resize-aware';
  */
 import { useEffect, useRef, useState } from '@wordpress/element';
 
-const { clearTimeout, setTimeout } =
-	typeof window !== 'undefined' ? window : {};
+const { clearTimeout, setTimeout } = window;
+
+export type Axis = 'x' | 'y';
 
 export const POSITIONS = {
 	bottom: 'bottom',
 	corner: 'corner',
-};
+} as const;
 
-/**
- * @typedef {Object} UseResizeLabelProps
- *
- * @property {undefined|string} label          The label value.
- * @property {Function}         resizeListener Element to be rendered for resize listening events.
- */
+export type Position = typeof POSITIONS[ keyof typeof POSITIONS ];
+
+interface UseResizeLabelProps {
+	/** The label value. */
+	label?: string;
+	/** Element to be rendered for resize listening events. */
+	resizeListener: JSX.Element;
+}
+
+interface UseResizeLabelArgs {
+	axis?: Axis;
+	fadeTimeout: number;
+	onResize( data: { width: number | null; height: number | null } ): void;
+	position: Position;
+	showPx: boolean;
+}
 
 /**
  * Custom hook that manages resize listener events. It also provides a label
  * based on current resize width x height values.
  *
- * @param {Object}  props
- * @param {string}  props.axis        Only shows the label corresponding to the axis.
- * @param {number}  props.fadeTimeout Duration (ms) before deactivating the resize label.
- * @param {boolean} props.onResize    Callback when a resize occurs. Provides { width, height } callback.
- * @param {string}  props.position    Adjusts label value.
- * @param {boolean} props.showPx      Whether to add `PX` to the label.
+ * @param  props
+ * @param  props.axis        Only shows the label corresponding to the axis.
+ * @param  props.fadeTimeout Duration (ms) before deactivating the resize label.
+ * @param  props.onResize    Callback when a resize occurs. Provides { width, height } callback.
+ * @param  props.position    Adjusts label value.
+ * @param  props.showPx      Whether to add `PX` to the label.
  *
- * @return {UseResizeLabelProps} Properties for hook.
+ * @return Properties for hook.
  */
 export function useResizeLabel( {
 	axis,
@@ -43,7 +54,7 @@ export function useResizeLabel( {
 	onResize = noop,
 	position = POSITIONS.bottom,
 	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
@@ -77,7 +88,7 @@ export function useResizeLabel( {
 	 * This timeout is used with setMoveX and setMoveY to determine of
 	 * both width and height values have changed at (roughly) the same time.
 	 */
-	const moveTimeoutRef = useRef();
+	const moveTimeoutRef = useRef< number >();
 
 	const unsetMoveXY = () => {
 		/*
@@ -156,19 +167,29 @@ export function useResizeLabel( {
 	};
 }
 
+interface GetSizeLabelArgs {
+	axis?: Axis;
+	height: number | null;
+	moveX: boolean;
+	moveY: boolean;
+	position: Position;
+	showPx: boolean;
+	width: number | null;
+}
+
 /**
  * Gets the resize label based on width and height values (as well as recent changes).
  *
- * @param {Object}  props
- * @param {string}  props.axis     Only shows the label corresponding to the axis.
- * @param {number}  props.height   Height value.
- * @param {boolean} props.moveX    Recent width (x axis) changes.
- * @param {boolean} props.moveY    Recent width (y axis) changes.
- * @param {string}  props.position Adjusts label value.
- * @param {boolean} props.showPx   Whether to add `PX` to the label.
- * @param {number}  props.width    Width value.
+ * @param  props
+ * @param  props.axis     Only shows the label corresponding to the axis.
+ * @param  props.height   Height value.
+ * @param  props.moveX    Recent width (x axis) changes.
+ * @param  props.moveY    Recent width (y axis) changes.
+ * @param  props.position Adjusts label value.
+ * @param  props.showPx   Whether to add `PX` to the label.
+ * @param  props.width    Width value.
  *
- * @return {undefined | string} The rendered label.
+ * @return The rendered label.
  */
 function getSizeLabel( {
 	axis,
@@ -178,8 +199,8 @@ function getSizeLabel( {
 	position = POSITIONS.bottom,
 	showPx = false,
 	width,
-} ) {
-	if ( ! moveX && ! moveY ) return null;
+}: GetSizeLabelArgs ): string | undefined {
+	if ( ! moveX && ! moveY ) return undefined;
 
 	/*
 	 * Corner position...
@@ -218,5 +239,5 @@ function getSizeLabel( {
 		return `${ height }${ labelUnit }`;
 	}
 
-	return null;
+	return undefined;
 }

package/src/resizable-box/stories/index.js

@@ -13,7 +13,13 @@ import ResizableBox from '../';
  */
 import { useState } from '@wordpress/element';
 
-export default { title: 'Components/ResizableBox', component: ResizableBox };
+export default {
+	title: 'Components/ResizableBox',
+	component: ResizableBox,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 const Example = ( props ) => {
 	const [ attributes, setAttributes ] = useState( {

package/src/resizable-box/style.scss

@@ -17,19 +17,27 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	}
 }
 
+// Make the image inside the resize to get the full width
+.components-resizable-box__container > img {
+	width: inherit;
+}
+
 // This is the "visible" resize handle - the circle part
 .components-resizable-box__handle::after {
 	display: block;
 	content: "";
 	width: $resize-handler-size;
 	height: $resize-handler-size;
-	border: 2px solid var(--wp-admin-theme-color);
 	border-radius: 50%;
 	background: $white;
 	cursor: inherit;
 	position: absolute;
 	top: calc(50% - #{ceil($resize-handler-size * 0.5)});
 	right: calc(50% - #{ceil($resize-handler-size * 0.5)});
+
+	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	// Only visible in Windows High Contrast mode.
+	outline: 2px solid transparent;
 }
 
 // This is the "visible" resize handle for side handles - the line

package/src/sandbox/index.js

@@ -7,11 +7,7 @@ import {
 	useState,
 	useEffect,
 } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import FocusableIframe from '../focusable-iframe';
+import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
 
 const observeAndResizeJS = `
 	( function() {
@@ -238,8 +234,8 @@ export default function Sandbox( {
 	}, [ html ] );
 
 	return (
-		<FocusableIframe
-			iframeRef={ ref }
+		<iframe
+			ref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }
 			title={ title }
 			className="components-sandbox"
 			sandbox="allow-scripts allow-same-origin allow-presentation"

package/src/sandbox/index.native.js

@@ -14,6 +14,7 @@ import {
 	useState,
 	useEffect,
 } from '@wordpress/element';
+import { usePreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -153,8 +154,9 @@ const EMPTY_ARRAY = [];
 
 function Sandbox( {
 	containerStyle,
-	html = '',
 	customJS,
+	html = '',
+	lang = 'en',
 	providerUrl = '',
 	scripts = EMPTY_ARRAY,
 	styles = EMPTY_ARRAY,
@@ -162,6 +164,7 @@ function Sandbox( {
 	type,
 	url,
 } ) {
+	const colorScheme = usePreferredColorScheme();
 	const ref = useRef();
 	const [ height, setHeight ] = useState( 0 );
 	const [ contentHtml, setContentHtml ] = useState( getHtmlDoc() );
@@ -171,17 +174,18 @@ function Sandbox( {
 		windowSize.width >= windowSize.height
 	);
 	const wasLandscape = useRef( isLandscape );
-	// On Android, we need to recreate the WebView when the device rotates, otherwise it disappears.
-	// For this purpose, the key value used in the WebView will change when the device orientation gets updated.
+	// On Android, we need to recreate the WebView on any of the following actions, otherwise it disappears:
+	// - Device rotation
+	// - Light/dark mode changes
+	// For this purpose, the key prop used in the WebView will be updated with the value of the actions.
 	const key = Platform.select( {
-		android: `${ url }-${ isLandscape ? 'landscape' : 'portrait' }`,
+		android: `${ url }-${
+			isLandscape ? 'landscape' : 'portrait'
+		}-${ colorScheme }`,
 		ios: url,
 	} );
 
 	function getHtmlDoc() {
-		// TODO: Use the device's locale
-		const lang = 'en';
-
 		// Put the html snippet into a html document, and update the state to refresh the WebView,
 		// we can use this in the future to inject custom styles or scripts.
 		// Scripts go into the body rather than the head, to support embedded content such as Instagram

package/src/scrollable/README.md

@@ -9,7 +9,7 @@ This feature is still experimental. “Experimental” means this is an early im
 ## Usage
 
 ```jsx
-import {__experimentalScrollable as Scrollable } from '@wordpress/components/ui';
+import {__experimentalScrollable as Scrollable } from '@wordpress/components';
 
 function Example() {
 	return (

package/src/scrollable/component.js

@@ -1,15 +1,26 @@
 /**
  * Internal dependencies
  */
-import { createComponent } from '../ui/utils';
+import { contextConnect } from '../ui/context';
+import { View } from '../view';
 import { useScrollable } from './hook';
 
+/**
+ * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
+ * @param {import('react').Ref<any>}                                                        forwardedRef
+ */
+function Scrollable( props, forwardedRef ) {
+	const scrollableProps = useScrollable( props );
+
+	return <View { ...scrollableProps } ref={ forwardedRef } />;
+}
+
 /**
  * `Scrollable` is a layout component that content in a scrollable container.
  *
  * @example
  * ```jsx
- * import { __experimentalScrollable as Scrollable } from `@wordpress/components/ui`;
+ * import { __experimentalScrollable as Scrollable } from `@wordpress/components`;
  *
  * function Example() {
  * 	return (
@@ -21,10 +32,6 @@ import { useScrollable } from './hook';
  * ```
  */
 
-const Scrollable = createComponent( {
-	as: 'div',
-	useHook: useScrollable,
-	name: 'Scrollable',
-} );
+const ConnectedScrollable = contextConnect( Scrollable, 'Scrollable' );
 
-export default Scrollable;
+export default ConnectedScrollable;

package/src/scrollable/stories/index.js

@@ -14,6 +14,9 @@ import { Scrollable } from '../';
 export default {
 	component: Scrollable,
 	title: 'Components (Experimental)/Scrollable',
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 export const _default = () => {

package/src/search-control/index.js

@@ -9,27 +9,60 @@ import classnames from 'classnames';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { Icon, search, closeSmall } from '@wordpress/icons';
-import { useRef } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { Button } from '../';
 import BaseControl from '../base-control';
+import { useCombinedRef } from '../utils';
 
-function SearchControl( {
-	className,
-	onChange,
-	value,
-	label,
-	placeholder = __( 'Search' ),
-	hideLabelFromVision = true,
-	help,
-} ) {
+function SearchControl(
+	{
+		className,
+		onChange,
+		onKeyDown,
+		value,
+		label,
+		placeholder = __( 'Search' ),
+		hideLabelFromVision = true,
+		help,
+		onClose,
+	},
+	ref
+) {
 	const instanceId = useInstanceId( SearchControl );
-	const searchInput = useRef();
+	const searchInput = useCombinedRef( ref );
 	const id = `components-search-control-${ instanceId }`;
 
+	const renderRightButton = () => {
+		if ( onClose ) {
+			return (
+				<Button
+					icon={ closeSmall }
+					label={ __( 'Close search' ) }
+					onClick={ onClose }
+				/>
+			);
+		}
+
+		if ( !! value ) {
+			return (
+				<Button
+					icon={ closeSmall }
+					label={ __( 'Reset search' ) }
+					onClick={ () => {
+						onChange( '' );
+						searchInput.current.focus();
+					} }
+				/>
+			);
+		}
+
+		return <Icon icon={ search } />;
+	};
+
 	return (
 		<BaseControl
 			label={ label }
@@ -46,25 +79,16 @@ function SearchControl( {
 					type="search"
 					placeholder={ placeholder }
 					onChange={ ( event ) => onChange( event.target.value ) }
+					onKeyDown={ onKeyDown }
 					autoComplete="off"
 					value={ value || '' }
 				/>
 				<div className="components-search-control__icon">
-					{ !! value && (
-						<Button
-							icon={ closeSmall }
-							label={ __( 'Reset search' ) }
-							onClick={ () => {
-								onChange( '' );
-								searchInput.current.focus();
-							} }
-						/>
-					) }
-					{ ! value && <Icon icon={ search } /> }
+					{ renderRightButton() }
 				</div>
 			</div>
 		</BaseControl>
 	);
 }
 
-export default SearchControl;
+export default forwardRef( SearchControl );

package/src/search-control/stories/index.js

@@ -16,6 +16,9 @@ import SearchControl from '../';
 export default {
 	title: 'Components/SearchControl',
 	component: SearchControl,
+	parameters: {
+		knobs: { disabled: false },
+	},
 };
 
 export const _default = () => {