@wordpress/components 38.0.0 → 40.0.0

package/src/range-control/tooltip.tsx

@@ -1,18 +1,6 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { useCallback, useEffect, useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { Tooltip } from './styles/range-control-styles';
-
 import type { TooltipProps } from './types';
 import type { WordPressComponentProps } from '../context';
 

package/src/range-control/types.ts

@@ -1,16 +1,9 @@
-/**
- * External dependencies
- */
 import type {
 	CSSProperties,
 	FocusEventHandler,
 	MouseEventHandler,
 	RefObject,
 } from 'react';
-
-/**
- * Internal dependencies
- */
 import type { BaseControlProps } from '../base-control/types';
 import type { IconType } from '../icon';
 import type { NumberControlProps } from '../number-control/types';

package/src/range-control/utils.ts

@@ -1,14 +1,6 @@
-/**
- * WordPress dependencies
- */
 import { useCallback } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { useControlledState } from '../utils/hooks';
 import { clamp } from '../utils/math';
-
 import type { UseControlledRangeValueArgs } from './types';
 
 /**

package/src/resizable-box/index.tsx

@@ -1,19 +1,8 @@
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
-
-/**
- * External dependencies
- */
 import clsx from 'clsx';
 import { Resizable } from 're-resizable';
 import type { ResizableProps } from 're-resizable';
 import type { ForwardedRef } from 'react';
-
-/**
- * Internal dependencies
- */
 import ResizeTooltip from './resize-tooltip';
 
 const HANDLE_CLASS_NAME = 'components-resizable-box__handle';

package/src/resizable-box/resize-tooltip/index.tsx

@@ -1,23 +1,14 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-import type { Ref, ForwardedRef } from 'react';
-
-/**
- * WordPress dependencies
- */
+import type { ElementType, Ref, ForwardedRef } from 'react';
 import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
+import { PolymorphicElement } from '../../utils/polymorphic-element';
 import Label from './label';
 import type { Axis, Position } from './utils';
 import { useResizeLabel, POSITIONS } from './utils';
-import { Root } from './styles/resize-tooltip.styles';
+import styles from './style.module.scss';
 
-type ResizeTooltipProps = React.ComponentProps< typeof Root > & {
+type ResizeTooltipProps = React.ComponentPropsWithoutRef< 'div' > & {
+	as?: ElementType;
 	'aria-hidden'?: boolean;
 	axis?: Axis;
 	className?: string;
@@ -34,6 +25,7 @@ const noop = () => {};
 
 function ResizeTooltip(
 	{
+		as = 'div',
 		axis,
 		className,
 		fadeTimeout = 180,
@@ -45,7 +37,7 @@ function ResizeTooltip(
 		zIndex = 1000,
 		...props
 	}: ResizeTooltipProps,
-	ref: ForwardedRef< HTMLDivElement >
+	ref: ForwardedRef< HTMLElement >
 ) {
 	const { label, resizeListener } = useResizeLabel( {
 		axis,
@@ -59,10 +51,16 @@ function ResizeTooltip(
 		return null;
 	}
 
-	const classes = clsx( 'components-resize-tooltip', className );
+	const classes = clsx( 'components-resize-tooltip', styles.root, className );
 
 	return (
-		<Root aria-hidden="true" className={ classes } ref={ ref } { ...props }>
+		<PolymorphicElement
+			aria-hidden="true"
+			as={ as }
+			{ ...props }
+			className={ classes }
+			ref={ ref }
+		>
 			{ resizeListener }
 			<Label
 				aria-hidden={ props[ 'aria-hidden' ] }
@@ -71,7 +69,7 @@ function ResizeTooltip(
 				ref={ labelRef }
 				zIndex={ zIndex }
 			/>
-		</Root>
+		</PolymorphicElement>
 	);
 }
 

package/src/resizable-box/resize-tooltip/label.tsx

@@ -1,24 +1,11 @@
-/**
- * External dependencies
- */
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
-
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
+import { Text } from '../../text';
 import type { Position } from './utils';
 import { POSITIONS } from './utils';
-import {
-	TooltipWrapper,
-	Tooltip,
-	LabelText,
-} from './styles/resize-tooltip.styles';
+import styles from './style.module.scss';
 
 const CORNER_OFFSET = 4;
 const CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;
@@ -77,20 +64,28 @@ function Label(
 	}
 
 	return (
-		<TooltipWrapper
+		<div
 			aria-hidden="true"
-			className="components-resizable-tooltip__tooltip-wrapper"
+			className={ clsx(
+				'components-resizable-tooltip__tooltip-wrapper',
+				styles[ 'tooltip-wrapper' ]
+			) }
 			ref={ ref }
 			style={ style }
 			{ ...props }
 		>
-			<Tooltip
-				className="components-resizable-tooltip__tooltip"
+			<div
+				className={ clsx(
+					'components-resizable-tooltip__tooltip',
+					styles.tooltip
+				) }
 				style={ labelStyle }
 			>
-				<LabelText as="span">{ label }</LabelText>
-			</Tooltip>
-		</TooltipWrapper>
+				<Text as="span" className={ styles[ 'label-text' ] }>
+					{ label }
+				</Text>
+			</div>
+		</div>
 	);
 }
 

package/src/resizable-box/resize-tooltip/style.module.scss

@@ -0,0 +1,40 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "../../utils/theme-variables" as *;
+
+.root {
+	box-sizing: border-box;
+	pointer-events: none;
+	position: absolute;
+	inset: 0;
+}
+
+.tooltip-wrapper {
+	align-items: center;
+	box-sizing: border-box;
+	display: inline-flex;
+	justify-content: center;
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 120ms linear;
+}
+
+.tooltip {
+	background: $components-color-foreground;
+	border-radius: $radius-small;
+	box-sizing: border-box;
+	font-family: $default-font;
+	font-size: 12px;
+	color: $components-color-foreground-inverted;
+	padding: $grid-unit-05 $grid-unit-10;
+	position: relative;
+}
+
+// Match the previous Emotion `&&&` specificity so label styles continue to
+// override Text / consumer typography.
+.label-text.label-text.label-text {
+	color: $components-color-foreground-inverted;
+	display: block;
+	font-size: 13px;
+	line-height: 1.4;
+	white-space: nowrap;
+}

package/src/resizable-box/resize-tooltip/test/index.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import { createRef, createElement } from '@wordpress/element';
+import ResizeTooltip from '../index';
+import styles from '../style.module.scss';
+
+describe( 'ResizeTooltip', () => {
+	it( 'renders the legacy root class together with className and style', () => {
+		render(
+			<ResizeTooltip
+				className="custom-tooltip"
+				data-testid="resize-tooltip"
+				style={ { zIndex: 7 } }
+			/>
+		);
+
+		const root = screen.getByTestId( 'resize-tooltip' );
+
+		expect( root ).toHaveClass( 'components-resize-tooltip' );
+		expect( root ).toHaveClass( styles.root );
+		expect( root ).toHaveClass( 'custom-tooltip' );
+		expect( root ).toHaveStyle( { zIndex: '7' } );
+	} );
+
+	it( 'renders as a different element, forwards the root ref, and forwards target-specific props', () => {
+		const ref = createRef< HTMLElement >();
+
+		render(
+			createElement( ResizeTooltip, {
+				as: 'label',
+				'data-testid': 'resize-tooltip',
+				htmlFor: 'size-field',
+				ref,
+			} as React.ComponentProps< typeof ResizeTooltip > & {
+				htmlFor?: string;
+			} )
+		);
+
+		const root = screen.getByTestId( 'resize-tooltip' );
+
+		expect( root.tagName ).toBe( 'LABEL' );
+		expect( ref.current ).toBe( root );
+		expect( root ).toHaveAttribute( 'for', 'size-field' );
+	} );
+} );

package/src/resizable-box/resize-tooltip/test/label.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import Label from '../label';
+import { POSITIONS } from '../utils';
+
+describe( 'ResizeTooltip label', () => {
+	it( 'keeps the Text contract when an ancestor uses a bold font weight', () => {
+		render(
+			<div style={ { fontWeight: 700 } }>
+				<Label
+					label="120 x 80"
+					position={ POSITIONS.bottom }
+					zIndex={ 1 }
+				/>
+			</div>
+		);
+
+		const label = screen.getByText( '120 x 80' );
+
+		expect( label.tagName ).toBe( 'SPAN' );
+		expect( label ).toHaveClass( 'components-text' );
+		expect( label ).toHaveClass( 'components-truncate' );
+		expect( label ).toHaveAttribute( 'data-wp-component', 'Text' );
+		expect( label ).toHaveStyle( { fontWeight: 'normal' } );
+	} );
+} );

package/src/resizable-box/resize-tooltip/utils.ts

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { useResizeObserver } from '@wordpress/compose';
 

package/src/resizable-box/stories/index.story.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import ResizableBox from '..';
 
 const meta: Meta< typeof ResizableBox > = {
@@ -22,6 +11,7 @@ const meta: Meta< typeof ResizableBox > = {
 		children: { control: false },
 		enable: { control: 'object' },
 		onResizeStop: { action: 'onResizeStop' },
+		__experimentalShowTooltip: { control: 'boolean' },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -96,3 +86,13 @@ DisabledDirections.args = {
 		topLeft: false,
 	},
 };
+
+/**
+ * The resize size label is hidden by default. Enable it with
+ * `__experimentalShowTooltip`, or toggle that control in Storybook.
+ */
+export const WithResizeTooltip = Template.bind( {} );
+WithResizeTooltip.args = {
+	...Default.args,
+	__experimentalShowTooltip: true,
+};

package/src/responsive-wrapper/index.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { cloneElement, Children } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import type { ResponsiveWrapperProps } from './types';
 
 /**

package/src/responsive-wrapper/stories/index.story.tsx

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
-
-/**
- * Internal dependencies
- */
 import ResponsiveWrapper from '..';
 
 const meta: Meta< typeof ResponsiveWrapper > = {

package/src/sandbox/index.tsx

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import {
 	renderToString,
 	useRef,
@@ -14,10 +7,6 @@ import {
 	useMemo,
 } from '@wordpress/element';
 import { useFocusableIframe, useMergeRefs } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
 import type { SandBoxProps } from './types';
 
 type SandBoxContentProps = Omit< SandBoxProps, 'allowSameOrigin' >;
@@ -268,6 +257,7 @@ function IsolatedSandBox( {
 	onFocus,
 	tabIndex,
 	allowPopups = false,
+	allowForms = false,
 }: SandBoxContentProps ) {
 	const ref = useRef< HTMLIFrameElement >( null );
 	const [ width, setWidth ] = useState( 0 );
@@ -275,6 +265,7 @@ function IsolatedSandBox( {
 
 	const sandbox = clsx( 'allow-scripts', 'allow-presentation', {
 		'allow-popups': allowPopups,
+		'allow-forms': allowForms,
 	} );
 
 	const srcDoc = useMemo(
@@ -393,6 +384,7 @@ function SameOriginSandBox( {
 	onFocus,
 	tabIndex,
 	allowPopups = false,
+	allowForms = false,
 }: SandBoxContentProps ) {
 	const ref = useRef< HTMLIFrameElement >( null );
 	const [ width, setWidth ] = useState( 0 );
@@ -404,6 +396,7 @@ function SameOriginSandBox( {
 		'allow-presentation',
 		{
 			'allow-popups': allowPopups,
+			'allow-forms': allowForms,
 		}
 	);
 

package/src/sandbox/stories/index.story.tsx

@@ -1,12 +1,5 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
-
-/**
- * Internal dependencies
- */
 import SandBox from '..';
 
 const meta: Meta< typeof SandBox > = {
@@ -35,5 +28,14 @@ const Template: StoryFn< typeof SandBox > = ( args ) => <SandBox { ...args } />;
 
 export const Default = Template.bind( {} );
 Default.args = {
+	title: 'Sandbox preview',
 	html: '<p>Arbitrary HTML content</p>',
+	allowForms: false,
+};
+
+export const WithForm = Template.bind( {} );
+WithForm.args = {
+	title: 'Sandbox preview with form',
+	html: '<form action="#"><label for="name">Name</label><input id="name" type="text" /><button type="submit">Submit</button></form>',
+	allowForms: true,
 };

package/src/sandbox/test/index.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import { fireEvent, render, screen } from '@testing-library/react';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import SandBox, { VIEWPORT_UNIT_VALUE_REGEX, buildSandBoxDocument } from '..';
 
 describe( 'SandBox', () => {
@@ -70,6 +59,27 @@ describe( 'SandBox', () => {
 		);
 	} );
 
+	it( 'should not include allow-forms by default', () => {
+		render( <SandBox html="<p>Hello</p>" title="No Forms" /> );
+
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'No Forms' );
+
+		expect( iframe.getAttribute( 'sandbox' ) ).not.toContain(
+			'allow-forms'
+		);
+	} );
+
+	it( 'should include allow-forms when allowForms is set', () => {
+		render( <SandBox html="<p>Hello</p>" title="Forms" allowForms /> );
+
+		const iframe = screen.getByTitle< HTMLIFrameElement >( 'Forms' );
+
+		expect( iframe ).toHaveAttribute(
+			'sandbox',
+			'allow-scripts allow-presentation allow-forms'
+		);
+	} );
+
 	it( 'should set srcdoc with the provided html content', () => {
 		render( <SandBox html="<p>Hello</p>" title="Test Title" /> );
 

package/src/sandbox/types.ts

@@ -21,6 +21,16 @@ export type SandBoxProps = {
 	 * @default false
 	 */
 	allowPopups?: boolean;
+	/**
+	 * Whether to include `allow-forms` in the iframe's sandbox attribute.
+	 * When true, content inside the iframe is allowed to submit forms.
+	 *
+	 * Enable this for previews whose content includes forms that should be
+	 * submittable.
+	 *
+	 * @default false
+	 */
+	allowForms?: boolean;
 	/**
 	 * The HTML to render in the body of the iframe document.
 	 *

package/src/scroll-lock/index.tsx

@@ -1,6 +1,3 @@
-/**
- * WordPress dependencies
- */
 import { useEffect } from '@wordpress/element';
 
 /*

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

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
 import type { ReactNode } from 'react';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import Button from '../../button';
 import ScrollLock from '..';
 

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

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
 import ScrollLock from '..';
 
 describe( 'scroll-lock', () => {

package/src/scrollable/README.md

@@ -1,8 +1,6 @@
 # Scrollable
 
-<div class="callout callout-alert">
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-</div>
+<p class="callout callout-alert">This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.</p>
 
 `Scrollable` is a layout component that puts content in a scrollable container.
 

package/src/scrollable/component.tsx

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import type { ForwardedRef } from 'react';
-
-/**
- * Internal dependencies
- */
 import type { WordPressComponentProps } from '../context';
 import { contextConnect } from '../context';
 import { View } from '../view';

package/src/scrollable/hook.ts

@@ -1,16 +1,8 @@
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
+import clsx from 'clsx';
 import type { WordPressComponentProps } from '../context';
 import { useContextSystem } from '../context';
-import * as styles from './styles';
-import { useCx } from '../utils/hooks/use-cx';
 import type { ScrollableProps } from './types';
+import styles from './style.module.scss';
 
 export function useScrollable(
 	props: WordPressComponentProps< ScrollableProps, 'div' >
@@ -22,20 +14,15 @@ export function useScrollable(
 		...otherProps
 	} = useContextSystem( props, 'Scrollable' );
 
-	const cx = useCx();
-
-	const classes = useMemo(
-		() =>
-			cx(
-				styles.Scrollable,
-				styles.scrollableScrollbar,
-				smoothScroll && styles.smoothScroll,
-				scrollDirection === 'x' && styles.scrollX,
-				scrollDirection === 'y' && styles.scrollY,
-				scrollDirection === 'auto' && styles.scrollAuto,
-				className
-			),
-		[ className, cx, scrollDirection, smoothScroll ]
+	const classes = clsx(
+		styles.scrollable,
+		{
+			[ styles[ 'smooth-scroll' ] ]: smoothScroll,
+			[ styles[ 'scroll-x' ] ]: scrollDirection === 'x',
+			[ styles[ 'scroll-y' ] ]: scrollDirection === 'y',
+			[ styles[ 'scroll-auto' ] ]: scrollDirection === 'auto',
+		},
+		className
 	);
 
 	return { ...otherProps, className: classes };

package/src/scrollable/stories/index.story.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
-
-/**
- * WordPress dependencies
- */
 import { useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { View } from '../../view';
 import { Scrollable } from '..';
 
@@ -75,6 +64,7 @@ const Template: StoryFn< typeof Scrollable > = ( { ...args } ) => {
 						right: 0,
 					} }
 					type="text"
+					aria-label="Element out of view"
 					value="Focus me"
 					readOnly
 				/>