@wordpress/components 37.0.1-next.v.202607070741.0 → 38.0.0

package/src/tools-panel/tools-panel/component.tsx

@@ -13,6 +13,9 @@ import { Grid } from '../../grid';
 import type { WordPressComponentProps } from '../../context';
 import { contextConnect } from '../../context';
 import type { ToolsPanelProps } from '../types';
+import { space } from '../../utils/space';
+
+const TOOLS_PANEL_GAP = space( 4 );
 
 const UnconnectedToolsPanel = (
 	props: WordPressComponentProps< ToolsPanelProps, 'div' >,
@@ -30,7 +33,15 @@ const UnconnectedToolsPanel = (
 	} = useToolsPanel( props );
 
 	return (
-		<Grid { ...toolsPanelProps } columns={ 2 } ref={ forwardedRef }>
+		<Grid
+			{ ...toolsPanelProps }
+			columns={ 2 }
+			gap={ 4 }
+			columnGap={ TOOLS_PANEL_GAP }
+			rowGap={ TOOLS_PANEL_GAP }
+			templateColumns="repeat( 2, minmax(0, 1fr) )"
+			ref={ forwardedRef }
+		>
 			<ToolsPanelContext.Provider value={ panelContext }>
 				<ToolsPanelHeader
 					label={ label }

package/src/tools-panel/tools-panel/hook.ts

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -12,10 +17,9 @@ import {
 /**
  * Internal dependencies
  */
-import * as styles from '../styles';
+import styles from '../style.module.scss';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import { useCx } from '../../utils/hooks/use-cx';
 import type {
 	ToolsPanelItem,
 	ToolsPanelMenuItemKey,
@@ -25,8 +29,6 @@ import type {
 	ResetAllFilter,
 } from '../types';
 
-const DEFAULT_COLUMNS = 2;
-
 type PanelItemsState = {
 	panelItems: ToolsPanelItem[];
 	menuItemOrder: string[];
@@ -339,17 +341,13 @@ export function useToolsPanel(
 		);
 	}, [ menuItems ] );
 
-	const cx = useCx();
-	const classes = useMemo( () => {
-		return cx(
-			styles.getToolsPanelStyles( {
-				columns: DEFAULT_COLUMNS,
-				hasInnerWrapper,
-				areAllOptionalControlsHidden,
-			} ),
-			className
-		);
-	}, [ areAllOptionalControlsHidden, className, cx, hasInnerWrapper ] );
+	const classes = clsx(
+		styles[ 'tools-panel' ],
+		hasInnerWrapper && styles[ 'tools-panel-with-inner-wrapper' ],
+		areAllOptionalControlsHidden &&
+			styles[ 'tools-panel-hidden-inner-wrapper' ],
+		className
+	);
 
 	// Toggle the checked state of a menu item which is then used to determine
 	// display of the item within the panel.

package/src/tools-panel/tools-panel-header/component.tsx

@@ -19,9 +19,9 @@ import MenuItem from '../../menu-item';
 import { HStack } from '../../h-stack';
 import { Heading } from '../../heading';
 import { useToolsPanelHeader } from './hook';
+import styles from '../style.module.scss';
 import type { WordPressComponentProps } from '../../context';
 import { contextConnect } from '../../context';
-import { ResetLabel } from '../styles';
 import type {
 	ToolsPanelControlsGroupProps,
 	ToolsPanelHeaderProps,
@@ -36,7 +36,11 @@ const DefaultControlsGroup = ( {
 		return null;
 	}
 
-	const resetSuffix = <ResetLabel aria-hidden>{ __( 'Reset' ) }</ResetLabel>;
+	const resetSuffix = (
+		<span aria-hidden className={ styles[ 'reset-label' ] }>
+			{ __( 'Reset' ) }
+		</span>
+	);
 
 	return (
 		<>

package/src/tools-panel/tools-panel-header/hook.ts

@@ -1,16 +1,15 @@
 /**
- * WordPress dependencies
+ * External dependencies
  */
-import { useMemo } from '@wordpress/element';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
  */
-import * as styles from '../styles';
+import styles from '../style.module.scss';
 import { useToolsPanelContext } from '../context';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import { useCx } from '../../utils/hooks/use-cx';
 import type { ToolsPanelHeaderProps } from '../types';
 
 export function useToolsPanelHeader(
@@ -22,35 +21,18 @@ export function useToolsPanelHeader(
 		...otherProps
 	} = useContextSystem( props, 'ToolsPanelHeader' );
 
-	const cx = useCx();
-	const classes = useMemo( () => {
-		return cx( styles.ToolsPanelHeader, className );
-	}, [ className, cx ] );
-
-	const dropdownMenuClassName = useMemo( () => {
-		return cx( styles.DropdownMenu );
-	}, [ cx ] );
-
-	const headingClassName = useMemo( () => {
-		return cx( styles.ToolsPanelHeading );
-	}, [ cx ] );
-
-	const defaultControlsItemClassName = useMemo( () => {
-		return cx( styles.DefaultControlsItem );
-	}, [ cx ] );
-
 	const { menuItems, hasMenuItems, areAllOptionalControlsHidden } =
 		useToolsPanelContext();
 
 	return {
 		...otherProps,
 		areAllOptionalControlsHidden,
-		defaultControlsItemClassName,
-		dropdownMenuClassName,
+		defaultControlsItemClassName: styles[ 'default-controls-item' ],
+		dropdownMenuClassName: styles[ 'dropdown-menu' ],
 		hasMenuItems,
-		headingClassName,
+		headingClassName: styles[ 'tools-panel-heading' ],
 		headingLevel,
 		menuItems,
-		className: classes,
+		className: clsx( styles[ 'tools-panel-header' ], className ),
 	};
 }

package/src/tools-panel/tools-panel-item/hook.ts

@@ -1,22 +1,21 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
 import { usePrevious } from '@wordpress/compose';
-import {
-	useCallback,
-	useEffect,
-	useLayoutEffect,
-	useMemo,
-} from '@wordpress/element';
+import { useCallback, useEffect, useLayoutEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import * as styles from '../styles';
+import styles from '../style.module.scss';
 import { useToolsPanelContext } from '../context';
 import type { WordPressComponentProps } from '../../context';
 import { useContextSystem } from '../../context';
-import { useCx } from '../../utils/hooks/use-cx';
 import type { ToolsPanelItemProps } from '../types';
 
 const noop = () => {};
@@ -174,32 +173,15 @@ export function useToolsPanelItem(
 		? menuItems?.[ menuGroup ]?.[ label ] !== undefined
 		: isMenuItemChecked;
 
-	const cx = useCx();
-	const classes = useMemo( () => {
-		const shouldApplyPlaceholderStyles =
-			shouldRenderPlaceholder && ! isShown;
-		const firstItemStyle =
-			firstDisplayedItem === label && __experimentalFirstVisibleItemClass;
-		const lastItemStyle =
-			lastDisplayedItem === label && __experimentalLastVisibleItemClass;
-		return cx(
-			styles.ToolsPanelItem,
-			shouldApplyPlaceholderStyles && styles.ToolsPanelItemPlaceholder,
-			! shouldApplyPlaceholderStyles && className,
-			firstItemStyle,
-			lastItemStyle
-		);
-	}, [
-		isShown,
-		shouldRenderPlaceholder,
-		className,
-		cx,
-		firstDisplayedItem,
-		lastDisplayedItem,
-		__experimentalFirstVisibleItemClass,
-		__experimentalLastVisibleItemClass,
-		label,
-	] );
+	const shouldApplyPlaceholderStyles = shouldRenderPlaceholder && ! isShown;
+	const classes = clsx(
+		styles[ 'tools-panel-item' ],
+		shouldApplyPlaceholderStyles &&
+			styles[ 'tools-panel-item-placeholder' ],
+		! shouldApplyPlaceholderStyles && className,
+		firstDisplayedItem === label && __experimentalFirstVisibleItemClass,
+		lastDisplayedItem === label && __experimentalLastVisibleItemClass
+	);
 
 	return {
 		...otherProps,

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

@@ -39,7 +39,7 @@ const meta: Meta< typeof Tooltip > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Use `Tooltip` from `@wordpress/ui` instead.',
+			notes: 'Use [`Tooltip`](?path=/docs/design-system-components-tooltip--docs) from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/tooltip/test/index.tsx

@@ -323,7 +323,7 @@ describe( 'Tooltip', () => {
 			// "Tooltips appear instantly if another tooltip has just been hidden."
 			// See: https://github.com/WordPress/gutenberg/pull/57345#discussion_r1435495655
 			await sleep( 3000 );
-		} );
+		}, 10_000 );
 
 		it( 'should not show tooltip if the mouse leaves the tooltip anchor before set delay', async () => {
 			const onMouseEnterMock = jest.fn();

package/src/tree-grid/stories/index.story.tsx

@@ -124,7 +124,6 @@ const Rows = ( {
 										label="Description"
 										hideLabelFromVision
 										placeholder="Description"
-										__next40pxDefaultSize
 										{ ...props }
 									/>
 								) }
@@ -135,7 +134,6 @@ const Rows = ( {
 										label="Notes"
 										hideLabelFromVision
 										placeholder="Notes"
-										__next40pxDefaultSize
 										{ ...props }
 									/>
 								) }

package/src/tree-grid/test/__snapshots__/cell.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TreeGridCell uses a child render function to render children 1`] = `
 <div>

package/src/tree-grid/test/__snapshots__/index.tsx.snap

@@ -1,3 +1,3 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TreeGrid simple rendering renders a table, tbody and any child elements 1`] = `"<div role="application"><table role="treegrid"><tbody><tr role="row" aria-level="1" aria-posinset="1" aria-setsize="1"><td role="gridcell">Test</td></tr></tbody></table></div>"`;

package/src/tree-grid/test/__snapshots__/roving-tab-index-item.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`RovingTabIndexItem allows another component to be specified as the rendered component using the \`as\` prop 1`] = `
 <div>

package/src/tree-grid/test/__snapshots__/roving-tab-index.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`RovingTabIndex does not render any elements other than its children 1`] = `
 <div>

package/src/tree-grid/test/__snapshots__/row.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`TreeGridRow forwards other props to the rendered tr element 1`] = `
 <div>

package/src/tree-select/README.md

@@ -154,7 +154,7 @@ The id of the currently selected node.
 
 ### `size`
 
- - Type: `"default" | "small" | "compact" | "__unstable-large"`
+ - Type: `"default" | "small" | "compact"`
  - Required: No
  - Default: `'default'`
 

package/src/tree-select/types.ts

@@ -18,15 +18,8 @@ export interface Tree {
 export interface TreeSelectProps
 	extends Omit<
 		SelectControlSingleSelectionProps,
-		'value' | 'multiple' | 'onChange' | '__next40pxDefaultSize'
+		'value' | 'multiple' | 'onChange'
 	> {
-	/**
-	 * Start opting into the larger default height that will become the default size in a future version.
-	 *
-	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
-	 * @ignore
-	 */
-	__next40pxDefaultSize?: boolean;
 	/**
 	 * If this property is added, an option will be added with this label to represent empty selection.
 	 */

package/src/unit-control/index.tsx

@@ -211,7 +211,6 @@ function UnforwardedUnitControl(
 	return (
 		<ValueInput
 			{ ...props }
-			__next40pxDefaultSize
 			autoComplete={ autoComplete }
 			className={ classes }
 			disabled={ disabled }

package/src/unit-control/types.ts

@@ -70,10 +70,7 @@ export type UnitSelectControlProps = {
 
 export type UnitControlProps = Pick< InputControlProps, 'size' > &
 	Omit< UnitSelectControlProps, 'size' | 'unit' > &
-	Omit<
-		NumberControlProps,
-		'spinControls' | 'suffix' | 'type' | '__next40pxDefaultSize'
-	> & {
+	Omit< NumberControlProps, 'spinControls' | 'suffix' | 'type' > & {
 		/**
 		 * If `true`, the unit `<select>` is hidden.
 		 *
@@ -110,18 +107,4 @@ export type UnitControlProps = Pick< InputControlProps, 'size' > &
 		 * Callback when either the quantity or the unit inputs gains focus.
 		 */
 		onFocus?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;
-		/**
-		 * Do not throw a warning for the deprecated 36px default size.
-		 * For internal components of other components that already throw the warning.
-		 *
-		 * @ignore
-		 */
-		__shouldNotWarnDeprecated36pxSize?: boolean;
-		/**
-		 * Start opting into the larger default height that will become the default size in a future version.
-		 *
-		 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
-		 * @ignore
-		 */
-		__next40pxDefaultSize?: boolean;
 	};

package/src/utils/base-label.ts

@@ -12,7 +12,7 @@ import CONFIG from './config-values.js';
 // Try to use BaseControl's StyledLabel or BaseControl.VisualLabel if you can.
 export const baseLabelTypography = css`
 	font-size: 11px;
-	font-weight: ${ CONFIG.fontWeightMedium };
+	font-weight: ${ CONFIG.fontWeightEmphasis };
 	line-height: 1.4;
 	text-transform: uppercase;
 `;

package/src/utils/config-values.js

@@ -50,8 +50,7 @@ export default Object.assign( {}, CONTROL_PROPS, {
 	fontSizeXSmall: 'calc(0.75 * 13px)',
 	fontLineHeightBase: '1.4',
 	fontWeight: 'normal',
-	fontWeightMedium: '499', // ensures fallback to 400 (instead of 600)
-	fontWeightHeading: '600',
+	fontWeightEmphasis: '600',
 	gridBase: '4px',
 	elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,
 	elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,

package/src/utils/font-values.js

@@ -1,6 +1,6 @@
 export default {
 	'default.fontFamily':
-		"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+		"-apple-system, system-ui, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
 	'default.fontSize': '13px',
 
 	'helpText.fontSize': '12px',

package/src/utils/theme-variables.scss

@@ -37,3 +37,4 @@ $components-color-light-gray-placeholder: color-mix(in srgb, $components-color-b
 // Semantic aliases (prefer these over raw gray values when applicable).
 $components-color-border: #{ $components-color-gray-600 };
 $components-color-disabled: #{ $components-color-gray-600 };
+$components-color-focus: var(--wp-components-color-accent, var(--wpds-color-stroke-focus));

package/src/v-stack/stories/index.story.tsx

@@ -45,7 +45,7 @@ const meta: Meta< typeof VStack > = {
 		componentStatus: {
 			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Use `Stack` from `@wordpress/ui` instead.',
+			notes: 'Use [`Stack`](?path=/docs/design-system-components-stack--docs) from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/v-stack/test/__snapshots__/index.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`props should render alignment 1`] = `
 <div>

package/src/validated-form-controls/components/content-editable-control.tsx

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ControlWithError } from '../control-with-error';
+import type { ValidatedControlProps } from './types';
+import ContentEditableControl from '../../content-editable-control';
+
+/**
+ * A `contentEditable` field does not participate in the Constraint Validation
+ * API, so — like `ValidatedToggleGroupControl` — the validity state lives on a
+ * visually hidden delegate input that mirrors whether the field has content.
+ */
+const UnforwardedValidatedContentEditableControl = (
+	{
+		required,
+		customValidity,
+		markWhenOptional,
+		value,
+		className,
+		...restProps
+	}: React.ComponentProps< typeof ContentEditableControl > &
+		ValidatedControlProps & {
+			/**
+			 * The field's current value as plain text, used only to drive the
+			 * hidden validity delegate (e.g. `required`). The visible content
+			 * is managed by the consumer through the forwarded ref, and any
+			 * markup-to-text transformation is the consumer's responsibility.
+			 */
+			value?: string;
+		},
+	forwardedRef: React.ForwardedRef< HTMLDivElement >
+) => {
+	const validityTargetRef = useRef< HTMLInputElement >( null );
+
+	return (
+		<div className="components-validated-control__wrapper-with-error-delegate">
+			<ControlWithError
+				required={ required }
+				markWhenOptional={ markWhenOptional }
+				customValidity={ customValidity }
+				getValidityTarget={ () => validityTargetRef.current }
+			>
+				<ContentEditableControl
+					ref={ forwardedRef }
+					className={ clsx(
+						'components-validated-control__content-editable',
+						className
+					) }
+					aria-invalid={
+						customValidity?.type === 'invalid' || undefined
+					}
+					{ ...restProps }
+				/>
+			</ControlWithError>
+			<input
+				className="components-validated-control__error-delegate"
+				type="text"
+				ref={ validityTargetRef }
+				required={ required }
+				// Whitespace-only content reads as empty, matching how a
+				// text-oriented form field is expected to validate `required`.
+				value={ value?.trim() ?? '' }
+				tabIndex={ -1 }
+				onChange={ () => {} }
+				onFocus={ ( e ) => {
+					e.target.previousElementSibling
+						?.querySelector< HTMLElement >( '[role="textbox"]' )
+						?.focus();
+				} }
+			/>
+		</div>
+	);
+};
+
+export const ValidatedContentEditableControl = forwardRef(
+	UnforwardedValidatedContentEditableControl
+);
+ValidatedContentEditableControl.displayName = 'ValidatedContentEditableControl';

package/src/validated-form-controls/components/index.ts

@@ -6,6 +6,7 @@ export * from './input-control';
 export * from './number-control';
 export * from './radio-control';
 export * from './range-control';
+export * from './content-editable-control';
 export * from './select-control';
 export * from './text-control';
 export * from './textarea-control';

package/src/validated-form-controls/components/input-control.tsx

@@ -17,11 +17,7 @@ const UnforwardedValidatedInputControl = (
 		customValidity,
 		markWhenOptional,
 		...restProps
-	}: Omit<
-		React.ComponentProps< typeof InputControl >,
-		'__next40pxDefaultSize'
-	> &
-		ValidatedControlProps,
+	}: React.ComponentProps< typeof InputControl > & ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
@@ -34,11 +30,7 @@ const UnforwardedValidatedInputControl = (
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
-			<InputControl
-				__next40pxDefaultSize
-				ref={ mergedRefs }
-				{ ...restProps }
-			/>
+			<InputControl ref={ mergedRefs } { ...restProps } />
 		</ControlWithError>
 	);
 };

package/src/validated-form-controls/components/number-control.tsx

@@ -17,11 +17,7 @@ const UnforwardedValidatedNumberControl = (
 		customValidity,
 		markWhenOptional,
 		...restProps
-	}: Omit<
-		React.ComponentProps< typeof NumberControl >,
-		'__next40pxDefaultSize'
-	> &
-		ValidatedControlProps,
+	}: React.ComponentProps< typeof NumberControl > & ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
@@ -34,11 +30,7 @@ const UnforwardedValidatedNumberControl = (
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
-			<NumberControl
-				__next40pxDefaultSize
-				ref={ mergedRefs }
-				{ ...restProps }
-			/>
+			<NumberControl ref={ mergedRefs } { ...restProps } />
 		</ControlWithError>
 	);
 };

package/src/validated-form-controls/components/stories/content-editable-control.story.tsx

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * External dependencies
+ */
+import type { StoryObj, Meta } from '@storybook/react-vite';
+/**
+ * Internal dependencies
+ */
+import { formDecorator } from './story-utils';
+import { ValidatedContentEditableControl } from '../content-editable-control';
+
+const meta: Meta< typeof ValidatedContentEditableControl > = {
+	title: 'Components/Selection & Input/Validated Form Controls/ValidatedContentEditableControl',
+	id: 'components-validatedcontenteditablecontrol',
+	component: ValidatedContentEditableControl,
+	tags: [ 'status-private' ],
+	decorators: formDecorator,
+	argTypes: { value: { control: false } },
+};
+export default meta;
+
+export const Default: StoryObj< typeof ValidatedContentEditableControl > = {
+	render: function Template( args ) {
+		// The control is presentational: the editable manages its own
+		// contents, and the consumer mirrors the plain text into `value`
+		// for the validity delegate.
+		const [ value, setValue ] = useState( '' );
+
+		return (
+			<ValidatedContentEditableControl
+				{ ...args }
+				value={ value }
+				onInput={ ( e ) =>
+					setValue( e.currentTarget.textContent ?? '' )
+				}
+				customValidity={
+					value.toLowerCase().includes( 'error' )
+						? {
+								type: 'invalid',
+								message: 'The word "error" is not allowed.',
+						  }
+						: undefined
+				}
+			/>
+		);
+	},
+};
+Default.args = {
+	required: true,
+	label: 'Content',
+	help: 'The word "error" will trigger an error.',
+};