@wordpress/components 18.0.0 → 19.0.3

package/src/popover/stories/index.js

@@ -15,7 +15,13 @@ import { DraggableWrapper } from './_utils';
 import Popover from '../';
 import Button from '../../button';
 
-export default { title: 'Components/Popover', component: Popover };
+export default {
+	title: 'Components/Popover',
+	component: Popover,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 export const _default = () => {
 	const show = boolean( 'Example: Show', true );

package/src/popover/utils.js

@@ -139,8 +139,10 @@ export function computePopoverXAxisPosition(
 	}
 
 	if ( boundaryElement ) {
-		const boundaryRect = boundaryElement.getBoundingClientRect();
-		popoverLeft = Math.min( popoverLeft, boundaryRect.right - width );
+		popoverLeft = Math.min(
+			popoverLeft,
+			boundaryElement.offsetLeft + boundaryElement.offsetWidth - width
+		);
 
 		// Avoid the popover being position beyond the left boundary if the
 		// direction is left to right.

package/src/range-control/README.md

@@ -272,7 +272,7 @@ The value to revert to if the Reset button is clicked (enabled by `allowReset`)
 
 #### showTooltip
 
-Forcing the Tooltip UI to show or hide.
+Forcing the Tooltip UI to show or hide. This is overriden to `false` when `step` is set to the special string value `any`.
 
 -   Type: `Boolean`
 -   Required: No
@@ -280,9 +280,9 @@ Forcing the Tooltip UI to show or hide.
 
 #### step
 
-The stepping interval between `min` and `max` values. Step is used both for user interface and validation purposes.
+The minimum amount by which `value` changes. It is also a factor in validation as `value` must be a multiple of `step` (offset by `min`) to be valid. Accepts the special string value `any` that voids the validation constraint and overrides both `withInputField` and `showTooltip` props to `false`.
 
--   Type: `Number`
+-   Type: `Number | "any"`
 -   Required: No
 -   Platform: Web
 
@@ -311,7 +311,7 @@ The current value of the range slider.
 
 #### withInputField
 
-Determines if the `input` number field will render next to the RangeControl.
+Determines if the `input` number field will render next to the RangeControl. This is overriden to `false` when `step` is set to the special string value `any`.
 
 -   Type: `Boolean`
 -   Required: No

package/src/range-control/index.js

@@ -77,6 +77,14 @@ function RangeControl(
 		initial: initialPosition,
 	} );
 	const isResetPendent = useRef( false );
+
+	if ( step === 'any' ) {
+		// The tooltip and number input field are hidden when the step is "any"
+		// because the decimals get too lengthy to fit well.
+		showTooltipProp = false;
+		withInputField = false;
+	}
+
 	const [ showTooltip, setShowTooltip ] = useState( showTooltipProp );
 	const [ isFocused, setIsFocused ] = useState( false );
 
@@ -257,6 +265,7 @@ function RangeControl(
 						<SimpleTooltip
 							className="components-range-control__tooltip"
 							inputRef={ inputRef }
+							tooltipPosition="bottom"
 							renderTooltipContent={ renderTooltipContent }
 							show={ isCurrentlyFocused || showTooltip }
 							style={ offsetStyle }

package/src/range-control/rail.js

@@ -44,6 +44,9 @@ function Marks( {
 	step = 1,
 	value = 0,
 } ) {
+	if ( step === 'any' ) {
+		step = 1;
+	}
 	const marksData = useMarks( { marks, min, max, step, value } );
 
 	return (

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

@@ -16,7 +16,13 @@ import { wordpress } from '@wordpress/icons';
 import RangeControl from '../index';
 import { COLORS } from '../../utils';
 
-export default { title: 'Components/RangeControl', component: RangeControl };
+export default {
+	title: 'Components/RangeControl',
+	component: RangeControl,
+	parameters: {
+		knobs: { disabled: false },
+	},
+};
 
 const RangeControlWithState = ( props ) => {
 	const initialValue = props.value === undefined ? 5 : props.value;
@@ -43,7 +49,7 @@ const DefaultExample = () => {
 		max: number( 'max', 100 ),
 		min: number( 'min', 0 ),
 		showTooltip: boolean( 'showTooltip', false ),
-		step: number( 'step', 1 ),
+		step: text( 'step', 1 ),
 		railColor: text( 'railColor', null ),
 		trackColor: text( 'trackColor', null ),
 		withInputField: boolean( 'withInputField', true ),
@@ -81,6 +87,10 @@ export const InitialValueZero = () => {
 	);
 };
 
+export const withAnyStep = () => {
+	return <RangeControlWithState label="Brightness" step="any" />;
+};
+
 export const withHelp = () => {
 	const label = text( 'Label', 'How many columns should this use?' );
 	const help = text(
@@ -174,6 +184,10 @@ export const marks = () => {
 			<h2>Negative Range</h2>
 			<Range marks { ...rangeNegative } />
 			<Range marks={ marksWithNegatives } { ...rangeNegative } />
+
+			<h2>Any Step</h2>
+			<Range marks { ...{ ...stepInteger, step: 'any' } } />
+			<Range marks={ marksBase } { ...{ ...stepInteger, step: 'any' } } />
 		</Wrapper>
 	);
 };

package/src/range-control/styles/range-control-styles.js

@@ -16,7 +16,7 @@ const rangeHeightValue = 30;
 const railHeight = 4;
 const rangeHeight = () =>
 	css( { height: rangeHeightValue, minHeight: rangeHeightValue } );
-const thumbSize = 9;
+const thumbSize = 12;
 
 export const Root = styled.div`
 	-webkit-tap-highlight-color: transparent;
@@ -189,10 +189,13 @@ export const ThumbWrapper = styled.span`
 	user-select: none;
 	width: ${ thumbSize }px;
 	border-radius: 50%;
-	transform: translateX( 4.5px );
 
 	${ thumbColor };
 	${ rtl( { marginLeft: -10 } ) };
+	${ rtl(
+		{ transform: 'translateX( 4.5px )' },
+		{ transform: 'translateX( -4.5px )' }
+	) };
 `;
 
 const thumbFocus = ( { isFocused } ) => {
@@ -201,13 +204,13 @@ const thumbFocus = ( { isFocused } ) => {
 				&::before {
 					content: ' ';
 					position: absolute;
-					background-color: transparent;
-					box-shadow: 0 0 0 1.5px var( --wp-admin-theme-color );
+					background-color: var( --wp-admin-theme-color );
+					opacity: 0.4;
 					border-radius: 50%;
-					height: ${ thumbSize + 4 }px;
-					width: ${ thumbSize + 4 }px;
-					top: -2px;
-					left: -2px;
+					height: ${ thumbSize + 8 }px;
+					width: ${ thumbSize + 8 }px;
+					top: -4px;
+					left: -4px;
 				}
 		  `
 		: '';
@@ -249,16 +252,16 @@ const tooltipShow = ( { show } ) => {
 };
 
 const tooltipPosition = ( { position } ) => {
-	const isTop = position === 'top';
+	const isBottom = position === 'bottom';
 
-	if ( isTop ) {
+	if ( isBottom ) {
 		return css`
-			top: -80%;
+			bottom: -80%;
 		`;
 	}
 
 	return css`
-		bottom: -80%;
+		top: -80%;
 	`;
 };
 

package/src/range-control/tooltip.js

@@ -14,12 +14,10 @@ import { useCallback, useEffect, useState } from '@wordpress/element';
  */
 import { Tooltip } from './styles/range-control-styles';
 
-const TOOLTIP_OFFSET_HEIGHT = 32;
-
 export default function SimpleTooltip( {
 	className,
 	inputRef,
-	position: positionProp = 'auto',
+	tooltipPosition,
 	show = false,
 	style = {},
 	value = 0,
@@ -27,7 +25,7 @@ export default function SimpleTooltip( {
 	zIndex = 100,
 	...restProps
 } ) {
-	const position = useTooltipPosition( { inputRef, position: positionProp } );
+	const position = useTooltipPosition( { inputRef, tooltipPosition } );
 	const classes = classnames( 'components-simple-tooltip', className );
 	const styles = {
 		...style,
@@ -49,33 +47,24 @@ export default function SimpleTooltip( {
 	);
 }
 
-function useTooltipPosition( { inputRef, position: positionProp } ) {
-	const [ position, setPosition ] = useState( 'top' );
+function useTooltipPosition( { inputRef, tooltipPosition } ) {
+	const [ position, setPosition ] = useState();
 
-	const calculatePosition = useCallback( () => {
+	const setTooltipPosition = useCallback( () => {
 		if ( inputRef && inputRef.current ) {
-			let nextPosition = positionProp;
-
-			if ( positionProp === 'auto' ) {
-				const { top } = inputRef.current.getBoundingClientRect();
-				const isOffscreenTop = top - TOOLTIP_OFFSET_HEIGHT < 0;
-
-				nextPosition = isOffscreenTop ? 'bottom' : 'top';
-			}
-
-			setPosition( nextPosition );
+			setPosition( tooltipPosition );
 		}
-	}, [ positionProp ] );
+	}, [ tooltipPosition ] );
 
 	useEffect( () => {
-		calculatePosition();
-	}, [ calculatePosition ] );
+		setTooltipPosition();
+	}, [ setTooltipPosition ] );
 
 	useEffect( () => {
-		window.addEventListener( 'resize', calculatePosition );
+		window.addEventListener( 'resize', setTooltipPosition );
 
 		return () => {
-			window.removeEventListener( 'resize', calculatePosition );
+			window.removeEventListener( 'resize', setTooltipPosition );
 		};
 	} );
 

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( {