@wordpress/components 30.9.1-next.8b30e05b0.0 → 31.0.1-next.738bb1424.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "30.9.1-next.8b30e05b0.0",
+	"version": "31.0.1-next.738bb1424.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -22,13 +22,22 @@
 		"node": ">=18.12.0",
 		"npm": ">=8.19.2"
 	},
-	"main": "build/index.js",
+	"files": [
+		"src",
+		"build",
+		"build-module",
+		"build-style",
+		"build-types",
+		"*.md"
+	],
+	"type": "module",
+	"main": "build/index.cjs",
 	"module": "build-module/index.js",
 	"exports": {
 		".": {
 			"types": "./build-types/index.d.ts",
 			"import": "./build-module/index.js",
-			"require": "./build/index.js"
+			"require": "./build/index.cjs"
 		},
 		"./README.md": "./README.md",
 		"./CONTRIBUTING.md": "./CONTRIBUTING.md",
@@ -55,24 +64,24 @@
 		"@types/gradient-parser": "1.1.0",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.36.1-next.8b30e05b0.0",
-		"@wordpress/base-styles": "^6.12.1-next.8b30e05b0.0",
-		"@wordpress/compose": "^7.36.1-next.8b30e05b0.0",
-		"@wordpress/date": "^5.36.1-next.8b30e05b0.0",
-		"@wordpress/deprecated": "^4.36.1-next.8b30e05b0.0",
-		"@wordpress/dom": "^4.36.1-next.8b30e05b0.0",
-		"@wordpress/element": "^6.36.1-next.8b30e05b0.0",
-		"@wordpress/escape-html": "^3.36.1-next.8b30e05b0.0",
-		"@wordpress/hooks": "^4.36.1-next.8b30e05b0.0",
-		"@wordpress/html-entities": "^4.36.1-next.8b30e05b0.0",
-		"@wordpress/i18n": "^6.9.1-next.8b30e05b0.0",
-		"@wordpress/icons": "^11.3.1-next.8b30e05b0.0",
-		"@wordpress/is-shallow-equal": "^5.36.1-next.8b30e05b0.0",
-		"@wordpress/keycodes": "^4.36.1-next.8b30e05b0.0",
-		"@wordpress/primitives": "^4.36.1-next.8b30e05b0.0",
-		"@wordpress/private-apis": "^1.36.1-next.8b30e05b0.0",
-		"@wordpress/rich-text": "^7.36.1-next.8b30e05b0.0",
-		"@wordpress/warning": "^3.36.1-next.8b30e05b0.0",
+		"@wordpress/a11y": "^4.36.1-next.738bb1424.0",
+		"@wordpress/base-styles": "^6.12.1-next.738bb1424.0",
+		"@wordpress/compose": "^7.36.1-next.738bb1424.0",
+		"@wordpress/date": "^5.36.1-next.738bb1424.0",
+		"@wordpress/deprecated": "^4.36.1-next.738bb1424.0",
+		"@wordpress/dom": "^4.36.1-next.738bb1424.0",
+		"@wordpress/element": "^6.36.1-next.738bb1424.0",
+		"@wordpress/escape-html": "^3.36.1-next.738bb1424.0",
+		"@wordpress/hooks": "^4.36.1-next.738bb1424.0",
+		"@wordpress/html-entities": "^4.36.1-next.738bb1424.0",
+		"@wordpress/i18n": "^6.9.1-next.738bb1424.0",
+		"@wordpress/icons": "^11.3.1-next.738bb1424.0",
+		"@wordpress/is-shallow-equal": "^5.36.1-next.738bb1424.0",
+		"@wordpress/keycodes": "^4.36.1-next.738bb1424.0",
+		"@wordpress/primitives": "^4.36.1-next.738bb1424.0",
+		"@wordpress/private-apis": "^1.36.1-next.738bb1424.0",
+		"@wordpress/rich-text": "^7.36.1-next.738bb1424.0",
+		"@wordpress/warning": "^3.36.1-next.738bb1424.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -101,5 +110,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2466f6bc223f8be98c55e1ac7270e8c3e413eaaf"
+	"gitHead": "ab1b004c0d61c295aa34bc86ea07f979343983ce"
 }

package/src/alignment-matrix-control/cell.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * Internal dependencies
  */
@@ -9,9 +14,9 @@ import { VisuallyHidden } from '../visually-hidden';
  * Internal dependencies
  */
 import { ALIGNMENT_LABEL } from './utils';
-import { Cell as CellView, Point } from './styles';
 import type { AlignmentMatrixControlCellProps } from './types';
 import type { WordPressComponentProps } from '../context';
+import styles from './style.module.scss';
 
 export default function Cell( {
 	id,
@@ -22,13 +27,19 @@ export default function Cell( {
 		<Tooltip text={ ALIGNMENT_LABEL[ value ] }>
 			<Composite.Item
 				id={ id }
-				render={ <CellView { ...props } role="gridcell" /> }
+				render={
+					<span
+						{ ...props }
+						className={ clsx( styles.cell, props.className ) }
+						role="gridcell"
+					/>
+				}
 			>
 				{ /* VoiceOver needs a text content to be rendered within grid cell,
 			otherwise it'll announce the content as "blank". So we use a visually
 			hidden element instead of aria-label. */ }
 				<VisuallyHidden>{ value }</VisuallyHidden>
-				<Point role="presentation" />
+				<span className={ styles.point } role="presentation" />
 			</Composite.Item>
 		</Tooltip>
 	);

package/src/alignment-matrix-control/index.tsx

@@ -15,11 +15,11 @@ import { useCallback } from '@wordpress/element';
  */
 import Cell from './cell';
 import { Composite } from '../composite';
-import { GridContainer, GridRow } from './styles';
 import AlignmentMatrixControlIcon from './icon';
 import { GRID, getItemId, getItemValue } from './utils';
 import type { WordPressComponentProps } from '../context';
 import type { AlignmentMatrixControlProps } from './types';
+import styles from './style.module.scss';
 
 function UnforwardedAlignmentMatrixControl( {
 	className,
@@ -49,7 +49,11 @@ function UnforwardedAlignmentMatrixControl( {
 		[ baseId, onChange ]
 	);
 
-	const classes = clsx( 'component-alignment-matrix-control', className );
+	const classes = clsx(
+		'component-alignment-matrix-control',
+		styles[ 'grid-container' ],
+		className
+	);
 
 	return (
 		<Composite
@@ -58,18 +62,23 @@ function UnforwardedAlignmentMatrixControl( {
 			setActiveId={ setActiveId }
 			rtl={ isRTL() }
 			render={
-				<GridContainer
+				<div
 					{ ...props }
-					aria-label={ label }
 					className={ classes }
+					aria-label={ label }
 					id={ baseId }
 					role="grid"
-					size={ width }
+					style={ { width: `${ width }px` } }
 				/>
 			}
 		>
 			{ GRID.map( ( cells, index ) => (
-				<Composite.Row render={ <GridRow role="row" /> } key={ index }>
+				<Composite.Row
+					render={
+						<div className={ styles[ 'grid-row' ] } role="row" />
+					}
+					key={ index }
+				>
 					{ cells.map( ( cell ) => (
 						<Cell
 							id={ getItemId( baseId, cell ) }

package/src/alignment-matrix-control/style.module.scss

@@ -0,0 +1,84 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "../utils/theme-variables" as *;
+
+.grid-container {
+	direction: ltr;
+
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-template-rows: repeat(3, 1fr);
+
+	box-sizing: border-box;
+	aspect-ratio: 1;
+
+	border: 1px solid transparent;
+	border-radius: $radius-medium;
+	outline: none;
+
+	cursor: pointer;
+}
+
+.grid-row {
+	grid-column: 1 / -1;
+
+	box-sizing: border-box;
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+}
+
+.cell {
+	position: relative;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+
+	appearance: none;
+	border: none;
+	outline: none;
+}
+
+.point {
+	display: block;
+	contain: strict;
+
+	box-sizing: border-box;
+	width: 6px;
+	aspect-ratio: 1;
+
+	margin: auto;
+
+	color: $components-color-gray-400;
+
+	/* Use border instead of background color so that the point shows
+	in Windows High Contrast Mode */
+	border: 3px solid currentColor;
+
+	/* Highlight active item */
+	.cell[data-active-item] & {
+		color: $components-color-foreground;
+		transform: scale(calc(5 / 3));
+	}
+
+	/* Hover styles for non-active items */
+	.cell:not([data-active-item]):hover & {
+		color: $components-color-accent;
+	}
+
+	/* Show an outline only when interacting with keyboard */
+	.cell[data-focus-visible] & {
+		outline: 1px solid $components-color-accent;
+		outline-offset: 1px;
+	}
+
+	@media not (prefers-reduced-motion) {
+		transition-property: color, transform;
+		transition-duration: 120ms;
+		transition-timing-function: linear;
+	}
+}
+

package/src/angle-picker-control/angle-circle.tsx

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -7,11 +12,7 @@ import { __experimentalUseDragging as useDragging } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import {
-	CircleRoot,
-	CircleIndicatorWrapper,
-	CircleIndicator,
-} from './styles/angle-picker-control-styles';
+import styles from './style.module.scss';
 
 import type { WordPressComponentProps } from '../context';
 import type { AngleCircleProps } from './types';
@@ -25,6 +26,7 @@ type UseDraggingCallbackEvent =
 function AngleCircle( {
 	value,
 	onChange,
+	className,
 	...props
 }: WordPressComponentProps< AngleCircleProps, 'div' > ) {
 	const angleCircleRef = useRef< HTMLDivElement | null >( null );
@@ -89,22 +91,35 @@ function AngleCircle( {
 	}, [ isDragging ] );
 
 	return (
-		<CircleRoot
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
 			ref={ angleCircleRef }
 			onMouseDown={ startDrag }
-			className="components-angle-picker-control__angle-circle"
+			className={ clsx(
+				'components-angle-picker-control__angle-circle',
+				styles[ 'circle-root' ],
+				className
+			) }
 			{ ...props }
 		>
-			<CircleIndicatorWrapper
+			<div
 				style={
 					value ? { transform: `rotate(${ value }deg)` } : undefined
 				}
-				className="components-angle-picker-control__angle-circle-indicator-wrapper"
+				className={ clsx(
+					'components-angle-picker-control__angle-circle-indicator-wrapper',
+					styles[ 'circle-indicator-wrapper' ]
+				) }
 				tabIndex={ -1 }
 			>
-				<CircleIndicator className="components-angle-picker-control__angle-circle-indicator" />
-			</CircleIndicatorWrapper>
-		</CircleRoot>
+				<div
+					className={ clsx(
+						'components-angle-picker-control__angle-circle-indicator',
+						styles[ 'circle-indicator' ]
+					) }
+				/>
+			</div>
+		</div>
 	);
 }
 

package/src/angle-picker-control/index.tsx

@@ -16,8 +16,9 @@ import { isRTL, __ } from '@wordpress/i18n';
 import { Flex, FlexBlock } from '../flex';
 import { Spacer } from '../spacer';
 import NumberControl from '../number-control';
+import InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';
+import InputControlSuffixWrapper from '../input-control/input-suffix-wrapper';
 import AngleCircle from './angle-circle';
-import { UnitText } from './styles/angle-picker-control-styles';
 
 import type { WordPressComponentProps } from '../context';
 import type { AnglePickerControlProps } from './types';
@@ -48,10 +49,11 @@ function UnforwardedAnglePickerControl(
 
 	const classes = clsx( 'components-angle-picker-control', className );
 
-	const unitText = <UnitText>°</UnitText>;
-	const [ prefixedUnitText, suffixedUnitText ] = isRTL()
-		? [ unitText, null ]
-		: [ null, unitText ];
+	// Override the default behavior and position the degree symbol to the
+	// right of the number, regardless of the language direction.
+	const prefixOrSuffixProp = isRTL()
+		? { prefix: <InputControlPrefixWrapper>°</InputControlPrefixWrapper> }
+		: { suffix: <InputControlSuffixWrapper>°</InputControlSuffixWrapper> };
 
 	return (
 		<Flex { ...restProps } ref={ ref } className={ classes } gap={ 2 }>
@@ -66,8 +68,7 @@ function UnforwardedAnglePickerControl(
 					step="1"
 					value={ value }
 					spinControls="none"
-					prefix={ prefixedUnitText }
-					suffix={ suffixedUnitText }
+					{ ...prefixOrSuffixProp }
 				/>
 			</FlexBlock>
 			<Spacer marginBottom="1" marginTop="auto">

package/src/angle-picker-control/style.module.scss

@@ -0,0 +1,40 @@
+@use "@wordpress/base-styles/variables" as *;
+@use "../utils/theme-variables" as *;
+
+.circle-root {
+	border-radius: $radius-round;
+	border: $border-width solid $components-color-border;
+	box-sizing: border-box;
+	cursor: grab;
+	height: 32px;
+	overflow: hidden;
+	width: 32px;
+
+	&:active {
+		cursor: grabbing;
+	}
+}
+
+.circle-indicator-wrapper {
+	box-sizing: border-box;
+	position: relative;
+	width: 100%;
+	height: 100%;
+
+	&:focus-visible {
+		outline: none;
+	}
+}
+
+.circle-indicator {
+	background: $components-color-accent;
+	border-radius: $radius-round;
+	box-sizing: border-box;
+	display: block;
+	left: 50%;
+	top: 4px;
+	transform: translateX(-50%);
+	position: absolute;
+	width: 6px;
+	height: 6px;
+}

package/src/autocomplete/autocompleter-ui.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import clsx from 'clsx';
+import { createPortal } from 'react-dom';
 
 /**
  * WordPress dependencies
@@ -24,7 +25,6 @@ import getDefaultUseItems from './get-default-use-items';
 import Button from '../button';
 import Popover from '../popover';
 import { VisuallyHidden } from '../visually-hidden';
-import { createPortal } from 'react-dom';
 import type { AutocompleterUIProps, KeyedOption, WPCompleter } from './types';
 
 type ListBoxProps = {
@@ -177,6 +177,7 @@ export function getAutoCompleterUI( autocompleter: WPCompleter ) {
 		return (
 			<>
 				<Popover
+					offset={ 8 }
 					focusOnMount={ false }
 					onClose={ onReset }
 					placement="top-start"

package/src/base-control/README.md

@@ -17,7 +17,7 @@ const MyCustomTextareaControl = ({ children, ...baseProps }) => (
 	const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
 
 	return (
-		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
+		<BaseControl { ...baseControlProps }>
 			<textarea { ...controlProps }>
 			  { children }
 			</textarea>
@@ -28,14 +28,6 @@ const MyCustomTextareaControl = ({ children, ...baseProps }) => (
 
 ## Props
 
-### `__nextHasNoMarginBottom`
-
- - Type: `boolean`
- - Required: No
- - Default: `false`
-
-Start opting into the new margin-free styles that will become the default in a future version.
-
 ### `as`
 
  - Type: `"symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 516 more ... | ("view" & FunctionComponent<...>)`
@@ -104,10 +96,7 @@ otherwise use if the `label` prop was passed.
 import { BaseControl } from '@wordpress/components';
 
 const MyBaseControl = () => (
-	<BaseControl
-		__nextHasNoMarginBottom
-		help="This button is already accessibly labeled."
-	>
+	<BaseControl help="This button is already accessibly labeled.">
 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
 		<Button>Select an author</Button>
 	</BaseControl>

package/src/base-control/index.tsx

@@ -7,7 +7,6 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
-import deprecated from '@wordpress/deprecated';
 import { forwardRef } from '@wordpress/element';
 
 /**
@@ -31,8 +30,6 @@ const UnconnectedBaseControl = (
 	props: WordPressComponentProps< BaseControlProps, null >
 ) => {
 	const {
-		__nextHasNoMarginBottom = false,
-		__associatedWPComponentName = 'BaseControl',
 		id,
 		label,
 		hideLabelFromVision = false,
@@ -41,24 +38,9 @@ const UnconnectedBaseControl = (
 		children,
 	} = useContextSystem( props, 'BaseControl' );
 
-	if ( ! __nextHasNoMarginBottom ) {
-		deprecated(
-			`Bottom margin styles for wp.components.${ __associatedWPComponentName }`,
-			{
-				since: '6.7',
-				version: '7.0',
-				hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',
-			}
-		);
-	}
-
 	return (
 		<Wrapper className={ className }>
-			<StyledField
-				className="components-base-control__field"
-				// TODO: Official deprecation for this should start after all internal usages have been migrated
-				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-			>
+			<StyledField className="components-base-control__field">
 				{ label &&
 					id &&
 					( hideLabelFromVision ? (
@@ -86,7 +68,6 @@ const UnconnectedBaseControl = (
 				<StyledHelp
 					id={ id ? id + '__help' : undefined }
 					className="components-base-control__help"
-					__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 				>
 					{ help }
 				</StyledHelp>
@@ -128,7 +109,7 @@ export const VisualLabel = forwardRef( UnforwardedVisualLabel );
  * 	const { baseControlProps, controlProps } = useBaseControlProps( baseProps );
  *
  * 	return (
- * 		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
+ * 		<BaseControl { ...baseControlProps }>
  * 			<textarea { ...controlProps }>
  * 			  { children }
  * 			</textarea>
@@ -152,10 +133,7 @@ export const BaseControl = Object.assign(
 		 * import { BaseControl } from '@wordpress/components';
 		 *
 		 * const MyBaseControl = () => (
-		 * 	<BaseControl
-		 * 		__nextHasNoMarginBottom
-		 * 		help="This button is already accessibly labeled."
-		 * 	>
+		 * 	<BaseControl help="This button is already accessibly labeled.">
 		 * 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
 		 * 		<Button>Select an author</Button>
 		 * 	</BaseControl>

package/src/base-control/stories/index.story.tsx

@@ -42,7 +42,6 @@ const BaseControlWithTextarea: StoryFn< typeof BaseControl > = ( props ) => {
 export const Default: StoryFn< typeof BaseControl > =
 	BaseControlWithTextarea.bind( {} );
 Default.args = {
-	__nextHasNoMarginBottom: true,
 	label: 'Label text',
 };
 

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

@@ -17,18 +17,7 @@ export const Wrapper = styled.div`
 	${ boxSizingReset }
 `;
 
-const deprecatedMarginField = ( { __nextHasNoMarginBottom = false } ) => {
-	return (
-		! __nextHasNoMarginBottom &&
-		css`
-			margin-bottom: ${ space( 2 ) };
-		`
-	);
-};
-
 export const StyledField = styled.div`
-	${ deprecatedMarginField }
-
 	.components-panel__row & {
 		margin-bottom: inherit;
 	}
@@ -50,23 +39,12 @@ export const StyledLabel = styled.label`
 	${ labelStyles }
 `;
 
-const deprecatedMarginHelp = ( { __nextHasNoMarginBottom = false } ) => {
-	return (
-		! __nextHasNoMarginBottom &&
-		css`
-			margin-bottom: revert;
-		`
-	);
-};
-
 export const StyledHelp = styled.p`
 	margin-top: ${ space( 2 ) };
 	margin-bottom: 0;
 	font-size: ${ font( 'helpText.fontSize' ) };
 	font-style: normal;
 	color: ${ COLORS.gray[ 700 ] };
-
-	${ deprecatedMarginHelp }
 `;
 
 export const StyledVisualLabel = styled.span`

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

@@ -14,7 +14,7 @@ const MyBaseControl = ( props: Omit< BaseControlProps, 'children' > ) => {
 	const { baseControlProps, controlProps } = useBaseControlProps( props );
 
 	return (
-		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
+		<BaseControl { ...baseControlProps }>
 			<textarea { ...controlProps } />
 		</BaseControl>
 	);

package/src/base-control/types.ts

@@ -7,16 +7,10 @@ export type BaseControlProps = {
 	/**
 	 * Start opting into the new margin-free styles that will become the default in a future version.
 	 *
-	 * @default false
-	 */
-	__nextHasNoMarginBottom?: boolean;
-	/**
-	 * Temporary private prop for showing better deprecation messages,
-	 * e.g. `Some feature from wp.components.${ __associatedWPControl } is deprecated`.
-	 *
+	 * @deprecated Default behavior since WordPress 7.0. Prop can be safely removed.
 	 * @ignore
 	 */
-	__associatedWPComponentName?: string;
+	__nextHasNoMarginBottom?: boolean;
 	/**
 	 * The HTML `id` of the control element (passed in as a child to `BaseControl`) to which labels and help text are being generated.
 	 * This is necessary to accessibly associate the label with that element.

package/src/border-control/border-control/component.tsx

@@ -112,7 +112,6 @@ const UnconnectedBorderControl = (
 				/>
 				{ withSlider && (
 					<RangeControl
-						__nextHasNoMarginBottom
 						label={ __( 'Border width' ) }
 						hideLabelFromVision
 						className={ sliderClassName }

package/src/border-control/border-control-style-picker/component.tsx

@@ -26,7 +26,6 @@ function UnconnectedBorderControlStylePicker(
 ) {
 	return (
 		<ToggleGroupControl
-			__nextHasNoMarginBottom
 			__next40pxDefaultSize
 			ref={ forwardedRef }
 			isDeselectable

package/src/box-control/input-control.tsx

@@ -223,7 +223,6 @@ export default function BoxInputControl( {
 					</Tooltip>
 
 					<FlexedRangeControl
-						__nextHasNoMarginBottom
 						__next40pxDefaultSize={ __next40pxDefaultSize }
 						__shouldNotWarnDeprecated36pxSize
 						aria-controls={ inputId }
@@ -283,7 +282,6 @@ export default function BoxInputControl( {
 					marks={ marks }
 					label={ LABELS[ side ] }
 					hideLabelFromVision
-					__nextHasNoMarginBottom
 				/>
 			) }