@wordpress/components 27.2.0 → 27.3.0

package/src/popover/index.tsx

@@ -16,7 +16,7 @@ import {
 // eslint-disable-next-line no-restricted-imports
 import type { HTMLMotionProps, MotionProps } from 'framer-motion';
 // eslint-disable-next-line no-restricted-imports
-import { motion, useReducedMotion } from 'framer-motion';
+import { motion } from 'framer-motion';
 
 /**
  * WordPress dependencies
@@ -33,6 +33,7 @@ import {
 	createPortal,
 } from '@wordpress/element';
 import {
+	useReducedMotion,
 	useViewportMatch,
 	useMergeRefs,
 	__experimentalUseDialog as useDialog,
@@ -53,11 +54,7 @@ import {
 	placementToMotionAnimationProps,
 	getReferenceElement,
 } from './utils';
-import {
-	contextConnect,
-	useContextSystem,
-	ContextSystemProvider,
-} from '../context';
+import { contextConnect, useContextSystem } from '../context';
 import type { WordPressComponentProps } from '../context';
 import type {
 	PopoverProps,
@@ -113,7 +110,7 @@ const getPopoverFallbackContainer = () => {
 	return container;
 };
 
-const UnconnectedPopover = (
+const UnforwardedPopover = (
 	props: Omit<
 		WordPressComponentProps< PopoverProps, 'div', false >,
 		// To avoid overlaps between the standard HTML attributes and the props
@@ -390,100 +387,63 @@ const UnconnectedPopover = (
 	const isPositioned =
 		( ! shouldAnimate || animationFinished ) && x !== null && y !== null;
 
-	// In case a `ColorPicker` component is rendered as a child of `Popover`,
-	// the `Popover` component can be notified of when the user is dragging
-	// parts of the `ColorPicker` UI (this is possible because the `ColorPicker`
-	// component exposes the `onPickerDragStart` and `onPickerDragEnd` props
-	// via internal context).
-	// While the user is performing a pointer drag, the `Popover` will render
-	// a transparent backdrop element that will serve as a "pointer events trap",
-	// making sure that no pointer events reach any potential `iframe` element
-	// underneath (like, for example, the editor canvas in the WordPress editor).
-	const [ showBackdrop, setShowBackdrop ] = useState( false );
-	const contextValue = useMemo(
-		() => ( {
-			ColorPicker: {
-				onPickerDragStart() {
-					setShowBackdrop( true );
-				},
-				onPickerDragEnd() {
-					setShowBackdrop( false );
-				},
-			},
-		} ),
-		[]
-	);
-
 	let content = (
-		<>
-			{ showBackdrop && (
-				<div
-					className="components-popover-pointer-events-trap"
-					aria-hidden="true"
-					onClick={ () => setShowBackdrop( false ) }
-				/>
+		<motion.div
+			className={ classnames( className, {
+				'is-expanded': isExpanded,
+				'is-positioned': isPositioned,
+				// Use the 'alternate' classname for 'toolbar' variant for back compat.
+				[ `is-${
+					computedVariant === 'toolbar'
+						? 'alternate'
+						: computedVariant
+				}` ]: computedVariant,
+			} ) }
+			{ ...animationProps }
+			{ ...contentProps }
+			ref={ mergedFloatingRef }
+			{ ...dialogProps }
+			tabIndex={ -1 }
+		>
+			{ /* Prevents scroll on the document */ }
+			{ isExpanded && <ScrollLock /> }
+			{ isExpanded && (
+				<div className="components-popover__header">
+					<span className="components-popover__header-title">
+						{ headerTitle }
+					</span>
+					<Button
+						className="components-popover__close"
+						icon={ close }
+						onClick={ onClose }
+					/>
+				</div>
 			) }
-			<motion.div
-				className={ classnames( 'components-popover', className, {
-					'is-expanded': isExpanded,
-					'is-positioned': isPositioned,
-					// Use the 'alternate' classname for 'toolbar' variant for back compat.
-					[ `is-${
-						computedVariant === 'toolbar'
-							? 'alternate'
-							: computedVariant
-					}` ]: computedVariant,
-				} ) }
-				{ ...animationProps }
-				{ ...contentProps }
-				ref={ mergedFloatingRef }
-				{ ...dialogProps }
-				tabIndex={ -1 }
-			>
-				{ /* Prevents scroll on the document */ }
-				{ isExpanded && <ScrollLock /> }
-				{ isExpanded && (
-					<div className="components-popover__header">
-						<span className="components-popover__header-title">
-							{ headerTitle }
-						</span>
-						<Button
-							className="components-popover__close"
-							icon={ close }
-							onClick={ onClose }
-						/>
-					</div>
-				) }
-				<div className="components-popover__content">
-					<ContextSystemProvider value={ contextValue }>
-						{ children }
-					</ContextSystemProvider>
+			<div className="components-popover__content">{ children }</div>
+			{ hasArrow && (
+				<div
+					ref={ arrowCallbackRef }
+					className={ [
+						'components-popover__arrow',
+						`is-${ computedPlacement.split( '-' )[ 0 ] }`,
+					].join( ' ' ) }
+					style={ {
+						left:
+							typeof arrowData?.x !== 'undefined' &&
+							Number.isFinite( arrowData.x )
+								? `${ arrowData.x }px`
+								: '',
+						top:
+							typeof arrowData?.y !== 'undefined' &&
+							Number.isFinite( arrowData.y )
+								? `${ arrowData.y }px`
+								: '',
+					} }
+				>
+					<ArrowTriangle />
 				</div>
-				{ hasArrow && (
-					<div
-						ref={ arrowCallbackRef }
-						className={ [
-							'components-popover__arrow',
-							`is-${ computedPlacement.split( '-' )[ 0 ] }`,
-						].join( ' ' ) }
-						style={ {
-							left:
-								typeof arrowData?.x !== 'undefined' &&
-								Number.isFinite( arrowData.x )
-									? `${ arrowData.x }px`
-									: '',
-							top:
-								typeof arrowData?.y !== 'undefined' &&
-								Number.isFinite( arrowData.y )
-									? `${ arrowData.y }px`
-									: '',
-						} }
-					>
-						<ArrowTriangle />
-					</div>
-				) }
-			</motion.div>
-		</>
+			) }
+		</motion.div>
 	);
 
 	const shouldRenderWithinSlot = slot.ref && ! inline;
@@ -533,7 +493,7 @@ const UnconnectedPopover = (
  * ```
  *
  */
-export const Popover = contextConnect( UnconnectedPopover, 'Popover' );
+export const Popover = contextConnect( UnforwardedPopover, 'Popover' );
 
 function PopoverSlot(
 	{ name = SLOT_NAME }: { name?: string },

package/src/popover/style.scss

@@ -134,12 +134,3 @@ $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
 		stroke: $gray-900;
 	}
 }
-
-.components-popover-pointer-events-trap {
-	// Same z-index as popover, but rendered before the popover element
-	// in DOM order = it will display just under the popover
-	z-index: z-index(".components-popover");
-	position: fixed;
-	inset: 0;
-	background-color: transparent;
-}

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

@@ -300,7 +300,7 @@ export const Tooltip = styled.span< TooltipProps >`
 	) }
 `;
 
-// @todo: Refactor RangeControl with latest HStack configuration
+// @todo Refactor RangeControl with latest HStack configuration
 // @see: packages/components/src/h-stack
 export const InputNumber = styled( NumberControl )`
 	display: inline-block;

package/src/text-control/style.scss

@@ -14,6 +14,8 @@
 .components-text-control__input[type="number"] {
 	width: 100%;
 	height: $grid-unit-40;
+	// Override input style margin in WP forms.css.
+	margin: 0;
 	@include input-control;
 
 	&.is-next-40px-default-size {

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

@@ -5,12 +5,12 @@ import type { ForwardedRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import * as Ariakit from '@ariakit/react';
 // eslint-disable-next-line no-restricted-imports
-import { motion, useReducedMotion } from 'framer-motion';
+import { motion } from 'framer-motion';
 
 /**
  * WordPress dependencies
  */
-import { useInstanceId } from '@wordpress/compose';
+import { useReducedMotion, useInstanceId } from '@wordpress/compose';
 import { useMemo } from '@wordpress/element';
 
 /**

package/src/toolbar/toolbar/style.scss

@@ -89,7 +89,7 @@
 			min-width: $block-toolbar-height;
 		}
 
-		// @todo: We should extract the tabs styles to the tabs component itself
+		// @todo We should extract the tabs styles to the tabs component itself
 		&.components-tab-button {
 			font-weight: 500;