@wordpress/components 17.0.0 → 19.0.2

package/src/popover/index.js

@@ -12,9 +12,10 @@ import {
 	useState,
 	useLayoutEffect,
 	forwardRef,
+	createContext,
+	useContext,
 } from '@wordpress/element';
 import { getRectangleFromRange } from '@wordpress/dom';
-import deprecated from '@wordpress/deprecated';
 import {
 	useViewportMatch,
 	useResizeObserver,
@@ -39,6 +40,8 @@ import { getAnimateClassName } from '../animate';
  */
 const SLOT_NAME = 'Popover';
 
+const slotNameContext = createContext();
+
 function computeAnchorRect(
 	anchorRefFallback,
 	anchorRect,
@@ -250,7 +253,6 @@ const Popover = (
 		getAnchorRect,
 		expandOnMobile,
 		animate = true,
-		onClickOutside,
 		onFocusOutside,
 		__unstableStickyBoundaryElement,
 		__unstableSlotName = SLOT_NAME,
@@ -269,7 +271,8 @@ const Popover = (
 	const containerRef = useRef();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const [ animateOrigin, setAnimateOrigin ] = useState();
-	const slot = useSlot( __unstableSlotName );
+	const slotName = useContext( slotNameContext ) || __unstableSlotName;
+	const slot = useSlot( slotName );
 	const isExpanded = expandOnMobile && isMobileViewport;
 	const [ containerResizeListener, contentSize ] = useResizeObserver();
 	noArrow = isExpanded || noArrow;
@@ -328,9 +331,7 @@ const Popover = (
 
 			let boundaryElement;
 			if ( __unstableBoundaryParent ) {
-				boundaryElement = containerRef.current.closest(
-					'.popover-slot'
-				)?.parentNode;
+				boundaryElement = containerRef.current.parentElement;
 			}
 
 			const usedContentSize = ! contentSize.height
@@ -455,11 +456,11 @@ const Popover = (
 			defaultView.cancelAnimationFrame( rafId );
 
 			if ( anchorDocument && anchorDocument !== ownerDocument ) {
-				anchorDocument.defaultView.removeEventListener(
+				anchorDocument.defaultView?.removeEventListener(
 					'resize',
 					refresh
 				);
-				anchorDocument.defaultView.removeEventListener(
+				anchorDocument.defaultView?.removeEventListener(
 					'scroll',
 					refresh,
 					true
@@ -488,20 +489,6 @@ const Popover = (
 		// not three props that potentially do the same thing.
 		if ( type === 'focus-outside' && onFocusOutside ) {
 			onFocusOutside( event );
-		} else if ( type === 'focus-outside' && onClickOutside ) {
-			// Simulate MouseEvent using FocusEvent#relatedTarget as emulated click target.
-			const clickEvent = new window.MouseEvent( 'click' );
-
-			Object.defineProperty( clickEvent, 'target', {
-				get: () => event.relatedTarget,
-			} );
-
-			deprecated( 'Popover onClickOutside prop', {
-				since: '5.3',
-				alternative: 'onFocusOutside',
-			} );
-
-			onClickOutside( clickEvent );
 		} else if ( onClose ) {
 			onClose();
 		}
@@ -568,7 +555,7 @@ const Popover = (
 	);
 
 	if ( slot.ref ) {
-		content = <Fill name={ __unstableSlotName }>{ content }</Fill>;
+		content = <Fill name={ slotName }>{ content }</Fill>;
 	}
 
 	if ( anchorRef || anchorRect ) {
@@ -592,5 +579,6 @@ function PopoverSlot( { name = SLOT_NAME }, ref ) {
 }
 
 PopoverContainer.Slot = forwardRef( PopoverSlot );
+PopoverContainer.__unstableSlotNameProvider = slotNameContext.Provider;
 
 export default PopoverContainer;

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

@@ -170,13 +170,12 @@ If no value exists this prop contains the slider starting position.
 -   Required: No
 -   Platform: Web | Mobile
 
-### isShiftStepEnabled
+#### isShiftStepEnabled
 
-If true, pressing `UP` or `DOWN` along with the `SHIFT` key will increment the value by the `shiftStep` value.
+Passed as a prop to the `NumberControl` component and is only applicable if `withInputField` is true. If true, while the number input has focus, pressing `UP` or `DOWN` along with the `SHIFT` key will change the value by the `shiftStep` value.
 
 -   Type: `Boolean`
 -   Required: No
--   Default: `true`
 
 #### marks
 
@@ -273,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
@@ -281,12 +280,19 @@ 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
 
+#### shiftStep
+
+Passed as a prop to the `NumberControl` component and is only applicable if `withInputField` and `isShiftStepEnabled` are both true and while the number input has focus. Acts as a multiplier of `step`.
+
+-   Type: `Number`
+-   Required: No
+
 #### trackColor
 
 Customizes the (background) color of the track element.
@@ -305,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 );
 
@@ -217,7 +225,6 @@ function RangeControl(
 						describedBy={ describedBy }
 						disabled={ disabled }
 						id={ id }
-						isShiftStepEnabled={ isShiftStepEnabled }
 						label={ label }
 						max={ max }
 						min={ min }
@@ -227,7 +234,6 @@ function RangeControl(
 						onMouseMove={ onMouseMove }
 						onMouseLeave={ onMouseLeave }
 						ref={ setRef }
-						shiftStep={ shiftStep }
 						step={ step }
 						value={ inputSliderValue }
 					/>
@@ -259,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/input-range.js

@@ -14,33 +14,20 @@ import { forwardRef } from '@wordpress/element';
  */
 import { InputRange as BaseInputRange } from './styles/range-control-styles';
 import { useDebouncedHoverInteraction } from './utils';
-import { useJumpStep } from '../utils/hooks';
 
 function InputRange(
 	{
 		describedBy,
-		isShiftStepEnabled = true,
 		label,
 		onHideTooltip = noop,
 		onMouseLeave = noop,
-		step = 1,
-		onBlur = noop,
-		onChange = noop,
-		onFocus = noop,
 		onMouseMove = noop,
 		onShowTooltip = noop,
-		shiftStep = 10,
 		value,
 		...props
 	},
 	ref
 ) {
-	const jumpStep = useJumpStep( {
-		step,
-		shiftStep,
-		isShiftStepEnabled,
-	} );
-
 	const hoverInteractions = useDebouncedHoverInteraction( {
 		onHide: onHideTooltip,
 		onMouseLeave,
@@ -55,11 +42,7 @@ function InputRange(
 			aria-describedby={ describedBy }
 			aria-label={ label }
 			aria-hidden={ false }
-			onBlur={ onBlur }
-			onChange={ onChange }
-			onFocus={ onFocus }
 			ref={ ref }
-			step={ jumpStep }
 			tabIndex={ 0 }
 			type="range"
 			value={ value }

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

@@ -8,6 +8,7 @@ import { boolean, number, text } from '@storybook/addon-knobs';
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
+import { wordpress } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -15,7 +16,13 @@ import { useState } from '@wordpress/element';
 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;
@@ -27,10 +34,13 @@ const RangeControlWithState = ( props ) => {
 const DefaultExample = () => {
 	const [ value, setValue ] = useState( undefined );
 
+	const showBeforeIcon = boolean( 'beforeIcon', false );
+	const showAfterIcon = boolean( 'afterIcon', false );
+
 	const props = {
-		afterIcon: text( 'afterIcon', '' ),
+		afterIcon: showAfterIcon ? wordpress : undefined,
 		allowReset: boolean( 'allowReset', false ),
-		beforeIcon: text( 'beforeIcon', '' ),
+		beforeIcon: showBeforeIcon ? wordpress : undefined,
 		color: text( 'color', COLORS.ui.theme ),
 		disabled: boolean( 'disabled', false ),
 		help: text( 'help', '' ),
@@ -39,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 ),
@@ -77,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(
@@ -97,16 +111,26 @@ export const withMinimumAndMaximumLimits = () => {
 
 export const withIconBefore = () => {
 	const label = text( 'Label', 'How many columns should this use?' );
-	const icon = text( 'Icon', 'wordpress' );
+	const showIcon = boolean( 'icon', true );
 
-	return <RangeControlWithState label={ label } beforeIcon={ icon } />;
+	return (
+		<RangeControlWithState
+			label={ label }
+			beforeIcon={ showIcon ? wordpress : undefined }
+		/>
+	);
 };
 
 export const withIconAfter = () => {
 	const label = text( 'Label', 'How many columns should this use?' );
-	const icon = text( 'Icon', 'wordpress' );
+	const showIcon = boolean( 'icon', true );
 
-	return <RangeControlWithState label={ label } afterIcon={ icon } />;
+	return (
+		<RangeControlWithState
+			label={ label }
+			afterIcon={ showIcon ? wordpress : undefined }
+		/>
+	);
 };
 
 export const withReset = () => {
@@ -160,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

@@ -12,7 +12,10 @@ import NumberControl from '../../number-control';
 import { COLORS, reduceMotion, rtl } from '../../utils';
 import { space } from '../../ui/utils/space';
 
-const rangeHeight = () => css( { height: 30, minHeight: 30 } );
+const rangeHeightValue = 30;
+const railHeight = 4;
+const rangeHeight = () =>
+	css( { height: rangeHeightValue, minHeight: rangeHeightValue } );
 const thumbSize = 12;
 
 export const Root = styled.div`
@@ -38,7 +41,6 @@ export const Wrapper = styled.div`
 	color: ${ COLORS.blue.medium.focus };
 	display: block;
 	flex: 1;
-	padding-top: 18px;
 	position: relative;
 	width: 100%;
 
@@ -48,13 +50,13 @@ export const Wrapper = styled.div`
 `;
 
 export const BeforeIconWrapper = styled.span`
-	margin-top: 3px;
+	margin-top: ${ railHeight }px;
 
 	${ rtl( { marginRight: 6 } ) }
 `;
 
 export const AfterIconWrapper = styled.span`
-	margin-top: 3px;
+	margin-top: ${ railHeight }px;
 
 	${ rtl( { marginLeft: 16 } ) }
 `;
@@ -78,11 +80,11 @@ export const Rail = styled.span`
 	pointer-events: none;
 	right: 0;
 	display: block;
-	height: 3px;
+	height: ${ railHeight }px;
 	position: absolute;
-	margin-top: 14px;
+	margin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;
 	top: 0;
-	border-radius: 9999px;
+	border-radius: ${ railHeight }px;
 
 	${ railBackgroundColor };
 `;
@@ -101,13 +103,13 @@ const trackBackgroundColor = ( { disabled, trackColor } ) => {
 
 export const Track = styled.span`
 	background-color: currentColor;
-	border-radius: 9999px;
+	border-radius: ${ railHeight }px;
 	box-sizing: border-box;
-	height: 3px;
+	height: ${ railHeight }px;
 	pointer-events: none;
 	display: block;
 	position: absolute;
-	margin-top: 14px;
+	margin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;
 	top: 0;
 
 	${ trackBackgroundColor };
@@ -136,7 +138,7 @@ const markFill = ( { disabled, isFilled } ) => {
 
 export const Mark = styled.span`
 	box-sizing: border-box;
-	height: 9px;
+	height: ${ thumbSize }px;
 	left: 0;
 	position: absolute;
 	top: -4px;
@@ -179,7 +181,7 @@ export const ThumbWrapper = styled.span`
 	display: flex;
 	height: ${ thumbSize }px;
 	justify-content: center;
-	margin-top: 9px;
+	margin-top: ${ ( rangeHeightValue - thumbSize ) / 2 }px;
 	outline: 0;
 	pointer-events: none;
 	position: absolute;
@@ -187,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 } ) => {
@@ -199,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;
 				}
 		  `
 		: '';
@@ -247,21 +252,21 @@ 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%;
 	`;
 };
 
 export const Tooltip = styled.span`
-	background: ${ COLORS.ui.border };
+	background: rgba( 0, 0, 0, 0.8 );
 	border-radius: 2px;
 	box-sizing: border-box;
 	color: white;

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 );
 		};
 	} );