@wordpress/components 19.15.0 → 20.0.0

package/src/popover/utils.js

@@ -0,0 +1,107 @@
+/**
+ * @typedef {import('../animate').AppearOrigin} AppearOrigin
+ * @typedef {import('@floating-ui/react-dom').Placement} FloatingUIPlacement
+ * @typedef {	'top left' | 'top center' | 'top right' | 'middle left' | 'middle center' | 'middle right' | 'bottom left' | 'bottom center' | 'bottom right' | 'bottom left' | 'bottom center' | 'bottom right' } LegacyPosition
+ */
+
+/**
+ * Converts the `Popover`'s legacy "position" prop to the new "placement" prop
+ * (used by `floating-ui`).
+ *
+ * @param {LegacyPosition} position The legacy position
+ * @return {FloatingUIPlacement} The corresponding placement
+ */
+export const positionToPlacement = ( position ) => {
+	const [ x, y, z ] = position.split( ' ' );
+
+	if ( [ 'top', 'bottom' ].includes( x ) ) {
+		let suffix = '';
+		if ( ( !! z && z === 'left' ) || y === 'right' ) {
+			suffix = '-start';
+		} else if ( ( !! z && z === 'right' ) || y === 'left' ) {
+			suffix = '-end';
+		}
+
+		// @ts-expect-error More TypeScript effort would be required to reconcile `string` and `Placement` types.
+		return x + suffix;
+	}
+
+	// @ts-expect-error More TypeScript effort would be required to reconcile `string` and `Placement` types.
+	return y;
+};
+
+/**
+ * @typedef AnimationOrigin
+ * @type {Object}
+ * @property {number} originX A number between 0 and 1 (in CSS logical properties jargon, 0 is "start", 0.5 is "center", and 1 is "end")
+ * @property {number} originY A number between 0 and 1 (0 is top, 0.5 is center, and 1 is bottom)
+ */
+
+/** @type {Object.<FloatingUIPlacement, {originX: number, originY: number}>} */
+const PLACEMENT_TO_ANIMATION_ORIGIN = {
+	top: { originX: 0.5, originY: 1 }, // open from bottom, center
+	'top-start': { originX: 0, originY: 1 }, // open from bottom, left
+	'top-end': { originX: 1, originY: 1 }, // open from bottom, right
+	right: { originX: 0, originY: 0.5 }, // open from middle, left
+	'right-start': { originX: 0, originY: 0 }, // open from top, left
+	'right-end': { originX: 0, originY: 1 }, // open from bottom, left
+	bottom: { originX: 0.5, originY: 0 }, // open from top, center
+	'bottom-start': { originX: 0, originY: 0 }, // open from top, left
+	'bottom-end': { originX: 1, originY: 0 }, // open from top, right
+	left: { originX: 1, originY: 0.5 }, // open from middle, right
+	'left-start': { originX: 1, originY: 0 }, // open from top, right
+	'left-end': { originX: 1, originY: 1 }, // open from bottom, right
+};
+
+/**
+ * Given the floating-ui `placement`, compute the framer-motion props for the
+ * popover's entry animation.
+ *
+ * @param {FloatingUIPlacement} placement A placement string from floating ui
+ * @return {import('framer-motion').MotionProps} The object containing the motion props
+ */
+export const placementToMotionAnimationProps = ( placement ) => {
+	const translateProp =
+		placement.startsWith( 'top' ) || placement.startsWith( 'bottom' )
+			? 'translateY'
+			: 'translateX';
+	const translateDirection =
+		placement.startsWith( 'top' ) || placement.startsWith( 'left' )
+			? 1
+			: -1;
+
+	return {
+		style: PLACEMENT_TO_ANIMATION_ORIGIN[ placement ],
+		initial: {
+			opacity: 0,
+			scale: 0,
+			[ translateProp ]: `${ 2 * translateDirection }em`,
+		},
+		animate: { opacity: 1, scale: 1, [ translateProp ]: 0 },
+		transition: { duration: 0.1, ease: [ 0, 0, 0.2, 1 ] },
+	};
+};
+
+/**
+ * @typedef FrameOffset
+ * @type {Object}
+ * @property {number} x A numerical value representing the horizontal offset of the frame.
+ * @property {number} y A numerical value representing the vertical offset of the frame.
+ */
+
+/**
+ * Returns the offset of a document's frame element.
+ *
+ * @param {Document} document A document. This will usually be the document within an iframe.
+ *
+ * @return {FrameOffset|undefined} The offset of the document's frame element,
+ *                                 or undefined if the document has no frame element.
+ */
+export const getFrameOffset = ( document ) => {
+	const frameElement = document?.defaultView?.frameElement;
+	if ( ! frameElement ) {
+		return;
+	}
+	const iframeRect = frameElement.getBoundingClientRect();
+	return { x: iframeRect.left, y: iframeRect.top };
+};

package/src/radio-control/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { isEmpty } from 'lodash';
 import classnames from 'classnames';
 import type { ChangeEvent } from 'react';
 
@@ -65,7 +64,7 @@ export function RadioControl(
 	const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>
 		onChange( event.target.value );
 
-	if ( isEmpty( options ) ) {
+	if ( ! options?.length ) {
 		return null;
 	}
 

package/src/range-control/README.md

@@ -184,7 +184,7 @@ An icon to be shown above the slider next to its container title.
 
 ### `initialPosition`: `number`
 
-If no value exists this prop contains the slider starting position.
+The slider starting position, used when no `value` is passed. The `initialPosition` will be clamped between the provided `min` and `max` prop values.
 
 -   Required: No
 -   Platform: Web | Mobile

package/src/range-control/index.tsx

@@ -49,6 +49,7 @@ function UnforwardedRangeControl< IconProps = unknown >(
 	forwardedRef: ForwardedRef< HTMLInputElement >
 ) {
 	const {
+		__nextHasNoMarginBottom = false,
 		afterIcon,
 		allowReset = false,
 		beforeIcon,
@@ -212,6 +213,7 @@ function UnforwardedRangeControl< IconProps = unknown >(
 
 	return (
 		<BaseControl
+			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			className={ classes }
 			label={ label }
 			hideLabelFromVision={ hideLabelFromVision }
@@ -225,6 +227,7 @@ function UnforwardedRangeControl< IconProps = unknown >(
 					</BeforeIconWrapper>
 				) }
 				<Wrapper
+					__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 					className={ wrapperClasses }
 					color={ colorProp }
 					marks={ !! marks }

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

@@ -28,9 +28,8 @@ const thumbSize = 12;
 
 export const Root = styled.div`
 	-webkit-tap-highlight-color: transparent;
-	box-sizing: border-box;
 	align-items: flex-start;
-	display: inline-flex;
+	display: flex;
 	justify-content: flex-start;
 	padding: 0;
 	position: relative;
@@ -41,12 +40,14 @@ export const Root = styled.div`
 const wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>
 	css( { color } );
 
-const wrapperMargin = ( { marks }: WrapperProps ) =>
-	css( { marginBottom: marks ? 16 : undefined } );
+const wrapperMargin = ( { marks, __nextHasNoMarginBottom }: WrapperProps ) => {
+	if ( ! __nextHasNoMarginBottom ) {
+		return css( { marginBottom: marks ? 16 : undefined } );
+	}
+	return '';
+};
 
 export const Wrapper = styled.div< WrapperProps >`
-	box-sizing: border-box;
-	color: ${ COLORS.blue.medium.focus };
 	display: block;
 	flex: 1;
 	position: relative;
@@ -58,12 +59,14 @@ export const Wrapper = styled.div< WrapperProps >`
 `;
 
 export const BeforeIconWrapper = styled.span`
+	display: flex; // ensures the height isn't affected by line-height
 	margin-top: ${ railHeight }px;
 
 	${ rtl( { marginRight: 6 } ) }
 `;
 
 export const AfterIconWrapper = styled.span`
+	display: flex; // ensures the height isn't affected by line-height
 	margin-top: ${ railHeight }px;
 
 	${ rtl( { marginLeft: 6 } ) }
@@ -81,7 +84,6 @@ const railBackgroundColor = ( { disabled, railColor }: RailProps ) => {
 
 export const Rail = styled.span`
 	background-color: ${ COLORS.lightGray[ 600 ] };
-	box-sizing: border-box;
 	left: 0;
 	pointer-events: none;
 	right: 0;
@@ -108,7 +110,6 @@ const trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {
 export const Track = styled.span`
 	background-color: currentColor;
 	border-radius: ${ railHeight }px;
-	box-sizing: border-box;
 	height: ${ railHeight }px;
 	pointer-events: none;
 	display: block;
@@ -120,7 +121,6 @@ export const Track = styled.span`
 `;
 
 export const MarksWrapper = styled.span`
-	box-sizing: border-box;
 	display: block;
 	pointer-events: none;
 	position: relative;
@@ -141,7 +141,6 @@ const markFill = ( { disabled, isFilled }: RangeMarkProps ) => {
 };
 
 export const Mark = styled.span`
-	box-sizing: border-box;
 	height: ${ thumbSize }px;
 	left: 0;
 	position: absolute;
@@ -158,7 +157,6 @@ const markLabelFill = ( { isFilled }: RangeMarkProps ) => {
 };
 
 export const MarkLabel = styled.span`
-	box-sizing: border-box;
 	color: ${ COLORS.lightGray[ 600 ] };
 	left: 0;
 	font-size: 11px;
@@ -181,7 +179,6 @@ const thumbColor = ( { disabled }: ThumbProps ) =>
 
 export const ThumbWrapper = styled.span`
 	align-items: center;
-	box-sizing: border-box;
 	display: flex;
 	height: ${ thumbSize }px;
 	justify-content: center;
@@ -223,7 +220,6 @@ const thumbFocus = ( { isFocused }: ThumbProps ) => {
 export const Thumb = styled.span< ThumbProps >`
 	align-items: center;
 	border-radius: 50%;
-	box-sizing: border-box;
 	height: 100%;
 	outline: 0;
 	position: absolute;
@@ -272,7 +268,6 @@ const tooltipPosition = ( { position }: TooltipProps ) => {
 export const Tooltip = styled.span< TooltipProps >`
 	background: rgba( 0, 0, 0, 0.8 );
 	border-radius: 2px;
-	box-sizing: border-box;
 	color: white;
 	display: inline-block;
 	font-size: 12px;
@@ -298,7 +293,6 @@ export const Tooltip = styled.span< TooltipProps >`
 // @todo: Refactor RangeControl with latest HStack configuration
 // @wordpress/components/ui/hstack.
 export const InputNumber = styled( NumberControl )`
-	box-sizing: border-box;
 	display: inline-block;
 	font-size: 13px;
 	margin-top: 0;
@@ -312,7 +306,6 @@ export const InputNumber = styled( NumberControl )`
 `;
 
 export const ActionRightWrapper = styled.span`
-	box-sizing: border-box;
 	display: block;
 	margin-top: 0;
 

package/src/range-control/test/index.tsx

@@ -200,6 +200,36 @@ describe( 'RangeControl', () => {
 
 			expect( rangeInput?.value ).toBe( '10' );
 		} );
+
+		it( 'should clamp initialPosition between min and max on first render, and on reset', () => {
+			render(
+				<RangeControl
+					initialPosition={ 200 }
+					min={ 0 }
+					max={ 100 }
+					allowReset
+				/>
+			);
+
+			const numberInput = getNumberInput();
+			const rangeInput = getRangeInput();
+			const resetButton = getResetButton();
+
+			// Value should be clamped on initial load
+			expect( numberInput?.value ).toBe( '100' );
+			expect( rangeInput?.value ).toBe( '100' );
+
+			fireChangeEvent( numberInput, '50' );
+
+			expect( numberInput?.value ).toBe( '50' );
+			expect( rangeInput?.value ).toBe( '50' );
+
+			// Value should be clamped after resetting
+			fireEvent.click( resetButton as Element );
+
+			expect( numberInput?.value ).toBe( '100' );
+			expect( rangeInput?.value ).toBe( '100' );
+		} );
 	} );
 
 	describe( 'input field', () => {

package/src/range-control/types.ts

@@ -76,7 +76,7 @@ export type ControlledRangeValue = number | '' | null;
 
 export type RangeControlProps< IconProps = unknown > = Pick<
 	BaseControlProps,
-	'hideLabelFromVision' | 'help'
+	'hideLabelFromVision' | 'help' | '__nextHasNoMarginBottom'
 > &
 	MarksProps & {
 		/**
@@ -88,7 +88,7 @@ export type RangeControlProps< IconProps = unknown > = Pick<
 		 */
 		afterIcon?: IconType< IconProps >;
 		/**
-		 * If this property is true, a button to reset the the slider is
+		 * If this property is true, a button to reset the slider is
 		 * rendered.
 		 *
 		 * @default false
@@ -119,7 +119,9 @@ export type RangeControlProps< IconProps = unknown > = Pick<
 		 */
 		icon?: string;
 		/**
-		 * If no value exists this prop contains the slider starting position.
+		 * The slider starting position, used when no `value` is passed.
+		 * The `initialPosition` will be clamped between the provided `min`
+		 * and `max` prop values.
 		 */
 		initialPosition?: number;
 		/**
@@ -241,7 +243,10 @@ export type InputRangeProps = {
 	value?: number | '';
 };
 
-export type WrapperProps = {
+export type WrapperProps = Pick<
+	BaseControlProps,
+	'__nextHasNoMarginBottom'
+> & {
 	color?: CSSProperties[ 'color' ];
 	marks?: RangeMarks;
 };

package/src/range-control/utils.ts

@@ -50,7 +50,10 @@ export function useControlledRangeValue(
 	const { min, max, value: valueProp, initial } = settings;
 	const [ state, setInternalState ] = useControlledState(
 		floatClamp( valueProp, min, max ),
-		{ initial, fallback: null }
+		{
+			initial: floatClamp( initial ?? null, min, max ),
+			fallback: null,
+		}
 	);
 
 	const setState = useCallback(

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

@@ -30,7 +30,7 @@ export const TooltipWrapper = styled.div`
 `;
 
 export const Tooltip = styled.div`
-	background: ${ COLORS.ui.border };
+	background: ${ COLORS.gray[ 900 ] };
 	border-radius: 2px;
 	box-sizing: border-box;
 	font-size: 12px;

package/src/sandbox/index.native.js

@@ -1,13 +1,14 @@
 /**
  * External dependencies
  */
-import { Dimensions, Platform } from 'react-native';
+import { Dimensions, StyleSheet } from 'react-native';
 import { WebView } from 'react-native-webview';
 
 /**
  * WordPress dependencies
  */
 import {
+	Platform,
 	renderToString,
 	memo,
 	useRef,
@@ -307,6 +308,7 @@ function Sandbox( {
 			style={ [
 				sandboxStyles[ 'sandbox-webview__content' ],
 				getSizeStyle(),
+				Platform.isAndroid && workaroundStyles.webView,
 			] }
 			onMessage={ checkMessageForResize }
 			scrollEnabled={ false }
@@ -317,4 +319,15 @@ function Sandbox( {
 	);
 }
 
+const workaroundStyles = StyleSheet.create( {
+	webView: {
+		/**
+		 * The slight opacity below is a workaround for an Android crash caused from combining Android
+		 * 12's new scroll overflow behavior and webviews.
+		 * https://github.com/react-native-webview/react-native-webview/issues/1915#issuecomment-808869253
+		 */
+		opacity: 0.99,
+	},
+} );
+
 export default memo( Sandbox );

package/src/scroll-lock/README.md

@@ -7,7 +7,7 @@ ScrollLock is a content-free React component for declaratively preventing scroll
 Declare scroll locking as part of modal UI.
 
 ```jsx
-import { ScrollLock } from '@wordpress/components';
+import { ScrollLock, Button } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 
 const MyScrollLock = () => {

package/src/scroll-lock/{index.js → index.tsx}

@@ -12,10 +12,7 @@ import { useEffect } from '@wordpress/element';
  */
 let previousScrollTop = 0;
 
-/**
- * @param {boolean} locked
- */
-function setLocked( locked ) {
+function setLocked( locked: boolean ) {
 	const scrollingElement = document.scrollingElement || document.body;
 
 	if ( locked ) {
@@ -36,11 +33,39 @@ function setLocked( locked ) {
 let lockCounter = 0;
 
 /**
- * A component that will lock scrolling when it is mounted and unlock scrolling when it is unmounted.
+ * ScrollLock is a content-free React component for declaratively preventing
+ * scroll bleed from modal UI to the page body. This component applies a
+ * `lockscroll` class to the `document.documentElement` and
+ * `document.scrollingElement` elements to stop the body from scrolling. When it
+ * is present, the lock is applied.
+ *
+ * ```jsx
+ * import { ScrollLock, Button } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
  *
- * @return {null} Render nothing.
+ * const MyScrollLock = () => {
+ *   const [ isScrollLocked, setIsScrollLocked ] = useState( false );
+ *
+ *   const toggleLock = () => {
+ *     setIsScrollLocked( ( locked ) => ! locked ) );
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <Button variant="secondary" onClick={ toggleLock }>
+ *         Toggle scroll lock
+ *       </Button>
+ *       { isScrollLocked && <ScrollLock /> }
+ *       <p>
+ *         Scroll locked:
+ *         <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
+ *       </p>
+ *     </div>
+ *   );
+ * };
+ * ```
  */
-export default function ScrollLock() {
+export function ScrollLock(): null {
 	useEffect( () => {
 		if ( lockCounter === 0 ) {
 			setLocked( true );
@@ -59,3 +84,5 @@ export default function ScrollLock() {
 
 	return null;
 }
+
+export default ScrollLock;

package/src/scroll-lock/stories/index.tsx

@@ -0,0 +1,96 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ReactNode } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import ScrollLock from '..';
+
+const meta: ComponentMeta< typeof ScrollLock > = {
+	component: ScrollLock,
+	title: 'Components/ScrollLock',
+	parameters: {
+		controls: { hideNoControlsWarning: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+function StripedBackground( props: { children: ReactNode } ) {
+	return (
+		<div
+			style={ {
+				backgroundColor: '#fff',
+				backgroundImage:
+					'linear-gradient(transparent 50%, rgba(0, 0, 0, 0.05) 50%)',
+				backgroundSize: '50px 50px',
+				height: 3000,
+				position: 'relative',
+			} }
+			{ ...props }
+		/>
+	);
+}
+
+function ToggleContainer( props: { children: ReactNode } ) {
+	const { children } = props;
+	return (
+		<div
+			style={ {
+				position: 'sticky',
+				top: 0,
+				padding: 40,
+				display: 'flex',
+				justifyContent: 'center',
+				textAlign: 'center',
+			} }
+		>
+			<div>{ children }</div>
+		</div>
+	);
+}
+
+export const Default: ComponentStory< typeof ScrollLock > = () => {
+	const [ isScrollLocked, setScrollLocked ] = useState( false );
+	const toggleLock = () => setScrollLocked( ! isScrollLocked );
+
+	return (
+		<div style={ { height: 1000 } }>
+			<div
+				style={ {
+					overflow: 'auto',
+					height: 240,
+					border: '1px solid lightgray',
+				} }
+			>
+				<StripedBackground>
+					<div>
+						Start scrolling down. Once you scroll to the end of this
+						container with the stripes, the rest of the page will
+						continue scrolling. <code>ScrollLock</code> prevents
+						this &quot;scroll bleed&quot; from happening.
+					</div>
+					<ToggleContainer>
+						<Button variant="primary" onClick={ toggleLock }>
+							Toggle Scroll Lock
+						</Button>
+						{ isScrollLocked && <ScrollLock /> }
+						<p>
+							Scroll locked:{ ' ' }
+							<strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
+						</p>
+					</ToggleContainer>
+				</StripedBackground>
+			</div>
+		</div>
+	);
+};

package/src/scroll-lock/test/index.tsx

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import ScrollLock from '..';
+
+describe( 'scroll-lock', () => {
+	const lockingClassName = 'lockscroll';
+
+	it( 'locks when mounted', () => {
+		expect( document.documentElement ).not.toHaveClass( lockingClassName );
+		render( <ScrollLock /> );
+		expect( document.documentElement ).toHaveClass( lockingClassName );
+	} );
+
+	it( 'unlocks when unmounted', () => {
+		const { unmount } = render( <ScrollLock /> );
+		expect( document.documentElement ).toHaveClass( lockingClassName );
+		unmount();
+		expect( document.documentElement ).not.toHaveClass( lockingClassName );
+	} );
+} );

package/src/select-control/chevron-down.tsx

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { chevronDown, Icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import {
+	chevronIconSize,
+	DownArrowWrapper,
+	InputControlSuffixWrapperWithClickThrough,
+} from './styles/select-control-styles';
+
+const SelectControlChevronDown = () => {
+	return (
+		<InputControlSuffixWrapperWithClickThrough>
+			<DownArrowWrapper>
+				<Icon icon={ chevronDown } size={ chevronIconSize } />
+			</DownArrowWrapper>
+		</InputControlSuffixWrapperWithClickThrough>
+	);
+};
+
+export default SelectControlChevronDown;